@elliemae/ds-popperjs 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/PopoverArrow.js

@@ -1,62 +1,45 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+var _svg;
 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
+const StyledArrow = /*#__PURE__*/styled.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__*/jsx(StyledArrow, {
+    "data-placement": placement,
+    style: style,
+    ref: arrowElementRef,
+    "data-testid": "ds-tooltip-arrow",
+    children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
+      viewBox: "0 0 30 30"
+    }, void 0, /*#__PURE__*/_jsx("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("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");
 };
-//# sourceMappingURL=PopoverArrow.js.map
+
+export { PopoverArrow };

package/esm/PopoverContent.js

@@ -1,47 +1,62 @@
-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
-}) => {
+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__ */ 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, {
-    zIndex,
+  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
-  }, /* @__PURE__ */ React2.createElement(StyledAnimatedPopper, {
-    showPopover,
-    animationDuration,
-    withoutAnimation,
-    onAnimationEnd: checkAnimationStatus
-  }, popperContent));
-};
-export {
-  PopoverContent
+    style: popperStyles
+  }, popperAttributes), {}, {
+    children: /*#__PURE__*/_jsx(StyledAnimatedPopper, {
+      showPopover: showPopover,
+      animationDuration: animationDuration,
+      withoutAnimation: withoutAnimation,
+      onAnimationEnd: checkAnimationStatus
+    }, void 0, popperContent)
+  }));
 };
-//# sourceMappingURL=PopoverContent.js.map
+
+export { PopoverContent };

package/esm/config/useConfigDSPopperjs.js

@@ -1,24 +1,42 @@
-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) => {
+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 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;
+  const {
+    showPopover,
+    withoutAnimation
+  } = props;
   useEffect(() => {
     if (showPopover && !withoutAnimation) {
       setIsAnimating(true);
     }
   }, [showPopover, withoutAnimation]);
-  useOnClickOutside(popperElement, (e) => {
-    if (!referenceElement?.contains?.(e?.target)) {
+  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();
     }
@@ -34,7 +52,5 @@ const useConfigDSPopperjs = (appProps) => {
     setIsAnimating
   }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
 };
-export {
-  useConfigDSPopperjs
-};
-//# sourceMappingURL=useConfigDSPopperjs.js.map
+
+export { useConfigDSPopperjs };

package/esm/config/useConfiguredDefaultModifiers.js

@@ -1,60 +1,66 @@
-import * as React from "react";
-import { useMemo } from "react";
-const useConfiguredDefaultModifiers = ({ props, arrowElement }) => {
+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 = void 0
-  } = props;
+    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",
+      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",
+        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
-        }
-      });
+    } // 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
-  ]);
-  const { modifiers: explicitAppModifiers = defaultModifiers } = props;
+  }, [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
-};
-//# sourceMappingURL=useConfiguredDefaultModifiers.js.map
+
+export { useConfiguredDefaultModifiers };

package/esm/config/useConfiguredDefaultProps.js

@@ -1,10 +1,25 @@
-import * as React from "react";
-import { useMemo } from "react";
-import { useConfiguredDefaultModifiers } from "./useConfiguredDefaultModifiers";
-const noop = () => {
-};
+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 = ({ props, arrowElement }) => {
+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,
@@ -15,19 +30,21 @@ const useConfiguredDefaultProps = ({ props, arrowElement }) => {
     withoutAnimation: false,
     animationDuration: 100,
     portalDOMContainer: document.body,
-    startPlacementPreference: "top",
-    placementOrderPreference: ["top", "bottom", "left", "right"],
+    startPlacementPreference: 'top',
+    placementOrderPreference: ['top', 'bottom', 'left', 'right'],
     zIndex: 1,
     extraPopperStyles: emptyObj
   }), []);
-  const { modifiers: configuredModifiers } = useConfiguredDefaultModifiers({
+  const {
+    modifiers: configuredModifiers
+  } = useConfiguredDefaultModifiers({
     props,
     arrowElement
   });
-  const defaultProps = useMemo(() => ({ ...staticDefaultProps, modifiers: configuredModifiers }), [configuredModifiers, staticDefaultProps]);
+  const defaultProps = useMemo(() => _objectSpread(_objectSpread({}, staticDefaultProps), {}, {
+    modifiers: configuredModifiers
+  }), [configuredModifiers, staticDefaultProps]);
   return defaultProps;
 };
-export {
-  useConfiguredDefaultProps
-};
-//# sourceMappingURL=useConfiguredDefaultProps.js.map
+
+export { useConfiguredDefaultProps };

package/esm/config/useConfiguredMergedProps.js

@@ -1,11 +1,16 @@
-import * as React from "react";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
-import { useConfiguredDefaultProps } from "./useConfiguredDefaultProps";
-const useConfiguredMergedProps = ({ props, arrowElement }) => {
-  const defaultProps = useConfiguredDefaultProps({ props, arrowElement });
+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
-};
-//# sourceMappingURL=useConfiguredMergedProps.js.map
+
+export { useConfiguredMergedProps };

package/esm/index.d.js

@@ -1,2 +1 @@
-import * as React from "react";
-//# sourceMappingURL=index.d.js.map
+

package/esm/index.js

@@ -1,11 +1,23 @@
-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) => {
+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,
@@ -23,50 +35,40 @@ const DSPopperJS = (props) => {
     popoverHelper,
     isAnimating
   } = useConfigDSPopperjs(props);
-  const { children } = props;
-  const { styles, attributes } = popoverHelper;
-  const contentJSX = useMemo(() => /* @__PURE__ */ React2.createElement(PopoverContent, {
-    setPopperElement,
-    popperStyles: { ...styles.popper, ...extraPopperStyles },
+  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: 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
-  ]);
+    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__ */ React2.createElement(React2.Fragment, null, createPortal(/* @__PURE__ */ React2.createElement(React2.Fragment, null, contentJSX), portalDOMContainer));
+    if (withoutPortal === true) return contentJSX;
+    if (withoutPortal === false) return /*#__PURE__*/jsx(Fragment, {
+      children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Fragment, {
+        children: contentJSX
+      }), portalDOMContainer)
+    });
   }
+
   return null;
 };
-DSPopperJS.propTypes = dspopperjsPropTypes;
-const DSPopperJSWithSchema = describe(DSPopperJS).description("A dimsum custom styling wrapper on top of popperjs");
+
+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
+
+export { DSPopperJS, DSPopperJSWithSchema, DSPopperJS as default };