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

package/esm/PopoverContent.js

@@ -0,0 +1,62 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useCallback, useMemo } from 'react';
+import { PopoverArrow } from './PopoverArrow.js';
+import { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const PopoverContent = _ref => {
+  let {
+    setPopperElement,
+    popperStyles,
+    popperAttributes,
+    children,
+    showPopover,
+    setArrowElement,
+    setIsAnimating,
+    arrowStyle,
+    withoutArrow,
+    withoutAnimation,
+    animationDuration,
+    zIndex
+  } = _ref;
+  const checkAnimationStatus = useCallback(() => {
+    if (!showPopover && !withoutAnimation) {
+      setIsAnimating(false);
+    }
+  }, [showPopover, withoutAnimation, setIsAnimating]);
+  const popperContent = useMemo(() => /*#__PURE__*/jsxs(Fragment, {
+    children: [children, withoutArrow === false ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(PopoverArrow, {
+        arrowElementRef: setArrowElement,
+        style: arrowStyle,
+        placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'
+      }), /*#__PURE__*/jsx("div", {
+        ref: setArrowElement,
+        style: arrowStyle
+      })]
+    }) : null]
+  }), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
+  return /*#__PURE__*/jsx(StyledPopoverContentWrapper, _objectSpread(_objectSpread({
+    zIndex: zIndex,
+    ref: setPopperElement,
+    style: popperStyles
+  }, popperAttributes), {}, {
+    children: /*#__PURE__*/_jsx(StyledAnimatedPopper, {
+      showPopover: showPopover,
+      animationDuration: animationDuration,
+      withoutAnimation: withoutAnimation,
+      onAnimationEnd: checkAnimationStatus
+    }, void 0, popperContent)
+  }));
+};
+
+export { PopoverContent };

package/esm/config/useConfigDSPopperjs.js

@@ -0,0 +1,56 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useMemo, useEffect } from 'react';
+import { usePopper } from 'react-popper';
+import { useConfiguredMergedProps } from './useConfiguredMergedProps.js';
+import { useOnClickOutside } from '../utils/hooks/useOnClickOutside.js';
+
+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 => {
+    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 useMemo(() => ({
+    props,
+    popperElement,
+    setPopperElement,
+    arrowElement,
+    setArrowElement,
+    popoverHelper,
+    isAnimating,
+    setIsAnimating
+  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
+};
+
+export { useConfigDSPopperjs };

package/esm/config/useConfiguredDefaultModifiers.js

@@ -0,0 +1,66 @@
+import { useMemo } from '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 = 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 useMemo(() => ({
+    modifiers: explicitAppModifiers
+  }), [explicitAppModifiers]);
+};
+
+export { useConfiguredDefaultModifiers };

package/esm/config/useConfiguredDefaultProps.js

@@ -0,0 +1,50 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo } from 'react';
+import { useConfiguredDefaultModifiers } from './useConfiguredDefaultModifiers.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const noop = () => {};
+
+const emptyObj = {};
+const useConfiguredDefaultProps = _ref => {
+  let {
+    props,
+    arrowElement
+  } = _ref;
+  // don't move this out of the hook or `document.body` will explode
+  const staticDefaultProps = useMemo(() => ({
+    referenceElement: null,
+    showPopover: false,
+    closeContextMenu: noop,
+    onClickOutside: noop,
+    withoutPortal: false,
+    withoutArrow: false,
+    withoutAnimation: false,
+    animationDuration: 100,
+    portalDOMContainer: document.body,
+    startPlacementPreference: 'top',
+    placementOrderPreference: ['top', 'bottom', 'left', 'right'],
+    zIndex: 1,
+    extraPopperStyles: emptyObj
+  }), []);
+  const {
+    modifiers: configuredModifiers
+  } = useConfiguredDefaultModifiers({
+    props,
+    arrowElement
+  });
+  const defaultProps = useMemo(() => _objectSpread(_objectSpread({}, staticDefaultProps), {}, {
+    modifiers: configuredModifiers
+  }), [configuredModifiers, staticDefaultProps]);
+  return defaultProps;
+};
+
+export { useConfiguredDefaultProps };

package/esm/config/useConfiguredMergedProps.js

@@ -0,0 +1,16 @@
+import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
+import { useConfiguredDefaultProps } from './useConfiguredDefaultProps.js';
+
+const useConfiguredMergedProps = _ref => {
+  let {
+    props,
+    arrowElement
+  } = _ref;
+  const defaultProps = useConfiguredDefaultProps({
+    props,
+    arrowElement
+  });
+  return useMemoMergePropsWithDefault(props, defaultProps);
+};
+
+export { useConfiguredMergedProps };

package/esm/index.d.js

@@ -0,0 +1 @@
+

package/esm/index.js

@@ -0,0 +1,74 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { describe } from 'react-desc';
+import { dspopperjsPropTypes } from './propTypes.js';
+import { PopoverContent } from './PopoverContent.js';
+import { useConfigDSPopperjs } from './config/useConfigDSPopperjs.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const 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__*/_jsx(PopoverContent, {
+    setPopperElement: setPopperElement,
+    popperStyles: _objectSpread(_objectSpread({}, styles.popper), extraPopperStyles),
+    popperAttributes: attributes.popper,
+    setArrowElement: setArrowElement,
+    arrowStyle: styles.arrow,
+    withoutArrow: withoutArrow,
+    withoutAnimation: withoutAnimation,
+    animationDuration: animationDuration,
+    zIndex: zIndex,
+    showPopover: showPopover,
+    setIsAnimating: setIsAnimating
+  }, void 0, 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__*/jsx(Fragment, {
+      children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Fragment, {
+        children: contentJSX
+      }), portalDOMContainer)
+    });
+  }
+
+  return null;
+};
+
+const DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');
+DSPopperJSWithSchema.propTypes = dspopperjsPropTypes;
+
+export { DSPopperJS, DSPopperJSWithSchema, DSPopperJS as default };

package/esm/propTypes.js

@@ -0,0 +1,81 @@
+import { PropTypes } from 'react-desc';
+
+const dspopperjsPropTypes = {
+  /**
+   * React ref to popperjs referenceElement
+   */
+  referenceElement: PropTypes.element.description('popperjs DOM referenceElement').isRequired,
+
+  /**
+   * Wheter or not to show the popper content
+   */
+  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,
+
+  /**
+   * Callback to close the context menu, used for "on click outside",
+   *  if not provided click outside will not trigger anything
+   */
+  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('() => {}'),
+
+  /**
+   *  Wheter or not the popper content should appear in a DOM portal or not
+   */
+  withoutPortal: PropTypes.bool.description('Whether or not the popper content should appear in a DOM portal or not').defaultValue(true),
+
+  /**
+   *  Wheter or not the popper context menu should print the arrow
+   */
+  withoutArrow: PropTypes.bool.description('Whether or not the popper context menu should print the arrow').defaultValue(false),
+
+  /**
+   *  Whether or not the popper context menu should be animated
+   */
+  withoutAnimation: PropTypes.bool.description('Whether or not the popper context menu should be animated').defaultValue(false),
+
+  /**
+   *  Popper context menus Animation duration in ms
+   */
+  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),
+
+  /**
+   *  Bounding element to calculate upon, defaults to it is "clippingParents",
+   *   which are the scrolling containers that may cause the element to be partially or fully cut off.
+   */
+  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(undefined),
+
+  /**
+   *  When using portal, the container in which to append the DOM content, defaults to document body
+   */
+  portalDOMContainer: PropTypes.element.description('When using portal, the container in which to append the DOM content, defaults to document body').defaultValue(undefined),
+
+  /**
+   *  start placement preferences, as per popperjs placement option
+   */
+  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'"),
+
+  /**
+   *  Array of placement preferences, as per popperjs "flip" placement option
+   */
+  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']"),
+
+  /**
+   *  popperjs content z-index
+   */
+  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),
+
+  /**
+   *  placement offset array
+   */
+  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),
+
+  /**
+   *  modifiers array for full-custom popper-js override
+   *  https://popper.js.org/docs/v2/modifiers/
+   */
+  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(undefined)
+};
+
+export { dspopperjsPropTypes };

package/esm/styled.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { kfrm, css } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3;
+const showAnimation = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
+const hideAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
+const StyledPopoverContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1giz5kx-0"
+})(["z-index:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex;
+});
+const StyledAnimatedPopper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1giz5kx-1"
+})(["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);", ""], _ref2 => {
+  let {
+    showPopover,
+    animationDuration,
+    withoutAnimation
+  } = _ref2;
+  return !withoutAnimation && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " ", "ms ease-in;\n    "])), showPopover ? showAnimation : hideAnimation, animationDuration);
+});
+
+export { StyledAnimatedPopper, StyledPopoverContentWrapper };

package/esm/utils/hooks/useOnClickOutside.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+function useOnClickOutside(ref, cb) {
+  useEffect(() => {
+    const listener = event => {
+      var _ref$contains;
+
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref || ref !== null && ref !== void 0 && (_ref$contains = ref.contains) !== null && _ref$contains !== void 0 && _ref$contains.call(ref, 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 };

package/package.json

@@ -1,54 +1,51 @@
 {
   "name": "@elliemae/ds-popperjs",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper JS Wrapper",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./utils/hooks/useOnClickOutside": {
-      "import": "./dist/esm/utils/hooks/useOnClickOutside.js",
-      "require": "./dist/cjs/utils/hooks/useOnClickOutside.js"
+      "import": "./esm/utils/hooks/useOnClickOutside.js",
+      "require": "./cjs/utils/hooks/useOnClickOutside.js"
     },
     "./styled": {
-      "import": "./dist/esm/styled.js",
-      "require": "./dist/cjs/styled.js"
+      "import": "./esm/styled.js",
+      "require": "./cjs/styled.js"
     },
     "./propTypes": {
-      "import": "./dist/esm/propTypes.js",
-      "require": "./dist/cjs/propTypes.js"
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
     "./PopoverContent": {
-      "import": "./dist/esm/PopoverContent.js",
-      "require": "./dist/cjs/PopoverContent.js"
+      "import": "./esm/PopoverContent.js",
+      "require": "./cjs/PopoverContent.js"
     },
     "./PopoverArrow": {
-      "import": "./dist/esm/PopoverArrow.js",
-      "require": "./dist/cjs/PopoverArrow.js"
+      "import": "./esm/PopoverArrow.js",
+      "require": "./cjs/PopoverArrow.js"
     },
     "./config/useConfiguredMergedProps": {
-      "import": "./dist/esm/config/useConfiguredMergedProps.js",
-      "require": "./dist/cjs/config/useConfiguredMergedProps.js"
+      "import": "./esm/config/useConfiguredMergedProps.js",
+      "require": "./cjs/config/useConfiguredMergedProps.js"
     },
     "./config/useConfiguredDefaultProps": {
-      "import": "./dist/esm/config/useConfiguredDefaultProps.js",
-      "require": "./dist/cjs/config/useConfiguredDefaultProps.js"
+      "import": "./esm/config/useConfiguredDefaultProps.js",
+      "require": "./cjs/config/useConfiguredDefaultProps.js"
     },
     "./config/useConfiguredDefaultModifiers": {
-      "import": "./dist/esm/config/useConfiguredDefaultModifiers.js",
-      "require": "./dist/cjs/config/useConfiguredDefaultModifiers.js"
+      "import": "./esm/config/useConfiguredDefaultModifiers.js",
+      "require": "./cjs/config/useConfiguredDefaultModifiers.js"
     },
     "./config/useConfigDSPopperjs": {
-      "import": "./dist/esm/config/useConfigDSPopperjs.js",
-      "require": "./dist/cjs/config/useConfigDSPopperjs.js"
+      "import": "./esm/config/useConfigDSPopperjs.js",
+      "require": "./cjs/config/useConfigDSPopperjs.js"
     }
   },
   "sideEffects": [
@@ -60,13 +57,19 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.3.0-alpha.8",
-    "@elliemae/ds-system": "2.3.0-alpha.8",
+    "@elliemae/ds-props-helpers": "2.3.0-next.2",
+    "@elliemae/ds-system": "2.3.0-next.1",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5"
   },
@@ -80,12 +83,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/PopoverArrow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PopoverArrowT {
+    placement: string;
+    style: React.CSSProperties;
+    arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement>>;
+}
+export declare const PopoverArrow: ({ placement, style, arrowElementRef }: PopoverArrowT) => React.ReactElement;
+export {};

package/types/PopoverContent.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { PopoverContentPropsT } from './index.d';
+export declare const PopoverContent: ({ setPopperElement, popperStyles, popperAttributes, children, showPopover, setArrowElement, setIsAnimating, arrowStyle, withoutArrow, withoutAnimation, animationDuration, zIndex, }: PopoverContentPropsT) => JSX.Element;

package/types/config/useConfigDSPopperjs.d.ts

@@ -0,0 +1,2 @@
+import type { useDSPopperjsPropsArgT, useDSPopperjsRT } from '../index.d';
+export declare const useConfigDSPopperjs: (appProps: useDSPopperjsPropsArgT) => useDSPopperjsRT;

package/types/config/useConfiguredDefaultModifiers.d.ts

@@ -0,0 +1,6 @@
+export declare const useConfiguredDefaultModifiers: ({ props, arrowElement }: {
+    props: any;
+    arrowElement: any;
+}) => {
+    modifiers: any;
+};

package/types/config/useConfiguredDefaultProps.d.ts

@@ -0,0 +1,19 @@
+export declare const useConfiguredDefaultProps: ({ props, arrowElement }: {
+    props: any;
+    arrowElement: any;
+}) => {
+    modifiers: any;
+    referenceElement: null;
+    showPopover: boolean;
+    closeContextMenu: () => void;
+    onClickOutside: () => void;
+    withoutPortal: boolean;
+    withoutArrow: boolean;
+    withoutAnimation: boolean;
+    animationDuration: number;
+    portalDOMContainer: HTMLElement;
+    startPlacementPreference: string;
+    placementOrderPreference: string[];
+    zIndex: number;
+    extraPopperStyles: {};
+};

package/types/config/useConfiguredMergedProps.d.ts

@@ -0,0 +1,19 @@
+export declare const useConfiguredMergedProps: ({ props, arrowElement }: {
+    props: any;
+    arrowElement: any;
+}) => {
+    modifiers: any;
+    referenceElement: null;
+    showPopover: boolean;
+    closeContextMenu: () => void;
+    onClickOutside: () => void;
+    withoutPortal: boolean;
+    withoutArrow: boolean;
+    withoutAnimation: boolean;
+    animationDuration: number;
+    portalDOMContainer: HTMLElement;
+    startPlacementPreference: string;
+    placementOrderPreference: string[];
+    zIndex: number;
+    extraPopperStyles: {};
+};