@elliemae/ds-popper 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/getArrowStylesBySize.js

@@ -0,0 +1,37 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const getArrowStylesBySize = function (position) {
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
+  const basePosition = position && position.split('-')[0];
+  return _objectSpread({
+    borderWidth: size
+  }, {
+    top: {
+      top: '100% !important',
+      transform: "rotateZ(".concat(180, "deg)")
+    },
+    right: {
+      right: '100%',
+      transform: "rotateZ(".concat(-90, "deg)")
+    },
+    bottom: {
+      bottom: '100%',
+      transform: "rotateZ(".concat(0, "deg)")
+    },
+    left: {
+      left: '100%',
+      transform: "rotateZ(".concat(90, "deg)")
+    }
+  }[basePosition]);
+};
+
+export { getArrowStylesBySize as default, getArrowStylesBySize };

package/esm/index.js

@@ -0,0 +1,4 @@
+export { DSPopper, DSPopperWithSchema, DSPopper as default } from './DSPopper.js';
+export { getArrowStylesBySize } from './getArrowStylesBySize.js';
+export { Interaction as PopperInteractions, interactions } from './interaction.js';
+export { Position as PopperPositions, positions } from './positions.js';

package/esm/interaction.js

@@ -0,0 +1,7 @@
+const Interaction = {
+  CLICK: 'click',
+  HOVER: 'hover'
+};
+const interactions = [Interaction.CLICK, Interaction.HOVER];
+
+export { Interaction, interactions };

package/esm/positions.js

@@ -0,0 +1,20 @@
+const Position = {
+  AUTO: 'auto',
+  AUTO_START: 'auto-start',
+  AUTO_END: 'auto-end',
+  BOTTOM: 'bottom',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  LEFT: 'left',
+  LEFT_END: 'left-end',
+  LEFT_START: 'left-start',
+  RIGHT: 'right',
+  RIGHT_END: 'right-end',
+  RIGHT_START: 'right-start',
+  TOP: 'top',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end'
+};
+const positions = [Position.AUTO_START, Position.AUTO_END, Position.AUTO, Position.TOP_START, Position.TOP, Position.TOP_END, Position.RIGHT_START, Position.RIGHT, Position.RIGHT_END, Position.BOTTOM_START, Position.BOTTOM, Position.BOTTOM_END, Position.LEFT_START, Position.LEFT, Position.LEFT_END];
+
+export { Position, positions };

package/esm/props.js

@@ -0,0 +1,83 @@
+import { PropTypes } from 'react-desc';
+import { Position } from './positions.js';
+import { Interaction } from './interaction.js';
+
+const popperProps = {
+  /** Hide menu component if trigger component is not visible/scrolled away */
+  hideIfNotVisible: PropTypes.bool.description('Hide menu component if trigger component is not visible/scrolled away'),
+
+  /** props to inject to popper wrapper */
+  containerProps: PropTypes.object.description('props to inject to popper wrapper'),
+
+  /** Space between the arrow and the popup */
+  arrowGap: PropTypes.number.description('Space between the arrow and the popup'),
+
+  /** callback for when menu changes from close to open */
+  onOpen: PropTypes.func.description('callback for when menu changes from close to open'),
+
+  /** callback for when menu changes from open to close */
+  onClose: PropTypes.func.description('callback for when menu changes from open to close'),
+
+  /** Time in ms to delay close of menu */
+  delayClose: PropTypes.number.description('Time in ms to delay close of menu'),
+
+  /** Time in ms to delay open of menu */
+  delayOpen: PropTypes.number.description('Time in ms to delay open of menu'),
+
+  /** callback for when menu changes placement */
+  onPlacementChange: PropTypes.func.description('callback for when menu changes placement'),
+
+  /** Arrow size */
+  arrowSize: PropTypes.number.description('Arrow size'),
+
+  /** Bem blockname for the popper */
+  blockName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).description('Bem blockname for the popper'),
+  triggerComponent: PropTypes.element.description("The component that will open/close the tooltip. \n    Cannot be used with disabled elements. \n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled").isRequired
+};
+const defaultProps = {
+  containerProps: {},
+  arrowGap: 8,
+  arrowSize: 6,
+  blockName: '',
+  contentOffset: null,
+  contentStyle: null,
+  contentComponent: () => null,
+  delayClose: 300,
+  delayOpen: 200,
+  interactionType: Interaction.CLICK,
+  onOpen: () => null,
+  onClose: () => null,
+  onPlacementChange: () => null,
+  placement: Position.BOTTOM,
+  preventOverflow: 'window',
+  showArrow: true,
+  closeAnimationConfig: {
+    to: {
+      transform: 'scale(0.8)',
+      opacity: '0'
+    },
+    config: {
+      delay: 80,
+      duration: 80
+    }
+  },
+  openAnimationConfig: {
+    to: {
+      transform: 'scale(1)',
+      opacity: '1'
+    },
+    config: {
+      delay: 80,
+      duration: 80
+    }
+  },
+  usePortal: true,
+  triggerComponent: () => null,
+  getTargetFromChildren: () => null,
+  getContentFromChildren: () => null,
+  modifiers: {},
+  triggerRef: () => null,
+  hideIfNotVisible: false
+};
+
+export { defaultProps, popperProps };

package/package.json

@@ -1,46 +1,43 @@
 {
   "name": "@elliemae/ds-popper",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./props": {
-      "import": "./dist/esm/props.js",
-      "require": "./dist/cjs/props.js"
+      "import": "./esm/props.js",
+      "require": "./cjs/props.js"
     },
     "./positions": {
-      "import": "./dist/esm/positions.js",
-      "require": "./dist/cjs/positions.js"
+      "import": "./esm/positions.js",
+      "require": "./cjs/positions.js"
     },
     "./PopperImpl": {
-      "import": "./dist/esm/PopperImpl.js",
-      "require": "./dist/cjs/PopperImpl.js"
+      "import": "./esm/PopperImpl.js",
+      "require": "./cjs/PopperImpl.js"
     },
     "./PopperContent": {
-      "import": "./dist/esm/PopperContent.js",
-      "require": "./dist/cjs/PopperContent.js"
+      "import": "./esm/PopperContent.js",
+      "require": "./cjs/PopperContent.js"
     },
     "./interaction": {
-      "import": "./dist/esm/interaction.js",
-      "require": "./dist/cjs/interaction.js"
+      "import": "./esm/interaction.js",
+      "require": "./cjs/interaction.js"
     },
     "./getArrowStylesBySize": {
-      "import": "./dist/esm/getArrowStylesBySize.js",
-      "require": "./dist/cjs/getArrowStylesBySize.js"
+      "import": "./esm/getArrowStylesBySize.js",
+      "require": "./cjs/getArrowStylesBySize.js"
     },
     "./DSPopper": {
-      "import": "./dist/esm/DSPopper.js",
-      "require": "./dist/cjs/DSPopper.js"
+      "import": "./esm/DSPopper.js",
+      "require": "./cjs/DSPopper.js"
     }
   },
   "sideEffects": [
@@ -52,13 +49,19 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-overlay": "2.3.0-alpha.8",
-    "@elliemae/ds-utilities": "2.3.0-alpha.8",
+    "@elliemae/ds-overlay": "2.3.0-next.2",
+    "@elliemae/ds-utilities": "2.3.0-next.2",
     "memoize-one": "~5.1.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
@@ -71,12 +74,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSPopper.d.ts

@@ -0,0 +1,156 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+import { Position } from './positions';
+import { Interaction } from './interaction';
+declare const DSPopper: {
+    ({ containerProps, arrowGap, arrowSize, blockName, contentOffset, contentStyle, contentComponent, delayClose, delayOpen, interactionType, isOpen, onOpen, onClose, onPlacementChange, placement, preventOverflow, showArrow, closeAnimationConfig, openAnimationConfig, usePortal, triggerComponent, wrapExtraComponent, getTargetFromChildren, getContentFromChildren, modifiers, triggerRef, children: customPopper, renderReference, referenceNode, zIndex, hideIfNotVisible, }: {
+        containerProps: any;
+        arrowGap: any;
+        arrowSize: any;
+        blockName: any;
+        contentOffset: any;
+        contentStyle: any;
+        contentComponent: any;
+        delayClose: any;
+        delayOpen: any;
+        interactionType: any;
+        isOpen: any;
+        onOpen: any;
+        onClose: any;
+        onPlacementChange: any;
+        placement: any;
+        preventOverflow: any;
+        showArrow: any;
+        closeAnimationConfig: any;
+        openAnimationConfig: any;
+        usePortal: any;
+        triggerComponent: any;
+        wrapExtraComponent: any;
+        getTargetFromChildren: any;
+        getContentFromChildren: any;
+        modifiers: any;
+        triggerRef: any;
+        children: any;
+        renderReference: any;
+        referenceNode: any;
+        zIndex: any;
+        hideIfNotVisible: any;
+    }): JSX.Element;
+    propTypes: {
+        hideIfNotVisible: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        containerProps: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        arrowGap: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        onOpen: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        onClose: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        delayClose: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        delayOpen: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        onPlacementChange: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        arrowSize: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        blockName: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        triggerComponent: import("react-desc").PropTypesDescValue;
+    };
+    defaultProps: {
+        containerProps: {};
+        arrowGap: number;
+        arrowSize: number;
+        blockName: string;
+        contentOffset: null;
+        contentStyle: null;
+        contentComponent: () => null;
+        delayClose: number;
+        delayOpen: number;
+        interactionType: string;
+        onOpen: () => null;
+        onClose: () => null;
+        onPlacementChange: () => null;
+        placement: string;
+        preventOverflow: string;
+        showArrow: boolean;
+        closeAnimationConfig: {
+            to: {
+                transform: string;
+                opacity: string;
+            };
+            config: {
+                delay: number;
+                duration: number;
+            };
+        };
+        openAnimationConfig: {
+            to: {
+                transform: string;
+                opacity: string;
+            };
+            config: {
+                delay: number;
+                duration: number;
+            };
+        };
+        usePortal: boolean;
+        triggerComponent: () => null;
+        getTargetFromChildren: () => null;
+        getContentFromChildren: () => null;
+        modifiers: {};
+        triggerRef: () => null;
+        hideIfNotVisible: boolean;
+    };
+};
+declare const DSPopperWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { Interaction as PopperInteractions, Position as PopperPositions, DSPopperWithSchema, DSPopper };
+export { interactions } from './interaction';
+export { positions } from './positions';
+export default DSPopper;

package/types/PopperContent.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+export default class PopperContent extends PureComponent {
+    static defaultProps: {
+        onContentDestroyed: () => null;
+    };
+    constructor(props: any);
+    handleRestAnimation(): void;
+    renderArrow({ ref, style }: {
+        ref: any;
+        style: any;
+    }, placement: any): JSX.Element | null;
+    renderContent({ ref, style, placement, arrowProps, scheduleUpdate, outOfBoundaries, }: {
+        ref: any;
+        style: any;
+        placement: any;
+        arrowProps: any;
+        scheduleUpdate: any;
+        outOfBoundaries: any;
+    }): JSX.Element;
+    render(): JSX.Element;
+}

package/types/PopperImpl.d.ts

@@ -0,0 +1,52 @@
+import { Component } from 'react';
+import { Reference } from 'react-popper';
+import PopperContent from './PopperContent';
+export default class PopperImpl extends Component<any, any> {
+    safeIsMounted: boolean;
+    handlePopperPlacementChange: (this: any, placement: any) => void;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    static getDerivedStateFromProps(nextProps: any, prevState: any): {
+        isOpen: any;
+        prevPropIsOpen: any;
+    } | null;
+    getInteractionObject(interaction: any, referenceProps?: {}): {
+        handlers?: undefined;
+        canClose?: undefined;
+    } | {
+        handlers: {
+            onClick: (e: any) => void;
+            onMouseEnter?: undefined;
+            onPointerEnter?: undefined;
+            onMouseLeave?: undefined;
+            onPointerLeave?: undefined;
+        };
+        canClose: () => boolean;
+    } | {
+        handlers: {
+            onMouseEnter: any;
+            onPointerEnter: any;
+            onMouseLeave: any;
+            onPointerLeave: any;
+            onClick: (e: any) => void;
+        };
+        canClose: (isOnTrigger: any, isOnPopper: any) => boolean;
+    };
+    setOpen(opening: any): void;
+    open(): void;
+    close(): void;
+    handleTriggerClick(e: any): void;
+    handleContentMouseEnter(): void;
+    handleContentMouseLeave(): void;
+    handleMouseEnter(): void;
+    handleMouseLeave(): void;
+    updatePopoverState(popperData: any): any;
+    handleDestroyContent(): void;
+    renderTarget({ ref }: {
+        ref: any;
+    }): any;
+    render(): JSX.Element;
+}
+export { Reference, PopperContent };

package/types/getArrowStylesBySize.d.ts

@@ -0,0 +1,2 @@
+export declare const getArrowStylesBySize: (position: any, size?: number) => any;
+export default getArrowStylesBySize;

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DSPopper';
+export * from './getArrowStylesBySize';
+export { default } from './DSPopper';

package/types/interaction.d.ts

@@ -0,0 +1,5 @@
+export declare const Interaction: {
+    CLICK: string;
+    HOVER: string;
+};
+export declare const interactions: string[];

package/types/positions.d.ts

@@ -0,0 +1,18 @@
+export declare const Position: {
+    AUTO: string;
+    AUTO_START: string;
+    AUTO_END: string;
+    BOTTOM: string;
+    BOTTOM_START: string;
+    BOTTOM_END: string;
+    LEFT: string;
+    LEFT_END: string;
+    LEFT_START: string;
+    RIGHT: string;
+    RIGHT_END: string;
+    RIGHT_START: string;
+    TOP: string;
+    TOP_START: string;
+    TOP_END: string;
+};
+export declare const positions: string[];

package/types/props.d.ts

@@ -0,0 +1,119 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const popperProps: {
+    /** Hide menu component if trigger component is not visible/scrolled away */
+    hideIfNotVisible: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** props to inject to popper wrapper */
+    containerProps: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** Space between the arrow and the popup */
+    arrowGap: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** callback for when menu changes from close to open */
+    onOpen: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** callback for when menu changes from open to close */
+    onClose: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** Time in ms to delay close of menu */
+    delayClose: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** Time in ms to delay open of menu */
+    delayOpen: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** callback for when menu changes placement */
+    onPlacementChange: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** Arrow size */
+    arrowSize: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    /** Bem blockname for the popper */
+    blockName: {
+        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValue;
+    };
+    triggerComponent: import("react-desc").PropTypesDescValue;
+};
+export declare const defaultProps: {
+    containerProps: {};
+    arrowGap: number;
+    arrowSize: number;
+    blockName: string;
+    contentOffset: null;
+    contentStyle: null;
+    contentComponent: () => null;
+    delayClose: number;
+    delayOpen: number;
+    interactionType: string;
+    onOpen: () => null;
+    onClose: () => null;
+    onPlacementChange: () => null;
+    placement: string;
+    preventOverflow: string;
+    showArrow: boolean;
+    closeAnimationConfig: {
+        to: {
+            transform: string;
+            opacity: string;
+        };
+        config: {
+            delay: number;
+            duration: number;
+        };
+    };
+    openAnimationConfig: {
+        to: {
+            transform: string;
+            opacity: string;
+        };
+        config: {
+            delay: number;
+            duration: number;
+        };
+    };
+    usePortal: boolean;
+    triggerComponent: () => null;
+    getTargetFromChildren: () => null;
+    getContentFromChildren: () => null;
+    modifiers: {};
+    triggerRef: () => null;
+    hideIfNotVisible: boolean;
+};