@elliemae/ds-popperjs 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/index.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import React2, { useMemo } from "react";
+import { createPortal } from "react-dom";
+import { describe } from "react-desc";
+import { dspopperjsPropTypes } from "./propTypes";
+import { PopoverContent } from "./PopoverContent";
+import { useConfigDSPopperjs } from "./config/useConfigDSPopperjs";
+const DSPopperJS = (props) => {
+  const {
+    props: {
+      showPopover,
+      withoutAnimation,
+      animationDuration,
+      withoutPortal,
+      withoutArrow,
+      portalDOMContainer,
+      zIndex,
+      extraPopperStyles
+    },
+    setPopperElement,
+    setArrowElement,
+    setIsAnimating,
+    popoverHelper,
+    isAnimating
+  } = useConfigDSPopperjs(props);
+  const { children } = props;
+  const { styles, attributes } = popoverHelper;
+  const contentJSX = useMemo(() => /* @__PURE__ */ React2.createElement(PopoverContent, {
+    setPopperElement,
+    popperStyles: { ...styles.popper, ...extraPopperStyles },
+    popperAttributes: attributes.popper,
+    setArrowElement,
+    arrowStyle: styles.arrow,
+    withoutArrow,
+    withoutAnimation,
+    animationDuration,
+    zIndex,
+    showPopover,
+    setIsAnimating
+  }, children), [
+    attributes.popper,
+    children,
+    setIsAnimating,
+    showPopover,
+    extraPopperStyles,
+    setArrowElement,
+    setPopperElement,
+    styles.arrow,
+    styles.popper,
+    withoutArrow,
+    withoutAnimation,
+    animationDuration,
+    zIndex
+  ]);
+  if (showPopover || isAnimating) {
+    if (withoutPortal === true)
+      return contentJSX;
+    if (withoutPortal === false)
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, createPortal(/* @__PURE__ */ React2.createElement(React2.Fragment, null, contentJSX), portalDOMContainer));
+  }
+  return null;
+};
+DSPopperJS.propTypes = dspopperjsPropTypes;
+const DSPopperJSWithSchema = describe(DSPopperJS).description("A dimsum custom styling wrapper on top of popperjs");
+DSPopperJSWithSchema.propTypes = dspopperjsPropTypes;
+var src_default = DSPopperJS;
+export {
+  DSPopperJS,
+  DSPopperJSWithSchema,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe } from 'react-desc';\nimport { dspopperjsPropTypes } from './propTypes';\nimport { PopoverContent } from './PopoverContent';\nimport { useConfigDSPopperjs } from './config/useConfigDSPopperjs';\nimport type { DSDSPopperjsPropsT } from './index.d';\n\nconst DSPopperJS = (props: DSDSPopperjsPropsT): JSX.Element => {\n  const {\n    props: {\n      showPopover,\n      withoutAnimation,\n      animationDuration,\n      withoutPortal,\n      withoutArrow,\n      portalDOMContainer,\n      zIndex,\n      extraPopperStyles,\n    },\n    setPopperElement,\n    setArrowElement,\n    setIsAnimating,\n    popoverHelper,\n    isAnimating,\n  } = useConfigDSPopperjs(props);\n  const { children } = props;\n  const { styles, attributes } = popoverHelper;\n  const contentJSX = useMemo(\n    () => (\n      <PopoverContent\n        setPopperElement={setPopperElement}\n        popperStyles={{ ...styles.popper, ...extraPopperStyles }}\n        popperAttributes={attributes.popper}\n        setArrowElement={setArrowElement}\n        arrowStyle={styles.arrow}\n        withoutArrow={withoutArrow}\n        withoutAnimation={withoutAnimation}\n        animationDuration={animationDuration}\n        zIndex={zIndex}\n        showPopover={showPopover}\n        setIsAnimating={setIsAnimating}\n      >\n        {children}\n      </PopoverContent>\n    ),\n    [\n      attributes.popper,\n      children,\n      setIsAnimating,\n      showPopover,\n      extraPopperStyles,\n      setArrowElement,\n      setPopperElement,\n      styles.arrow,\n      styles.popper,\n      withoutArrow,\n      withoutAnimation,\n      animationDuration,\n      zIndex,\n    ],\n  );\n  if (showPopover || isAnimating) {\n    if (withoutPortal === true) return contentJSX;\n    if (withoutPortal === false) return <>{createPortal(<>{contentJSX}</>, portalDOMContainer)}</>;\n  }\n  return null;\n};\n\nDSPopperJS.propTypes = dspopperjsPropTypes;\n\nconst DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');\nDSPopperJSWithSchema.propTypes = dspopperjsPropTypes;\n\nexport { DSPopperJS, DSPopperJSWithSchema };\nexport default DSPopperJS;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,aAAa,CAAC,UAA2C;AAC7D,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB;AACxB,QAAM,EAAE,aAAa;AACrB,QAAM,EAAE,QAAQ,eAAe;AAC/B,QAAM,aAAa,QACjB,MACE,qCAAC,gBAAD;AAAA,IACE;AAAA,IACA,cAAc,KAAK,OAAO,WAAW;AAAA,IACrC,kBAAkB,WAAW;AAAA,IAC7B;AAAA,IACA,YAAY,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,WAGL;AAAA,IACE,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGJ,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO,4DAAG,aAAa,4DAAG,aAAgB;AAAA;AAEzE,SAAO;AAAA;AAGT,WAAW,YAAY;AAEvB,MAAM,uBAAuB,SAAS,YAAY,YAAY;AAC9D,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
+  "names": []
+}

package/dist/esm/propTypes.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const dspopperjsPropTypes = {
+  referenceElement: PropTypes.element.description("popperjs DOM referenceElement").isRequired,
+  showPopover: PropTypes.bool.description("whether or not to show the popper content").isRequired,
+  closeContextMenu: PropTypes.func.description('Callback to close the context menu, used for "on click outside", if not provided click outside will not trigger anything').defaultValue("() => {}"),
+  withoutPortal: PropTypes.bool.description("Whether or not the popper content should appear in a DOM portal or not").defaultValue(true),
+  withoutArrow: PropTypes.bool.description("Whether or not the popper context menu should print the arrow").defaultValue(false),
+  withoutAnimation: PropTypes.bool.description("Whether or not the popper context menu should be animated").defaultValue(false),
+  animationDuration: PropTypes.number.description("Popper context menus Animation duration in ms").defaultValue(100),
+  boundaryElement: PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(void 0),
+  portalDOMContainer: PropTypes.element.description("When using portal, the container in which to append the DOM content, defaults to document body").defaultValue(void 0),
+  startPlacementPreference: PropTypes.oneOf([
+    "top-start",
+    "top",
+    "top-end",
+    "right-start",
+    "right",
+    "right-end",
+    "bottom-end",
+    "bottom",
+    "bottom-start",
+    "left-end",
+    "left",
+    "left-start"
+  ]).description("start placement preferences, as per popperjs placement option").defaultValue("'top'"),
+  placementOrderPreference: PropTypes.arrayOf(PropTypes.oneOf([
+    "top-start",
+    "top",
+    "top-end",
+    "right-start",
+    "right",
+    "right-end",
+    "bottom-end",
+    "bottom",
+    "bottom-start",
+    "left-end",
+    "left",
+    "left-start"
+  ])).description('Array of placement preferences, as per popperjs "flip" placement option').defaultValue("['top', 'bottom', 'left', 'right']"),
+  zIndex: PropTypes.number.description("popperjs content z-index").defaultValue(1),
+  customOffset: PropTypes.arrayOf(PropTypes.number).description("placement offset array").defaultValue(1),
+  modifiers: PropTypes.array.description("modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/").defaultValue(1),
+  extraPopperStyles: PropTypes.object.description("Extra object styles to attach to the popper element").defaultValue({}),
+  onClickOutside: PropTypes.func.description("Callback triggered when clicking outside the popper").defaultValue(() => null),
+  children: PropTypes.node.description("The content of the popper").defaultValue(void 0)
+};
+export {
+  dspopperjsPropTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/dist/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from 'react-desc';\n\nexport const dspopperjsPropTypes = {\n  /**\n   * React ref to popperjs referenceElement\n   */\n  referenceElement: PropTypes.element.description('popperjs DOM referenceElement').isRequired,\n  /**\n   * Wheter or not to show the popper content\n   */\n  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,\n  /**\n   * Callback to close the context menu, used for \"on click outside\",\n   *  if not provided click outside will not trigger anything\n   */\n  closeContextMenu: PropTypes.func\n    .description(\n      'Callback to close the context menu, used for \"on click outside\",' +\n        ' if not provided click outside will not trigger anything',\n    )\n    .defaultValue('() => {}'),\n  /**\n   *  Wheter or not the popper content should appear in a DOM portal or not\n   */\n  withoutPortal: PropTypes.bool\n    .description('Whether or not the popper content should appear in a DOM portal or not')\n    .defaultValue(true),\n  /**\n   *  Wheter or not the popper context menu should print the arrow\n   */\n  withoutArrow: PropTypes.bool\n    .description('Whether or not the popper context menu should print the arrow')\n    .defaultValue(false),\n  /**\n   *  Whether or not the popper context menu should be animated\n   */\n  withoutAnimation: PropTypes.bool\n    .description('Whether or not the popper context menu should be animated')\n    .defaultValue(false),\n  /**\n   *  Popper context menus Animation duration in ms\n   */\n  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n  /**\n   *  Bounding element to calculate upon, defaults to it is \"clippingParents\",\n   *   which are the scrolling containers that may cause the element to be partially or fully cut off.\n   */\n  boundaryElement: PropTypes.element\n    .description(\n      'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n        'which are the scrolling containers that may cause element to be partially or fully cut off',\n    )\n    .defaultValue(undefined),\n  /**\n   *  When using portal, the container in which to append the DOM content, defaults to document body\n   */\n  portalDOMContainer: PropTypes.element\n    .description('When using portal, the container in which to append the DOM content, defaults to document body')\n    .defaultValue(undefined),\n  /**\n   *  start placement preferences, as per popperjs placement option\n   */\n  startPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'top'\"),\n  /**\n   *  Array of placement preferences, as per popperjs \"flip\" placement option\n   */\n  placementOrderPreference: PropTypes.arrayOf(\n    PropTypes.oneOf([\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n  )\n    .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n    .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n  /**\n   *  popperjs content z-index\n   */\n  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n  /**\n   *  placement offset array\n   */\n  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),\n  /**\n   *  modifiers array for full-custom popper-js override\n   *  https://popper.js.org/docs/v2/modifiers/\n   */\n  modifiers: PropTypes.array\n    .description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/')\n    .defaultValue(1),\n  extraPopperStyles: PropTypes.object\n    .description('Extra object styles to attach to the popper element')\n    .defaultValue({}),\n  onClickOutside: PropTypes.func\n    .description('Callback triggered when clicking outside the popper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('The content of the popper').defaultValue(undefined),\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,sBAAsB;AAAA,EAIjC,kBAAkB,UAAU,QAAQ,YAAY,iCAAiC;AAAA,EAIjF,aAAa,UAAU,KAAK,YAAY,6CAA6C;AAAA,EAKrF,kBAAkB,UAAU,KACzB,YACC,4HAGD,aAAa;AAAA,EAIhB,eAAe,UAAU,KACtB,YAAY,0EACZ,aAAa;AAAA,EAIhB,cAAc,UAAU,KACrB,YAAY,iEACZ,aAAa;AAAA,EAIhB,kBAAkB,UAAU,KACzB,YAAY,6DACZ,aAAa;AAAA,EAIhB,mBAAmB,UAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EAK9G,iBAAiB,UAAU,QACxB,YACC,gKAGD,aAAa;AAAA,EAIhB,oBAAoB,UAAU,QAC3B,YAAY,kGACZ,aAAa;AAAA,EAIhB,0BAA0B,UAAU,MAAM;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,iEACZ,aAAa;AAAA,EAIhB,0BAA0B,UAAU,QAClC,UAAU,MAAM;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAGD,YAAY,2EACZ,aAAa;AAAA,EAIhB,QAAQ,UAAU,OAAO,YAAY,4BAA4B,aAAa;AAAA,EAI9E,cAAc,UAAU,QAAQ,UAAU,QAAQ,YAAY,0BAA0B,aAAa;AAAA,EAKrG,WAAW,UAAU,MAClB,YAAY,gGACZ,aAAa;AAAA,EAChB,mBAAmB,UAAU,OAC1B,YAAY,uDACZ,aAAa;AAAA,EAChB,gBAAgB,UAAU,KACvB,YAAY,uDACZ,aAAa,MAAM;AAAA,EACtB,UAAU,UAAU,KAAK,YAAY,6BAA6B,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import styled from "styled-components";
+import { kfrm, css } from "@elliemae/ds-system";
+const showAnimation = kfrm`
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+      visibility: visible;
+    }
+`;
+const hideAnimation = kfrm`
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+      visibility: hidden;
+    }
+`;
+const StyledPopoverContentWrapper = styled.div`
+  z-index: ${({ zIndex }) => zIndex};
+`;
+const StyledAnimatedPopper = styled.div`
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);
+
+  ${({ showPopover, animationDuration, withoutAnimation }) => !withoutAnimation && css`
+      animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;
+    `}
+`;
+export {
+  StyledAnimatedPopper,
+  StyledPopoverContentWrapper
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport { kfrm, css } from '@elliemae/ds-system';\n\ninterface StyledContentWrapperPropsT {\n  zIndex: number;\n}\n\ninterface StyledAnimatedPopperPropsT {\n  showPopover: boolean;\n  animationDuration: number;\n  withoutAnimation: boolean;\n}\n\nconst showAnimation = kfrm`\n    from {\n      opacity: 0;\n      transform: scale(0.8);\n    }\n\n    to {\n      opacity: 1;\n      transform: scale(1);\n      visibility: visible;\n    }\n`;\n\nconst hideAnimation = kfrm`\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: scale(0.8);\n      visibility: hidden;\n    }\n`;\n\nexport const StyledPopoverContentWrapper = styled.div<StyledContentWrapperPropsT>`\n  z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledAnimatedPopper = styled.div<StyledAnimatedPopperPropsT>`\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);\n\n  ${({ showPopover, animationDuration, withoutAnimation }) =>\n    !withoutAnimation &&\n    css`\n      animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;\n    `}\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAYA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAatB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaf,MAAM,8BAA8B,OAAO;AAAA,aACrC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA,IAGvC,CAAC,EAAE,aAAa,mBAAmB,uBACnC,CAAC,oBACD;AAAA,mBACe,cAAc,gBAAgB,iBAAiB;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/utils/hooks/useOnClickOutside.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { useEffect } from "react";
+function useOnClickOutside(ref, cb) {
+  useEffect(() => {
+    const listener = (event) => {
+      if (!ref || ref?.contains?.(event.target)) {
+        return;
+      }
+      cb(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, cb]);
+}
+export {
+  useOnClickOutside
+};
+//# sourceMappingURL=useOnClickOutside.js.map

package/dist/esm/utils/hooks/useOnClickOutside.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/utils/hooks/useOnClickOutside.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\n\ntype defaultCbt = (e: React.MouseEvent) => void;\nexport function useOnClickOutside<T extends Node, cbT extends defaultCbt>(ref: T, cb: cbT): void {\n  useEffect(() => {\n    const listener = (event) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (!ref || ref?.contains?.(event.target)) {\n        return;\n      }\n      cb(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, cb]);\n}\n"],
+  "mappings": "AAAA;ACAA;AAGO,2BAAmE,KAAQ,IAAe;AAC/F,YAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAU;AAE1B,UAAI,CAAC,OAAO,KAAK,WAAW,MAAM,SAAS;AACzC;AAAA;AAEF,SAAG;AAAA;AAEL,aAAS,iBAAiB,aAAa;AACvC,aAAS,iBAAiB,cAAc;AACxC,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa;AAC1C,eAAS,oBAAoB,cAAc;AAAA;AAAA,KAE5C,CAAC,KAAK;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,51 +1,54 @@
 {
   "name": "@elliemae/ds-popperjs",
-  "version": "2.3.0-next.0",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper JS Wrapper",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./utils/hooks/useOnClickOutside": {
-      "import": "./esm/utils/hooks/useOnClickOutside.js",
-      "require": "./cjs/utils/hooks/useOnClickOutside.js"
+      "import": "./dist/esm/utils/hooks/useOnClickOutside.js",
+      "require": "./dist/cjs/utils/hooks/useOnClickOutside.js"
     },
     "./styled": {
-      "import": "./esm/styled.js",
-      "require": "./cjs/styled.js"
+      "import": "./dist/esm/styled.js",
+      "require": "./dist/cjs/styled.js"
     },
     "./propTypes": {
-      "import": "./esm/propTypes.js",
-      "require": "./cjs/propTypes.js"
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
     },
     "./PopoverContent": {
-      "import": "./esm/PopoverContent.js",
-      "require": "./cjs/PopoverContent.js"
+      "import": "./dist/esm/PopoverContent.js",
+      "require": "./dist/cjs/PopoverContent.js"
     },
     "./PopoverArrow": {
-      "import": "./esm/PopoverArrow.js",
-      "require": "./cjs/PopoverArrow.js"
+      "import": "./dist/esm/PopoverArrow.js",
+      "require": "./dist/cjs/PopoverArrow.js"
     },
     "./config/useConfiguredMergedProps": {
-      "import": "./esm/config/useConfiguredMergedProps.js",
-      "require": "./cjs/config/useConfiguredMergedProps.js"
+      "import": "./dist/esm/config/useConfiguredMergedProps.js",
+      "require": "./dist/cjs/config/useConfiguredMergedProps.js"
     },
     "./config/useConfiguredDefaultProps": {
-      "import": "./esm/config/useConfiguredDefaultProps.js",
-      "require": "./cjs/config/useConfiguredDefaultProps.js"
+      "import": "./dist/esm/config/useConfiguredDefaultProps.js",
+      "require": "./dist/cjs/config/useConfiguredDefaultProps.js"
     },
     "./config/useConfiguredDefaultModifiers": {
-      "import": "./esm/config/useConfiguredDefaultModifiers.js",
-      "require": "./cjs/config/useConfiguredDefaultModifiers.js"
+      "import": "./dist/esm/config/useConfiguredDefaultModifiers.js",
+      "require": "./dist/cjs/config/useConfiguredDefaultModifiers.js"
     },
     "./config/useConfigDSPopperjs": {
-      "import": "./esm/config/useConfigDSPopperjs.js",
-      "require": "./cjs/config/useConfigDSPopperjs.js"
+      "import": "./dist/esm/config/useConfigDSPopperjs.js",
+      "require": "./dist/cjs/config/useConfigDSPopperjs.js"
     }
   },
   "sideEffects": [
@@ -57,19 +60,19 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "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"
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.3.0-next.0",
-    "@elliemae/ds-system": "2.3.0-next.0",
+    "@elliemae/ds-props-helpers": "3.0.0-alpha.0",
+    "@elliemae/ds-system": "3.0.0-alpha.0",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5"
   },
@@ -83,7 +86,12 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/cjs/PopoverArrow.js

@@ -1,54 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var styled = require('styled-components');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _svg;
-const arrowWidth = 18;
-const arrowHeight = 18;
-const StyledArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-olcdf1-0"
-})(["position:absolute;width:", "px;height:", "px;pointer-events:none;background-color:transparent;& .stroke{fill:", ";fill-opacity:0.4;}& .fill{fill:", ";}&[data-placement^='top']{svg{transform:rotateZ(180deg);}bottom:-", "px;}&[data-placement^='right']{svg{transform:rotateZ(-90deg);}left:-", "px;}&[data-placement^='bottom']{top:-", "px;}&[data-placement^='left']{svg{transform:rotateZ(90deg);}right:-", "px;}margin-left:", ";margin-top:", ";"], arrowWidth, arrowHeight, _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral['500'];
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral['000'];
-}, arrowHeight, arrowWidth, arrowHeight, arrowWidth, props => props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom') ? "-".concat(arrowWidth / 2, "px;") : '0;', props => props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right') ? "-".concat(arrowHeight / 2, "px;") : '0;');
-const PopoverArrow = _ref3 => {
-  let {
-    placement,
-    style,
-    arrowElementRef
-  } = _ref3;
-  return /*#__PURE__*/jsxRuntime.jsx(StyledArrow, {
-    "data-placement": placement,
-    style: style,
-    ref: arrowElementRef,
-    "data-testid": "ds-tooltip-arrow",
-    children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
-      viewBox: "0 0 30 30"
-    }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
-      className: "stroke",
-      d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
-    }), /*#__PURE__*/_jsx__default["default"]("path", {
-      className: "fill",
-      d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
-    })))
-  }, "popper-arrow");
-};
-
-exports.PopoverArrow = PopoverArrow;

package/cjs/PopoverContent.js

@@ -1,71 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var react = require('react');
-var PopoverArrow = require('./PopoverArrow.js');
-var styled = require('./styled.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-
-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__default["default"](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 PopoverContent = _ref => {
-  let {
-    setPopperElement,
-    popperStyles,
-    popperAttributes,
-    children,
-    showPopover,
-    setArrowElement,
-    setIsAnimating,
-    arrowStyle,
-    withoutArrow,
-    withoutAnimation,
-    animationDuration,
-    zIndex
-  } = _ref;
-  const checkAnimationStatus = react.useCallback(() => {
-    if (!showPopover && !withoutAnimation) {
-      setIsAnimating(false);
-    }
-  }, [showPopover, withoutAnimation, setIsAnimating]);
-  const popperContent = react.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [children, withoutArrow === false ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/_jsx__default["default"](PopoverArrow.PopoverArrow, {
-        arrowElementRef: setArrowElement,
-        style: arrowStyle,
-        placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: setArrowElement,
-        style: arrowStyle
-      })]
-    }) : null]
-  }), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
-  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPopoverContentWrapper, _objectSpread(_objectSpread({
-    zIndex: zIndex,
-    ref: setPopperElement,
-    style: popperStyles
-  }, popperAttributes), {}, {
-    children: /*#__PURE__*/_jsx__default["default"](styled.StyledAnimatedPopper, {
-      showPopover: showPopover,
-      animationDuration: animationDuration,
-      withoutAnimation: withoutAnimation,
-      onAnimationEnd: checkAnimationStatus
-    }, void 0, popperContent)
-  }));
-};
-
-exports.PopoverContent = PopoverContent;

package/cjs/config/useConfigDSPopperjs.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var react = require('react');
-var reactPopper = require('react-popper');
-var useConfiguredMergedProps = require('./useConfiguredMergedProps.js');
-var useOnClickOutside = require('../utils/hooks/useOnClickOutside.js');
-
-const useConfigDSPopperjs = appProps => {
-  const [popperElement, setPopperElement] = react.useState(null);
-  const [arrowElement, setArrowElement] = react.useState(null);
-  const [isAnimating, setIsAnimating] = react.useState(false);
-  const props = useConfiguredMergedProps.useConfiguredMergedProps({
-    props: appProps,
-    arrowElement
-  });
-  const {
-    referenceElement,
-    closeContextMenu,
-    onClickOutside,
-    modifiers,
-    startPlacementPreference
-  } = props;
-  const popperExtraOpts = react.useMemo(() => ({
-    placement: startPlacementPreference,
-    modifiers
-  }), [modifiers, startPlacementPreference]);
-  const popoverHelper = reactPopper.usePopper(referenceElement, popperElement, popperExtraOpts);
-  const {
-    showPopover,
-    withoutAnimation
-  } = props;
-  react.useEffect(() => {
-    if (showPopover && !withoutAnimation) {
-      setIsAnimating(true);
-    }
-  }, [showPopover, withoutAnimation]);
-  useOnClickOutside.useOnClickOutside(popperElement, e => {
-    var _referenceElement$con;
-
-    if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target))) {
-      onClickOutside(e);
-      closeContextMenu();
-    }
-  });
-  return react.useMemo(() => ({
-    props,
-    popperElement,
-    setPopperElement,
-    arrowElement,
-    setArrowElement,
-    popoverHelper,
-    isAnimating,
-    setIsAnimating
-  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
-};
-
-exports.useConfigDSPopperjs = useConfigDSPopperjs;

package/cjs/config/useConfiguredDefaultModifiers.js

@@ -1,70 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-
-const useConfiguredDefaultModifiers = _ref => {
-  let {
-    props,
-    arrowElement
-  } = _ref;
-  // we destructure explicit app definitions before merge
-  const {
-    boundaryElement: explicitAppBoundaryElement,
-    withoutArrow: explicitAppWithoutArrow = false,
-    placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],
-    customOffset: explictAppOffset = undefined
-  } = props; // to build default modifiers on top of it
-
-  const defaultModifiers = react.useMemo(() => {
-    const mod = [];
-    mod.push({
-      name: 'hide',
-      enabled: true
-    });
-    mod.push({
-      name: 'flip',
-      options: {
-        fallbackPlacements: explicitPlacementOrderPreference
-      }
-    }); // we apply an offset if the app defines one or if the app wants the arrow
-
-    if (!explicitAppWithoutArrow || explictAppOffset) {
-      const defaultOffset = explictAppOffset || [0, 14];
-      mod.push({
-        name: 'offset',
-        enabled: true,
-        options: {
-          offset: defaultOffset
-        }
-      });
-    } // the app can opt for a "no arrow" implementation (we do so in datatable/calendar etc...)
-
-
-    if (!explicitAppWithoutArrow) mod.push({
-      name: 'arrow',
-      options: {
-        element: arrowElement,
-        padding: 18
-      }
-    }); // the app can define an explicit element to act as a boundary instead of popperjs default one
-
-    if (explicitAppBoundaryElement) mod.push({
-      name: 'preventOverflow',
-      options: {
-        boundary: explicitAppBoundaryElement
-      }
-    });
-    return mod;
-  }, [arrowElement, explicitAppBoundaryElement, explicitAppWithoutArrow, explicitPlacementOrderPreference, explictAppOffset]); // if the app pass custom modifier, we don't use "default modifiers"
-
-  const {
-    modifiers: explicitAppModifiers = defaultModifiers
-  } = props;
-  return react.useMemo(() => ({
-    modifiers: explicitAppModifiers
-  }), [explicitAppModifiers]);
-};
-
-exports.useConfiguredDefaultModifiers = useConfiguredDefaultModifiers;