@elliemae/ds-popperjs 2.0.0-next.9 → 2.0.0-rc.12

package/cjs/PopoverArrow.js

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

package/cjs/PopoverContent.js

@@ -2,51 +2,70 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var styled = require('styled-components');
+var react = require('react');
 var PopoverArrow = require('./PopoverArrow.js');
+var styled = require('./styled.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const StyledPopoverContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1gxm7np-0"
-})(["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);z-index:", ";"], ({
-  zIndex
-}) => zIndex);
-const PopoverContent = ({
-  setPopperElement,
-  popperStyles,
-  popperAttributes,
-  children,
-  setArrowElement,
-  arrowStyle,
-  withoutArrow,
-  zIndex
-}) => /*#__PURE__*/jsxRuntime.jsxs(StyledPopoverContentWrapper, _objectSpread(_objectSpread({
-  zIndex: zIndex,
-  ref: setPopperElement,
-  style: popperStyles
-}, popperAttributes), {}, {
-  children: [children, withoutArrow === false ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default["default"](PopoverArrow.PopoverArrow, {
-      arrowElementRef: setArrowElement,
-      style: arrowStyle,
-      placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: setArrowElement,
-      style: arrowStyle
-    })]
-  }) : null]
-}));
+const PopoverContent = _ref => {
+  let {
+    setPopperElement,
+    popperStyles,
+    popperAttributes,
+    children,
+    showPopover,
+    setArrowElement,
+    setIsAnimating,
+    arrowStyle,
+    withoutArrow,
+    withoutAnimation,
+    animationDuration,
+    zIndex
+  } = _ref;
+  const checkAnimationStatus = react.useCallback(() => {
+    if (!showPopover && !withoutAnimation) {
+      setIsAnimating(false);
+    }
+  }, [showPopover, withoutAnimation, setIsAnimating]);
+  const popperContent = react.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [children, withoutArrow === false ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/_jsx__default["default"](PopoverArrow.PopoverArrow, {
+        arrowElementRef: setArrowElement,
+        style: arrowStyle,
+        placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: setArrowElement,
+        style: arrowStyle
+      })]
+    }) : null]
+  }), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
+  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPopoverContentWrapper, _objectSpread(_objectSpread({
+    zIndex: zIndex,
+    ref: setPopperElement,
+    style: popperStyles
+  }, popperAttributes), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](styled.StyledAnimatedPopper, {
+      showPopover: showPopover,
+      animationDuration: animationDuration,
+      withoutAnimation: withoutAnimation,
+      onAnimationEnd: checkAnimationStatus
+    }, void 0, popperContent)
+  }));
+};
 
 exports.PopoverContent = PopoverContent;

package/cjs/config/useConfigDSPopperjs.js

@@ -11,6 +11,7 @@ var useOnClickOutside = require('../utils/hooks/useOnClickOutside.js');
 const useConfigDSPopperjs = appProps => {
   const [popperElement, setPopperElement] = react.useState(null);
   const [arrowElement, setArrowElement] = react.useState(null);
+  const [isAnimating, setIsAnimating] = react.useState(false);
   const props = useConfiguredMergedProps.useConfiguredMergedProps({
     props: appProps,
     arrowElement
@@ -18,6 +19,7 @@ const useConfigDSPopperjs = appProps => {
   const {
     referenceElement,
     closeContextMenu,
+    onClickOutside,
     modifiers,
     startPlacementPreference
   } = props;
@@ -26,10 +28,22 @@ const useConfigDSPopperjs = appProps => {
     modifiers
   }), [modifiers, startPlacementPreference]);
   const popoverHelper = reactPopper.usePopper(referenceElement, popperElement, popperExtraOpts);
+  const {
+    showPopover,
+    withoutAnimation
+  } = props;
+  react.useEffect(() => {
+    if (showPopover && !withoutAnimation) {
+      setIsAnimating(true);
+    }
+  }, [showPopover, withoutAnimation]);
   useOnClickOutside.useOnClickOutside(popperElement, e => {
     var _referenceElement$con;
 
-    if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target))) closeContextMenu();
+    if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target))) {
+      onClickOutside(e);
+      closeContextMenu();
+    }
   });
   return react.useMemo(() => ({
     props,
@@ -37,8 +51,10 @@ const useConfigDSPopperjs = appProps => {
     setPopperElement,
     arrowElement,
     setArrowElement,
-    popoverHelper
-  }), [arrowElement, popoverHelper, popperElement, props]);
+    popoverHelper,
+    isAnimating,
+    setIsAnimating
+  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
 };
 
 exports.useConfigDSPopperjs = useConfigDSPopperjs;

package/cjs/config/useConfiguredDefaultModifiers.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-const useConfiguredDefaultModifiers = ({
-  props,
-  arrowElement
-}) => {
+const useConfiguredDefaultModifiers = _ref => {
+  let {
+    props,
+    arrowElement
+  } = _ref;
   // we destructure explicit app definitions before merge
   const {
     boundaryElement: explicitAppBoundaryElement,

package/cjs/config/useConfiguredDefaultProps.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var react = require('react');
 var useConfiguredDefaultModifiers = require('./useConfiguredDefaultModifiers.js');
@@ -17,17 +22,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 = react.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'],

package/cjs/config/useConfiguredMergedProps.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var useConfiguredDefaultProps = require('./useConfiguredDefaultProps.js');
 
-const useConfiguredMergedProps = ({
-  props,
-  arrowElement
-}) => {
+const useConfiguredMergedProps = _ref => {
+  let {
+    props,
+    arrowElement
+  } = _ref;
   const defaultProps = useConfiguredDefaultProps.useConfiguredDefaultProps({
     props,
     arrowElement

package/cjs/index.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var react = require('react');
@@ -25,6 +30,8 @@ const DSPopperJS = props => {
   const {
     props: {
       showPopover,
+      withoutAnimation,
+      animationDuration,
       withoutPortal,
       withoutArrow,
       portalDOMContainer,
@@ -33,7 +40,9 @@ const DSPopperJS = props => {
     },
     setPopperElement,
     setArrowElement,
-    popoverHelper
+    setIsAnimating,
+    popoverHelper,
+    isAnimating
   } = useConfigDSPopperjs.useConfigDSPopperjs(props);
   const {
     children
@@ -49,10 +58,14 @@ const DSPopperJS = props => {
     setArrowElement: setArrowElement,
     arrowStyle: styles.arrow,
     withoutArrow: withoutArrow,
-    zIndex: zIndex
-  }, void 0, children), [attributes.popper, children, extraPopperStyles, setArrowElement, setPopperElement, styles.arrow, styles.popper, withoutArrow, zIndex]);
+    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) {
+  if (showPopover || isAnimating) {
     if (withoutPortal === true) return contentJSX;
     if (withoutPortal === false) return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {

package/cjs/propTypes.js

@@ -31,6 +31,16 @@ const dspopperjsPropTypes = {
    */
   withoutArrow: reactDesc.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: reactDesc.PropTypes.bool.description('Whether or not the popper context menu should be animated').defaultValue(false),
+
+  /**
+   *  Popper context menus Animation duration in ms
+   */
+  animationDuration: reactDesc.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.
@@ -67,7 +77,9 @@ const dspopperjsPropTypes = {
    *  https://popper.js.org/docs/v2/modifiers/
    */
   modifiers: reactDesc.PropTypes.array.description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/').defaultValue(1),
-  extraPopperStyles: reactDesc.PropTypes.object.description('Extra object styles to attach to the popper element').defaultValue({})
+  extraPopperStyles: reactDesc.PropTypes.object.description('Extra object styles to attach to the popper element').defaultValue({}),
+  onClickOutside: reactDesc.PropTypes.func.description('Callback triggered when clicking outside the popper').defaultValue(() => null),
+  children: reactDesc.PropTypes.node.description('The content of the popper').defaultValue(undefined)
 };
 
 exports.dspopperjsPropTypes = dspopperjsPropTypes;

package/cjs/styled.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2, _templateObject3;
+const showAnimation = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\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 = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\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__default["default"].div.withConfig({
+  componentId: "sc-1giz5kx-0"
+})(["z-index:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex;
+});
+const StyledAnimatedPopper = /*#__PURE__*/styled__default["default"].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 && dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n      animation: ", " ", "ms ease-in;\n    "])), showPopover ? showAnimation : hideAnimation, animationDuration);
+});
+
+exports.StyledAnimatedPopper = StyledAnimatedPopper;
+exports.StyledPopoverContentWrapper = StyledPopoverContentWrapper;

package/esm/PopoverArrow.js

@@ -4,31 +4,42 @@ import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
 var _svg;
+const arrowWidth = 18;
+const arrowHeight = 18;
 const StyledArrow = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-olcdf1-0"
-})(["position:absolute;width:18px;height:18px;pointer-events:none;background-color:transparent;& .stroke{fill:", ";fill-opacity:0.4;}& .fill{fill:", ";}&[data-placement^='top']{svg{transform:rotateZ(180deg);}bottom:-18px;}&[data-placement^='right']{svg{transform:rotateZ(-90deg);}left:-18px;}&[data-placement^='bottom']{top:-18px;}&[data-placement^='left']{svg{transform:rotateZ(90deg);}right:-18px;}"], ({
-  theme
-}) => theme.colors.neutral['500'], ({
-  theme
-}) => theme.colors.neutral['000']);
-const PopoverArrow = ({
-  placement,
-  style,
-  arrowElementRef
-}) => /*#__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");
+})(["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");
+};
 
 export { PopoverArrow };

package/esm/PopoverContent.js

@@ -1,42 +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 'react';
-import styled from 'styled-components';
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const StyledPopoverContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1gxm7np-0"
-})(["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);z-index:", ";"], ({
-  zIndex
-}) => zIndex);
-const PopoverContent = ({
-  setPopperElement,
-  popperStyles,
-  popperAttributes,
-  children,
-  setArrowElement,
-  arrowStyle,
-  withoutArrow,
-  zIndex
-}) => /*#__PURE__*/jsxs(StyledPopoverContentWrapper, _objectSpread(_objectSpread({
-  zIndex: zIndex,
-  ref: setPopperElement,
-  style: popperStyles
-}, popperAttributes), {}, {
-  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]
-}));
+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

@@ -1,5 +1,5 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { usePopper } from 'react-popper';
 import { useConfiguredMergedProps } from './useConfiguredMergedProps.js';
 import { useOnClickOutside } from '../utils/hooks/useOnClickOutside.js';
@@ -7,6 +7,7 @@ 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
@@ -14,6 +15,7 @@ const useConfigDSPopperjs = appProps => {
   const {
     referenceElement,
     closeContextMenu,
+    onClickOutside,
     modifiers,
     startPlacementPreference
   } = props;
@@ -22,10 +24,22 @@ const useConfigDSPopperjs = appProps => {
     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))) closeContextMenu();
+    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,
@@ -33,8 +47,10 @@ const useConfigDSPopperjs = appProps => {
     setPopperElement,
     arrowElement,
     setArrowElement,
-    popoverHelper
-  }), [arrowElement, popoverHelper, popperElement, props]);
+    popoverHelper,
+    isAnimating,
+    setIsAnimating
+  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
 };
 
 export { useConfigDSPopperjs };

package/esm/config/useConfiguredDefaultModifiers.js

@@ -1,9 +1,10 @@
 import { useMemo } from 'react';
 
-const useConfiguredDefaultModifiers = ({
-  props,
-  arrowElement
-}) => {
+const useConfiguredDefaultModifiers = _ref => {
+  let {
+    props,
+    arrowElement
+  } = _ref;
   // we destructure explicit app definitions before merge
   const {
     boundaryElement: explicitAppBoundaryElement,

package/esm/config/useConfiguredDefaultProps.js

@@ -1,3 +1,8 @@
+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';
@@ -9,17 +14,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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,
     closeContextMenu: noop,
+    onClickOutside: noop,
     withoutPortal: false,
     withoutArrow: false,
+    withoutAnimation: false,
+    animationDuration: 100,
     portalDOMContainer: document.body,
     startPlacementPreference: 'top',
     placementOrderPreference: ['top', 'bottom', 'left', 'right'],

package/esm/config/useConfiguredMergedProps.js

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

package/esm/index.js

@@ -1,3 +1,8 @@
+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';
@@ -16,6 +21,8 @@ const DSPopperJS = props => {
   const {
     props: {
       showPopover,
+      withoutAnimation,
+      animationDuration,
       withoutPortal,
       withoutArrow,
       portalDOMContainer,
@@ -24,7 +31,9 @@ const DSPopperJS = props => {
     },
     setPopperElement,
     setArrowElement,
-    popoverHelper
+    setIsAnimating,
+    popoverHelper,
+    isAnimating
   } = useConfigDSPopperjs(props);
   const {
     children
@@ -40,10 +49,14 @@ const DSPopperJS = props => {
     setArrowElement: setArrowElement,
     arrowStyle: styles.arrow,
     withoutArrow: withoutArrow,
-    zIndex: zIndex
-  }, void 0, children), [attributes.popper, children, extraPopperStyles, setArrowElement, setPopperElement, styles.arrow, styles.popper, withoutArrow, zIndex]);
+    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) {
+  if (showPopover || isAnimating) {
     if (withoutPortal === true) return contentJSX;
     if (withoutPortal === false) return /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Fragment, {

package/esm/propTypes.js

@@ -27,6 +27,16 @@ const dspopperjsPropTypes = {
    */
   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.
@@ -63,7 +73,9 @@ const dspopperjsPropTypes = {
    *  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({})
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-popperjs",
-  "version": "2.0.0-next.9",
+  "version": "2.0.0-rc.12",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper JS Wrapper",
   "module": "./esm/index.js",
@@ -15,6 +15,10 @@
       "import": "./esm/utils/hooks/useOnClickOutside.js",
       "require": "./cjs/utils/hooks/useOnClickOutside.js"
     },
+    "./styled": {
+      "import": "./esm/styled.js",
+      "require": "./cjs/styled.js"
+    },
     "./propTypes": {
       "import": "./esm/propTypes.js",
       "require": "./cjs/propTypes.js"
@@ -64,16 +68,18 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.0.0-next.9",
-    "react-desc": "~4.1.3"
+    "@elliemae/ds-props-helpers": "2.0.0-rc.12",
+    "@elliemae/ds-system": "2.0.0-rc.12",
+    "react-desc": "~4.1.3",
+    "react-popper": "~2.2.5"
   },
   "devDependencies": {
-    "styled-components": "~5.3.1"
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public",

package/types/PopoverContent.d.ts

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

package/types/config/useConfiguredDefaultProps.d.ts

@@ -6,8 +6,11 @@ export declare const useConfiguredDefaultProps: ({ props, arrowElement }: {
     referenceElement: null;
     showPopover: boolean;
     closeContextMenu: () => void;
+    onClickOutside: () => void;
     withoutPortal: boolean;
     withoutArrow: boolean;
+    withoutAnimation: boolean;
+    animationDuration: number;
     portalDOMContainer: HTMLElement;
     startPlacementPreference: string;
     placementOrderPreference: string[];

package/types/config/useConfiguredMergedProps.d.ts

@@ -1,16 +1,19 @@
 export declare const useConfiguredMergedProps: ({ props, arrowElement }: {
     props: any;
     arrowElement: any;
-}) => Partial<{
+}) => {
     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/index.d.ts

@@ -1,21 +1,56 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import type { DSDSPopperjsPropsT } from './index.d';
 declare const DSPopperJS: {
     (props: DSDSPopperjsPropsT): JSX.Element;
     propTypes: {
-        referenceElement: any;
-        showPopover: any;
-        closeContextMenu: any;
-        withoutPortal: any;
-        withoutArrow: any;
-        boundaryElement: any;
-        portalDOMContainer: any;
-        startPlacementPreference: any;
-        placementOrderPreference: any;
-        zIndex: any;
-        customOffset: any;
-        modifiers: any;
-        extraPopperStyles: any;
+        referenceElement: import("react-desc").PropTypesDescValidator;
+        showPopover: import("react-desc").PropTypesDescValidator;
+        closeContextMenu: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        withoutPortal: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        withoutArrow: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        withoutAnimation: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        animationDuration: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        boundaryElement: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        portalDOMContainer: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        startPlacementPreference: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        placementOrderPreference: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        zIndex: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        customOffset: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        modifiers: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        extraPopperStyles: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        onClickOutside: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        children: {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
 declare const DSPopperJSWithSchema: any;

package/types/propTypes.d.ts

@@ -1,54 +1,95 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 export declare const dspopperjsPropTypes: {
     /**
      * React ref to popperjs referenceElement
      */
-    referenceElement: any;
+    referenceElement: import("react-desc").PropTypesDescValidator;
     /**
      * Wheter or not to show the popper content
      */
-    showPopover: any;
+    showPopover: import("react-desc").PropTypesDescValidator;
     /**
      * Callback to close the context menu, used for "on click outside",
      *  if not provided click outside will not trigger anything
      */
-    closeContextMenu: any;
+    closeContextMenu: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  Wheter or not the popper content should appear in a DOM portal or not
      */
-    withoutPortal: any;
+    withoutPortal: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  Wheter or not the popper context menu should print the arrow
      */
-    withoutArrow: any;
+    withoutArrow: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     *  Whether or not the popper context menu should be animated
+     */
+    withoutAnimation: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    /**
+     *  Popper context menus Animation duration in ms
+     */
+    animationDuration: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  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: any;
+    boundaryElement: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  When using portal, the container in which to append the DOM content, defaults to document body
      */
-    portalDOMContainer: any;
+    portalDOMContainer: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  start placement preferences, as per popperjs placement option
      */
-    startPlacementPreference: any;
+    startPlacementPreference: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  Array of placement preferences, as per popperjs "flip" placement option
      */
-    placementOrderPreference: any;
+    placementOrderPreference: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  popperjs content z-index
      */
-    zIndex: any;
+    zIndex: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  placement offset array
      */
-    customOffset: any;
+    customOffset: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
     /**
      *  modifiers array for full-custom popper-js override
      *  https://popper.js.org/docs/v2/modifiers/
      */
-    modifiers: any;
-    extraPopperStyles: any;
+    modifiers: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    extraPopperStyles: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onClickOutside: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    children: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
 };

package/types/styled.d.ts

@@ -0,0 +1,11 @@
+interface StyledContentWrapperPropsT {
+    zIndex: number;
+}
+interface StyledAnimatedPopperPropsT {
+    showPopover: boolean;
+    animationDuration: number;
+    withoutAnimation: boolean;
+}
+export declare const StyledPopoverContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledContentWrapperPropsT, never>;
+export declare const StyledAnimatedPopper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledAnimatedPopperPropsT, never>;
+export {};