Merge pull request #17339 from marcfallows/marc-popper-arrow

Update popper.js types to 1.10

types/popper.js/index.d.ts

@@ -1,71 +1,103 @@
-// Type definitions for popper.js 1.8
+// Type definitions for popper.js 1.10
 // Project: https://github.com/FezVrasta/popper.js/
-// Definitions by: rhysd <https://rhysd.github.io>, joscha <https://github.com/joscha>, seckardt <https://github.com/seckardt>
+// Definitions by: rhysd <https://rhysd.github.io>, joscha <https://github.com/joscha>, seckardt <https://github.com/seckardt>, marcfallows <https://github.com/marcfallows>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 
 declare namespace Popper {
+  type Position = 'top' | 'right' | 'bottom' | 'left';
+  type Placement = 'auto-start'
+      | 'auto'
+      | 'auto-end'
+      | 'top-start'
+      | 'top'
+      | 'top-end'
+      | 'right-start'
+      | 'right'
+      | 'right-end'
+      | 'bottom-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'left-end'
+      | 'left'
+      | 'left-start';
   interface PopperOptions {
-    placement?: string;
-    boundariesPadding?: number;
-    modifiers?: {
-      order?: number,
-      enabled?: boolean,
-      fn?: Function,
-      'function'?: Function,
-      onLoad?: Function,
-      applyStyle?: {
-        gpuAcceleration?: boolean
-      },
-      preventOverflow?: {
-        boundariesElement?: string | Element,
-        priority?: Array<'left' | 'right' | 'top' | 'bottom'>
-      },
-      offset?: {
-        offset?: number | string
-      },
-      flip?: {
-        behavior?: string | string[],
-        boundariesElement?: string | Element
-      },
-    };
-    modifiersIgnored?: string[];
+    placement?: Placement;
+    eventsEnabled?: boolean;
+    modifiers?: Modifiers;
     removeOnDestroy?: boolean;
-    arrowElement?: string | Element;
-    onCreate?(data: Popper.Data): void;
-    onUpdate?(data: Popper.Data): void;
+    onCreate?(data: Data): void;
+    onUpdate?(data: Data): void;
+  }
+  type ModifierFn = (data: Data, options: Object) => Data;
+  interface BaseModifier {
+    order?: number;
+    enabled?: boolean;
+    fn?: ModifierFn;
   }
   class Modifiers {
-    applyStyle(data: Object): Object;
-    shift(data: Object): Object;
-    preventOverflow(data: Object): Object;
-    keepTogether(data: Object): Object;
-    flip(data: Object): Object;
-    offset(data: Object): Object;
-    arrow(data: Object): Object;
+    shift?: BaseModifier;
+    offset?: BaseModifier & {
+      offset?: number | string,
+    };
+    preventOverflow?: BaseModifier & {
+      priority?: Position[],
+      padding?: number,
+      boundariesElement?: string | Element,
+    };
+    keepTogether?: BaseModifier;
+    arrow?: BaseModifier & {
+      element?: string | Element,
+    };
+    flip?: BaseModifier & {
+      behavior?: 'flip' | 'clockwise' | 'counterclockwise' | Position[],
+      padding?: number,
+      boundariesElement?: string | Element,
+    };
+    inner?: BaseModifier;
+    hide?: BaseModifier;
+    applyStyle?: BaseModifier & {
+      onLoad?: Function,
+      gpuAcceleration?: boolean,
+    };
+  }
+  interface Offset {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
   }
   interface Data {
-    placement: string;
+    instance: Popper;
+    placement: Placement;
+    originalPlacement: Placement;
+    flipped: boolean;
+    hide: boolean;
+    arrowElement: Element;
+    styles: Object;
+    boundaries: Object;
     offsets: {
-      popper: {
-        position: string;
-        top: number;
-        left: number;
-      };
+      popper: Offset,
+      reference: Offset,
+      arrow: {
+        top: number,
+        left: number,
+      },
     };
   }
 }
 
 declare class Popper {
-  modifiers: Popper.Modifiers;
-  placement: string;
+  static modifiers: Object[];
+  static placements: Popper.Placement[];
+  static Defaults: Popper.PopperOptions;
 
   constructor(reference: Element, popper: Element | Object, options?: Popper.PopperOptions);
 
   destroy(): void;
   update(): void;
-  parse(config: Object): Element;
-  runModifiers(data: Object, modifiers: string[], ends: Function): void;
-  isModifierRequired(): boolean;
+  scheduleUpdate(): void;
+  enableEventListeners(): void;
+  disableEventListeners(): void;
 }
 
 declare module 'popper.js' {

types/popper.js/popper.js-tests.ts

@@ -1,27 +1,89 @@
 import Popper from 'popper.js';
 
 var reference = document.querySelector('.my-button');
+var popper = document.querySelector('.my-popper');
+var boundary = document.querySelector('.my-boundary');
+var arrow = document.querySelector('.my-arrow');
+
 var thePopper = new Popper(
-    reference, {
-        content: 'My awesome popper!'
-    }
+    reference,
+    popper,
 );
 thePopper.update();
+thePopper.scheduleUpdate();
 thePopper.destroy();
+thePopper.enableEventListeners();
+thePopper.disableEventListeners();
 
-var options = {
-        placement: 'bottom',
-        offset: 0,
-        arrowElement: document.querySelector('.arrow'),
-        modifiersIgnored: ['applyStyle'],
-    } as Popper.PopperOptions;
+Popper.modifiers.forEach(console.log.bind(console));
+Popper.placements.forEach(console.log.bind(console));
 
 var thePopperWithOptions = new Popper(
-    reference, {
-        content: 'My awesome popper!',
-    }, options);
+    reference,
+    popper,
+    {
+        placement: 'bottom',
+        eventsEnabled: true,
+        removeOnDestroy: true,
+        modifiers: {
+            shift: {
+                enabled: true,
+                fn: (data) => data,
+                order: 100,
+            },
+            offset: {
+                enabled: true,
+                fn: (data) => data,
+                order: 100,
+                offset: 0,
+            },
+            preventOverflow: {
+                enabled: true,
+                fn: (data) => data,
+                order: 100,
+                priority: ['top', 'bottom'],
+                padding: 1,
+                boundariesElement: boundary,
+            },
+            keepTogether: {
+                enabled: false,
+                fn: (data) => data,
+                order: 200,
+            },
+            arrow: {
+                enabled: true,
+                fn: (data) => data,
+                order: 400,
+                element: arrow,
+            },
+            flip: {
+                enabled: true,
+                fn: (data) => data,
+                order: 400,
+                behavior: ['top', 'right'],
+                padding: 5,
+                boundariesElement: boundary,
+            },
+            inner: {
+                enabled: true,
+                fn: (data) => data,
+                order: 400,
+            },
+            hide: {
+                enabled: true,
+                fn: (data) => data,
+                order: 400,
+            },
+            applyStyle: {
+                enabled: true,
+                fn: (data) => data,
+                order: 400,
+                onLoad: () => 0,
+            },
+        }
+    }
+);
 
-var popper = document.querySelector('.my-popper');
 var anotherPopper = new Popper(
     reference,
     popper
@@ -30,9 +92,15 @@ var anotherPopper = new Popper(
 var reference = document.querySelector('.my-button');
 var popper = document.querySelector('.my-popper');
 var anotherPopper = new Popper(reference, popper, {
+    modifiers: {
+        flip: {
+            behavior: 'clockwise'
+        }
+    },
     onCreate: (data => console.log(data)),
-    onUpdate: ((data) => {
+    onUpdate: (data => {
+        data.instance.scheduleUpdate();
         var p = data.offsets.popper;
-        console.log(`top: ${p.top}, left: ${p.left}`);
+        console.log(`top: ${p.top}, left: ${p.left}, width: ${p.width}, height: ${p.height}`);
     })
 });