@elliemae/ds-popperjs 2.3.1 → 3.0.0-alpha.3

package/dist/cjs/index.js

@@ -0,0 +1,115 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  DSPopperJS: () => DSPopperJS,
+  DSPopperJSWithSchema: () => DSPopperJSWithSchema,
+  default: () => src_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_react_desc = require("react-desc");
+var import_propTypes = require("./propTypes");
+var import_PopoverContent = require("./PopoverContent");
+var import_useConfigDSPopperjs = require("./config/useConfigDSPopperjs");
+const DSPopperJS = (props) => {
+  const {
+    props: {
+      showPopover,
+      withoutAnimation,
+      animationDuration,
+      withoutPortal,
+      withoutArrow,
+      portalDOMContainer,
+      zIndex,
+      extraPopperStyles
+    },
+    setPopperElement,
+    setArrowElement,
+    setIsAnimating,
+    popoverHelper,
+    isAnimating
+  } = (0, import_useConfigDSPopperjs.useConfigDSPopperjs)(props);
+  const { children } = props;
+  const { styles, attributes } = popoverHelper;
+  const contentJSX = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_PopoverContent.PopoverContent, {
+    setPopperElement,
+    popperStyles: __spreadValues(__spreadValues({}, 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__ */ import_react.default.createElement(import_react.default.Fragment, null, (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, contentJSX), portalDOMContainer));
+  }
+  return null;
+};
+DSPopperJS.propTypes = import_propTypes.dspopperjsPropTypes;
+const DSPopperJSWithSchema = (0, import_react_desc.describe)(DSPopperJS).description("A dimsum custom styling wrapper on top of popperjs");
+DSPopperJSWithSchema.propTypes = import_propTypes.dspopperjsPropTypes;
+var src_default = DSPopperJS;
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,uBAA6B;AAC7B,wBAAyB;AACzB,uBAAoC;AACpC,4BAA+B;AAC/B,iCAAoC;AAGpC,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,oDAAoB;AACxB,QAAM,EAAE,aAAa;AACrB,QAAM,EAAE,QAAQ,eAAe;AAC/B,QAAM,aAAa,0BACjB,MACE,mDAAC,sCAAD;AAAA,IACE;AAAA,IACA,cAAc,kCAAK,OAAO,SAAW;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,wFAAG,mCAAa,wFAAG,aAAgB;AAAA;AAEzE,SAAO;AAAA;AAGT,WAAW,YAAY;AAEvB,MAAM,uBAAuB,gCAAS,YAAY,YAAY;AAC9D,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
+  "names": []
+}

package/dist/cjs/propTypes.js

@@ -0,0 +1,80 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var propTypes_exports = {};
+__export(propTypes_exports, {
+  dspopperjsPropTypes: () => dspopperjsPropTypes
+});
+var React = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+const dspopperjsPropTypes = {
+  referenceElement: import_react_desc.PropTypes.element.description("popperjs DOM referenceElement").isRequired,
+  showPopover: import_react_desc.PropTypes.bool.description("whether or not to show the popper content").isRequired,
+  closeContextMenu: import_react_desc.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: import_react_desc.PropTypes.bool.description("Whether or not the popper content should appear in a DOM portal or not").defaultValue(true),
+  withoutArrow: import_react_desc.PropTypes.bool.description("Whether or not the popper context menu should print the arrow").defaultValue(false),
+  withoutAnimation: import_react_desc.PropTypes.bool.description("Whether or not the popper context menu should be animated").defaultValue(false),
+  animationDuration: import_react_desc.PropTypes.number.description("Popper context menus Animation duration in ms").defaultValue(100),
+  boundaryElement: import_react_desc.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: import_react_desc.PropTypes.element.description("When using portal, the container in which to append the DOM content, defaults to document body").defaultValue(void 0),
+  startPlacementPreference: import_react_desc.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: import_react_desc.PropTypes.arrayOf(import_react_desc.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: import_react_desc.PropTypes.number.description("popperjs content z-index").defaultValue(1),
+  customOffset: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.number).description("placement offset array").defaultValue(1),
+  modifiers: import_react_desc.PropTypes.array.description("modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/").defaultValue(1),
+  extraPopperStyles: import_react_desc.PropTypes.object.description("Extra object styles to attach to the popper element").defaultValue({}),
+  onClickOutside: import_react_desc.PropTypes.func.description("Callback triggered when clicking outside the popper").defaultValue(() => null),
+  children: import_react_desc.PropTypes.node.description("The content of the popper").defaultValue(void 0)
+};
+module.exports = __toCommonJS(propTypes_exports);
+//# sourceMappingURL=propTypes.js.map

package/dist/cjs/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,sBAAsB;AAAA,EAIjC,kBAAkB,4BAAU,QAAQ,YAAY,iCAAiC;AAAA,EAIjF,aAAa,4BAAU,KAAK,YAAY,6CAA6C;AAAA,EAKrF,kBAAkB,4BAAU,KACzB,YACC,4HAGD,aAAa;AAAA,EAIhB,eAAe,4BAAU,KACtB,YAAY,0EACZ,aAAa;AAAA,EAIhB,cAAc,4BAAU,KACrB,YAAY,iEACZ,aAAa;AAAA,EAIhB,kBAAkB,4BAAU,KACzB,YAAY,6DACZ,aAAa;AAAA,EAIhB,mBAAmB,4BAAU,OAAO,YAAY,iDAAiD,aAAa;AAAA,EAK9G,iBAAiB,4BAAU,QACxB,YACC,gKAGD,aAAa;AAAA,EAIhB,oBAAoB,4BAAU,QAC3B,YAAY,kGACZ,aAAa;AAAA,EAIhB,0BAA0B,4BAAU,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,4BAAU,QAClC,4BAAU,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,4BAAU,OAAO,YAAY,4BAA4B,aAAa;AAAA,EAI9E,cAAc,4BAAU,QAAQ,4BAAU,QAAQ,YAAY,0BAA0B,aAAa;AAAA,EAKrG,WAAW,4BAAU,MAClB,YAAY,gGACZ,aAAa;AAAA,EAChB,mBAAmB,4BAAU,OAC1B,YAAY,uDACZ,aAAa;AAAA,EAChB,gBAAgB,4BAAU,KACvB,YAAY,uDACZ,aAAa,MAAM;AAAA,EACtB,UAAU,4BAAU,KAAK,YAAY,6BAA6B,aAAa;AAAA;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -0,0 +1,71 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledAnimatedPopper: () => StyledAnimatedPopper,
+  StyledPopoverContentWrapper: () => StyledPopoverContentWrapper
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_system = require("@elliemae/ds-system");
+const showAnimation = import_ds_system.kfrm`
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+      visibility: visible;
+    }
+`;
+const hideAnimation = import_ds_system.kfrm`
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+      visibility: hidden;
+    }
+`;
+const StyledPopoverContentWrapper = import_styled_components.default.div`
+  z-index: ${({ zIndex }) => zIndex};
+`;
+const StyledAnimatedPopper = import_styled_components.default.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 && import_ds_system.css`
+      animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;
+    `}
+`;
+module.exports = __toCommonJS(styled_exports);
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAA0B;AAY1B,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,iCAAO;AAAA,aACrC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,uBAAuB,iCAAO;AAAA;AAAA;AAAA,IAGvC,CAAC,EAAE,aAAa,mBAAmB,uBACnC,CAAC,oBACD;AAAA,mBACe,cAAc,gBAAgB,iBAAiB;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,51 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useOnClickOutside_exports = {};
+__export(useOnClickOutside_exports, {
+  useOnClickOutside: () => useOnClickOutside
+});
+var React = __toESM(require("react"));
+var import_react = require("react");
+function useOnClickOutside(ref, cb) {
+  (0, import_react.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]);
+}
+module.exports = __toCommonJS(useOnClickOutside_exports);
+//# sourceMappingURL=useOnClickOutside.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/utils/hooks/useOnClickOutside.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiC;AAG1B,2BAAmE,KAAQ,IAAe;AAC/F,8BAAU,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/dist/esm/PopoverArrow.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import React2 from "react";
+import styled from "styled-components";
+const arrowWidth = 18;
+const arrowHeight = 18;
+const StyledArrow = styled.div`
+  position: absolute;
+  width: ${arrowWidth}px;
+  height: ${arrowHeight}px;
+  pointer-events: none;
+  background-color: transparent;
+  & .stroke {
+    fill: ${({ theme }) => theme.colors.neutral["500"]};
+    fill-opacity: 0.4;
+  }
+  & .fill {
+    fill: ${({ theme }) => theme.colors.neutral["000"]};
+  }
+
+  &[data-placement^='top'] {
+    svg {
+      transform: rotateZ(180deg);
+    }
+    bottom: -${arrowHeight}px;
+  }
+  &[data-placement^='right'] {
+    svg {
+      transform: rotateZ(-90deg);
+    }
+    left: -${arrowWidth}px;
+  }
+  &[data-placement^='bottom'] {
+    top: -${arrowHeight}px;
+  }
+  &[data-placement^='left'] {
+    svg {
+      transform: rotateZ(90deg);
+    }
+    right: -${arrowWidth}px;
+  }
+  margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
+  margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
+`;
+const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ React2.createElement(StyledArrow, {
+  key: "popper-arrow",
+  "data-placement": placement,
+  style,
+  ref: arrowElementRef,
+  "data-testid": "ds-tooltip-arrow"
+}, /* @__PURE__ */ React2.createElement("svg", {
+  viewBox: "0 0 30 30"
+}, /* @__PURE__ */ React2.createElement("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\n        C26.7,29,24.6,28.1,23.7,27.1z"
+}), /* @__PURE__ */ React2.createElement("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"
+})));
+export {
+  PopoverArrow
+};
+//# sourceMappingURL=PopoverArrow.js.map

package/dist/esm/PopoverArrow.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverArrow.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\ninterface PopoverArrowT {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div`\n  position: absolute;\n  width: ${arrowWidth}px;\n  height: ${arrowHeight}px;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: ${({ theme }) => theme.colors.neutral['500']};\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight}px;\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowWidth}px;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowHeight}px;\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowWidth}px;\n  }\n  margin-left: ${(props) =>\n    props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n      ? `-${arrowWidth / 2}px;`\n      : '0;'};\n  margin-top: ${(props) =>\n    props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n      ? `-${arrowHeight / 2}px;`\n      : '0;'};\n`;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef }: PopoverArrowT): React.ReactElement => (\n  <StyledArrow\n    key=\"popper-arrow\"\n    data-placement={placement}\n    style={style}\n    ref={arrowElementRef}\n    data-testid=\"ds-tooltip-arrow\"\n  >\n    <svg viewBox=\"0 0 30 30\">\n      <path\n        className=\"stroke\"\n        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\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n      />\n      <path\n        className=\"fill\"\n        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\"\n      />\n    </svg>\n  </StyledArrow>\n);\n"],
+  "mappings": "AAAA;ACAA;AACA;AAMA,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,OAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA,YAIA,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAIpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,UAAU,MAAM,kBAAkB,WAAW,YAC5E,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,WAAW,MAAM,kBAAkB,WAAW,WAC7E,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,sBAC/C,qCAAC,aAAD;AAAA,EACE,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,qCAAC,OAAD;AAAA,EAAK,SAAQ;AAAA,GACX,qCAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA,IAGJ,qCAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA;",
+  "names": []
+}

package/dist/esm/PopoverContent.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2, { useCallback, useMemo } from "react";
+import { PopoverArrow } from "./PopoverArrow";
+import { StyledPopoverContentWrapper, StyledAnimatedPopper } from "./styled";
+const PopoverContent = ({
+  setPopperElement,
+  popperStyles,
+  popperAttributes,
+  children,
+  showPopover,
+  setArrowElement,
+  setIsAnimating,
+  arrowStyle,
+  withoutArrow,
+  withoutAnimation,
+  animationDuration,
+  zIndex
+}) => {
+  const checkAnimationStatus = useCallback(() => {
+    if (!showPopover && !withoutAnimation) {
+      setIsAnimating(false);
+    }
+  }, [showPopover, withoutAnimation, setIsAnimating]);
+  const popperContent = useMemo(() => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children, withoutArrow === false ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PopoverArrow, {
+    arrowElementRef: setArrowElement,
+    style: arrowStyle,
+    placement: popperAttributes ? popperAttributes["data-popper-placement"] : "bottom"
+  }), /* @__PURE__ */ React2.createElement("div", {
+    ref: setArrowElement,
+    style: arrowStyle
+  })) : null), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
+  return /* @__PURE__ */ React2.createElement(StyledPopoverContentWrapper, __spreadValues({
+    zIndex,
+    ref: setPopperElement,
+    style: popperStyles
+  }, popperAttributes), /* @__PURE__ */ React2.createElement(StyledAnimatedPopper, {
+    showPopover,
+    animationDuration,
+    withoutAnimation,
+    onAnimationEnd: checkAnimationStatus
+  }, popperContent));
+};
+export {
+  PopoverContent
+};
+//# sourceMappingURL=PopoverContent.js.map

package/dist/esm/PopoverContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { PopoverArrow } from './PopoverArrow';\nimport type { PopoverContentPropsT } from './index.d';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\n\nexport const PopoverContent = ({\n  setPopperElement,\n  popperStyles,\n  popperAttributes,\n  children,\n  showPopover,\n  setArrowElement,\n  setIsAnimating,\n  arrowStyle,\n  withoutArrow,\n  withoutAnimation,\n  animationDuration,\n  zIndex,\n}: PopoverContentPropsT): JSX.Element => {\n  const checkAnimationStatus = useCallback(() => {\n    if (!showPopover && !withoutAnimation) {\n      setIsAnimating(false);\n    }\n  }, [showPopover, withoutAnimation, setIsAnimating]);\n\n  const popperContent = useMemo(\n    () => (\n      <>\n        {children}\n        {withoutArrow === false ? (\n          <>\n            <PopoverArrow\n              arrowElementRef={setArrowElement}\n              style={arrowStyle}\n              placement={popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'}\n            />\n            <div ref={setArrowElement} style={arrowStyle} />\n          </>\n        ) : null}\n      </>\n    ),\n    [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement],\n  );\n  return (\n    <StyledPopoverContentWrapper zIndex={zIndex} ref={setPopperElement} style={popperStyles} {...popperAttributes}>\n      <StyledAnimatedPopper\n        showPopover={showPopover}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        onAnimationEnd={checkAnimationStatus}\n      >\n        {popperContent}\n      </StyledAnimatedPopper>\n    </StyledPopoverContentWrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACuC;AACvC,QAAM,uBAAuB,YAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe;AAAA;AAAA,KAEhB,CAAC,aAAa,kBAAkB;AAEnC,QAAM,gBAAgB,QACpB,MACE,4DACG,UACA,iBAAiB,QAChB,4DACE,qCAAC,cAAD;AAAA,IACE,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,MAE5E,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAiB,OAAO;AAAA,QAElC,OAGR,CAAC,UAAU,cAAc,YAAY,kBAAkB;AAEzD,SACE,qCAAC,6BAAD;AAAA,IAA6B;AAAA,IAAgB,KAAK;AAAA,IAAkB,OAAO;AAAA,KAAkB,mBAC3F,qCAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf;AAAA;",
+  "names": []
+}

package/dist/esm/config/useConfigDSPopperjs.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { useMemo, useState, useEffect } from "react";
+import { usePopper } from "react-popper";
+import { useConfiguredMergedProps } from "./useConfiguredMergedProps";
+import { useOnClickOutside } from "../utils/hooks/useOnClickOutside";
+const useConfigDSPopperjs = (appProps) => {
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const props = useConfiguredMergedProps({ props: appProps, arrowElement });
+  const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;
+  const popperExtraOpts = useMemo(() => ({ placement: startPlacementPreference, modifiers }), [modifiers, startPlacementPreference]);
+  const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);
+  const { showPopover, withoutAnimation } = props;
+  useEffect(() => {
+    if (showPopover && !withoutAnimation) {
+      setIsAnimating(true);
+    }
+  }, [showPopover, withoutAnimation]);
+  useOnClickOutside(popperElement, (e) => {
+    if (!referenceElement?.contains?.(e?.target)) {
+      onClickOutside(e);
+      closeContextMenu();
+    }
+  });
+  return useMemo(() => ({
+    props,
+    popperElement,
+    setPopperElement,
+    arrowElement,
+    setArrowElement,
+    popoverHelper,
+    isAnimating,
+    setIsAnimating
+  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
+};
+export {
+  useConfigDSPopperjs
+};
+//# sourceMappingURL=useConfigDSPopperjs.js.map

package/dist/esm/config/useConfigDSPopperjs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfigDSPopperjs.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useEffect } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useConfiguredMergedProps } from './useConfiguredMergedProps';\nimport type { useDSPopperjsPropsArgT, useDSPopperjsRT } from '../index.d';\n\nimport { useOnClickOutside } from '../utils/hooks/useOnClickOutside';\n\nexport const useConfigDSPopperjs = (appProps: useDSPopperjsPropsArgT): useDSPopperjsRT => {\n  const [popperElement, setPopperElement] = useState(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n\n  const props = useConfiguredMergedProps({ props: appProps, arrowElement });\n  const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;\n  const popperExtraOpts = useMemo(\n    () => ({ placement: startPlacementPreference, modifiers }),\n    [modifiers, startPlacementPreference],\n  );\n\n  const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);\n\n  const { showPopover, withoutAnimation } = props;\n\n  useEffect(() => {\n    if (showPopover && !withoutAnimation) {\n      setIsAnimating(true);\n    }\n  }, [showPopover, withoutAnimation]);\n\n  useOnClickOutside(popperElement, (e) => {\n    if (!referenceElement?.contains?.(e?.target)) {\n      onClickOutside(e);\n      closeContextMenu();\n    }\n  });\n\n  return useMemo(\n    () => ({\n      props,\n      popperElement,\n      setPopperElement,\n      arrowElement,\n      setArrowElement,\n      popoverHelper,\n      isAnimating,\n      setIsAnimating,\n    }),\n    [arrowElement, popoverHelper, popperElement, isAnimating, props],\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGA;AAEO,MAAM,sBAAsB,CAAC,aAAsD;AACxF,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,CAAC,aAAa,kBAAkB,SAAkB;AAExD,QAAM,QAAQ,yBAAyB,EAAE,OAAO,UAAU;AAC1D,QAAM,EAAE,kBAAkB,kBAAkB,gBAAgB,WAAW,6BAA6B;AACpG,QAAM,kBAAkB,QACtB,MAAO,GAAE,WAAW,0BAA0B,cAC9C,CAAC,WAAW;AAGd,QAAM,gBAAgB,UAAU,kBAAkB,eAAe;AAEjE,QAAM,EAAE,aAAa,qBAAqB;AAE1C,YAAU,MAAM;AACd,QAAI,eAAe,CAAC,kBAAkB;AACpC,qBAAe;AAAA;AAAA,KAEhB,CAAC,aAAa;AAEjB,oBAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,kBAAkB,WAAW,GAAG,SAAS;AAC5C,qBAAe;AACf;AAAA;AAAA;AAIJ,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,cAAc,eAAe,eAAe,aAAa;AAAA;",
+  "names": []
+}

package/dist/esm/config/useConfiguredDefaultModifiers.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { useMemo } from "react";
+const useConfiguredDefaultModifiers = ({ props, arrowElement }) => {
+  const {
+    boundaryElement: explicitAppBoundaryElement,
+    withoutArrow: explicitAppWithoutArrow = false,
+    placementOrderPreference: explicitPlacementOrderPreference = ["top", "bottom", "left", "right"],
+    customOffset: explictAppOffset = void 0
+  } = props;
+  const defaultModifiers = useMemo(() => {
+    const mod = [];
+    mod.push({ name: "hide", enabled: true });
+    mod.push({
+      name: "flip",
+      options: {
+        fallbackPlacements: explicitPlacementOrderPreference
+      }
+    });
+    if (!explicitAppWithoutArrow || explictAppOffset) {
+      const defaultOffset = explictAppOffset || [0, 14];
+      mod.push({
+        name: "offset",
+        enabled: true,
+        options: {
+          offset: defaultOffset
+        }
+      });
+    }
+    if (!explicitAppWithoutArrow)
+      mod.push({
+        name: "arrow",
+        options: {
+          element: arrowElement,
+          padding: 18
+        }
+      });
+    if (explicitAppBoundaryElement)
+      mod.push({
+        name: "preventOverflow",
+        options: {
+          boundary: explicitAppBoundaryElement
+        }
+      });
+    return mod;
+  }, [
+    arrowElement,
+    explicitAppBoundaryElement,
+    explicitAppWithoutArrow,
+    explicitPlacementOrderPreference,
+    explictAppOffset
+  ]);
+  const { modifiers: explicitAppModifiers = defaultModifiers } = props;
+  return useMemo(() => ({
+    modifiers: explicitAppModifiers
+  }), [explicitAppModifiers]);
+};
+export {
+  useConfiguredDefaultModifiers
+};
+//# sourceMappingURL=useConfiguredDefaultModifiers.js.map