@elliemae/ds-popperjs 3.2.0-rc.1 → 3.2.0-rc.4

package/dist/cjs/PopoverArrow.js

@@ -35,11 +35,11 @@ const StyledArrow = import_ds_system.styled.div`
   pointer-events: none;
   background-color: transparent;
   & .stroke {
-    fill: ${({ theme }) => theme.colors.neutral["500"]};
+    fill: neutral-500;
     fill-opacity: 0.4;
   }
   & .fill {
-    fill: ${({ theme }) => theme.colors.neutral["000"]};
+    fill: neutral-000;
   }
 
   &[data-placement^='top'] {

package/dist/cjs/PopoverArrow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PopoverArrow.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\ninterface PopoverArrowT {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div`\n  position: absolute;\n  width: ${arrowWidth}px;\n  height: ${arrowHeight}px;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: ${({ theme }) => theme.colors.neutral['500']};\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight}px;\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowWidth}px;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowHeight}px;\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowWidth}px;\n  }\n  margin-left: ${(props) =>\n    props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n      ? `-${arrowWidth / 2}px;`\n      : '0;'};\n  margin-top: ${(props) =>\n    props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n      ? `-${arrowHeight / 2}px;`\n      : '0;'};\n`;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef }: PopoverArrowT): React.ReactElement => (\n  <StyledArrow\n    key=\"popper-arrow\"\n    data-placement={placement}\n    style={style}\n    ref={arrowElementRef}\n    data-testid=\"ds-tooltip-arrow\"\n  >\n    <svg viewBox=\"0 0 30 30\">\n      <path\n        className=\"stroke\"\n        d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n      />\n      <path\n        className=\"fill\"\n        d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n      />\n    </svg>\n  </StyledArrow>\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AAMvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,wBAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA,YAIA,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAIpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,sBAC/C,mDAAC;AAAA,EACC,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,mDAAC;AAAA,EAAI,SAAQ;AAAA,GACX,mDAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CAEJ,GACA,mDAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CACJ,CACF,CACF;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\ninterface PopoverArrowT {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div<{ 'data-placement': string }>`\n  position: absolute;\n  width: ${arrowWidth}px;\n  height: ${arrowHeight}px;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: neutral-500;\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: neutral-000;\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight}px;\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowWidth}px;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowHeight}px;\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowWidth}px;\n  }\n  margin-left: ${(props) =>\n    props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n      ? `-${arrowWidth / 2}px;`\n      : '0;'};\n  margin-top: ${(props) =>\n    props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n      ? `-${arrowHeight / 2}px;`\n      : '0;'};\n`;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef }: PopoverArrowT): React.ReactElement => (\n  <StyledArrow\n    key=\"popper-arrow\"\n    data-placement={placement}\n    style={style}\n    ref={arrowElementRef}\n    data-testid=\"ds-tooltip-arrow\"\n  >\n    <svg viewBox=\"0 0 30 30\">\n      <path\n        className=\"stroke\"\n        d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n      />\n      <path\n        className=\"fill\"\n        d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n      />\n    </svg>\n  </StyledArrow>\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AAMvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,wBAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,sBAC/C,mDAAC;AAAA,EACC,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,mDAAC;AAAA,EAAI,SAAQ;AAAA,GACX,mDAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CAEJ,GACA,mDAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CACJ,CACF,CACF;",
   "names": []
 }

package/dist/cjs/PopoverContent.js

@@ -53,7 +53,9 @@ const PopoverContent = ({
   withoutArrow,
   withoutAnimation,
   animationDuration,
-  zIndex
+  zIndex,
+  globalAttrs,
+  xStyledAttrs
 }) => {
   const checkAnimationStatus = (0, import_react.useCallback)(() => {
     if (!showPopover && !withoutAnimation) {
@@ -68,11 +70,11 @@ const PopoverContent = ({
     ref: setArrowElement,
     style: arrowStyle
   })) : null), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPopoverContentWrapper, __spreadValues({
+  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPopoverContentWrapper, __spreadValues(__spreadValues(__spreadValues({
     zIndex,
     ref: setPopperElement,
     style: popperStyles
-  }, popperAttributes), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledAnimatedPopper, {
+  }, popperAttributes), globalAttrs), xStyledAttrs), /* @__PURE__ */ import_react.default.createElement(import_styled.StyledAnimatedPopper, {
     showPopover,
     animationDuration,
     withoutAnimation,

package/dist/cjs/PopoverContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PopoverContent.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { PopoverArrow } from './PopoverArrow';\nimport type { PopoverContentPropsT } from './index.d';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\n\nexport const PopoverContent = ({\n  setPopperElement,\n  popperStyles,\n  popperAttributes,\n  children,\n  showPopover,\n  setArrowElement,\n  setIsAnimating,\n  arrowStyle,\n  withoutArrow,\n  withoutAnimation,\n  animationDuration,\n  zIndex,\n}: PopoverContentPropsT): JSX.Element => {\n  const checkAnimationStatus = useCallback(() => {\n    if (!showPopover && !withoutAnimation) {\n      setIsAnimating(false);\n    }\n  }, [showPopover, withoutAnimation, setIsAnimating]);\n\n  const popperContent = useMemo(\n    () => (\n      <>\n        {children}\n        {withoutArrow === false ? (\n          <>\n            <PopoverArrow\n              arrowElementRef={setArrowElement}\n              style={arrowStyle}\n              placement={popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'}\n            />\n            <div ref={setArrowElement} style={arrowStyle} />\n          </>\n        ) : null}\n      </>\n    ),\n    [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement],\n  );\n  return (\n    <StyledPopoverContentWrapper zIndex={zIndex} ref={setPopperElement} style={popperStyles} {...popperAttributes}>\n      <StyledAnimatedPopper\n        showPopover={showPopover}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        onAnimationEnd={checkAnimationStatus}\n      >\n        {popperContent}\n      </StyledAnimatedPopper>\n    </StyledPopoverContentWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,0BAA6B;AAE7B,oBAAkE;AAE3D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACuC;AACvC,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,gBAAgB,0BACpB,MACE,wFACG,UACA,iBAAiB,QAChB,wFACE,mDAAC;AAAA,IACC,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,GAC5E,GACA,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO;AAAA,GAAY,CAChD,IACE,IACN,GAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe,CACxE;AACA,SACE,mDAAC;AAAA,IAA4B;AAAA,IAAgB,KAAK;AAAA,IAAkB,OAAO;AAAA,KAAkB,mBAC3F,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf,aACH,CACF;AAEJ;",
+  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PopoverArrow } from './PopoverArrow';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\n\nexport interface PopoverContentPropsT {\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  popperStyles: React.CSSProperties;\n  arrowStyle: React.CSSProperties;\n  popperAttributes: Record<string, string> | undefined;\n  children: JSX.Element | JSX.Element[];\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  withoutArrow: boolean;\n  withoutAnimation: boolean;\n  animationDuration: number;\n  zIndex: number;\n  showPopover: boolean;\n  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n  globalAttrs: GlobalAttributesT;\n  xStyledAttrs: XstyledProps;\n}\n\nexport const PopoverContent = ({\n  setPopperElement,\n  popperStyles,\n  popperAttributes,\n  children,\n  showPopover,\n  setArrowElement,\n  setIsAnimating,\n  arrowStyle,\n  withoutArrow,\n  withoutAnimation,\n  animationDuration,\n  zIndex,\n  globalAttrs,\n  xStyledAttrs,\n}: PopoverContentPropsT): JSX.Element => {\n  const checkAnimationStatus = useCallback(() => {\n    if (!showPopover && !withoutAnimation) {\n      setIsAnimating(false);\n    }\n  }, [showPopover, withoutAnimation, setIsAnimating]);\n\n  const popperContent = useMemo(\n    () => (\n      <>\n        {children}\n        {withoutArrow === false ? (\n          <>\n            <PopoverArrow\n              arrowElementRef={setArrowElement}\n              style={arrowStyle}\n              placement={popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'}\n            />\n            <div ref={setArrowElement} style={arrowStyle} />\n          </>\n        ) : null}\n      </>\n    ),\n    [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement],\n  );\n  return (\n    <StyledPopoverContentWrapper\n      zIndex={zIndex}\n      ref={setPopperElement}\n      style={popperStyles}\n      {...popperAttributes}\n      {...globalAttrs}\n      {...xStyledAttrs}\n    >\n      <StyledAnimatedPopper\n        showPopover={showPopover}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        onAnimationEnd={checkAnimationStatus}\n      >\n        {popperContent}\n      </StyledAnimatedPopper>\n    </StyledPopoverContentWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAE5C,0BAA6B;AAC7B,oBAAkE;AAmB3D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACuC;AACvC,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,gBAAgB,0BACpB,MACE,wFACG,UACA,iBAAiB,QAChB,wFACE,mDAAC;AAAA,IACC,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,GAC5E,GACA,mDAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO;AAAA,GAAY,CAChD,IACE,IACN,GAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe,CACxE;AACA,SACE,mDAAC;AAAA,IACC;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,KACH,mBACA,cACA,eAEJ,mDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf,aACH,CACF;AAEJ;",
   "names": []
 }

package/dist/cjs/config/useConfigDSPopperjs.js

@@ -26,6 +26,7 @@ module.exports = __toCommonJS(useConfigDSPopperjs_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_react_popper = require("react-popper");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_useConfiguredMergedProps = require("./useConfiguredMergedProps");
 var import_useOnClickOutside = require("../utils/hooks/useOnClickOutside");
 const useConfigDSPopperjs = (appProps) => {
@@ -48,6 +49,8 @@ const useConfigDSPopperjs = (appProps) => {
       closeContextMenu();
     }
   });
+  const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(props);
+  const xStyledAttrs = (0, import_ds_utilities.useGetXstyledProps)(props);
   return (0, import_react.useMemo)(() => ({
     props,
     popperElement,
@@ -56,7 +59,9 @@ const useConfigDSPopperjs = (appProps) => {
     setArrowElement,
     popoverHelper,
     isAnimating,
-    setIsAnimating
-  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
+    setIsAnimating,
+    globalAttrs,
+    xStyledAttrs
+  }), [props, popperElement, arrowElement, popoverHelper, isAnimating, globalAttrs, xStyledAttrs]);
 };
 //# sourceMappingURL=useConfigDSPopperjs.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useConfigDSPopperjs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useMemo, useState, useEffect } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useConfiguredMergedProps } from './useConfiguredMergedProps';\nimport type { useDSPopperjsPropsArgT, useDSPopperjsRT } from '../index.d';\n\nimport { useOnClickOutside } from '../utils/hooks/useOnClickOutside';\n\nexport const useConfigDSPopperjs = (appProps: useDSPopperjsPropsArgT): useDSPopperjsRT => {\n  const [popperElement, setPopperElement] = useState(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n\n  const props = useConfiguredMergedProps({ props: appProps, arrowElement });\n  const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;\n  const popperExtraOpts = useMemo(\n    () => ({ placement: startPlacementPreference, modifiers }),\n    [modifiers, startPlacementPreference],\n  );\n\n  const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);\n\n  const { showPopover, withoutAnimation } = props;\n\n  useEffect(() => {\n    if (showPopover && !withoutAnimation) {\n      setIsAnimating(true);\n    }\n  }, [showPopover, withoutAnimation]);\n\n  useOnClickOutside(popperElement, (e) => {\n    if (!referenceElement?.contains?.(e?.target)) {\n      onClickOutside(e);\n      closeContextMenu();\n    }\n  });\n\n  return useMemo(\n    () => ({\n      props,\n      popperElement,\n      setPopperElement,\n      arrowElement,\n      setArrowElement,\n      popoverHelper,\n      isAnimating,\n      setIsAnimating,\n    }),\n    [arrowElement, popoverHelper, popperElement, isAnimating, props],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,0BAA0B;AAC1B,sCAAyC;AAGzC,+BAAkC;AAE3B,MAAM,sBAAsB,CAAC,aAAsD;AACxF,QAAM,CAAC,eAAe,oBAAoB,2BAAS,IAAI;AACvD,QAAM,CAAC,cAAc,mBAAmB,2BAAS,IAAI;AACrD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB,KAAK;AAE7D,QAAM,QAAQ,8DAAyB,EAAE,OAAO,UAAU,aAAa,CAAC;AACxE,QAAM,EAAE,kBAAkB,kBAAkB,gBAAgB,WAAW,6BAA6B;AACpG,QAAM,kBAAkB,0BACtB,MAAO,GAAE,WAAW,0BAA0B,UAAU,IACxD,CAAC,WAAW,wBAAwB,CACtC;AAEA,QAAM,gBAAgB,mCAAU,kBAAkB,eAAe,eAAe;AAEhF,QAAM,EAAE,aAAa,qBAAqB;AAE1C,8BAAU,MAAM;AACd,QAAI,eAAe,CAAC,kBAAkB;AACpC,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,aAAa,gBAAgB,CAAC;AAElC,kDAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,kBAAkB,WAAW,GAAG,MAAM,GAAG;AAC5C,qBAAe,CAAC;AAChB,uBAAiB;AAAA,IACnB;AAAA,EACF,CAAC;AAED,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,cAAc,eAAe,eAAe,aAAa,KAAK,CACjE;AACF;",
+  "sourcesContent": ["import { useMemo, useState, useEffect } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { useConfiguredMergedProps } from './useConfiguredMergedProps';\nimport type { UseDSPopperjsPropsArgT, UseDSPopperjsRT } from '../react-desc-prop-types';\n\nimport { useOnClickOutside } from '../utils/hooks/useOnClickOutside';\n\nexport const useConfigDSPopperjs = (appProps: UseDSPopperjsPropsArgT): UseDSPopperjsRT => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const props = useConfiguredMergedProps({ props: appProps, arrowElement });\n  const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;\n  const popperExtraOpts = useMemo(\n    () => ({ placement: startPlacementPreference, modifiers }),\n    [modifiers, startPlacementPreference],\n  );\n\n  const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);\n\n  const { showPopover, withoutAnimation } = props;\n\n  useEffect(() => {\n    if (showPopover && !withoutAnimation) {\n      setIsAnimating(true);\n    }\n  }, [showPopover, withoutAnimation]);\n\n  useOnClickOutside(popperElement as Node, (e) => {\n    if (!referenceElement?.contains?.(e?.target as Node)) {\n      onClickOutside(e);\n      closeContextMenu();\n    }\n  });\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xStyledAttrs = useGetXstyledProps(props);\n\n  return useMemo(\n    () => ({\n      props,\n      popperElement,\n      setPopperElement,\n      arrowElement,\n      setArrowElement,\n      popoverHelper,\n      isAnimating,\n      setIsAnimating,\n      globalAttrs,\n      xStyledAttrs,\n    }),\n    [props, popperElement, arrowElement, popoverHelper, isAnimating, globalAttrs, xStyledAttrs],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,0BAA0B;AAC1B,0BAA2D;AAC3D,sCAAyC;AAGzC,+BAAkC;AAE3B,MAAM,sBAAsB,CAAC,aAAsD;AACxF,QAAM,CAAC,eAAe,oBAAoB,2BAAgC,IAAI;AAC9E,QAAM,CAAC,cAAc,mBAAmB,2BAAgC,IAAI;AAC5E,QAAM,CAAC,aAAa,kBAAkB,2BAAS,KAAK;AAEpD,QAAM,QAAQ,8DAAyB,EAAE,OAAO,UAAU,aAAa,CAAC;AACxE,QAAM,EAAE,kBAAkB,kBAAkB,gBAAgB,WAAW,6BAA6B;AACpG,QAAM,kBAAkB,0BACtB,MAAO,GAAE,WAAW,0BAA0B,UAAU,IACxD,CAAC,WAAW,wBAAwB,CACtC;AAEA,QAAM,gBAAgB,mCAAU,kBAAkB,eAAe,eAAe;AAEhF,QAAM,EAAE,aAAa,qBAAqB;AAE1C,8BAAU,MAAM;AACd,QAAI,eAAe,CAAC,kBAAkB;AACpC,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,aAAa,gBAAgB,CAAC;AAElC,kDAAkB,eAAuB,CAAC,MAAM;AAC9C,QAAI,CAAC,kBAAkB,WAAW,GAAG,MAAc,GAAG;AACpD,qBAAe,CAAC;AAChB,uBAAiB;AAAA,IACnB;AAAA,EACF,CAAC;AAED,QAAM,cAAc,gDAAuB,KAAK;AAChD,QAAM,eAAe,4CAAmB,KAAK;AAE7C,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,OAAO,eAAe,cAAc,eAAe,aAAa,aAAa,YAAY,CAC5F;AACF;",
   "names": []
 }

package/dist/cjs/config/useConfiguredDefaultModifiers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useConfiguredDefaultModifiers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nexport const useConfiguredDefaultModifiers = ({ props, arrowElement }) => {\n  // we destructure explicit app definitions before merge\n  const {\n    boundaryElement: explicitAppBoundaryElement,\n    withoutArrow: explicitAppWithoutArrow = false,\n    placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],\n    customOffset: explictAppOffset = undefined,\n  } = props;\n  // to build default modifiers on top of it\n  const defaultModifiers = useMemo(() => {\n    const mod = [];\n    mod.push({ name: 'hide', enabled: true });\n    mod.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: explicitPlacementOrderPreference,\n      },\n    });\n    // we apply an offset if the app defines one or if the app wants the arrow\n    if (!explicitAppWithoutArrow || explictAppOffset) {\n      const defaultOffset = explictAppOffset || [0, 14];\n      mod.push({\n        name: 'offset',\n        enabled: true,\n        options: {\n          offset: defaultOffset,\n        },\n      });\n    }\n    // the app can opt for a \"no arrow\" implementation (we do so in datatable/calendar etc...)\n    if (!explicitAppWithoutArrow)\n      mod.push({\n        name: 'arrow',\n        options: {\n          element: arrowElement,\n          padding: 18,\n        },\n      });\n\n    // the app can define an explicit element to act as a boundary instead of popperjs default one\n    if (explicitAppBoundaryElement)\n      mod.push({\n        name: 'preventOverflow',\n        options: {\n          boundary: explicitAppBoundaryElement,\n        },\n      });\n    return mod;\n  }, [\n    arrowElement,\n    explicitAppBoundaryElement,\n    explicitAppWithoutArrow,\n    explicitPlacementOrderPreference,\n    explictAppOffset,\n  ]);\n  // if the app pass custom modifier, we don't use \"default modifiers\"\n  const { modifiers: explicitAppModifiers = defaultModifiers } = props;\n\n  return useMemo(\n    () => ({\n      modifiers: explicitAppModifiers,\n    }),\n    [explicitAppModifiers],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAEjB,MAAM,gCAAgC,CAAC,EAAE,OAAO,mBAAmB;AAExE,QAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,cAAc,0BAA0B;AAAA,IACxC,0BAA0B,mCAAmC,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC9F,cAAc,mBAAmB;AAAA,MAC/B;AAEJ,QAAM,mBAAmB,0BAAQ,MAAM;AACrC,UAAM,MAAM,CAAC;AACb,QAAI,KAAK,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AACxC,QAAI,KAAK;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,QACP,oBAAoB;AAAA,MACtB;AAAA,IACF,CAAC;AAED,QAAI,CAAC,2BAA2B,kBAAkB;AAChD,YAAM,gBAAgB,oBAAoB,CAAC,GAAG,EAAE;AAChD,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,CAAC;AACH,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS;AAAA,UACT,SAAS;AAAA,QACX;AAAA,MACF,CAAC;AAGH,QAAI;AACF,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,MACF,CAAC;AACH,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,WAAW,uBAAuB,qBAAqB;AAE/D,SAAO,0BACL,MAAO;AAAA,IACL,WAAW;AAAA,EACb,IACA,CAAC,oBAAoB,CACvB;AACF;",
+  "sourcesContent": ["import { useMemo } from 'react';\nimport { UseDSPopperjsPropsArgT } from '../react-desc-prop-types';\n\ninterface UseConfiguredDefaultModifiersT {\n  props: UseDSPopperjsPropsArgT;\n  arrowElement: HTMLDivElement | null;\n}\n\nexport const useConfiguredDefaultModifiers = ({ props, arrowElement }: UseConfiguredDefaultModifiersT) => {\n  // we destructure explicit app definitions before merge\n  const {\n    boundaryElement: explicitAppBoundaryElement,\n    withoutArrow: explicitAppWithoutArrow = false,\n    placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],\n    customOffset: explictAppOffset = undefined,\n  } = props;\n  // to build default modifiers on top of it\n  const defaultModifiers = useMemo(() => {\n    const mod = [];\n    mod.push({ name: 'hide', enabled: true });\n    mod.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: explicitPlacementOrderPreference,\n      },\n    });\n    // we apply an offset if the app defines one or if the app wants the arrow\n    if (!explicitAppWithoutArrow || explictAppOffset) {\n      const defaultOffset = explictAppOffset || [0, 14];\n      mod.push({\n        name: 'offset',\n        enabled: true,\n        options: {\n          offset: defaultOffset,\n        },\n      });\n    }\n    // the app can opt for a \"no arrow\" implementation (we do so in datatable/calendar etc...)\n    if (!explicitAppWithoutArrow)\n      mod.push({\n        name: 'arrow',\n        options: {\n          element: arrowElement,\n          padding: 18,\n        },\n      });\n\n    // the app can define an explicit element to act as a boundary instead of popperjs default one\n    if (explicitAppBoundaryElement)\n      mod.push({\n        name: 'preventOverflow',\n        options: {\n          boundary: explicitAppBoundaryElement,\n        },\n      });\n    return mod;\n  }, [\n    arrowElement,\n    explicitAppBoundaryElement,\n    explicitAppWithoutArrow,\n    explicitPlacementOrderPreference,\n    explictAppOffset,\n  ]);\n  // if the app pass custom modifier, we don't use \"default modifiers\"\n  const { modifiers: explicitAppModifiers = defaultModifiers } = props;\n\n  return useMemo(\n    () => ({\n      modifiers: explicitAppModifiers,\n    }),\n    [explicitAppModifiers],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAQjB,MAAM,gCAAgC,CAAC,EAAE,OAAO,mBAAmD;AAExG,QAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,cAAc,0BAA0B;AAAA,IACxC,0BAA0B,mCAAmC,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC9F,cAAc,mBAAmB;AAAA,MAC/B;AAEJ,QAAM,mBAAmB,0BAAQ,MAAM;AACrC,UAAM,MAAM,CAAC;AACb,QAAI,KAAK,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AACxC,QAAI,KAAK;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,QACP,oBAAoB;AAAA,MACtB;AAAA,IACF,CAAC;AAED,QAAI,CAAC,2BAA2B,kBAAkB;AAChD,YAAM,gBAAgB,oBAAoB,CAAC,GAAG,EAAE;AAChD,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,CAAC;AACH,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS;AAAA,UACT,SAAS;AAAA,QACX;AAAA,MACF,CAAC;AAGH,QAAI;AACF,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,MACF,CAAC;AACH,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,WAAW,uBAAuB,qBAAqB;AAE/D,SAAO,0BACL,MAAO;AAAA,IACL,WAAW;AAAA,EACb,IACA,CAAC,oBAAoB,CACvB;AACF;",
   "names": []
 }

package/dist/cjs/config/useConfiguredDefaultProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useConfiguredDefaultProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { useConfiguredDefaultModifiers } from './useConfiguredDefaultModifiers';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst emptyObj = {};\n\nexport const useConfiguredDefaultProps = ({ props, arrowElement }) => {\n  // don't move this out of the hook or `document.body` will explode\n  const staticDefaultProps = useMemo(\n    () => ({\n      referenceElement: null,\n      showPopover: false,\n      closeContextMenu: noop,\n      onClickOutside: noop,\n      withoutPortal: false,\n      withoutArrow: false,\n      withoutAnimation: false,\n      animationDuration: 100,\n      portalDOMContainer: document.body,\n      startPlacementPreference: 'top',\n      placementOrderPreference: ['top', 'bottom', 'left', 'right'],\n      extraPopperStyles: emptyObj,\n    }),\n    [],\n  );\n  const { modifiers: configuredModifiers } = useConfiguredDefaultModifiers({\n    props,\n    arrowElement,\n  });\n\n  const defaultProps = useMemo(\n    () => ({ ...staticDefaultProps, modifiers: configuredModifiers }),\n    [configuredModifiers, staticDefaultProps],\n  );\n\n  return defaultProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAEpC,2CAA8C;AAG9C,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,WAAW,CAAC;AAEX,MAAM,4BAA4B,CAAC,EAAE,OAAO,mBAAmB;AAEpE,QAAM,qBAAqB,0BACzB,MAAO;AAAA,IACL,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,oBAAoB,SAAS;AAAA,IAC7B,0BAA0B;AAAA,IAC1B,0BAA0B,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC3D,mBAAmB;AAAA,EACrB,IACA,CAAC,CACH;AACA,QAAM,EAAE,WAAW,wBAAwB,wEAA8B;AAAA,IACvE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,0BACnB,MAAO,iCAAK,qBAAL,EAAyB,WAAW,oBAAoB,IAC/D,CAAC,qBAAqB,kBAAkB,CAC1C;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { useMemo } from 'react';\nimport { useConfiguredDefaultModifiers } from './useConfiguredDefaultModifiers';\nimport { UseDSPopperjsPropsArgT } from '../react-desc-prop-types';\n\nconst noop = () => {};\n\nconst emptyObj = {};\n\ninterface UseConfiguredDefaultPropsT {\n  props: UseDSPopperjsPropsArgT;\n  arrowElement: HTMLDivElement | null;\n}\n\nexport const useConfiguredDefaultProps = ({ props, arrowElement }: Required<UseConfiguredDefaultPropsT>) => {\n  // don't move this out of the hook or `document.body` will explode\n  const staticDefaultProps: UseDSPopperjsPropsArgT = useMemo(\n    () => ({\n      referenceElement: null,\n      showPopover: false,\n      closeContextMenu: noop,\n      onClickOutside: noop,\n      withoutPortal: false,\n      withoutArrow: false,\n      withoutAnimation: false,\n      animationDuration: 100,\n      portalDOMContainer: document.body,\n      startPlacementPreference: 'top',\n      placementOrderPreference: ['top', 'bottom', 'left', 'right'],\n      extraPopperStyles: emptyObj,\n    }),\n    [],\n  );\n  const { modifiers: configuredModifiers } = useConfiguredDefaultModifiers({\n    props,\n    arrowElement,\n  });\n\n  const defaultProps = useMemo(\n    () => ({ ...staticDefaultProps, modifiers: configuredModifiers }),\n    [configuredModifiers, staticDefaultProps],\n  );\n\n  return defaultProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AACxB,2CAA8C;AAG9C,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,WAAW,CAAC;AAOX,MAAM,4BAA4B,CAAC,EAAE,OAAO,mBAAyD;AAE1G,QAAM,qBAA6C,0BACjD,MAAO;AAAA,IACL,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,oBAAoB,SAAS;AAAA,IAC7B,0BAA0B;AAAA,IAC1B,0BAA0B,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC3D,mBAAmB;AAAA,EACrB,IACA,CAAC,CACH;AACA,QAAM,EAAE,WAAW,wBAAwB,wEAA8B;AAAA,IACvE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,0BACnB,MAAO,iCAAK,qBAAL,EAAyB,WAAW,oBAAoB,IAC/D,CAAC,qBAAqB,kBAAkB,CAC1C;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/config/useConfiguredMergedProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useConfiguredMergedProps.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { useConfiguredDefaultProps } from './useConfiguredDefaultProps';\n\nexport const useConfiguredMergedProps = ({ props, arrowElement }) => {\n  const defaultProps = useConfiguredDefaultProps({ props, arrowElement });\n\n  return useMemoMergePropsWithDefault(props, defaultProps);\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA6C;AAC7C,uCAA0C;AAEnC,MAAM,2BAA2B,CAAC,EAAE,OAAO,mBAAmB;AACnE,QAAM,eAAe,gEAA0B,EAAE,OAAO,aAAa,CAAC;AAEtE,SAAO,sDAA6B,OAAO,YAAY;AACzD;",
+  "sourcesContent": ["import { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { useConfiguredDefaultProps } from './useConfiguredDefaultProps';\nimport { UseDSPopperjsPropsArgT } from '../react-desc-prop-types';\n\ninterface UseConfiguredMergedPropsT {\n  props: UseDSPopperjsPropsArgT;\n  arrowElement: HTMLDivElement | null;\n}\n\nexport const useConfiguredMergedProps = ({ props, arrowElement }: UseConfiguredMergedPropsT) => {\n  const defaultProps = useConfiguredDefaultProps({ props, arrowElement });\n\n  return useMemoMergePropsWithDefault<Required<UseDSPopperjsPropsArgT>>(props, defaultProps);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA6C;AAC7C,uCAA0C;AAQnC,MAAM,2BAA2B,CAAC,EAAE,OAAO,mBAA8C;AAC9F,QAAM,eAAe,gEAA0B,EAAE,OAAO,aAAa,CAAC;AAEtE,SAAO,sDAA+D,OAAO,YAAY;AAC3F;",
   "names": []
 }

package/dist/cjs/index.js

@@ -43,9 +43,9 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_ds_utilities = require("@elliemae/ds-utilities");
-var import_propTypes = require("./propTypes");
 var import_PopoverContent = require("./PopoverContent");
 var import_useConfigDSPopperjs = require("./config/useConfigDSPopperjs");
+var import_react_desc_prop_types = require("./react-desc-prop-types");
 const DSPopperJS = (props) => {
   const {
     props: {
@@ -58,6 +58,8 @@ const DSPopperJS = (props) => {
       zIndex,
       extraPopperStyles
     },
+    globalAttrs,
+    xStyledAttrs,
     setPopperElement,
     setArrowElement,
     setIsAnimating,
@@ -77,7 +79,9 @@ const DSPopperJS = (props) => {
     animationDuration,
     zIndex,
     showPopover,
-    setIsAnimating
+    setIsAnimating,
+    globalAttrs,
+    xStyledAttrs
   }, children), [
     attributes.popper,
     children,
@@ -91,19 +95,21 @@ const DSPopperJS = (props) => {
     withoutArrow,
     withoutAnimation,
     animationDuration,
-    zIndex
+    zIndex,
+    globalAttrs,
+    xStyledAttrs
   ]);
   if (showPopover || isAnimating) {
     if (withoutPortal === true)
       return contentJSX;
     if (withoutPortal === false)
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, contentJSX), portalDOMContainer));
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (0, import_react_dom.createPortal)(contentJSX, portalDOMContainer));
   }
   return null;
 };
-DSPopperJS.propTypes = import_propTypes.dspopperjsPropTypes;
+DSPopperJS.propTypes = import_react_desc_prop_types.dspopperjsPropTypes;
 DSPopperJS.displayName = "DSPopperJS";
 const DSPopperJSWithSchema = (0, import_ds_utilities.describe)(DSPopperJS).description("A dimsum custom styling wrapper on top of popperjs");
-DSPopperJSWithSchema.propTypes = import_propTypes.dspopperjsPropTypes;
+DSPopperJSWithSchema.propTypes = import_react_desc_prop_types.dspopperjsPropTypes;
 var src_default = DSPopperJS;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe } from '@elliemae/ds-utilities';\nimport { dspopperjsPropTypes } from './propTypes';\nimport { PopoverContent } from './PopoverContent';\nimport { useConfigDSPopperjs } from './config/useConfigDSPopperjs';\nimport type { DSDSPopperjsPropsT } from './index.d';\n\nconst DSPopperJS = (props: DSDSPopperjsPropsT): JSX.Element => {\n  const {\n    props: {\n      showPopover,\n      withoutAnimation,\n      animationDuration,\n      withoutPortal,\n      withoutArrow,\n      portalDOMContainer,\n      zIndex,\n      extraPopperStyles,\n    },\n    setPopperElement,\n    setArrowElement,\n    setIsAnimating,\n    popoverHelper,\n    isAnimating,\n  } = useConfigDSPopperjs(props);\n  const { children } = props;\n  const { styles, attributes } = popoverHelper;\n  const contentJSX = useMemo(\n    () => (\n      <PopoverContent\n        setPopperElement={setPopperElement}\n        popperStyles={{ ...styles.popper, ...extraPopperStyles }}\n        popperAttributes={attributes.popper}\n        setArrowElement={setArrowElement}\n        arrowStyle={styles.arrow}\n        withoutArrow={withoutArrow}\n        withoutAnimation={withoutAnimation}\n        animationDuration={animationDuration}\n        zIndex={zIndex}\n        showPopover={showPopover}\n        setIsAnimating={setIsAnimating}\n      >\n        {children}\n      </PopoverContent>\n    ),\n    [\n      attributes.popper,\n      children,\n      setIsAnimating,\n      showPopover,\n      extraPopperStyles,\n      setArrowElement,\n      setPopperElement,\n      styles.arrow,\n      styles.popper,\n      withoutArrow,\n      withoutAnimation,\n      animationDuration,\n      zIndex,\n    ],\n  );\n  if (showPopover || isAnimating) {\n    if (withoutPortal === true) return contentJSX;\n    if (withoutPortal === false) return <>{createPortal(<>{contentJSX}</>, portalDOMContainer)}</>;\n  }\n  return null;\n};\n\nDSPopperJS.propTypes = dspopperjsPropTypes;\nDSPopperJS.displayName = 'DSPopperJS';\nconst DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');\nDSPopperJSWithSchema.propTypes = dspopperjsPropTypes;\n\nexport { DSPopperJS, DSPopperJSWithSchema };\nexport default DSPopperJS;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,uBAA6B;AAC7B,0BAAyB;AACzB,uBAAoC;AACpC,4BAA+B;AAC/B,iCAAoC;AAGpC,MAAM,aAAa,CAAC,UAA2C;AAC7D,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oDAAoB,KAAK;AAC7B,QAAM,EAAE,aAAa;AACrB,QAAM,EAAE,QAAQ,eAAe;AAC/B,QAAM,aAAa,0BACjB,MACE,mDAAC;AAAA,IACC;AAAA,IACA,cAAc,kCAAK,OAAO,SAAW;AAAA,IACrC,kBAAkB,WAAW;AAAA,IAC7B;AAAA,IACA,YAAY,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,QACH,GAEF;AAAA,IACE,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO,wFAAG,mCAAa,wFAAG,UAAW,GAAK,kBAAkB,CAAE;AAAA,EAC7F;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,kCAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
+  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe } from '@elliemae/ds-utilities';\nimport { PopoverContent } from './PopoverContent';\nimport { useConfigDSPopperjs } from './config/useConfigDSPopperjs';\nimport { dspopperjsPropTypes, DSDSPopperjsPropsT } from './react-desc-prop-types';\n\nconst DSPopperJS: React.ComponentType<DSDSPopperjsPropsT> = (props) => {\n  const {\n    props: {\n      showPopover,\n      withoutAnimation,\n      animationDuration,\n      withoutPortal,\n      withoutArrow,\n      portalDOMContainer,\n      zIndex,\n      extraPopperStyles,\n    },\n    globalAttrs,\n    xStyledAttrs,\n    setPopperElement,\n    setArrowElement,\n    setIsAnimating,\n    popoverHelper,\n    isAnimating,\n  } = useConfigDSPopperjs(props);\n  const { children } = props;\n  const { styles, attributes } = popoverHelper;\n  const contentJSX = useMemo(\n    () => (\n      <PopoverContent\n        setPopperElement={setPopperElement}\n        popperStyles={{ ...styles.popper, ...extraPopperStyles }}\n        popperAttributes={attributes.popper}\n        setArrowElement={setArrowElement}\n        arrowStyle={styles.arrow}\n        withoutArrow={withoutArrow}\n        withoutAnimation={withoutAnimation}\n        animationDuration={animationDuration}\n        zIndex={zIndex}\n        showPopover={showPopover}\n        setIsAnimating={setIsAnimating}\n        globalAttrs={globalAttrs}\n        xStyledAttrs={xStyledAttrs}\n      >\n        {children}\n      </PopoverContent>\n    ),\n    [\n      attributes.popper,\n      children,\n      setIsAnimating,\n      showPopover,\n      extraPopperStyles,\n      setArrowElement,\n      setPopperElement,\n      styles.arrow,\n      styles.popper,\n      withoutArrow,\n      withoutAnimation,\n      animationDuration,\n      zIndex,\n      globalAttrs,\n      xStyledAttrs,\n    ],\n  );\n  if (showPopover || isAnimating) {\n    if (withoutPortal === true) return contentJSX;\n    if (withoutPortal === false) return <>{createPortal(contentJSX, portalDOMContainer)}</>;\n  }\n  return null;\n};\n\nDSPopperJS.propTypes = dspopperjsPropTypes;\nDSPopperJS.displayName = 'DSPopperJS';\nconst DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');\nDSPopperJSWithSchema.propTypes = dspopperjsPropTypes;\n\nexport { DSPopperJS, DSPopperJSWithSchema };\nexport default DSPopperJS;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,uBAA6B;AAC7B,0BAAyB;AACzB,4BAA+B;AAC/B,iCAAoC;AACpC,mCAAwD;AAExD,MAAM,aAAsD,CAAC,UAAU;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oDAAoB,KAAK;AAC7B,QAAM,EAAE,aAAa;AACrB,QAAM,EAAE,QAAQ,eAAe;AAC/B,QAAM,aAAa,0BACjB,MACE,mDAAC;AAAA,IACC;AAAA,IACA,cAAc,kCAAK,OAAO,SAAW;AAAA,IACrC,kBAAkB,WAAW;AAAA,IAC7B;AAAA,IACA,YAAY,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,QACH,GAEF;AAAA,IACE,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO,wFAAG,mCAAa,YAAY,kBAAkB,CAAE;AAAA,EACtF;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,kCAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
   "names": []
 }

package/dist/cjs/{propTypes.js → react-desc-prop-types.js}

@@ -1,9 +1,26 @@
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -18,14 +35,14 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var propTypes_exports = {};
-__export(propTypes_exports, {
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
   dspopperjsPropTypes: () => dspopperjsPropTypes
 });
-module.exports = __toCommonJS(propTypes_exports);
+module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
-const dspopperjsPropTypes = {
+const dspopperjsPropTypes = __spreadProps(__spreadValues(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), import_ds_utilities.xstyledPropTypes), {
   referenceElement: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.instanceOf(Element), import_ds_utilities.PropTypes.oneOf([null])]).description("popperjs DOM referenceElement").isRequired,
   showPopover: import_ds_utilities.PropTypes.bool.description("whether or not to show the popper content").isRequired,
   closeContextMenu: import_ds_utilities.PropTypes.func.description('Callback to close the context menu, used for "on click outside", if not provided click outside will not trigger anything').defaultValue("() => {}"),
@@ -33,8 +50,8 @@ const dspopperjsPropTypes = {
   withoutArrow: import_ds_utilities.PropTypes.bool.description("Whether or not the popper context menu should print the arrow").defaultValue(false),
   withoutAnimation: import_ds_utilities.PropTypes.bool.description("Whether or not the popper context menu should be animated").defaultValue(false),
   animationDuration: import_ds_utilities.PropTypes.number.description("Popper context menus Animation duration in ms").defaultValue(100),
-  boundaryElement: import_ds_utilities.PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(void 0),
-  portalDOMContainer: import_ds_utilities.PropTypes.element.description("When using portal, the container in which to append the DOM content, defaults to document body").defaultValue(void 0),
+  boundaryElement: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.instanceOf(Element), import_ds_utilities.PropTypes.oneOf([null])]).description('Bounding element to calculate upon, defaults to "clippingParents",which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(void 0),
+  portalDOMContainer: import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.instanceOf(Element), import_ds_utilities.PropTypes.oneOf([null])]).description("When using portal, the container in which to append the DOM content, defaults to document body").defaultValue(void 0),
   startPlacementPreference: import_ds_utilities.PropTypes.oneOf([
     "top-start",
     "top",
@@ -69,5 +86,5 @@ const dspopperjsPropTypes = {
   extraPopperStyles: import_ds_utilities.PropTypes.object.description("Extra object styles to attach to the popper element").defaultValue({}),
   onClickOutside: import_ds_utilities.PropTypes.func.description("Callback triggered when clicking outside the popper").defaultValue(() => null),
   children: import_ds_utilities.PropTypes.node.description("The content of the popper").defaultValue(void 0)
-};
-//# sourceMappingURL=propTypes.js.map
+});
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { usePopper } from 'react-popper';\n\nexport type PopperPlacementsT =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'left-end'\n  | 'left'\n  | 'left-start';\nexport interface UseDSPopperjsPropsArgT {\n  referenceElement: HTMLElement | null;\n  showPopover: boolean;\n  closeContextMenu?: () => void;\n  onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n  withoutPortal?: boolean;\n  withoutArrow?: boolean;\n  withoutAnimation?: boolean;\n  animationDuration?: number;\n  boundaryElement?: HTMLElement;\n  portalDOMContainer?: HTMLElement;\n  placementOrderPreference?: PopperPlacementsT[];\n  startPlacementPreference?: PopperPlacementsT;\n  modifiers?: Record<string, unknown>[];\n  customOffset?: [number, number];\n  zIndex?: number;\n  extraPopperStyles?: Record<string, unknown>;\n}\nexport interface UseDSPopperjsRT {\n  props: Required<UseDSPopperjsPropsArgT>;\n  popperElement: HTMLDivElement | null;\n  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n  isAnimating: boolean;\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  arrowElement: HTMLDivElement | null;\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  popoverHelper: ReturnType<typeof usePopper>;\n  globalAttrs: GlobalAttributesT<Element>;\n  xStyledAttrs: XstyledProps;\n}\nexport interface DSDSPopperjsPropsT extends UseDSPopperjsPropsArgT {\n  children: JSX.Element | JSX.Element[];\n}\n\nexport const dspopperjsPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * React ref to popperjs referenceElement\n   */\n  referenceElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])]).description(\n    'popperjs DOM referenceElement',\n  ).isRequired,\n  /**\n   * Wheter or not to show the popper content\n   */\n  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,\n  /**\n   * Callback to close the context menu, used for \"on click outside\",\n   *  if not provided click outside will not trigger anything\n   */\n  closeContextMenu: PropTypes.func\n    .description(\n      'Callback to close the context menu, used for \"on click outside\",' +\n        ' if not provided click outside will not trigger anything',\n    )\n    .defaultValue('() => {}'),\n  /**\n   *  Wheter or not the popper content should appear in a DOM portal or not\n   */\n  withoutPortal: PropTypes.bool\n    .description('Whether or not the popper content should appear in a DOM portal or not')\n    .defaultValue(true),\n  /**\n   *  Wheter or not the popper context menu should print the arrow\n   */\n  withoutArrow: PropTypes.bool\n    .description('Whether or not the popper context menu should print the arrow')\n    .defaultValue(false),\n  /**\n   *  Whether or not the popper context menu should be animated\n   */\n  withoutAnimation: PropTypes.bool\n    .description('Whether or not the popper context menu should be animated')\n    .defaultValue(false),\n  /**\n   *  Popper context menus Animation duration in ms\n   */\n  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n  /**\n   *  Bounding element to calculate upon, defaults to it is \"clippingParents\",\n   *   which are the scrolling containers that may cause the element to be partially or fully cut off.\n   */\n  boundaryElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])])\n    .description(\n      'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n        'which are the scrolling containers that may cause element to be partially or fully cut off',\n    )\n    .defaultValue(undefined),\n  /**\n   *  When using portal, the container in which to append the DOM content, defaults to document body\n   */\n  portalDOMContainer: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])])\n    .description('When using portal, the container in which to append the DOM content, defaults to document body')\n    .defaultValue(undefined),\n  /**\n   *  start placement preferences, as per popperjs placement option\n   */\n  startPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'top'\"),\n  /**\n   *  Array of placement preferences, as per popperjs \"flip\" placement option\n   */\n  placementOrderPreference: PropTypes.arrayOf(\n    PropTypes.oneOf([\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n  )\n    .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n    .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n  /**\n   *  popperjs content z-index\n   */\n  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n  /**\n   *  placement offset array\n   */\n  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),\n  /**\n   *  modifiers array for full-custom popper-js override\n   *  https://popper.js.org/docs/v2/modifiers/\n   */\n  modifiers: PropTypes.array\n    .description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/')\n    .defaultValue(1),\n  extraPopperStyles: PropTypes.object\n    .description('Extra object styles to attach to the popper element')\n    .defaultValue({}),\n  onClickOutside: PropTypes.func\n    .description('Callback triggered when clicking outside the popper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('The content of the popper').defaultValue(undefined),\n} as WeakValidationMap<unknown>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,0BAAuE;AAmDhE,MAAM,sBAAsB,gDAC9B,gDACA,uCAF8B;AAAA,EAMjC,kBAAkB,8BAAU,UAAU,CAAC,8BAAU,WAAW,OAAO,GAAG,8BAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAC9F,+BACF,EAAE;AAAA,EAIF,aAAa,8BAAU,KAAK,YAAY,2CAA2C,EAAE;AAAA,EAKrF,kBAAkB,8BAAU,KACzB,YACC,0HAEF,EACC,aAAa,UAAU;AAAA,EAI1B,eAAe,8BAAU,KACtB,YAAY,wEAAwE,EACpF,aAAa,IAAI;AAAA,EAIpB,cAAc,8BAAU,KACrB,YAAY,+DAA+D,EAC3E,aAAa,KAAK;AAAA,EAIrB,kBAAkB,8BAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EAIrB,mBAAmB,8BAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EAKjH,iBAAiB,8BAAU,UAAU,CAAC,8BAAU,WAAW,OAAO,GAAG,8BAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC1F,YACC,8JAEF,EACC,aAAa,MAAS;AAAA,EAIzB,oBAAoB,8BAAU,UAAU,CAAC,8BAAU,WAAW,OAAO,GAAG,8BAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7F,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EAIzB,0BAA0B,8BAAU,MAAM;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EAIvB,0BAA0B,8BAAU,QAClC,8BAAU,MAAM;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,CACH,EACG,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EAIpD,QAAQ,8BAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAI/E,cAAc,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC;AAAA,EAKtG,WAAW,8BAAU,MAClB,YAAY,8FAA8F,EAC1G,aAAa,CAAC;AAAA,EACjB,mBAAmB,8BAAU,OAC1B,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,8BAAU,KACvB,YAAY,qDAAqD,EACjE,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,8BAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,MAAS;AAC1F;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -26,8 +26,7 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_ds_system2 = require("@elliemae/ds-system");
-const showAnimation = import_ds_system2.kfrm`
+const showAnimation = import_ds_system.kfrm`
     from {
       opacity: 0;
       transform: scale(0.8);
@@ -39,7 +38,7 @@ const showAnimation = import_ds_system2.kfrm`
       visibility: visible;
     }
 `;
-const hideAnimation = import_ds_system2.kfrm`
+const hideAnimation = import_ds_system.kfrm`
     from {
       opacity: 1;
       transform: scale(1);
@@ -53,11 +52,14 @@ const hideAnimation = import_ds_system2.kfrm`
 `;
 const StyledPopoverContentWrapper = import_ds_system.styled.div`
   z-index: ${({ theme, zIndex }) => zIndex ?? theme.zIndex.popper};
+  ${import_ds_system.layout}
+  ${import_ds_system.sizing}
+  ${import_ds_system.space}
 `;
 const StyledAnimatedPopper = import_ds_system.styled.div`
   box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);
 
-  ${({ showPopover, animationDuration, withoutAnimation }) => !withoutAnimation && import_ds_system2.css`
+  ${({ showPopover, animationDuration, withoutAnimation }) => !withoutAnimation && import_ds_system.css`
       animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;
     `}
 `;

package/dist/cjs/styled.js.map

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/utils/hooks/useOnClickOutside.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect } from 'react';\n\ntype defaultCbt = (e: React.MouseEvent) => void;\nexport function useOnClickOutside<T extends Node, cbT extends defaultCbt>(ref: T, cb: cbT): void {\n  useEffect(() => {\n    const listener = (event) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (!ref || ref?.contains?.(event.target)) {\n        return;\n      }\n      cb(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, cb]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiC;AAG1B,2BAAmE,KAAQ,IAAe;AAC/F,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAU;AAE1B,UAAI,CAAC,OAAO,KAAK,WAAW,MAAM,MAAM,GAAG;AACzC;AAAA,MACF;AACA,SAAG,KAAK;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,EAAE,CAAC;AACd;",
+  "sourcesContent": ["import { useEffect } from 'react';\n\ntype DefaultCbt = (e: MouseEvent | TouchEvent) => void;\nexport function useOnClickOutside<T extends Node, CbT extends DefaultCbt>(ref: T, cb: CbT): void {\n  useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (!ref || ref?.contains?.(event.target as Node)) {\n        return;\n      }\n      cb(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, cb]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0B;AAGnB,2BAAmE,KAAQ,IAAe;AAC/F,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAmC;AAEnD,UAAI,CAAC,OAAO,KAAK,WAAW,MAAM,MAAc,GAAG;AACjD;AAAA,MACF;AACA,SAAG,KAAK;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,EAAE,CAAC;AACd;",
   "names": []
 }

package/dist/esm/PopoverArrow.js

@@ -10,11 +10,11 @@ const StyledArrow = styled.div`
   pointer-events: none;
   background-color: transparent;
   & .stroke {
-    fill: ${({ theme }) => theme.colors.neutral["500"]};
+    fill: neutral-500;
     fill-opacity: 0.4;
   }
   & .fill {
-    fill: ${({ theme }) => theme.colors.neutral["000"]};
+    fill: neutral-000;
   }
 
   &[data-placement^='top'] {

package/dist/esm/PopoverArrow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverArrow.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\ninterface PopoverArrowT {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div`\n  position: absolute;\n  width: ${arrowWidth}px;\n  height: ${arrowHeight}px;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: ${({ theme }) => theme.colors.neutral['500']};\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight}px;\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowWidth}px;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowHeight}px;\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowWidth}px;\n  }\n  margin-left: ${(props) =>\n    props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n      ? `-${arrowWidth / 2}px;`\n      : '0;'};\n  margin-top: ${(props) =>\n    props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n      ? `-${arrowHeight / 2}px;`\n      : '0;'};\n`;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef }: PopoverArrowT): React.ReactElement => (\n  <StyledArrow\n    key=\"popper-arrow\"\n    data-placement={placement}\n    style={style}\n    ref={arrowElementRef}\n    data-testid=\"ds-tooltip-arrow\"\n  >\n    <svg viewBox=\"0 0 30 30\">\n      <path\n        className=\"stroke\"\n        d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n      />\n      <path\n        className=\"fill\"\n        d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n      />\n    </svg>\n  </StyledArrow>\n);\n"],
-  "mappings": "AAAA;ACAA;AACA;AAMA,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,OAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA,YAIA,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAIpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,sBAC/C,qCAAC;AAAA,EACC,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,qCAAC;AAAA,EAAI,SAAQ;AAAA,GACX,qCAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CAEJ,GACA,qCAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CACJ,CACF,CACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\ninterface PopoverArrowT {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div<{ 'data-placement': string }>`\n  position: absolute;\n  width: ${arrowWidth}px;\n  height: ${arrowHeight}px;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: neutral-500;\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: neutral-000;\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight}px;\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowWidth}px;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowHeight}px;\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowWidth}px;\n  }\n  margin-left: ${(props) =>\n    props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n      ? `-${arrowWidth / 2}px;`\n      : '0;'};\n  margin-top: ${(props) =>\n    props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n      ? `-${arrowHeight / 2}px;`\n      : '0;'};\n`;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef }: PopoverArrowT): React.ReactElement => (\n  <StyledArrow\n    key=\"popper-arrow\"\n    data-placement={placement}\n    style={style}\n    ref={arrowElementRef}\n    data-testid=\"ds-tooltip-arrow\"\n  >\n    <svg viewBox=\"0 0 30 30\">\n      <path\n        className=\"stroke\"\n        d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n      />\n      <path\n        className=\"fill\"\n        d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n      />\n    </svg>\n  </StyledArrow>\n);\n"],
+  "mappings": "AAAA;ACAA;AACA;AAMA,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,OAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,sBAC/C,qCAAC;AAAA,EACC,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,qCAAC;AAAA,EAAI,SAAQ;AAAA,GACX,qCAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CAEJ,GACA,qCAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CACJ,CACF,CACF;",
   "names": []
 }

package/dist/esm/PopoverContent.js

@@ -30,7 +30,9 @@ const PopoverContent = ({
   withoutArrow,
   withoutAnimation,
   animationDuration,
-  zIndex
+  zIndex,
+  globalAttrs,
+  xStyledAttrs
 }) => {
   const checkAnimationStatus = useCallback(() => {
     if (!showPopover && !withoutAnimation) {
@@ -45,11 +47,11 @@ const PopoverContent = ({
     ref: setArrowElement,
     style: arrowStyle
   })) : null), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
-  return /* @__PURE__ */ React2.createElement(StyledPopoverContentWrapper, __spreadValues({
+  return /* @__PURE__ */ React2.createElement(StyledPopoverContentWrapper, __spreadValues(__spreadValues(__spreadValues({
     zIndex,
     ref: setPopperElement,
     style: popperStyles
-  }, popperAttributes), /* @__PURE__ */ React2.createElement(StyledAnimatedPopper, {
+  }, popperAttributes), globalAttrs), xStyledAttrs), /* @__PURE__ */ React2.createElement(StyledAnimatedPopper, {
     showPopover,
     animationDuration,
     withoutAnimation,

package/dist/esm/PopoverContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { PopoverArrow } from './PopoverArrow';\nimport type { PopoverContentPropsT } from './index.d';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\n\nexport const PopoverContent = ({\n  setPopperElement,\n  popperStyles,\n  popperAttributes,\n  children,\n  showPopover,\n  setArrowElement,\n  setIsAnimating,\n  arrowStyle,\n  withoutArrow,\n  withoutAnimation,\n  animationDuration,\n  zIndex,\n}: PopoverContentPropsT): JSX.Element => {\n  const checkAnimationStatus = useCallback(() => {\n    if (!showPopover && !withoutAnimation) {\n      setIsAnimating(false);\n    }\n  }, [showPopover, withoutAnimation, setIsAnimating]);\n\n  const popperContent = useMemo(\n    () => (\n      <>\n        {children}\n        {withoutArrow === false ? (\n          <>\n            <PopoverArrow\n              arrowElementRef={setArrowElement}\n              style={arrowStyle}\n              placement={popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'}\n            />\n            <div ref={setArrowElement} style={arrowStyle} />\n          </>\n        ) : null}\n      </>\n    ),\n    [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement],\n  );\n  return (\n    <StyledPopoverContentWrapper zIndex={zIndex} ref={setPopperElement} style={popperStyles} {...popperAttributes}>\n      <StyledAnimatedPopper\n        showPopover={showPopover}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        onAnimationEnd={checkAnimationStatus}\n      >\n        {popperContent}\n      </StyledAnimatedPopper>\n    </StyledPopoverContentWrapper>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAEA;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACuC;AACvC,QAAM,uBAAuB,YAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,gBAAgB,QACpB,MACE,4DACG,UACA,iBAAiB,QAChB,4DACE,qCAAC;AAAA,IACC,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,GAC5E,GACA,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO;AAAA,GAAY,CAChD,IACE,IACN,GAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe,CACxE;AACA,SACE,qCAAC;AAAA,IAA4B;AAAA,IAAgB,KAAK;AAAA,IAAkB,OAAO;AAAA,KAAkB,mBAC3F,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf,aACH,CACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PopoverArrow } from './PopoverArrow';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\n\nexport interface PopoverContentPropsT {\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  popperStyles: React.CSSProperties;\n  arrowStyle: React.CSSProperties;\n  popperAttributes: Record<string, string> | undefined;\n  children: JSX.Element | JSX.Element[];\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  withoutArrow: boolean;\n  withoutAnimation: boolean;\n  animationDuration: number;\n  zIndex: number;\n  showPopover: boolean;\n  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n  globalAttrs: GlobalAttributesT;\n  xStyledAttrs: XstyledProps;\n}\n\nexport const PopoverContent = ({\n  setPopperElement,\n  popperStyles,\n  popperAttributes,\n  children,\n  showPopover,\n  setArrowElement,\n  setIsAnimating,\n  arrowStyle,\n  withoutArrow,\n  withoutAnimation,\n  animationDuration,\n  zIndex,\n  globalAttrs,\n  xStyledAttrs,\n}: PopoverContentPropsT): JSX.Element => {\n  const checkAnimationStatus = useCallback(() => {\n    if (!showPopover && !withoutAnimation) {\n      setIsAnimating(false);\n    }\n  }, [showPopover, withoutAnimation, setIsAnimating]);\n\n  const popperContent = useMemo(\n    () => (\n      <>\n        {children}\n        {withoutArrow === false ? (\n          <>\n            <PopoverArrow\n              arrowElementRef={setArrowElement}\n              style={arrowStyle}\n              placement={popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'}\n            />\n            <div ref={setArrowElement} style={arrowStyle} />\n          </>\n        ) : null}\n      </>\n    ),\n    [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement],\n  );\n  return (\n    <StyledPopoverContentWrapper\n      zIndex={zIndex}\n      ref={setPopperElement}\n      style={popperStyles}\n      {...popperAttributes}\n      {...globalAttrs}\n      {...xStyledAttrs}\n    >\n      <StyledAnimatedPopper\n        showPopover={showPopover}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        onAnimationEnd={checkAnimationStatus}\n      >\n        {popperContent}\n      </StyledAnimatedPopper>\n    </StyledPopoverContentWrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AACA;AAmBO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACuC;AACvC,QAAM,uBAAuB,YAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,gBAAgB,QACpB,MACE,4DACG,UACA,iBAAiB,QAChB,4DACE,qCAAC;AAAA,IACC,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,GAC5E,GACA,qCAAC;AAAA,IAAI,KAAK;AAAA,IAAiB,OAAO;AAAA,GAAY,CAChD,IACE,IACN,GAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe,CACxE;AACA,SACE,qCAAC;AAAA,IACC;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,KACH,mBACA,cACA,eAEJ,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf,aACH,CACF;AAEJ;",
   "names": []
 }

package/dist/esm/config/useConfigDSPopperjs.js

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useMemo, useState, useEffect } from "react";
 import { usePopper } from "react-popper";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-utilities";
 import { useConfiguredMergedProps } from "./useConfiguredMergedProps";
 import { useOnClickOutside } from "../utils/hooks/useOnClickOutside";
 const useConfigDSPopperjs = (appProps) => {
@@ -23,6 +24,8 @@ const useConfigDSPopperjs = (appProps) => {
       closeContextMenu();
     }
   });
+  const globalAttrs = useGetGlobalAttributes(props);
+  const xStyledAttrs = useGetXstyledProps(props);
   return useMemo(() => ({
     props,
     popperElement,
@@ -31,8 +34,10 @@ const useConfigDSPopperjs = (appProps) => {
     setArrowElement,
     popoverHelper,
     isAnimating,
-    setIsAnimating
-  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
+    setIsAnimating,
+    globalAttrs,
+    xStyledAttrs
+  }), [props, popperElement, arrowElement, popoverHelper, isAnimating, globalAttrs, xStyledAttrs]);
 };
 export {
   useConfigDSPopperjs

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfigDSPopperjs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useEffect } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useConfiguredMergedProps } from './useConfiguredMergedProps';\nimport type { useDSPopperjsPropsArgT, useDSPopperjsRT } from '../index.d';\n\nimport { useOnClickOutside } from '../utils/hooks/useOnClickOutside';\n\nexport const useConfigDSPopperjs = (appProps: useDSPopperjsPropsArgT): useDSPopperjsRT => {\n  const [popperElement, setPopperElement] = useState(null);\n  const [arrowElement, setArrowElement] = useState(null);\n  const [isAnimating, setIsAnimating] = useState<boolean>(false);\n\n  const props = useConfiguredMergedProps({ props: appProps, arrowElement });\n  const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;\n  const popperExtraOpts = useMemo(\n    () => ({ placement: startPlacementPreference, modifiers }),\n    [modifiers, startPlacementPreference],\n  );\n\n  const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);\n\n  const { showPopover, withoutAnimation } = props;\n\n  useEffect(() => {\n    if (showPopover && !withoutAnimation) {\n      setIsAnimating(true);\n    }\n  }, [showPopover, withoutAnimation]);\n\n  useOnClickOutside(popperElement, (e) => {\n    if (!referenceElement?.contains?.(e?.target)) {\n      onClickOutside(e);\n      closeContextMenu();\n    }\n  });\n\n  return useMemo(\n    () => ({\n      props,\n      popperElement,\n      setPopperElement,\n      arrowElement,\n      setArrowElement,\n      popoverHelper,\n      isAnimating,\n      setIsAnimating,\n    }),\n    [arrowElement, popoverHelper, popperElement, isAnimating, props],\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AAGA;AAEO,MAAM,sBAAsB,CAAC,aAAsD;AACxF,QAAM,CAAC,eAAe,oBAAoB,SAAS,IAAI;AACvD,QAAM,CAAC,cAAc,mBAAmB,SAAS,IAAI;AACrD,QAAM,CAAC,aAAa,kBAAkB,SAAkB,KAAK;AAE7D,QAAM,QAAQ,yBAAyB,EAAE,OAAO,UAAU,aAAa,CAAC;AACxE,QAAM,EAAE,kBAAkB,kBAAkB,gBAAgB,WAAW,6BAA6B;AACpG,QAAM,kBAAkB,QACtB,MAAO,GAAE,WAAW,0BAA0B,UAAU,IACxD,CAAC,WAAW,wBAAwB,CACtC;AAEA,QAAM,gBAAgB,UAAU,kBAAkB,eAAe,eAAe;AAEhF,QAAM,EAAE,aAAa,qBAAqB;AAE1C,YAAU,MAAM;AACd,QAAI,eAAe,CAAC,kBAAkB;AACpC,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,aAAa,gBAAgB,CAAC;AAElC,oBAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,kBAAkB,WAAW,GAAG,MAAM,GAAG;AAC5C,qBAAe,CAAC;AAChB,uBAAiB;AAAA,IACnB;AAAA,EACF,CAAC;AAED,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,cAAc,eAAe,eAAe,aAAa,KAAK,CACjE;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useEffect } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';\nimport { useConfiguredMergedProps } from './useConfiguredMergedProps';\nimport type { UseDSPopperjsPropsArgT, UseDSPopperjsRT } from '../react-desc-prop-types';\n\nimport { useOnClickOutside } from '../utils/hooks/useOnClickOutside';\n\nexport const useConfigDSPopperjs = (appProps: UseDSPopperjsPropsArgT): UseDSPopperjsRT => {\n  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n  const [isAnimating, setIsAnimating] = useState(false);\n\n  const props = useConfiguredMergedProps({ props: appProps, arrowElement });\n  const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;\n  const popperExtraOpts = useMemo(\n    () => ({ placement: startPlacementPreference, modifiers }),\n    [modifiers, startPlacementPreference],\n  );\n\n  const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);\n\n  const { showPopover, withoutAnimation } = props;\n\n  useEffect(() => {\n    if (showPopover && !withoutAnimation) {\n      setIsAnimating(true);\n    }\n  }, [showPopover, withoutAnimation]);\n\n  useOnClickOutside(popperElement as Node, (e) => {\n    if (!referenceElement?.contains?.(e?.target as Node)) {\n      onClickOutside(e);\n      closeContextMenu();\n    }\n  });\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xStyledAttrs = useGetXstyledProps(props);\n\n  return useMemo(\n    () => ({\n      props,\n      popperElement,\n      setPopperElement,\n      arrowElement,\n      setArrowElement,\n      popoverHelper,\n      isAnimating,\n      setIsAnimating,\n      globalAttrs,\n      xStyledAttrs,\n    }),\n    [props, popperElement, arrowElement, popoverHelper, isAnimating, globalAttrs, xStyledAttrs],\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAGA;AAEO,MAAM,sBAAsB,CAAC,aAAsD;AACxF,QAAM,CAAC,eAAe,oBAAoB,SAAgC,IAAI;AAC9E,QAAM,CAAC,cAAc,mBAAmB,SAAgC,IAAI;AAC5E,QAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;AAEpD,QAAM,QAAQ,yBAAyB,EAAE,OAAO,UAAU,aAAa,CAAC;AACxE,QAAM,EAAE,kBAAkB,kBAAkB,gBAAgB,WAAW,6BAA6B;AACpG,QAAM,kBAAkB,QACtB,MAAO,GAAE,WAAW,0BAA0B,UAAU,IACxD,CAAC,WAAW,wBAAwB,CACtC;AAEA,QAAM,gBAAgB,UAAU,kBAAkB,eAAe,eAAe;AAEhF,QAAM,EAAE,aAAa,qBAAqB;AAE1C,YAAU,MAAM;AACd,QAAI,eAAe,CAAC,kBAAkB;AACpC,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,aAAa,gBAAgB,CAAC;AAElC,oBAAkB,eAAuB,CAAC,MAAM;AAC9C,QAAI,CAAC,kBAAkB,WAAW,GAAG,MAAc,GAAG;AACpD,qBAAe,CAAC;AAChB,uBAAiB;AAAA,IACnB;AAAA,EACF,CAAC;AAED,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,SAAO,QACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,OAAO,eAAe,cAAc,eAAe,aAAa,aAAa,YAAY,CAC5F;AACF;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfiguredDefaultModifiers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\n\nexport const useConfiguredDefaultModifiers = ({ props, arrowElement }) => {\n  // we destructure explicit app definitions before merge\n  const {\n    boundaryElement: explicitAppBoundaryElement,\n    withoutArrow: explicitAppWithoutArrow = false,\n    placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],\n    customOffset: explictAppOffset = undefined,\n  } = props;\n  // to build default modifiers on top of it\n  const defaultModifiers = useMemo(() => {\n    const mod = [];\n    mod.push({ name: 'hide', enabled: true });\n    mod.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: explicitPlacementOrderPreference,\n      },\n    });\n    // we apply an offset if the app defines one or if the app wants the arrow\n    if (!explicitAppWithoutArrow || explictAppOffset) {\n      const defaultOffset = explictAppOffset || [0, 14];\n      mod.push({\n        name: 'offset',\n        enabled: true,\n        options: {\n          offset: defaultOffset,\n        },\n      });\n    }\n    // the app can opt for a \"no arrow\" implementation (we do so in datatable/calendar etc...)\n    if (!explicitAppWithoutArrow)\n      mod.push({\n        name: 'arrow',\n        options: {\n          element: arrowElement,\n          padding: 18,\n        },\n      });\n\n    // the app can define an explicit element to act as a boundary instead of popperjs default one\n    if (explicitAppBoundaryElement)\n      mod.push({\n        name: 'preventOverflow',\n        options: {\n          boundary: explicitAppBoundaryElement,\n        },\n      });\n    return mod;\n  }, [\n    arrowElement,\n    explicitAppBoundaryElement,\n    explicitAppWithoutArrow,\n    explicitPlacementOrderPreference,\n    explictAppOffset,\n  ]);\n  // if the app pass custom modifier, we don't use \"default modifiers\"\n  const { modifiers: explicitAppModifiers = defaultModifiers } = props;\n\n  return useMemo(\n    () => ({\n      modifiers: explicitAppModifiers,\n    }),\n    [explicitAppModifiers],\n  );\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,gCAAgC,CAAC,EAAE,OAAO,mBAAmB;AAExE,QAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,cAAc,0BAA0B;AAAA,IACxC,0BAA0B,mCAAmC,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC9F,cAAc,mBAAmB;AAAA,MAC/B;AAEJ,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,MAAM,CAAC;AACb,QAAI,KAAK,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AACxC,QAAI,KAAK;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,QACP,oBAAoB;AAAA,MACtB;AAAA,IACF,CAAC;AAED,QAAI,CAAC,2BAA2B,kBAAkB;AAChD,YAAM,gBAAgB,oBAAoB,CAAC,GAAG,EAAE;AAChD,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,CAAC;AACH,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS;AAAA,UACT,SAAS;AAAA,QACX;AAAA,MACF,CAAC;AAGH,QAAI;AACF,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,MACF,CAAC;AACH,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,WAAW,uBAAuB,qBAAqB;AAE/D,SAAO,QACL,MAAO;AAAA,IACL,WAAW;AAAA,EACb,IACA,CAAC,oBAAoB,CACvB;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { UseDSPopperjsPropsArgT } from '../react-desc-prop-types';\n\ninterface UseConfiguredDefaultModifiersT {\n  props: UseDSPopperjsPropsArgT;\n  arrowElement: HTMLDivElement | null;\n}\n\nexport const useConfiguredDefaultModifiers = ({ props, arrowElement }: UseConfiguredDefaultModifiersT) => {\n  // we destructure explicit app definitions before merge\n  const {\n    boundaryElement: explicitAppBoundaryElement,\n    withoutArrow: explicitAppWithoutArrow = false,\n    placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],\n    customOffset: explictAppOffset = undefined,\n  } = props;\n  // to build default modifiers on top of it\n  const defaultModifiers = useMemo(() => {\n    const mod = [];\n    mod.push({ name: 'hide', enabled: true });\n    mod.push({\n      name: 'flip',\n      options: {\n        fallbackPlacements: explicitPlacementOrderPreference,\n      },\n    });\n    // we apply an offset if the app defines one or if the app wants the arrow\n    if (!explicitAppWithoutArrow || explictAppOffset) {\n      const defaultOffset = explictAppOffset || [0, 14];\n      mod.push({\n        name: 'offset',\n        enabled: true,\n        options: {\n          offset: defaultOffset,\n        },\n      });\n    }\n    // the app can opt for a \"no arrow\" implementation (we do so in datatable/calendar etc...)\n    if (!explicitAppWithoutArrow)\n      mod.push({\n        name: 'arrow',\n        options: {\n          element: arrowElement,\n          padding: 18,\n        },\n      });\n\n    // the app can define an explicit element to act as a boundary instead of popperjs default one\n    if (explicitAppBoundaryElement)\n      mod.push({\n        name: 'preventOverflow',\n        options: {\n          boundary: explicitAppBoundaryElement,\n        },\n      });\n    return mod;\n  }, [\n    arrowElement,\n    explicitAppBoundaryElement,\n    explicitAppWithoutArrow,\n    explicitPlacementOrderPreference,\n    explictAppOffset,\n  ]);\n  // if the app pass custom modifier, we don't use \"default modifiers\"\n  const { modifiers: explicitAppModifiers = defaultModifiers } = props;\n\n  return useMemo(\n    () => ({\n      modifiers: explicitAppModifiers,\n    }),\n    [explicitAppModifiers],\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AAQO,MAAM,gCAAgC,CAAC,EAAE,OAAO,mBAAmD;AAExG,QAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,cAAc,0BAA0B;AAAA,IACxC,0BAA0B,mCAAmC,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC9F,cAAc,mBAAmB;AAAA,MAC/B;AAEJ,QAAM,mBAAmB,QAAQ,MAAM;AACrC,UAAM,MAAM,CAAC;AACb,QAAI,KAAK,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AACxC,QAAI,KAAK;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,QACP,oBAAoB;AAAA,MACtB;AAAA,IACF,CAAC;AAED,QAAI,CAAC,2BAA2B,kBAAkB;AAChD,YAAM,gBAAgB,oBAAoB,CAAC,GAAG,EAAE;AAChD,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AAEA,QAAI,CAAC;AACH,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS;AAAA,UACT,SAAS;AAAA,QACX;AAAA,MACF,CAAC;AAGH,QAAI;AACF,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,MACF,CAAC;AACH,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,WAAW,uBAAuB,qBAAqB;AAE/D,SAAO,QACL,MAAO;AAAA,IACL,WAAW;AAAA,EACb,IACA,CAAC,oBAAoB,CACvB;AACF;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfiguredDefaultProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { useConfiguredDefaultModifiers } from './useConfiguredDefaultModifiers';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst emptyObj = {};\n\nexport const useConfiguredDefaultProps = ({ props, arrowElement }) => {\n  // don't move this out of the hook or `document.body` will explode\n  const staticDefaultProps = useMemo(\n    () => ({\n      referenceElement: null,\n      showPopover: false,\n      closeContextMenu: noop,\n      onClickOutside: noop,\n      withoutPortal: false,\n      withoutArrow: false,\n      withoutAnimation: false,\n      animationDuration: 100,\n      portalDOMContainer: document.body,\n      startPlacementPreference: 'top',\n      placementOrderPreference: ['top', 'bottom', 'left', 'right'],\n      extraPopperStyles: emptyObj,\n    }),\n    [],\n  );\n  const { modifiers: configuredModifiers } = useConfiguredDefaultModifiers({\n    props,\n    arrowElement,\n  });\n\n  const defaultProps = useMemo(\n    () => ({ ...staticDefaultProps, modifiers: configuredModifiers }),\n    [configuredModifiers, staticDefaultProps],\n  );\n\n  return defaultProps;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AAGA,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,WAAW,CAAC;AAEX,MAAM,4BAA4B,CAAC,EAAE,OAAO,mBAAmB;AAEpE,QAAM,qBAAqB,QACzB,MAAO;AAAA,IACL,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,oBAAoB,SAAS;AAAA,IAC7B,0BAA0B;AAAA,IAC1B,0BAA0B,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC3D,mBAAmB;AAAA,EACrB,IACA,CAAC,CACH;AACA,QAAM,EAAE,WAAW,wBAAwB,8BAA8B;AAAA,IACvE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,QACnB,MAAO,iCAAK,qBAAL,EAAyB,WAAW,oBAAoB,IAC/D,CAAC,qBAAqB,kBAAkB,CAC1C;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo } from 'react';\nimport { useConfiguredDefaultModifiers } from './useConfiguredDefaultModifiers';\nimport { UseDSPopperjsPropsArgT } from '../react-desc-prop-types';\n\nconst noop = () => {};\n\nconst emptyObj = {};\n\ninterface UseConfiguredDefaultPropsT {\n  props: UseDSPopperjsPropsArgT;\n  arrowElement: HTMLDivElement | null;\n}\n\nexport const useConfiguredDefaultProps = ({ props, arrowElement }: Required<UseConfiguredDefaultPropsT>) => {\n  // don't move this out of the hook or `document.body` will explode\n  const staticDefaultProps: UseDSPopperjsPropsArgT = useMemo(\n    () => ({\n      referenceElement: null,\n      showPopover: false,\n      closeContextMenu: noop,\n      onClickOutside: noop,\n      withoutPortal: false,\n      withoutArrow: false,\n      withoutAnimation: false,\n      animationDuration: 100,\n      portalDOMContainer: document.body,\n      startPlacementPreference: 'top',\n      placementOrderPreference: ['top', 'bottom', 'left', 'right'],\n      extraPopperStyles: emptyObj,\n    }),\n    [],\n  );\n  const { modifiers: configuredModifiers } = useConfiguredDefaultModifiers({\n    props,\n    arrowElement,\n  });\n\n  const defaultProps = useMemo(\n    () => ({ ...staticDefaultProps, modifiers: configuredModifiers }),\n    [configuredModifiers, staticDefaultProps],\n  );\n\n  return defaultProps;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AAGA,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,WAAW,CAAC;AAOX,MAAM,4BAA4B,CAAC,EAAE,OAAO,mBAAyD;AAE1G,QAAM,qBAA6C,QACjD,MAAO;AAAA,IACL,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,oBAAoB,SAAS;AAAA,IAC7B,0BAA0B;AAAA,IAC1B,0BAA0B,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC3D,mBAAmB;AAAA,EACrB,IACA,CAAC,CACH;AACA,QAAM,EAAE,WAAW,wBAAwB,8BAA8B;AAAA,IACvE;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,QACnB,MAAO,iCAAK,qBAAL,EAAyB,WAAW,oBAAoB,IAC/D,CAAC,qBAAqB,kBAAkB,CAC1C;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfiguredMergedProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { useConfiguredDefaultProps } from './useConfiguredDefaultProps';\n\nexport const useConfiguredMergedProps = ({ props, arrowElement }) => {\n  const defaultProps = useConfiguredDefaultProps({ props, arrowElement });\n\n  return useMemoMergePropsWithDefault(props, defaultProps);\n};\n"],
-  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,2BAA2B,CAAC,EAAE,OAAO,mBAAmB;AACnE,QAAM,eAAe,0BAA0B,EAAE,OAAO,aAAa,CAAC;AAEtE,SAAO,6BAA6B,OAAO,YAAY;AACzD;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { useConfiguredDefaultProps } from './useConfiguredDefaultProps';\nimport { UseDSPopperjsPropsArgT } from '../react-desc-prop-types';\n\ninterface UseConfiguredMergedPropsT {\n  props: UseDSPopperjsPropsArgT;\n  arrowElement: HTMLDivElement | null;\n}\n\nexport const useConfiguredMergedProps = ({ props, arrowElement }: UseConfiguredMergedPropsT) => {\n  const defaultProps = useConfiguredDefaultProps({ props, arrowElement });\n\n  return useMemoMergePropsWithDefault<Required<UseDSPopperjsPropsArgT>>(props, defaultProps);\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAQO,MAAM,2BAA2B,CAAC,EAAE,OAAO,mBAA8C;AAC9F,QAAM,eAAe,0BAA0B,EAAE,OAAO,aAAa,CAAC;AAEtE,SAAO,6BAA+D,OAAO,YAAY;AAC3F;",
   "names": []
 }

package/dist/esm/index.js

@@ -18,9 +18,9 @@ import * as React from "react";
 import React2, { useMemo } from "react";
 import { createPortal } from "react-dom";
 import { describe } from "@elliemae/ds-utilities";
-import { dspopperjsPropTypes } from "./propTypes";
 import { PopoverContent } from "./PopoverContent";
 import { useConfigDSPopperjs } from "./config/useConfigDSPopperjs";
+import { dspopperjsPropTypes } from "./react-desc-prop-types";
 const DSPopperJS = (props) => {
   const {
     props: {
@@ -33,6 +33,8 @@ const DSPopperJS = (props) => {
       zIndex,
       extraPopperStyles
     },
+    globalAttrs,
+    xStyledAttrs,
     setPopperElement,
     setArrowElement,
     setIsAnimating,
@@ -52,7 +54,9 @@ const DSPopperJS = (props) => {
     animationDuration,
     zIndex,
     showPopover,
-    setIsAnimating
+    setIsAnimating,
+    globalAttrs,
+    xStyledAttrs
   }, children), [
     attributes.popper,
     children,
@@ -66,13 +70,15 @@ const DSPopperJS = (props) => {
     withoutArrow,
     withoutAnimation,
     animationDuration,
-    zIndex
+    zIndex,
+    globalAttrs,
+    xStyledAttrs
   ]);
   if (showPopover || isAnimating) {
     if (withoutPortal === true)
       return contentJSX;
     if (withoutPortal === false)
-      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, createPortal(/* @__PURE__ */ React2.createElement(React2.Fragment, null, contentJSX), portalDOMContainer));
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null, createPortal(contentJSX, portalDOMContainer));
   }
   return null;
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe } from '@elliemae/ds-utilities';\nimport { dspopperjsPropTypes } from './propTypes';\nimport { PopoverContent } from './PopoverContent';\nimport { useConfigDSPopperjs } from './config/useConfigDSPopperjs';\nimport type { DSDSPopperjsPropsT } from './index.d';\n\nconst DSPopperJS = (props: DSDSPopperjsPropsT): JSX.Element => {\n  const {\n    props: {\n      showPopover,\n      withoutAnimation,\n      animationDuration,\n      withoutPortal,\n      withoutArrow,\n      portalDOMContainer,\n      zIndex,\n      extraPopperStyles,\n    },\n    setPopperElement,\n    setArrowElement,\n    setIsAnimating,\n    popoverHelper,\n    isAnimating,\n  } = useConfigDSPopperjs(props);\n  const { children } = props;\n  const { styles, attributes } = popoverHelper;\n  const contentJSX = useMemo(\n    () => (\n      <PopoverContent\n        setPopperElement={setPopperElement}\n        popperStyles={{ ...styles.popper, ...extraPopperStyles }}\n        popperAttributes={attributes.popper}\n        setArrowElement={setArrowElement}\n        arrowStyle={styles.arrow}\n        withoutArrow={withoutArrow}\n        withoutAnimation={withoutAnimation}\n        animationDuration={animationDuration}\n        zIndex={zIndex}\n        showPopover={showPopover}\n        setIsAnimating={setIsAnimating}\n      >\n        {children}\n      </PopoverContent>\n    ),\n    [\n      attributes.popper,\n      children,\n      setIsAnimating,\n      showPopover,\n      extraPopperStyles,\n      setArrowElement,\n      setPopperElement,\n      styles.arrow,\n      styles.popper,\n      withoutArrow,\n      withoutAnimation,\n      animationDuration,\n      zIndex,\n    ],\n  );\n  if (showPopover || isAnimating) {\n    if (withoutPortal === true) return contentJSX;\n    if (withoutPortal === false) return <>{createPortal(<>{contentJSX}</>, portalDOMContainer)}</>;\n  }\n  return null;\n};\n\nDSPopperJS.propTypes = dspopperjsPropTypes;\nDSPopperJS.displayName = 'DSPopperJS';\nconst DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');\nDSPopperJSWithSchema.propTypes = dspopperjsPropTypes;\n\nexport { DSPopperJS, DSPopperJSWithSchema };\nexport default DSPopperJS;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,aAAa,CAAC,UAA2C;AAC7D,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB,KAAK;AAC7B,QAAM,EAAE,aAAa;AACrB,QAAM,EAAE,QAAQ,eAAe;AAC/B,QAAM,aAAa,QACjB,MACE,qCAAC;AAAA,IACC;AAAA,IACA,cAAc,kCAAK,OAAO,SAAW;AAAA,IACrC,kBAAkB,WAAW;AAAA,IAC7B;AAAA,IACA,YAAY,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,QACH,GAEF;AAAA,IACE,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO,4DAAG,aAAa,4DAAG,UAAW,GAAK,kBAAkB,CAAE;AAAA,EAC7F;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe } from '@elliemae/ds-utilities';\nimport { PopoverContent } from './PopoverContent';\nimport { useConfigDSPopperjs } from './config/useConfigDSPopperjs';\nimport { dspopperjsPropTypes, DSDSPopperjsPropsT } from './react-desc-prop-types';\n\nconst DSPopperJS: React.ComponentType<DSDSPopperjsPropsT> = (props) => {\n  const {\n    props: {\n      showPopover,\n      withoutAnimation,\n      animationDuration,\n      withoutPortal,\n      withoutArrow,\n      portalDOMContainer,\n      zIndex,\n      extraPopperStyles,\n    },\n    globalAttrs,\n    xStyledAttrs,\n    setPopperElement,\n    setArrowElement,\n    setIsAnimating,\n    popoverHelper,\n    isAnimating,\n  } = useConfigDSPopperjs(props);\n  const { children } = props;\n  const { styles, attributes } = popoverHelper;\n  const contentJSX = useMemo(\n    () => (\n      <PopoverContent\n        setPopperElement={setPopperElement}\n        popperStyles={{ ...styles.popper, ...extraPopperStyles }}\n        popperAttributes={attributes.popper}\n        setArrowElement={setArrowElement}\n        arrowStyle={styles.arrow}\n        withoutArrow={withoutArrow}\n        withoutAnimation={withoutAnimation}\n        animationDuration={animationDuration}\n        zIndex={zIndex}\n        showPopover={showPopover}\n        setIsAnimating={setIsAnimating}\n        globalAttrs={globalAttrs}\n        xStyledAttrs={xStyledAttrs}\n      >\n        {children}\n      </PopoverContent>\n    ),\n    [\n      attributes.popper,\n      children,\n      setIsAnimating,\n      showPopover,\n      extraPopperStyles,\n      setArrowElement,\n      setPopperElement,\n      styles.arrow,\n      styles.popper,\n      withoutArrow,\n      withoutAnimation,\n      animationDuration,\n      zIndex,\n      globalAttrs,\n      xStyledAttrs,\n    ],\n  );\n  if (showPopover || isAnimating) {\n    if (withoutPortal === true) return contentJSX;\n    if (withoutPortal === false) return <>{createPortal(contentJSX, portalDOMContainer)}</>;\n  }\n  return null;\n};\n\nDSPopperJS.propTypes = dspopperjsPropTypes;\nDSPopperJS.displayName = 'DSPopperJS';\nconst DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');\nDSPopperJSWithSchema.propTypes = dspopperjsPropTypes;\n\nexport { DSPopperJS, DSPopperJSWithSchema };\nexport default DSPopperJS;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,aAAsD,CAAC,UAAU;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,oBAAoB,KAAK;AAC7B,QAAM,EAAE,aAAa;AACrB,QAAM,EAAE,QAAQ,eAAe;AAC/B,QAAM,aAAa,QACjB,MACE,qCAAC;AAAA,IACC;AAAA,IACA,cAAc,kCAAK,OAAO,SAAW;AAAA,IACrC,kBAAkB,WAAW;AAAA,IAC7B;AAAA,IACA,YAAY,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,QACH,GAEF;AAAA,IACE,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO,4DAAG,aAAa,YAAY,kBAAkB,CAAE;AAAA,EACtF;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
   "names": []
 }

package/dist/esm/{propTypes.js → react-desc-prop-types.js}

@@ -1,6 +1,25 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import { PropTypes } from "@elliemae/ds-utilities";
-const dspopperjsPropTypes = {
+import { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from "@elliemae/ds-utilities";
+const dspopperjsPropTypes = __spreadProps(__spreadValues(__spreadValues({}, globalAttributesPropTypes), xstyledPropTypes), {
   referenceElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])]).description("popperjs DOM referenceElement").isRequired,
   showPopover: PropTypes.bool.description("whether or not to show the popper content").isRequired,
   closeContextMenu: PropTypes.func.description('Callback to close the context menu, used for "on click outside", if not provided click outside will not trigger anything').defaultValue("() => {}"),
@@ -8,8 +27,8 @@ const dspopperjsPropTypes = {
   withoutArrow: PropTypes.bool.description("Whether or not the popper context menu should print the arrow").defaultValue(false),
   withoutAnimation: PropTypes.bool.description("Whether or not the popper context menu should be animated").defaultValue(false),
   animationDuration: PropTypes.number.description("Popper context menus Animation duration in ms").defaultValue(100),
-  boundaryElement: PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(void 0),
-  portalDOMContainer: PropTypes.element.description("When using portal, the container in which to append the DOM content, defaults to document body").defaultValue(void 0),
+  boundaryElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])]).description('Bounding element to calculate upon, defaults to "clippingParents",which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(void 0),
+  portalDOMContainer: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])]).description("When using portal, the container in which to append the DOM content, defaults to document body").defaultValue(void 0),
   startPlacementPreference: PropTypes.oneOf([
     "top-start",
     "top",
@@ -44,8 +63,8 @@ const dspopperjsPropTypes = {
   extraPopperStyles: PropTypes.object.description("Extra object styles to attach to the popper element").defaultValue({}),
   onClickOutside: PropTypes.func.description("Callback triggered when clicking outside the popper").defaultValue(() => null),
   children: PropTypes.node.description("The content of the popper").defaultValue(void 0)
-};
+});
 export {
   dspopperjsPropTypes
 };
-//# sourceMappingURL=propTypes.js.map
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { globalAttributesPropTypes, PropTypes, xstyledPropTypes } from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { usePopper } from 'react-popper';\n\nexport type PopperPlacementsT =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'left-end'\n  | 'left'\n  | 'left-start';\nexport interface UseDSPopperjsPropsArgT {\n  referenceElement: HTMLElement | null;\n  showPopover: boolean;\n  closeContextMenu?: () => void;\n  onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n  withoutPortal?: boolean;\n  withoutArrow?: boolean;\n  withoutAnimation?: boolean;\n  animationDuration?: number;\n  boundaryElement?: HTMLElement;\n  portalDOMContainer?: HTMLElement;\n  placementOrderPreference?: PopperPlacementsT[];\n  startPlacementPreference?: PopperPlacementsT;\n  modifiers?: Record<string, unknown>[];\n  customOffset?: [number, number];\n  zIndex?: number;\n  extraPopperStyles?: Record<string, unknown>;\n}\nexport interface UseDSPopperjsRT {\n  props: Required<UseDSPopperjsPropsArgT>;\n  popperElement: HTMLDivElement | null;\n  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n  isAnimating: boolean;\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  arrowElement: HTMLDivElement | null;\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n  popoverHelper: ReturnType<typeof usePopper>;\n  globalAttrs: GlobalAttributesT<Element>;\n  xStyledAttrs: XstyledProps;\n}\nexport interface DSDSPopperjsPropsT extends UseDSPopperjsPropsArgT {\n  children: JSX.Element | JSX.Element[];\n}\n\nexport const dspopperjsPropTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  /**\n   * React ref to popperjs referenceElement\n   */\n  referenceElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])]).description(\n    'popperjs DOM referenceElement',\n  ).isRequired,\n  /**\n   * Wheter or not to show the popper content\n   */\n  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,\n  /**\n   * Callback to close the context menu, used for \"on click outside\",\n   *  if not provided click outside will not trigger anything\n   */\n  closeContextMenu: PropTypes.func\n    .description(\n      'Callback to close the context menu, used for \"on click outside\",' +\n        ' if not provided click outside will not trigger anything',\n    )\n    .defaultValue('() => {}'),\n  /**\n   *  Wheter or not the popper content should appear in a DOM portal or not\n   */\n  withoutPortal: PropTypes.bool\n    .description('Whether or not the popper content should appear in a DOM portal or not')\n    .defaultValue(true),\n  /**\n   *  Wheter or not the popper context menu should print the arrow\n   */\n  withoutArrow: PropTypes.bool\n    .description('Whether or not the popper context menu should print the arrow')\n    .defaultValue(false),\n  /**\n   *  Whether or not the popper context menu should be animated\n   */\n  withoutAnimation: PropTypes.bool\n    .description('Whether or not the popper context menu should be animated')\n    .defaultValue(false),\n  /**\n   *  Popper context menus Animation duration in ms\n   */\n  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n  /**\n   *  Bounding element to calculate upon, defaults to it is \"clippingParents\",\n   *   which are the scrolling containers that may cause the element to be partially or fully cut off.\n   */\n  boundaryElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])])\n    .description(\n      'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n        'which are the scrolling containers that may cause element to be partially or fully cut off',\n    )\n    .defaultValue(undefined),\n  /**\n   *  When using portal, the container in which to append the DOM content, defaults to document body\n   */\n  portalDOMContainer: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])])\n    .description('When using portal, the container in which to append the DOM content, defaults to document body')\n    .defaultValue(undefined),\n  /**\n   *  start placement preferences, as per popperjs placement option\n   */\n  startPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'top'\"),\n  /**\n   *  Array of placement preferences, as per popperjs \"flip\" placement option\n   */\n  placementOrderPreference: PropTypes.arrayOf(\n    PropTypes.oneOf([\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n  )\n    .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n    .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n  /**\n   *  popperjs content z-index\n   */\n  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n  /**\n   *  placement offset array\n   */\n  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),\n  /**\n   *  modifiers array for full-custom popper-js override\n   *  https://popper.js.org/docs/v2/modifiers/\n   */\n  modifiers: PropTypes.array\n    .description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/')\n    .defaultValue(1),\n  extraPopperStyles: PropTypes.object\n    .description('Extra object styles to attach to the popper element')\n    .defaultValue({}),\n  onClickOutside: PropTypes.func\n    .description('Callback triggered when clicking outside the popper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('The content of the popper').defaultValue(undefined),\n} as WeakValidationMap<unknown>;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AAmDO,MAAM,sBAAsB,gDAC9B,4BACA,mBAF8B;AAAA,EAMjC,kBAAkB,UAAU,UAAU,CAAC,UAAU,WAAW,OAAO,GAAG,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAC9F,+BACF,EAAE;AAAA,EAIF,aAAa,UAAU,KAAK,YAAY,2CAA2C,EAAE;AAAA,EAKrF,kBAAkB,UAAU,KACzB,YACC,0HAEF,EACC,aAAa,UAAU;AAAA,EAI1B,eAAe,UAAU,KACtB,YAAY,wEAAwE,EACpF,aAAa,IAAI;AAAA,EAIpB,cAAc,UAAU,KACrB,YAAY,+DAA+D,EAC3E,aAAa,KAAK;AAAA,EAIrB,kBAAkB,UAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EAIrB,mBAAmB,UAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EAKjH,iBAAiB,UAAU,UAAU,CAAC,UAAU,WAAW,OAAO,GAAG,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC1F,YACC,8JAEF,EACC,aAAa,MAAS;AAAA,EAIzB,oBAAoB,UAAU,UAAU,CAAC,UAAU,WAAW,OAAO,GAAG,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC7F,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EAIzB,0BAA0B,UAAU,MAAM;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EAIvB,0BAA0B,UAAU,QAClC,UAAU,MAAM;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,CACH,EACG,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EAIpD,QAAQ,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAI/E,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC;AAAA,EAKtG,WAAW,UAAU,MAClB,YAAY,8FAA8F,EAC1G,aAAa,CAAC;AAAA,EACjB,mBAAmB,UAAU,OAC1B,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,UAAU,KACvB,YAAY,qDAAqD,EACjE,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,MAAS;AAC1F;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { styled } from "@elliemae/ds-system";
-import { kfrm, css } from "@elliemae/ds-system";
+import { styled, kfrm, css, layout, sizing, space } from "@elliemae/ds-system";
 const showAnimation = kfrm`
     from {
       opacity: 0;
@@ -27,6 +26,9 @@ const hideAnimation = kfrm`
 `;
 const StyledPopoverContentWrapper = styled.div`
   z-index: ${({ theme, zIndex }) => zIndex ?? theme.zIndex.popper};
+  ${layout}
+  ${sizing}
+  ${space}
 `;
 const StyledAnimatedPopper = styled.div`
   box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);

package/dist/esm/styled.js.map

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-popperjs",
-  "version": "3.2.0-rc.1",
+  "version": "3.2.0-rc.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper JS Wrapper",
   "files": [
@@ -71,8 +71,8 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.2.0-rc.1",
-    "@elliemae/ds-utilities": "3.2.0-rc.1",
+    "@elliemae/ds-system": "3.2.0-rc.4",
+    "@elliemae/ds-utilities": "3.2.0-rc.4",
     "react-popper": "~2.3.0"
   },
   "devDependencies": {

package/dist/cjs/index.d.js

@@ -1,20 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var index_d_exports = {};
-module.exports = __toCommonJS(index_d_exports);
-var React = __toESM(require("react"));
-//# sourceMappingURL=index.d.js.map

package/dist/cjs/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/index.d.ts", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nexport type PopperPlacementsT =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end'\n  | 'bottom-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'left-end'\n  | 'left'\n  | 'left-start';\nexport interface popperStylesT {\n  [key: string]: React.CSSProperties;\n  arrow?: React.CSSProperties;\n  popper?: React.CSSProperties;\n}\nexport interface popperAttributesT {\n  [key: string]: { [key: string]: string };\n  popper?: { [key: string]: string };\n  'data-popper-placement'?: string;\n}\nexport interface PopoverContentPropsT {\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  popperStyles: popperStylesT['popper'];\n  arrowStyle: popperStylesT['arrow'];\n  popperAttributes: popperAttributesT['popper'];\n  children: JSX.Element | JSX.Element[];\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  withoutArrow: boolean;\n  withoutAnimation: boolean;\n  animationDuration: number;\n  zIndex: number;\n  showPopover: boolean;\n  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n}\nexport interface useDSPopperjsPropsArgT {\n  referenceElement: React.Ref<HTMLElement>;\n  showPopover: boolean;\n  closeContextMenu?: () => void;\n  onClickOutside?: () => void;\n  withoutPortal?: boolean;\n  withoutArrow?: boolean;\n  withoutAnimation?: boolean;\n  animationDuration?: number;\n  boundaryElement?: HTMLElement;\n  portalDOMContainer?: HTMLElement;\n  placementOrderPreference?: PopperPlacementsT[];\n  startPlacementPreference?: PopperPlacementsT;\n  modifiers?: Record<string, unknown>[];\n  customOffset?: [number, number];\n  zIndex?: number;\n  extraPopperStyles?: Record<string, unknown>;\n}\nexport interface useDSPopperjsRT {\n  props: useDSPopperjsPropsArgT;\n  popperElement: React.Ref<HTMLElement>;\n  setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n  isAnimating: boolean;\n  setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  arrowElement: React.Ref<HTMLElement>;\n  setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n  popoverHelper: {\n    styles: popperStylesT;\n    attributes: popperAttributesT;\n  };\n}\nexport interface DSDSPopperjsPropsT extends useDSPopperjsPropsArgT {\n  children: JSX.Element | JSX.Element[];\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
-  "names": []
-}

package/dist/cjs/propTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const dspopperjsPropTypes = {\n  /**\n   * React ref to popperjs referenceElement\n   */\n  referenceElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])]).description(\n    'popperjs DOM referenceElement',\n  ).isRequired,\n  /**\n   * Wheter or not to show the popper content\n   */\n  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,\n  /**\n   * Callback to close the context menu, used for \"on click outside\",\n   *  if not provided click outside will not trigger anything\n   */\n  closeContextMenu: PropTypes.func\n    .description(\n      'Callback to close the context menu, used for \"on click outside\",' +\n        ' if not provided click outside will not trigger anything',\n    )\n    .defaultValue('() => {}'),\n  /**\n   *  Wheter or not the popper content should appear in a DOM portal or not\n   */\n  withoutPortal: PropTypes.bool\n    .description('Whether or not the popper content should appear in a DOM portal or not')\n    .defaultValue(true),\n  /**\n   *  Wheter or not the popper context menu should print the arrow\n   */\n  withoutArrow: PropTypes.bool\n    .description('Whether or not the popper context menu should print the arrow')\n    .defaultValue(false),\n  /**\n   *  Whether or not the popper context menu should be animated\n   */\n  withoutAnimation: PropTypes.bool\n    .description('Whether or not the popper context menu should be animated')\n    .defaultValue(false),\n  /**\n   *  Popper context menus Animation duration in ms\n   */\n  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n  /**\n   *  Bounding element to calculate upon, defaults to it is \"clippingParents\",\n   *   which are the scrolling containers that may cause the element to be partially or fully cut off.\n   */\n  boundaryElement: PropTypes.element\n    .description(\n      'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n        'which are the scrolling containers that may cause element to be partially or fully cut off',\n    )\n    .defaultValue(undefined),\n  /**\n   *  When using portal, the container in which to append the DOM content, defaults to document body\n   */\n  portalDOMContainer: PropTypes.element\n    .description('When using portal, the container in which to append the DOM content, defaults to document body')\n    .defaultValue(undefined),\n  /**\n   *  start placement preferences, as per popperjs placement option\n   */\n  startPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'top'\"),\n  /**\n   *  Array of placement preferences, as per popperjs \"flip\" placement option\n   */\n  placementOrderPreference: PropTypes.arrayOf(\n    PropTypes.oneOf([\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n  )\n    .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n    .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n  /**\n   *  popperjs content z-index\n   */\n  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n  /**\n   *  placement offset array\n   */\n  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),\n  /**\n   *  modifiers array for full-custom popper-js override\n   *  https://popper.js.org/docs/v2/modifiers/\n   */\n  modifiers: PropTypes.array\n    .description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/')\n    .defaultValue(1),\n  extraPopperStyles: PropTypes.object\n    .description('Extra object styles to attach to the popper element')\n    .defaultValue({}),\n  onClickOutside: PropTypes.func\n    .description('Callback triggered when clicking outside the popper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('The content of the popper').defaultValue(undefined),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,sBAAsB;AAAA,EAIjC,kBAAkB,8BAAU,UAAU,CAAC,8BAAU,WAAW,OAAO,GAAG,8BAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAC9F,+BACF,EAAE;AAAA,EAIF,aAAa,8BAAU,KAAK,YAAY,2CAA2C,EAAE;AAAA,EAKrF,kBAAkB,8BAAU,KACzB,YACC,0HAEF,EACC,aAAa,UAAU;AAAA,EAI1B,eAAe,8BAAU,KACtB,YAAY,wEAAwE,EACpF,aAAa,IAAI;AAAA,EAIpB,cAAc,8BAAU,KACrB,YAAY,+DAA+D,EAC3E,aAAa,KAAK;AAAA,EAIrB,kBAAkB,8BAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EAIrB,mBAAmB,8BAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EAKjH,iBAAiB,8BAAU,QACxB,YACC,8JAEF,EACC,aAAa,MAAS;AAAA,EAIzB,oBAAoB,8BAAU,QAC3B,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EAIzB,0BAA0B,8BAAU,MAAM;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EAIvB,0BAA0B,8BAAU,QAClC,8BAAU,MAAM;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,CACH,EACG,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EAIpD,QAAQ,8BAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAI/E,cAAc,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC;AAAA,EAKtG,WAAW,8BAAU,MAClB,YAAY,8FAA8F,EAC1G,aAAa,CAAC;AAAA,EACjB,mBAAmB,8BAAU,OAC1B,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,8BAAU,KACvB,YAAY,qDAAqD,EACjE,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,8BAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,MAAS;AAC1F;",
-  "names": []
-}

package/dist/esm/index.d.js

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

package/dist/esm/index.d.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
-  "mappings": "AAAA;",
-  "names": []
-}

package/dist/esm/propTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const dspopperjsPropTypes = {\n  /**\n   * React ref to popperjs referenceElement\n   */\n  referenceElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.oneOf([null])]).description(\n    'popperjs DOM referenceElement',\n  ).isRequired,\n  /**\n   * Wheter or not to show the popper content\n   */\n  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,\n  /**\n   * Callback to close the context menu, used for \"on click outside\",\n   *  if not provided click outside will not trigger anything\n   */\n  closeContextMenu: PropTypes.func\n    .description(\n      'Callback to close the context menu, used for \"on click outside\",' +\n        ' if not provided click outside will not trigger anything',\n    )\n    .defaultValue('() => {}'),\n  /**\n   *  Wheter or not the popper content should appear in a DOM portal or not\n   */\n  withoutPortal: PropTypes.bool\n    .description('Whether or not the popper content should appear in a DOM portal or not')\n    .defaultValue(true),\n  /**\n   *  Wheter or not the popper context menu should print the arrow\n   */\n  withoutArrow: PropTypes.bool\n    .description('Whether or not the popper context menu should print the arrow')\n    .defaultValue(false),\n  /**\n   *  Whether or not the popper context menu should be animated\n   */\n  withoutAnimation: PropTypes.bool\n    .description('Whether or not the popper context menu should be animated')\n    .defaultValue(false),\n  /**\n   *  Popper context menus Animation duration in ms\n   */\n  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),\n  /**\n   *  Bounding element to calculate upon, defaults to it is \"clippingParents\",\n   *   which are the scrolling containers that may cause the element to be partially or fully cut off.\n   */\n  boundaryElement: PropTypes.element\n    .description(\n      'Bounding element to calculate upon, defaults to \"clippingParents\",' +\n        'which are the scrolling containers that may cause element to be partially or fully cut off',\n    )\n    .defaultValue(undefined),\n  /**\n   *  When using portal, the container in which to append the DOM content, defaults to document body\n   */\n  portalDOMContainer: PropTypes.element\n    .description('When using portal, the container in which to append the DOM content, defaults to document body')\n    .defaultValue(undefined),\n  /**\n   *  start placement preferences, as per popperjs placement option\n   */\n  startPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preferences, as per popperjs placement option')\n    .defaultValue(\"'top'\"),\n  /**\n   *  Array of placement preferences, as per popperjs \"flip\" placement option\n   */\n  placementOrderPreference: PropTypes.arrayOf(\n    PropTypes.oneOf([\n      'top-start',\n      'top',\n      'top-end',\n      'right-start',\n      'right',\n      'right-end',\n      'bottom-end',\n      'bottom',\n      'bottom-start',\n      'left-end',\n      'left',\n      'left-start',\n    ]),\n  )\n    .description('Array of placement preferences, as per popperjs \"flip\" placement option')\n    .defaultValue(\"['top', 'bottom', 'left', 'right']\"),\n  /**\n   *  popperjs content z-index\n   */\n  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),\n  /**\n   *  placement offset array\n   */\n  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),\n  /**\n   *  modifiers array for full-custom popper-js override\n   *  https://popper.js.org/docs/v2/modifiers/\n   */\n  modifiers: PropTypes.array\n    .description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/')\n    .defaultValue(1),\n  extraPopperStyles: PropTypes.object\n    .description('Extra object styles to attach to the popper element')\n    .defaultValue({}),\n  onClickOutside: PropTypes.func\n    .description('Callback triggered when clicking outside the popper')\n    .defaultValue(() => null),\n  children: PropTypes.node.description('The content of the popper').defaultValue(undefined),\n};\n"],
-  "mappings": "AAAA;ACAA;AAEO,MAAM,sBAAsB;AAAA,EAIjC,kBAAkB,UAAU,UAAU,CAAC,UAAU,WAAW,OAAO,GAAG,UAAU,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAC9F,+BACF,EAAE;AAAA,EAIF,aAAa,UAAU,KAAK,YAAY,2CAA2C,EAAE;AAAA,EAKrF,kBAAkB,UAAU,KACzB,YACC,0HAEF,EACC,aAAa,UAAU;AAAA,EAI1B,eAAe,UAAU,KACtB,YAAY,wEAAwE,EACpF,aAAa,IAAI;AAAA,EAIpB,cAAc,UAAU,KACrB,YAAY,+DAA+D,EAC3E,aAAa,KAAK;AAAA,EAIrB,kBAAkB,UAAU,KACzB,YAAY,2DAA2D,EACvE,aAAa,KAAK;AAAA,EAIrB,mBAAmB,UAAU,OAAO,YAAY,+CAA+C,EAAE,aAAa,GAAG;AAAA,EAKjH,iBAAiB,UAAU,QACxB,YACC,8JAEF,EACC,aAAa,MAAS;AAAA,EAIzB,oBAAoB,UAAU,QAC3B,YAAY,gGAAgG,EAC5G,aAAa,MAAS;AAAA,EAIzB,0BAA0B,UAAU,MAAM;AAAA,IACxC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+DAA+D,EAC3E,aAAa,OAAO;AAAA,EAIvB,0BAA0B,UAAU,QAClC,UAAU,MAAM;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,CACH,EACG,YAAY,yEAAyE,EACrF,aAAa,oCAAoC;AAAA,EAIpD,QAAQ,UAAU,OAAO,YAAY,0BAA0B,EAAE,aAAa,CAAC;AAAA,EAI/E,cAAc,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC;AAAA,EAKtG,WAAW,UAAU,MAClB,YAAY,8FAA8F,EAC1G,aAAa,CAAC;AAAA,EACjB,mBAAmB,UAAU,OAC1B,YAAY,qDAAqD,EACjE,aAAa,CAAC,CAAC;AAAA,EAClB,gBAAgB,UAAU,KACvB,YAAY,qDAAqD,EACjE,aAAa,MAAM,IAAI;AAAA,EAC1B,UAAU,UAAU,KAAK,YAAY,2BAA2B,EAAE,aAAa,MAAS;AAC1F;",
-  "names": []
-}