@elliemae/ds-legacy-popover 1.0.0-rc.1

package/dist/esm/usePopper.js

@@ -0,0 +1,99 @@
+import * as React from "react";
+import Popper from "popper.js";
+import { useEffect, useRef, useState } from "react";
+function calculateOffset({ offset, showArrow }) {
+  const arrowSize = 10;
+  const defaultPadding = 3;
+  return {
+    enabled: showArrow || offset,
+    offset: Array.isArray(offset) ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}` : `0, ${arrowSize + defaultPadding}`
+  };
+}
+function usePopper({
+  offset,
+  showArrow,
+  placement,
+  isOpen,
+  modifiers,
+  eventsEnabled = true,
+  positionFixed,
+  boundaries = "scrollParent",
+  referenceEl: refEl
+}) {
+  const [popperData, setPopperData] = useState({});
+  const [dynamicPopperNode, setPopperNode] = useState(null);
+  const referenceRef = useRef();
+  const popperRef = useRef();
+  const arrowRef = useRef();
+  const popper = useRef();
+  useEffect(() => {
+    const referenceEl = refEl || referenceRef.current;
+    const popperEl = dynamicPopperNode || popperRef.current;
+    const arrowEl = arrowRef.current;
+    popper.current = referenceEl && popperEl && new Popper(referenceEl, popperEl, {
+      placement,
+      isOpen,
+      eventsEnabled,
+      positionFixed,
+      modifiers: {
+        preventOverflow: {
+          padding: 0,
+          boundariesElement: boundaries,
+          ...modifiers.preventOverflow
+        },
+        offset: calculateOffset({
+          offset,
+          showArrow
+        }),
+        ...modifiers,
+        arrow: {
+          enabled: !!arrowEl,
+          element: arrowEl
+        },
+        applyStyle: { enabled: false },
+        updateStateModifier: {
+          order: 900,
+          enabled: true,
+          fn: (data) => {
+            setPopperData(data);
+            return data;
+          }
+        }
+      }
+    });
+    return () => {
+      if (popper.current)
+        popper.current.destroy();
+    };
+  }, [refEl, dynamicPopperNode, placement, showArrow, offset, popperRef, eventsEnabled]);
+  useEffect(() => {
+    if (!popper.current)
+      return;
+    popper.current.update();
+  }, [popper.current]);
+  const arrow = {
+    ref: arrowRef,
+    style: popperData.arrowStyles
+  };
+  const popperProps = {
+    style: popperData.styles,
+    ref: setPopperNode,
+    placement: popperData.placement,
+    "data-testid": "popover-container"
+  };
+  const reference = {
+    ref: referenceRef
+  };
+  return {
+    popperInstance: popper.current,
+    popper: popperProps,
+    arrow,
+    reference,
+    // setPopperNode,
+    popperData
+  };
+}
+export {
+  usePopper as default
+};
+//# sourceMappingURL=usePopper.js.map

package/dist/esm/usePopper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/usePopper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import Popper from 'popper.js';\nimport { useEffect, useRef, useState } from 'react';\n\nfunction calculateOffset({ offset, showArrow }) {\n  const arrowSize = 10;\n  const defaultPadding = 3;\n  return {\n    enabled: showArrow || offset,\n    offset: Array.isArray(offset)\n      ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}`\n      : `0, ${arrowSize + defaultPadding}`,\n  };\n}\n\nexport default function usePopper({\n  offset,\n  showArrow,\n  placement,\n  isOpen,\n  modifiers,\n  eventsEnabled = true,\n  positionFixed,\n  boundaries = 'scrollParent',\n  referenceEl: refEl,\n}) {\n  const [popperData, setPopperData] = useState({});\n  // this is util for deferred rendering like with portals\n  const [dynamicPopperNode, setPopperNode] = useState(null);\n  const referenceRef = useRef();\n  const popperRef = useRef();\n  const arrowRef = useRef();\n  const popper = useRef();\n\n  // initialize popper with refs and options\n  useEffect(() => {\n    const referenceEl = refEl || referenceRef.current;\n    const popperEl = dynamicPopperNode || popperRef.current;\n    const arrowEl = arrowRef.current;\n\n    popper.current =\n      referenceEl &&\n      popperEl &&\n      new Popper(referenceEl, popperEl, {\n        placement,\n        isOpen,\n        eventsEnabled,\n        positionFixed,\n        modifiers: {\n          preventOverflow: {\n            padding: 0,\n            boundariesElement: boundaries,\n            ...modifiers.preventOverflow,\n          },\n          offset: calculateOffset({\n            offset,\n            showArrow,\n          }),\n          ...modifiers,\n          arrow: {\n            enabled: !!arrowEl,\n            element: arrowEl,\n          },\n          applyStyle: { enabled: false },\n          updateStateModifier: {\n            order: 900,\n            enabled: true,\n            fn: (data) => {\n              setPopperData(data);\n              return data;\n            },\n          },\n        },\n      });\n\n    return () => {\n      if (popper.current) popper.current.destroy();\n    };\n  }, [refEl, dynamicPopperNode, placement, showArrow, offset, popperRef, eventsEnabled]);\n\n  // update popper instance after initialization\n  useEffect(() => {\n    if (!popper.current) return;\n    popper.current.update();\n  }, [popper.current]);\n\n  const arrow = {\n    ref: arrowRef,\n    style: popperData.arrowStyles,\n  };\n  const popperProps = {\n    style: popperData.styles,\n    ref: setPopperNode,\n    placement: popperData.placement,\n    'data-testid': 'popover-container',\n  };\n  const reference = {\n    ref: referenceRef,\n  };\n  return {\n    popperInstance: popper.current,\n    popper: popperProps,\n    arrow,\n    reference,\n    // setPopperNode,\n    popperData,\n  };\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAO,YAAY;AACnB,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,gBAAgB,EAAE,QAAQ,UAAU,GAAG;AAC9C,QAAM,YAAY;AAClB,QAAM,iBAAiB;AACvB,SAAO;AAAA,IACL,SAAS,aAAa;AAAA,IACtB,QAAQ,MAAM,QAAQ,MAAM,IACxB,GAAG,OAAO,CAAC,OAAO,OAAO,CAAC,KAAK,OAAO,CAAC,KAAK,YAAY,mBACxD,MAAM,YAAY;AAAA,EACxB;AACF;AAEe,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AACf,GAAG;AACD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC,CAAC;AAE/C,QAAM,CAAC,mBAAmB,aAAa,IAAI,SAAS,IAAI;AACxD,QAAM,eAAe,OAAO;AAC5B,QAAM,YAAY,OAAO;AACzB,QAAM,WAAW,OAAO;AACxB,QAAM,SAAS,OAAO;AAGtB,YAAU,MAAM;AACd,UAAM,cAAc,SAAS,aAAa;AAC1C,UAAM,WAAW,qBAAqB,UAAU;AAChD,UAAM,UAAU,SAAS;AAEzB,WAAO,UACL,eACA,YACA,IAAI,OAAO,aAAa,UAAU;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf,SAAS;AAAA,UACT,mBAAmB;AAAA,UACnB,GAAG,UAAU;AAAA,QACf;AAAA,QACA,QAAQ,gBAAgB;AAAA,UACtB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD,GAAG;AAAA,QACH,OAAO;AAAA,UACL,SAAS,CAAC,CAAC;AAAA,UACX,SAAS;AAAA,QACX;AAAA,QACA,YAAY,EAAE,SAAS,MAAM;AAAA,QAC7B,qBAAqB;AAAA,UACnB,OAAO;AAAA,UACP,SAAS;AAAA,UACT,IAAI,CAAC,SAAS;AACZ,0BAAc,IAAI;AAClB,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAEH,WAAO,MAAM;AACX,UAAI,OAAO;AAAS,eAAO,QAAQ,QAAQ;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,OAAO,mBAAmB,WAAW,WAAW,QAAQ,WAAW,aAAa,CAAC;AAGrF,YAAU,MAAM;AACd,QAAI,CAAC,OAAO;AAAS;AACrB,WAAO,QAAQ,OAAO;AAAA,EACxB,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,QAAM,QAAQ;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,WAAW;AAAA,EACpB;AACA,QAAM,cAAc;AAAA,IAClB,OAAO,WAAW;AAAA,IAClB,KAAK;AAAA,IACL,WAAW,WAAW;AAAA,IACtB,eAAe;AAAA,EACjB;AACA,QAAM,YAAY;AAAA,IAChB,KAAK;AAAA,EACP;AACA,SAAO;AAAA,IACL,gBAAgB,OAAO;AAAA,IACvB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/types/Arrow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default _default;

package/dist/types/DSPopover.d.ts

@@ -0,0 +1,81 @@
+import usePopper from './usePopper.js';
+import usePopoverProviderState from './usePopoverProviderState.js';
+export * from '@elliemae/ds-legacy-popper';
+export declare const Interaction: {
+    CLICK: string;
+    HOVER: string;
+};
+declare const DSPopover: {
+    ({ containerProps, content, renderer, visible: visibleProp, offset, showArrow, placement, boundaries, modifiers, referenceEl, renderTrigger, onClickOutside, destroyOnHidden, interactionType, isOpen, style, }: {
+        containerProps: any;
+        content: any;
+        renderer: any;
+        visible: any;
+        offset: any;
+        showArrow: any;
+        placement: any;
+        boundaries: any;
+        modifiers: any;
+        referenceEl: any;
+        renderTrigger: any;
+        onClickOutside: any;
+        destroyOnHidden: any;
+        interactionType: any;
+        isOpen: any;
+        style: any;
+    }): import("react/jsx-runtime.js").JSX.Element;
+    defaultProps: {
+        containerProps: {};
+        renderer: undefined;
+        visible: undefined;
+        offset: undefined;
+        showArrow: boolean;
+        placement: string;
+        modifiers: {};
+        renderTrigger: () => null;
+        onClickOutside: () => null;
+        destroyOnHidden: boolean;
+        isOpen: undefined;
+    };
+    propTypes: {
+        containerProps: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        destroyOnHidden: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        renderer: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        popperProps: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        visible: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        content: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        onClickOutside: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        interaction: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        offset: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        showArrow: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        placement: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        boundaries: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        modifiers: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        style: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        referenceEl: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        renderTrigger: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        interactionType: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        isOpen: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    };
+    displayName: string;
+};
+declare const PopoverWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
+    containerProps: any;
+    content: any;
+    renderer: any;
+    visible: any;
+    offset: any;
+    showArrow: any;
+    placement: any;
+    boundaries: any;
+    modifiers: any;
+    referenceEl: any;
+    renderTrigger: any;
+    onClickOutside: any;
+    destroyOnHidden: any;
+    interactionType: any;
+    isOpen: any;
+    style: any;
+}>;
+export { DSPopover, usePopper, usePopoverProviderState, PopoverWithSchema };
+export default DSPopover;

package/dist/types/Popover.d.ts

@@ -0,0 +1,12 @@
+declare const Popover: ({ containerProps, destroyOnHidden, renderer, popperProps, visible, content, onClickOutside, style, ...otherProps }: {
+    [x: string]: any;
+    containerProps: any;
+    destroyOnHidden?: boolean | undefined;
+    renderer?: undefined;
+    popperProps?: {} | undefined;
+    visible?: boolean | undefined;
+    content?: undefined;
+    onClickOutside?: (() => null) | undefined;
+    style: any;
+}) => false | import("react/jsx-runtime").JSX.Element;
+export default Popover;

package/dist/types/PopoverTrigger.d.ts

@@ -0,0 +1,9 @@
+export declare const Interaction: {
+    CLICK: string;
+    HOVER: string;
+};
+declare const PopoverTrigger: ({ as: Component, ...props }: {
+    [x: string]: any;
+    as: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default PopoverTrigger;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DSPopover.js';
+export { default } from './DSPopover.js';

package/dist/types/usePopover.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare function usePopover({ ...otherProps }: {
+    [x: string]: any;
+}): {
+    popperInstance: undefined;
+    popperData: {};
+    triggerProps: {
+        ref: import("react").MutableRefObject<undefined>;
+    };
+    popoverProps: {
+        style: any;
+        ref: import("react").Dispatch<import("react").SetStateAction<null>>;
+        placement: any;
+        'data-testid': string;
+    };
+    arrowProps: {
+        ref: import("react").MutableRefObject<undefined>;
+        style: any;
+    };
+};
+export default usePopover;

package/dist/types/usePopoverProviderState.d.ts

@@ -0,0 +1,19 @@
+declare function usePopoverProviderState({ initialState, delay, }: {
+    initialState?: {
+        reference: null;
+        visible: boolean;
+        value: string;
+        options: {};
+    } | undefined;
+    delay: any;
+}): {
+    show: (state: any, e: any) => void;
+    hide: (state: any) => void;
+    state: {
+        reference: null;
+        visible: boolean;
+        value: string;
+        options: {};
+    };
+};
+export default usePopoverProviderState;

package/dist/types/usePopper.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export default function usePopper({ offset, showArrow, placement, isOpen, modifiers, eventsEnabled, positionFixed, boundaries, referenceEl: refEl, }: {
+    offset: any;
+    showArrow: any;
+    placement: any;
+    isOpen: any;
+    modifiers: any;
+    eventsEnabled?: boolean | undefined;
+    positionFixed: any;
+    boundaries?: string | undefined;
+    referenceEl: any;
+}): {
+    popperInstance: undefined;
+    popper: {
+        style: any;
+        ref: import("react").Dispatch<import("react").SetStateAction<null>>;
+        placement: any;
+        'data-testid': string;
+    };
+    arrow: {
+        ref: import("react").MutableRefObject<undefined>;
+        style: any;
+    };
+    reference: {
+        ref: import("react").MutableRefObject<undefined>;
+    };
+    popperData: {};
+};

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@elliemae/ds-legacy-popover",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Popover",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./usePopper": {
+      "import": "./dist/esm/usePopper.js",
+      "require": "./dist/cjs/usePopper.js"
+    },
+    "./usePopoverProviderState": {
+      "import": "./dist/esm/usePopoverProviderState.js",
+      "require": "./dist/cjs/usePopoverProviderState.js"
+    },
+    "./usePopover": {
+      "import": "./dist/esm/usePopover.js",
+      "require": "./dist/cjs/usePopover.js"
+    },
+    "./PopoverTrigger": {
+      "import": "./dist/esm/PopoverTrigger.js",
+      "require": "./dist/cjs/PopoverTrigger.js"
+    },
+    "./Popover": {
+      "import": "./dist/esm/Popover.js",
+      "require": "./dist/cjs/Popover.js"
+    },
+    "./DSPopover": {
+      "import": "./dist/esm/DSPopover.js",
+      "require": "./dist/cjs/DSPopover.js"
+    },
+    "./Arrow": {
+      "import": "./dist/esm/Arrow.js",
+      "require": "./dist/cjs/Arrow.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum-legacy.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "popper.js": "~1.16.1",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-legacy-classnames": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-hidden": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-popper": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-portal": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-props-helpers": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-utilities": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.0-rc.1"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}