@elliemae/ds-floating-context 3.51.0-next.9 → 3.51.0-rc.0

package/dist/cjs/DSFloatingContext.js

@@ -52,15 +52,30 @@ const useFloatingContext = (props = {}) => {
     customOffset,
     placementOrderPreference,
     onOpen,
-    onClose
+    onClose,
+    externallyControlledIsOpen
   } = propsWithDefault;
-  const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)({ onOpen, onClose });
+  const [internalIsOpen, setInternalIsOpen] = import_react.default.useState(false);
+  const isOpenSourceOfTruth = (0, import_react.useMemo)(() => {
+    if (externallyControlledIsOpen !== void 0) return externallyControlledIsOpen;
+    return internalIsOpen;
+  }, [externallyControlledIsOpen, internalIsOpen]);
+  const overChargedOnOpen = import_react.default.useCallback(() => {
+    setInternalIsOpen(true);
+    onOpen?.();
+  }, [onOpen]);
+  const overChargedOnClose = import_react.default.useCallback(() => {
+    setInternalIsOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });
   const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
   const [floatingStyles, setFloatingStyles] = (0, import_react.useState)({
     position: "absolute",
     zIndex: 3e3,
     top: 0,
-    left: 0
+    left: 0,
+    visibility: "hidden"
   });
   const [arrowStyles, setArrowStyles] = (0, import_react.useState)({
     style: { left: 0 },
@@ -70,7 +85,7 @@ const useFloatingContext = (props = {}) => {
   const [floating, setFloating] = import_react.default.useState(null);
   (0, import_react.useEffect)(() => {
     const update = () => {
-      if (reference && floating) {
+      if (isOpenSourceOfTruth && reference && floating) {
         const { coordsStyle, finalPlacement, coordsArrow } = (0, import_computePosition.computePosition)({
           reference,
           floating,
@@ -82,8 +97,8 @@ const useFloatingContext = (props = {}) => {
         const styles = {
           position: "absolute",
           zIndex: 3e3,
-          top: 0,
-          left: 0,
+          // top: 0,
+          // left: 0,
           ...coordsStyle
         };
         setFloatingStyles(styles);
@@ -96,7 +111,7 @@ const useFloatingContext = (props = {}) => {
     return () => {
       window.removeEventListener("scroll", debouncedCb);
     };
-  }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
+  }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, isOpenSourceOfTruth]);
   const setReference = (0, import_ds_system.mergeRefs)(_setReference, setReferenceElement);
   const refs = import_react.default.useMemo(
     () => ({
@@ -121,7 +136,7 @@ const useFloatingContext = (props = {}) => {
       refs,
       floatingStyles,
       handlers,
-      isOpen: tooltipHelpers.shouldShowPopover,
+      isOpen: isOpenSourceOfTruth,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -133,17 +148,17 @@ const useFloatingContext = (props = {}) => {
       }
     }),
     [
-      animationDuration,
-      arrowStyles,
+      refs,
       floatingStyles,
       handlers,
+      isOpenSourceOfTruth,
+      arrowStyles,
       hideTooltip,
-      portalDOMContainer,
-      refs,
       showTooltip,
-      tooltipHelpers.shouldShowPopover,
+      withoutPortal,
       withoutAnimation,
-      withoutPortal
+      portalDOMContainer,
+      animationDuration
     ]
   );
 };

package/dist/cjs/DSFloatingContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSFloatingContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { type CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n  const {\n    withoutPortal,\n    withoutAnimation,\n    portalDOMContainer,\n    animationDuration,\n    placement,\n    customOffset,\n    placementOrderPreference,\n    onOpen,\n    onClose,\n  } = propsWithDefault;\n\n  const tooltipHelpers = useHeadlessTooltip({ onOpen, onClose });\n\n  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    top: 0,\n    left: 0,\n  });\n  const [arrowStyles, setArrowStyles] = useState<{ style: CSSProperties; placement: string }>({\n    style: { left: 0 },\n    placement: 'top',\n  });\n\n  const [reference, _setReference] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n  useEffect(() => {\n    const update = () => {\n      if (reference && floating) {\n        const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n          reference,\n          floating,\n          placement,\n          placementOrderPreference,\n          customOffset,\n          withoutPortal,\n        });\n\n        const styles: CSSProperties = {\n          position: 'absolute',\n          zIndex: 3000,\n          top: 0,\n          left: 0,\n          ...coordsStyle,\n        };\n        setFloatingStyles(styles);\n        setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n      }\n    };\n\n    // initial position calculation\n    update();\n\n    const debouncedCb = debounce(update, 300);\n\n    // auto update position on scrolling\n    window.addEventListener('scroll', debouncedCb);\n\n    return () => {\n      window.removeEventListener('scroll', debouncedCb);\n    };\n  }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n  const setReference = mergeRefs(_setReference, setReferenceElement);\n\n  const refs = React.useMemo(\n    () => ({\n      setReference,\n      setFloating,\n      floating,\n      reference,\n    }),\n    [setReference, floating, reference],\n  );\n\n  const handlers = React.useMemo(\n    () => ({\n      onMouseEnter: tooltipHelpers.onMouseEnter,\n      onMouseLeave: tooltipHelpers.onMouseLeave,\n      onFocus: tooltipHelpers.onFocus,\n      onBlur: tooltipHelpers.onBlur,\n    }),\n    [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n  );\n\n  return useMemo(\n    () => ({\n      refs,\n      floatingStyles,\n      handlers,\n      isOpen: tooltipHelpers.shouldShowPopover,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n    }),\n    [\n      animationDuration,\n      arrowStyles,\n      floatingStyles,\n      handlers,\n      hideTooltip,\n      portalDOMContainer,\n      refs,\n      showTooltip,\n      tooltipHelpers.shouldShowPopover,\n      withoutAnimation,\n      withoutPortal,\n    ],\n  );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n  DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { type CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n  const {\n    withoutPortal,\n    withoutAnimation,\n    portalDOMContainer,\n    animationDuration,\n    placement,\n    customOffset,\n    placementOrderPreference,\n    onOpen,\n    onClose,\n    externallyControlledIsOpen,\n  } = propsWithDefault;\n\n  const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n  const isOpenSourceOfTruth = useMemo(() => {\n    if (externallyControlledIsOpen !== undefined) return externallyControlledIsOpen;\n    return internalIsOpen;\n  }, [externallyControlledIsOpen, internalIsOpen]);\n\n  const overChargedOnOpen = React.useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n  const overChargedOnClose = React.useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n  const tooltipHelpers = useHeadlessTooltip({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });\n\n  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    top: 0,\n    left: 0,\n    visibility: 'hidden',\n  });\n  const [arrowStyles, setArrowStyles] = useState<{ style: CSSProperties; placement: string }>({\n    style: { left: 0 },\n    placement: 'top',\n  });\n\n  const [reference, _setReference] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n  useEffect(() => {\n    const update = () => {\n      if (isOpenSourceOfTruth && reference && floating) {\n        const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n          reference,\n          floating,\n          placement,\n          placementOrderPreference,\n          customOffset,\n          withoutPortal,\n        });\n\n        const styles: CSSProperties = {\n          position: 'absolute',\n          zIndex: 3000,\n          // top: 0,\n          // left: 0,\n          ...coordsStyle,\n        };\n\n        setFloatingStyles(styles);\n        setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n      }\n    };\n\n    // initial position calculation\n    update();\n\n    const debouncedCb = debounce(update, 300);\n\n    // auto update position on scrolling\n    window.addEventListener('scroll', debouncedCb);\n\n    return () => {\n      window.removeEventListener('scroll', debouncedCb);\n    };\n  }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, isOpenSourceOfTruth]);\n\n  const setReference = mergeRefs(_setReference, setReferenceElement);\n\n  const refs = React.useMemo(\n    () => ({\n      setReference,\n      setFloating,\n      floating,\n      reference,\n    }),\n    [setReference, floating, reference],\n  );\n\n  const handlers = React.useMemo(\n    () => ({\n      onMouseEnter: tooltipHelpers.onMouseEnter,\n      onMouseLeave: tooltipHelpers.onMouseLeave,\n      onFocus: tooltipHelpers.onFocus,\n      onBlur: tooltipHelpers.onBlur,\n    }),\n    [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n  );\n\n  return useMemo(\n    () => ({\n      refs,\n      floatingStyles,\n      handlers,\n      isOpen: isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n    }),\n    [\n      refs,\n      floatingStyles,\n      handlers,\n      isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      withoutPortal,\n      withoutAnimation,\n      portalDOMContainer,\n      animationDuration,\n    ],\n  );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n  DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/{parts/FloatingWrapper/constants → constants}/index.js

@@ -28,13 +28,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  DSFloatingWrapperDataTestids: () => DSFloatingWrapperDataTestids,
   DSFloatingWrapperName: () => DSFloatingWrapperName,
   DSFloatingWrapperSlots: () => DSFloatingWrapperSlots
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
-const DSFloatingWrapperName = "DSFloatingWrapper";
+var import_ds_system = require("@elliemae/ds-system");
+const DSFloatingWrapperName = "DSFloatingwrapper";
 const DSFloatingWrapperSlots = {
-  ROOT: "root"
+  ROOT: "root",
+  CONTENT: "content",
+  ARROW: "arrow"
 };
+const DSFloatingWrapperDataTestids = (0, import_ds_system.slotObjectToDataTestIds)(DSFloatingWrapperName, DSFloatingWrapperSlots);
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFloatingWrapperName = 'DSFloatingwrapper';\n\nexport const DSFloatingWrapperSlots = {\n  ROOT: 'root',\n  CONTENT: 'content',\n  ARROW: 'arrow',\n};\n\nexport const DSFloatingWrapperDataTestids = slotObjectToDataTestIds(DSFloatingWrapperName, DSFloatingWrapperSlots);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,mCAA+B,0CAAwB,uBAAuB,sBAAsB;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -28,6 +28,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
+  DSFloatingWrapperDataTestids: () => import_FloatingWrapper2.DSFloatingWrapperDataTestids,
+  DSFloatingWrapperName: () => import_FloatingWrapper2.DSFloatingWrapperName,
+  DSFloatingWrapperSlots: () => import_FloatingWrapper2.DSFloatingWrapperSlots,
   FloatingWrapper: () => import_FloatingWrapper.FloatingWrapper,
   FloatingWrapperWithSchema: () => import_FloatingWrapper.FloatingWrapperWithSchema,
   PopoverArrow: () => import_PopoverArrow.PopoverArrow,
@@ -39,4 +42,5 @@ var React = __toESM(require("react"));
 var import_DSFloatingContext = require("./DSFloatingContext.js");
 var import_PopoverArrow = require("./parts/PopoverArrow.js");
 var import_FloatingWrapper = require("./parts/FloatingWrapper/index.js");
+var import_FloatingWrapper2 = require("./parts/FloatingWrapper/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { useFloatingContext, UseFloatingContextWithSchema } from './DSFloatingContext.js';\nexport { PopoverArrow } from './parts/PopoverArrow.js';\nexport { FloatingWrapper, FloatingWrapperWithSchema } from './parts/FloatingWrapper/index.js';\nexport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAiE;AACjE,0BAA6B;AAC7B,6BAA2D;",
-  "names": []
+  "sourcesContent": ["export { useFloatingContext, UseFloatingContextWithSchema } from './DSFloatingContext.js';\nexport { PopoverArrow } from './parts/PopoverArrow.js';\nexport { FloatingWrapper, FloatingWrapperWithSchema, type DSFloatingWrapperT } from './parts/FloatingWrapper/index.js';\nexport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nexport {\n  DSFloatingWrapperName,\n  DSFloatingWrapperSlots,\n  DSFloatingWrapperDataTestids,\n} from './parts/FloatingWrapper/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAiE;AACjE,0BAA6B;AAC7B,6BAAoF;AAEpF,IAAAA,0BAIO;",
+  "names": ["import_FloatingWrapper"]
 }

package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js

@@ -40,7 +40,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_styled = require("./styled.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useFloatingWrapper = require("./config/useFloatingWrapper.js");
-var import_constants = require("./constants/index.js");
+var import_constants = require("../../constants/index.js");
 var import_getDocumentMainLandmarkOrBody = require("../../utils/getDocumentMainLandmarkOrBody.js");
 const ContentComponent = import_react.default.memo(
   ({
@@ -51,20 +51,31 @@ const ContentComponent = import_react.default.memo(
     animationDuration,
     withoutAnimation,
     handleAnimationEnd,
-    xstyledProps
-  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFloatingWrapper, { innerRef, style: floatingStyles, ...xstyledProps, role: "complementary", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styled.StyledFloatingAnimation,
+    xstyledProps,
+    globalsAttrs
+  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledFloatingWrapper,
     {
-      onAnimationEnd: handleAnimationEnd,
-      isOpen,
-      animationDuration,
-      withoutAnimation,
-      children
+      innerRef,
+      style: floatingStyles,
+      ...xstyledProps,
+      role: "complementary",
+      ...globalsAttrs,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_styled.StyledFloatingAnimation,
+        {
+          onAnimationEnd: handleAnimationEnd,
+          isOpen,
+          animationDuration,
+          withoutAnimation,
+          children
+        }
+      )
     }
-  ) })
+  )
 );
 const FloatingWrapper = (props) => {
-  const { propsWithDefault, xstyledProps } = (0, import_useFloatingWrapper.useFloatingWrapper)(props);
+  const { propsWithDefault, xstyledProps, globalsAttrs } = (0, import_useFloatingWrapper.useFloatingWrapper)(props);
   const { isOpen } = propsWithDefault;
   const { context, onAnimationEnd, onAnimationStartTriggered, ...contentProps } = propsWithDefault;
   const { portalDOMContainer, withoutPortal, withoutAnimation } = context;
@@ -88,6 +99,7 @@ const FloatingWrapper = (props) => {
         ContentComponent,
         {
           xstyledProps,
+          globalsAttrs,
           ...contentProps,
           ...context,
           handleAnimationEnd
@@ -99,6 +111,7 @@ const FloatingWrapper = (props) => {
           ContentComponent,
           {
             xstyledProps,
+            globalsAttrs,
             ...contentProps,
             ...context,
             handleAnimationEnd

package/dist/cjs/parts/FloatingWrapper/FloatingWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FloatingWrapper/FloatingWrapper.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { StyledFloatingAnimation, StyledFloatingWrapper } from './styled.js';\nimport { type DSFloatingWrapperT, DSFloatingWrapperPropTypes } from './react-desc-prop-types.js';\nimport { useFloatingWrapper } from './config/useFloatingWrapper.js';\nimport { DSFloatingWrapperName } from './constants/index.js';\nimport { getDocumentMainLandmarkOrBody } from '../../utils/getDocumentMainLandmarkOrBody.js';\n\ntype ContentComponentPropsT = {\n  xstyledProps: ReturnType<typeof useFloatingWrapper>['xstyledProps'];\n  handleAnimationEnd: React.AnimationEventHandler<HTMLDivElement>;\n  // for performance reasons, it's better for pure component to not receive nested objects\n  // so the following is just the typescript way of describing we spread the props\n} & Omit<DSFloatingWrapperT.InternalProps, 'context'> &\n  DSFloatingWrapperT.InternalProps['context'];\n\nconst ContentComponent = React.memo<ContentComponentPropsT>(\n  ({\n    children,\n    innerRef,\n    floatingStyles,\n    isOpen,\n    animationDuration,\n    withoutAnimation,\n    handleAnimationEnd,\n    xstyledProps,\n  }) => (\n    <StyledFloatingWrapper innerRef={innerRef} style={floatingStyles} {...xstyledProps} role=\"complementary\">\n      <StyledFloatingAnimation\n        onAnimationEnd={handleAnimationEnd}\n        isOpen={isOpen}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n      >\n        {children}\n      </StyledFloatingAnimation>\n    </StyledFloatingWrapper>\n  ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFloatingWrapper(props);\n  const { isOpen } = propsWithDefault;\n\n  const { context, onAnimationEnd, onAnimationStartTriggered, ...contentProps } = propsWithDefault;\n  const { portalDOMContainer, withoutPortal, withoutAnimation } = context;\n\n  const [isAnimating, setIsAnimating] = React.useState(false);\n  React.useEffect(() => {\n    if (isOpen && !withoutAnimation) {\n      setIsAnimating(true);\n      onAnimationStartTriggered?.();\n    }\n  }, [isOpen, onAnimationStartTriggered, withoutAnimation]);\n\n  const handleAnimationEnd = React.useCallback<React.AnimationEventHandler<HTMLDivElement>>(\n    (e) => {\n      setIsAnimating(false);\n      if (onAnimationEnd) onAnimationEnd(e);\n    },\n    [onAnimationEnd],\n  );\n\n  if (isOpen || isAnimating) {\n    if (withoutPortal === true)\n      return (\n        <ContentComponent\n          xstyledProps={xstyledProps}\n          {...contentProps}\n          {...context}\n          handleAnimationEnd={handleAnimationEnd}\n        />\n      );\n    if (!withoutPortal)\n      return (\n        <>\n          {createPortal(\n            <ContentComponent\n              xstyledProps={xstyledProps}\n              {...contentProps}\n              {...context}\n              handleAnimationEnd={handleAnimationEnd}\n            />,\n            portalDOMContainer || getDocumentMainLandmarkOrBody(),\n          )}\n        </>\n      );\n  }\n  return null;\n};\n\nFloatingWrapper.displayName = DSFloatingWrapperName;\nconst FloatingWrapperWithSchema = describe(FloatingWrapper);\nFloatingWrapperWithSchema.propTypes = DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\nexport { FloatingWrapper, FloatingWrapperWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BjB;AA7BN,mBAAkB;AAClB,uBAA6B;AAC7B,8BAA6C;AAC7C,oBAA+D;AAC/D,mCAAoE;AACpE,gCAAmC;AACnC,uBAAsC;AACtC,2CAA8C;AAU9C,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE,4CAAC,uCAAsB,UAAoB,OAAO,gBAAiB,GAAG,cAAc,MAAK,iBACvF;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,aAAa,QAAI,8CAAmB,KAAK;AACnE,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,EAAE,SAAS,gBAAgB,2BAA2B,GAAG,aAAa,IAAI;AAChF,QAAM,EAAE,oBAAoB,eAAe,iBAAiB,IAAI;AAEhE,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,CAAC,kBAAkB;AAC/B,qBAAe,IAAI;AACnB,kCAA4B;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,QAAQ,2BAA2B,gBAAgB,CAAC;AAExD,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAM;AACL,qBAAe,KAAK;AACpB,UAAI,eAAgB,gBAAe,CAAC;AAAA,IACtC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,MAAI,UAAU,aAAa;AACzB,QAAI,kBAAkB;AACpB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA;AAAA,MACF;AAEJ,QAAI,CAAC;AACH,aACE,2EACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QACA,0BAAsB,oEAA8B;AAAA,MACtD,GACF;AAAA,EAEN;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { StyledFloatingAnimation, StyledFloatingWrapper } from './styled.js';\nimport { type DSFloatingWrapperT, DSFloatingWrapperPropTypes } from './react-desc-prop-types.js';\nimport { useFloatingWrapper } from './config/useFloatingWrapper.js';\nimport { DSFloatingWrapperName } from '../../constants/index.js';\nimport { getDocumentMainLandmarkOrBody } from '../../utils/getDocumentMainLandmarkOrBody.js';\n\ntype ContentComponentPropsT = {\n  xstyledProps: ReturnType<typeof useFloatingWrapper>['xstyledProps'];\n  globalsAttrs: ReturnType<typeof useFloatingWrapper>['globalsAttrs'];\n  handleAnimationEnd: React.AnimationEventHandler<HTMLDivElement>;\n  // for performance reasons, it's better for pure component to not receive nested objects\n  // so the following is just the typescript way of describing we spread the props\n} & Omit<DSFloatingWrapperT.InternalProps, 'context'> &\n  DSFloatingWrapperT.InternalProps['context'];\n\nconst ContentComponent = React.memo<ContentComponentPropsT>(\n  ({\n    children,\n    innerRef,\n    floatingStyles,\n    isOpen,\n    animationDuration,\n    withoutAnimation,\n    handleAnimationEnd,\n    xstyledProps,\n    globalsAttrs,\n  }) => (\n    <StyledFloatingWrapper\n      innerRef={innerRef}\n      style={floatingStyles}\n      {...xstyledProps}\n      role=\"complementary\"\n      {...globalsAttrs}\n    >\n      <StyledFloatingAnimation\n        onAnimationEnd={handleAnimationEnd}\n        isOpen={isOpen}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n      >\n        {children}\n      </StyledFloatingAnimation>\n    </StyledFloatingWrapper>\n  ),\n);\n\nconst FloatingWrapper: React.ComponentType<DSFloatingWrapperT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps, globalsAttrs } = useFloatingWrapper(props);\n  const { isOpen } = propsWithDefault;\n\n  const { context, onAnimationEnd, onAnimationStartTriggered, ...contentProps } = propsWithDefault;\n  const { portalDOMContainer, withoutPortal, withoutAnimation } = context;\n\n  const [isAnimating, setIsAnimating] = React.useState(false);\n  React.useEffect(() => {\n    if (isOpen && !withoutAnimation) {\n      setIsAnimating(true);\n      onAnimationStartTriggered?.();\n    }\n  }, [isOpen, onAnimationStartTriggered, withoutAnimation]);\n\n  const handleAnimationEnd = React.useCallback<React.AnimationEventHandler<HTMLDivElement>>(\n    (e) => {\n      setIsAnimating(false);\n      if (onAnimationEnd) onAnimationEnd(e);\n    },\n    [onAnimationEnd],\n  );\n\n  if (isOpen || isAnimating) {\n    if (withoutPortal === true)\n      return (\n        <ContentComponent\n          xstyledProps={xstyledProps}\n          globalsAttrs={globalsAttrs}\n          {...contentProps}\n          {...context}\n          handleAnimationEnd={handleAnimationEnd}\n        />\n      );\n    if (!withoutPortal)\n      return (\n        <>\n          {createPortal(\n            <ContentComponent\n              xstyledProps={xstyledProps}\n              globalsAttrs={globalsAttrs}\n              {...contentProps}\n              {...context}\n              handleAnimationEnd={handleAnimationEnd}\n            />,\n            portalDOMContainer || getDocumentMainLandmarkOrBody(),\n          )}\n        </>\n      );\n  }\n  return null;\n};\n\nFloatingWrapper.displayName = DSFloatingWrapperName;\nconst FloatingWrapperWithSchema = describe(FloatingWrapper);\nFloatingWrapperWithSchema.propTypes = DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\nexport { FloatingWrapper, FloatingWrapperWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqCjB;AArCN,mBAAkB;AAClB,uBAA6B;AAC7B,8BAA6C;AAC7C,oBAA+D;AAC/D,mCAAoE;AACpE,gCAAmC;AACnC,uBAAsC;AACtC,2CAA8C;AAW9C,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,MAAK;AAAA,MACJ,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,cAAc,aAAa,QAAI,8CAAmB,KAAK;AACjF,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,EAAE,SAAS,gBAAgB,2BAA2B,GAAG,aAAa,IAAI;AAChF,QAAM,EAAE,oBAAoB,eAAe,iBAAiB,IAAI;AAEhE,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,CAAC,kBAAkB;AAC/B,qBAAe,IAAI;AACnB,kCAA4B;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,QAAQ,2BAA2B,gBAAgB,CAAC;AAExD,QAAM,qBAAqB,aAAAA,QAAM;AAAA,IAC/B,CAAC,MAAM;AACL,qBAAe,KAAK;AACpB,UAAI,eAAgB,gBAAe,CAAC;AAAA,IACtC;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,MAAI,UAAU,aAAa;AACzB,QAAI,kBAAkB;AACpB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA;AAAA,MACF;AAEJ,QAAI,CAAC;AACH,aACE,2EACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QACA,0BAAsB,oEAA8B;AAAA,MACtD,GACF;AAAA,EAEN;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,gCAA4B,kCAAS,eAAe;AAC1D,0BAA0B,YAAY;",
   "names": ["React"]
 }

package/dist/cjs/parts/FloatingWrapper/config/useFloatingWrapper.js

@@ -45,18 +45,21 @@ const useFloatingWrapper = (propsFromUser) => {
     [propsFromUser]
   );
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const globalsAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const instanceUid = import_react.default.useMemo(() => (0, import_uid.uid)(5), []);
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
       xstyledProps,
-      instanceUid
+      instanceUid,
+      globalsAttrs
       // ...eventHandlers,
     }),
     [
       propsWithDefault,
       xstyledProps,
-      instanceUid
+      instanceUid,
+      globalsAttrs
       // eventHandlers,
     ]
   );

package/dist/cjs/parts/FloatingWrapper/config/useFloatingWrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/parts/FloatingWrapper/config/useFloatingWrapper.ts", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { defaultProps, type DSFloatingWrapperT } from '../react-desc-prop-types.js';\n\nexport interface DSFloatingWrapperCTX {\n  propsWithDefault: DSFloatingWrapperT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useFloatingWrapper = (propsFromUser: DSFloatingWrapperT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  // the floating context contains various HTML DOM elements\n  //  Deep compare of HTML DOM elements is pointless and extremely costly\n  //  for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n  const propsWithDefault = React.useMemo(\n    () => ({\n      ...defaultProps,\n      ...propsFromUser,\n    }),\n    [propsFromUser],\n  ) as DSFloatingWrapperT.InternalProps;\n  // useValidateProps(propsWithDefault, DSFloatingWrapperPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => uid(5), []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmC;AACnC,mBAAkB;AAClB,iBAAoB;AACpB,mCAAsD;AAQ/C,MAAM,qBAAqB,CAAC,kBAA4C;AAO7E,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAKA,QAAM,mBAAe,4CAAmB,gBAAgB;AAKxD,QAAM,cAAc,aAAAA,QAAM,QAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAMlD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useGetXstyledProps, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { defaultProps, type DSFloatingWrapperT } from '../react-desc-prop-types.js';\n\nexport interface DSFloatingWrapperCTX {\n  propsWithDefault: DSFloatingWrapperT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  globalsAttrs: ReturnType<typeof useGetGlobalAttributes>;\n  instanceUid: string;\n}\n\nexport const useFloatingWrapper = (propsFromUser: DSFloatingWrapperT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  // the floating context contains various HTML DOM elements\n  //  Deep compare of HTML DOM elements is pointless and extremely costly\n  //  for this specific case, we are better of not using `useMemoMergePropsWithDefault`\n  const propsWithDefault = React.useMemo(\n    () => ({\n      ...defaultProps,\n      ...propsFromUser,\n    }),\n    [propsFromUser],\n  ) as DSFloatingWrapperT.InternalProps;\n  // useValidateProps(propsWithDefault, DSFloatingWrapperPropTypes);\n  // =============================================================================\n  // XSTYLED AND GLOBALS PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const globalsAttrs = useGetGlobalAttributes(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => uid(5), []);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      globalsAttrs,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      globalsAttrs,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAA2D;AAC3D,mBAAkB;AAClB,iBAAoB;AACpB,mCAAsD;AAS/C,MAAM,qBAAqB,CAAC,kBAA4C;AAO7E,QAAM,mBAAmB,aAAAA,QAAM;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAKA,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,mBAAe,gDAAuB,gBAAgB;AAK5D,QAAM,cAAc,aAAAA,QAAM,QAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAMlD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/FloatingWrapper/index.js

@@ -28,10 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FloatingWrapper_exports = {};
 __export(FloatingWrapper_exports, {
+  DSFloatingWrapperDataTestids: () => import_constants.DSFloatingWrapperDataTestids,
+  DSFloatingWrapperName: () => import_constants.DSFloatingWrapperName,
+  DSFloatingWrapperSlots: () => import_constants.DSFloatingWrapperSlots,
   FloatingWrapper: () => import_FloatingWrapper.FloatingWrapper,
   FloatingWrapperWithSchema: () => import_FloatingWrapper.FloatingWrapperWithSchema
 });
 module.exports = __toCommonJS(FloatingWrapper_exports);
 var React = __toESM(require("react"));
 var import_FloatingWrapper = require("./FloatingWrapper.js");
+var import_constants = require("../../constants/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/parts/FloatingWrapper/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FloatingWrapper/index.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export { FloatingWrapper, FloatingWrapperWithSchema } from './FloatingWrapper.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAA2D;",
+  "sourcesContent": ["export { FloatingWrapper, FloatingWrapperWithSchema } from './FloatingWrapper.js';\nexport type { DSFloatingWrapperT } from './react-desc-prop-types.js';\nexport { DSFloatingWrapperName, DSFloatingWrapperSlots, DSFloatingWrapperDataTestids } from '../../constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAA2D;AAE3D,uBAA4F;",
   "names": []
 }

package/dist/cjs/parts/FloatingWrapper/react-desc-prop-types.js

@@ -35,13 +35,14 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_constants = require("./constants/index.js");
+var import_constants = require("../../constants/index.js");
 const defaultProps = {
   context: {
     withoutPortal: false,
     animationDuration: 300,
     withoutAnimation: false
-  }
+  },
+  customOffset: [0, 12]
 };
 const DSFloatingWrapperPropTypes = {
   ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSFloatingWrapperName, import_constants.DSFloatingWrapperSlots),
@@ -62,7 +63,8 @@ const DSFloatingWrapperPropTypes = {
   ),
   onAnimationEnd: import_ds_props_helpers.PropTypes.func.description(
     "Callback when the animation ends. Required to properly position nested floating context without visual artefacts in case animations are used."
-  )
+  ),
+  customOffset: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.number).description("Custom offset for the floating wrapper")
 };
 const DSFloatingWrapperPropTypesSchema = DSFloatingWrapperPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FloatingWrapper/react-desc-prop-types.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperName, DSFloatingWrapperSlots } from './constants/index.js';\n\nexport declare namespace DSFloatingWrapperT {\n  export interface RequiredProps {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    isOpen: boolean;\n    floatingStyles: React.CSSProperties;\n  }\n\n  export interface DefaultProps {\n    context: {\n      portalDOMContainer?: HTMLElement;\n      withoutPortal: boolean;\n      animationDuration: number;\n      withoutAnimation: boolean;\n    };\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;\n    onAnimationStartTriggered?: () => void;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: Partial<DSFloatingWrapperT.DefaultProps> = {\n  context: {\n    withoutPortal: false,\n    animationDuration: 300,\n    withoutAnimation: false,\n  },\n};\n\nexport const DSFloatingWrapperPropTypes: DSPropTypesSchema<DSFloatingWrapperT.InternalProps> = {\n  ...getPropsPerSlotPropTypes(DSFloatingWrapperName, DSFloatingWrapperSlots),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.description('Content of the floating wrapper').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Ref for the floating wrapper')\n    .isRequired,\n  isOpen: PropTypes.bool.description('Whether the floating wrapper is open').isRequired,\n  floatingStyles: PropTypes.object.description('Style for the floating wrapper').isRequired,\n  context: PropTypes.shape({\n    portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n      .description('The DOM element where the tooltip will be rendered.')\n      .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n    withoutPortal: PropTypes.bool.description('Whether to render the floating wrapper without a portal'),\n    animationDuration: PropTypes.number.description('Duration of the animation'),\n    withoutAnimation: PropTypes.bool.description('Whether to render the floating wrapper without animation'),\n  }).description('Context for the floating wrapper'),\n  onAnimationStartTriggered: PropTypes.func.description(\n    'Callback invoked when the component trigger the animation start. Required to properly position nested floating context without visual artefacts in case animations are used.',\n  ),\n  onAnimationEnd: PropTypes.func.description(\n    'Callback when the animation ends. Required to properly position nested floating context without visual artefacts in case animations are used.',\n  ),\n};\n\nexport const DSFloatingWrapperPropTypesSchema =\n  DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA8D;AAgDvD,MAAM,eAAyD;AAAA,EACpE,SAAS;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB;AACF;AAEO,MAAM,6BAAkF;AAAA,EAC7F,OAAG,kDAAyB,wCAAuB,uCAAsB;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,iCAAiC,EAAE;AAAA,EACxE,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B,EACzG;AAAA,EACH,QAAQ,kCAAU,KAAK,YAAY,sCAAsC,EAAE;AAAA,EAC3E,gBAAgB,kCAAU,OAAO,YAAY,gCAAgC,EAAE;AAAA,EAC/E,SAAS,kCAAU,MAAM;AAAA,IACvB,oBAAoB,kCAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,IACvG,eAAe,kCAAU,KAAK,YAAY,yDAAyD;AAAA,IACnG,mBAAmB,kCAAU,OAAO,YAAY,2BAA2B;AAAA,IAC3E,kBAAkB,kCAAU,KAAK,YAAY,0DAA0D;AAAA,EACzG,CAAC,EAAE,YAAY,kCAAkC;AAAA,EACjD,2BAA2B,kCAAU,KAAK;AAAA,IACxC;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF;AACF;AAEO,MAAM,mCACX;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperName, DSFloatingWrapperSlots } from '../../constants/index.js';\n\nexport declare namespace DSFloatingWrapperT {\n  export interface RequiredProps {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n    innerRef: TypescriptHelpersT.AnyRef<HTMLDivElement>;\n    isOpen: boolean;\n    floatingStyles: React.CSSProperties;\n  }\n\n  export interface DefaultProps {\n    context: {\n      portalDOMContainer?: HTMLElement;\n      withoutPortal: boolean;\n      animationDuration: number;\n      withoutAnimation: boolean;\n    };\n    customOffset: [number, number];\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;\n    onAnimationStartTriggered?: () => void;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps {}\n\n  export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: Partial<DSFloatingWrapperT.DefaultProps> = {\n  context: {\n    withoutPortal: false,\n    animationDuration: 300,\n    withoutAnimation: false,\n  },\n  customOffset: [0, 12],\n};\n\nexport const DSFloatingWrapperPropTypes: DSPropTypesSchema<DSFloatingWrapperT.InternalProps> = {\n  ...getPropsPerSlotPropTypes(DSFloatingWrapperName, DSFloatingWrapperSlots),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.node.description('Content of the floating wrapper').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('Ref for the floating wrapper')\n    .isRequired,\n  isOpen: PropTypes.bool.description('Whether the floating wrapper is open').isRequired,\n  floatingStyles: PropTypes.object.description('Style for the floating wrapper').isRequired,\n  context: PropTypes.shape({\n    portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n      .description('The DOM element where the tooltip will be rendered.')\n      .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n    withoutPortal: PropTypes.bool.description('Whether to render the floating wrapper without a portal'),\n    animationDuration: PropTypes.number.description('Duration of the animation'),\n    withoutAnimation: PropTypes.bool.description('Whether to render the floating wrapper without animation'),\n  }).description('Context for the floating wrapper'),\n  onAnimationStartTriggered: PropTypes.func.description(\n    'Callback invoked when the component trigger the animation start. Required to properly position nested floating context without visual artefacts in case animations are used.',\n  ),\n  onAnimationEnd: PropTypes.func.description(\n    'Callback when the animation ends. Required to properly position nested floating context without visual artefacts in case animations are used.',\n  ),\n  customOffset: PropTypes.arrayOf(PropTypes.number).description('Custom offset for the floating wrapper'),\n};\n\nexport const DSFloatingWrapperPropTypesSchema =\n  DSFloatingWrapperPropTypes as unknown as ValidationMap<DSFloatingWrapperT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAA8D;AAiDvD,MAAM,eAAyD;AAAA,EACpE,SAAS;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB;AAAA,EACA,cAAc,CAAC,GAAG,EAAE;AACtB;AAEO,MAAM,6BAAkF;AAAA,EAC7F,OAAG,kDAAyB,wCAAuB,uCAAsB;AAAA,EACzE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,iCAAiC,EAAE;AAAA,EACxE,UAAU,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,IAAI,CAAC,EAAE,YAAY,8BAA8B,EACzG;AAAA,EACH,QAAQ,kCAAU,KAAK,YAAY,sCAAsC,EAAE;AAAA,EAC3E,gBAAgB,kCAAU,OAAO,YAAY,gCAAgC,EAAE;AAAA,EAC/E,SAAS,kCAAU,MAAM;AAAA,IACvB,oBAAoB,kCAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,IACvG,eAAe,kCAAU,KAAK,YAAY,yDAAyD;AAAA,IACnG,mBAAmB,kCAAU,OAAO,YAAY,2BAA2B;AAAA,IAC3E,kBAAkB,kCAAU,KAAK,YAAY,0DAA0D;AAAA,EACzG,CAAC,EAAE,YAAY,kCAAkC;AAAA,EACjD,2BAA2B,kCAAU,KAAK;AAAA,IACxC;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,KAAK;AAAA,IAC7B;AAAA,EACF;AAAA,EACA,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,wCAAwC;AACxG;AAEO,MAAM,mCACX;",
   "names": []
 }

package/dist/cjs/parts/FloatingWrapper/styled.js

@@ -34,7 +34,7 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_constants = require("./constants/index.js");
+var import_constants = require("../../constants/index.js");
 const showAnimation = import_ds_system.kfrm`
     from {
       opacity: 0;
@@ -59,7 +59,10 @@ const hideAnimation = import_ds_system.kfrm`
       visibility: hidden;
     }
 `;
-const StyledFloatingAnimation = import_ds_system.styled.div`
+const StyledFloatingAnimation = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSFloatingWrapperName,
+  slot: import_constants.DSFloatingWrapperSlots.CONTENT
+})`
   background-color: #fff;
   box-shadow:
     0 0 0 1px rgba(16, 22, 26, 0.1),

package/dist/cjs/parts/FloatingWrapper/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/FloatingWrapper/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css, kfrm } from '@elliemae/ds-system';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from './constants/index.js';\ninterface StyledAnimatedPopperPropsT {\n  isOpen?: 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 StyledFloatingAnimation = styled.div<StyledAnimatedPopperPropsT>`\n  background-color: #fff;\n  box-shadow:\n    0 0 0 1px rgba(16, 22, 26, 0.1),\n    0 2px 4px rgba(16, 22, 26, 0.2),\n    0 8px 24px rgba(16, 22, 26, 0.2);\n\n  ${({ isOpen, animationDuration, withoutAnimation }) =>\n    !withoutAnimation &&\n    css`\n      animation: ${isOpen ? showAnimation : hideAnimation} ${animationDuration ?? 100}ms ease-in;\n    `}\n`;\n\nexport const StyledFloatingWrapper = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ROOT,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAkC;AAClC,uBAA8D;AAO9D,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,0BAA0B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1C,CAAC,EAAE,QAAQ,mBAAmB,iBAAiB,MAC/C,CAAC,oBACD;AAAA,mBACe,SAAS,gBAAgB,aAAa,IAAI,qBAAqB,GAAG;AAAA,KAChF;AAAA;AAGE,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;",
+  "sourcesContent": ["import { styled, css, kfrm } from '@elliemae/ds-system';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../../constants/index.js';\ninterface StyledAnimatedPopperPropsT {\n  isOpen?: 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 StyledFloatingAnimation = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.CONTENT,\n})<StyledAnimatedPopperPropsT>`\n  background-color: #fff;\n  box-shadow:\n    0 0 0 1px rgba(16, 22, 26, 0.1),\n    0 2px 4px rgba(16, 22, 26, 0.2),\n    0 8px 24px rgba(16, 22, 26, 0.2);\n\n  ${({ isOpen, animationDuration, withoutAnimation }) =>\n    !withoutAnimation &&\n    css`\n      animation: ${isOpen ? showAnimation : hideAnimation} ${animationDuration ?? 100}ms ease-in;\n    `}\n`;\n\nexport const StyledFloatingWrapper = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ROOT,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAkC;AAClC,uBAA8D;AAO9D,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,8BAA0B,yBAAO,OAAO;AAAA,EACnD,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOG,CAAC,EAAE,QAAQ,mBAAmB,iBAAiB,MAC/C,CAAC,oBACD;AAAA,mBACe,SAAS,gBAAgB,aAAa,IAAI,qBAAqB,GAAG;AAAA,KAChF;AAAA;AAGE,MAAM,4BAAwB,yBAAO,OAAO;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;",
   "names": []
 }

package/dist/cjs/parts/PopoverArrow.js

@@ -34,9 +34,14 @@ module.exports = __toCommonJS(PopoverArrow_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../constants/index.js");
 const arrowWidth = 18;
 const arrowHeight = 18;
-const StyledArrow = import_ds_system.styled.div`
+const OFFSET_FIX_SHADOW_DEFECT = 0.25;
+const StyledArrow = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSFloatingWrapperName,
+  slot: import_constants.DSFloatingWrapperSlots.ARROW
+})`
   position: absolute;
   width: ${arrowWidth}px;
   height: ${arrowHeight}px;
@@ -54,7 +59,7 @@ const StyledArrow = import_ds_system.styled.div`
     svg {
       transform: rotateZ(180deg);
     }
-    bottom: -${arrowHeight}px;
+    bottom: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;
     left: ${(props) => {
   if (props["data-placement"].endsWith("start")) return `25%`;
   if (props["data-placement"].endsWith("end")) return `75%`;
@@ -65,10 +70,10 @@ const StyledArrow = import_ds_system.styled.div`
     svg {
       transform: rotateZ(-90deg);
     }
-    left: -${arrowWidth}px;
+    left: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}px;
   }
   &[data-placement^='bottom'] {
-    top: -${arrowHeight}px;
+    top: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;
     left: ${(props) => {
   if (props["data-placement"].endsWith("start")) return `25%`;
   if (props["data-placement"].endsWith("end")) return `75%`;
@@ -79,7 +84,7 @@ const StyledArrow = import_ds_system.styled.div`
     svg {
       transform: rotateZ(90deg);
     }
-    right: -${arrowWidth}px;
+    right: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}px;
   }
   margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
   margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};

package/dist/cjs/parts/PopoverArrow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PopoverArrow.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\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: rgb(105, 116, 137);\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: rgb(255, 255, 255);\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight}px;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\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    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\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    innerRef={arrowElementRef}\n    data-testid=\"ds-tooltip-arrow\"\n    aria-hidden=\"true\"\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;AD2EnB;AA1EJ,uBAAuB;AAOvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,wBAAO;AAAA;AAAA,WAEhB,UAAU;AAAA,YACT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeR,WAAW;AAAA,YACd,CAAC,UAAU;AACjB,MAAI,MAAM,gBAAgB,EAAE,SAAS,OAAO,EAAG,QAAO;AACtD,MAAI,MAAM,gBAAgB,EAAE,SAAS,KAAK,EAAG,QAAO;AACpD,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMQ,UAAU;AAAA;AAAA;AAAA,YAGX,WAAW;AAAA,YACX,CAAC,UAAU;AACjB,MAAI,MAAM,gBAAgB,EAAE,SAAS,OAAO,EAAG,QAAO;AACtD,MAAI,MAAM,gBAAgB,EAAE,SAAS,KAAK,EAAG,QAAO;AACpD,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMS,UAAU;AAAA;AAAA,iBAEP,CAAC,UACd,MAAM,gBAAgB,EAAE,WAAW,KAAK,KAAK,MAAM,gBAAgB,EAAE,WAAW,QAAQ,IACpF,IAAI,aAAa,CAAC,QAClB,IAAI;AAAA,gBACI,CAAC,UACb,MAAM,gBAAgB,EAAE,WAAW,MAAM,KAAK,MAAM,gBAAgB,EAAE,WAAW,OAAO,IACpF,IAAI,cAAc,CAAC,QACnB,IAAI;AAAA;AAGL,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,gBAAgB,MAC/D;AAAA,EAAC;AAAA;AAAA,IAEC,kBAAgB;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV,eAAY;AAAA,IACZ,eAAY;AAAA,IAEZ,uDAAC,SAAI,SAAQ,aACX;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA;AAAA,MACJ;AAAA,OACF;AAAA;AAAA,EAjBI;AAkBN;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\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 OFFSET_FIX_SHADOW_DEFECT = 0.25;\nconst StyledArrow = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW,\n})<{ '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: rgb(105, 116, 137);\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: rgb(255, 255, 255);\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}px;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowHeight - OFFSET_FIX_SHADOW_DEFECT}px;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowWidth - OFFSET_FIX_SHADOW_DEFECT}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    innerRef={arrowElementRef}\n    data-testid=\"ds-tooltip-arrow\"\n    aria-hidden=\"true\"\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;AD+EnB;AA9EJ,uBAAuB;AACvB,uBAA8D;AAM9D,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,2BAA2B;AACjC,MAAM,kBAAc,yBAAO,OAAO;AAAA,EAChC,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAAA;AAAA,WAEU,UAAU;AAAA,YACT,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeR,cAAc,wBAAwB;AAAA,YACzC,CAAC,UAAU;AACjB,MAAI,MAAM,gBAAgB,EAAE,SAAS,OAAO,EAAG,QAAO;AACtD,MAAI,MAAM,gBAAgB,EAAE,SAAS,KAAK,EAAG,QAAO;AACpD,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMQ,aAAa,wBAAwB;AAAA;AAAA;AAAA,YAGtC,cAAc,wBAAwB;AAAA,YACtC,CAAC,UAAU;AACjB,MAAI,MAAM,gBAAgB,EAAE,SAAS,OAAO,EAAG,QAAO;AACtD,MAAI,MAAM,gBAAgB,EAAE,SAAS,KAAK,EAAG,QAAO;AACpD,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMS,aAAa,wBAAwB;AAAA;AAAA,iBAElC,CAAC,UACd,MAAM,gBAAgB,EAAE,WAAW,KAAK,KAAK,MAAM,gBAAgB,EAAE,WAAW,QAAQ,IACpF,IAAI,aAAa,CAAC,QAClB,IAAI;AAAA,gBACI,CAAC,UACb,MAAM,gBAAgB,EAAE,WAAW,MAAM,KAAK,MAAM,gBAAgB,EAAE,WAAW,OAAO,IACpF,IAAI,cAAc,CAAC,QACnB,IAAI;AAAA;AAGL,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,gBAAgB,MAC/D;AAAA,EAAC;AAAA;AAAA,IAEC,kBAAgB;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV,eAAY;AAAA,IACZ,eAAY;AAAA,IAEZ,uDAAC,SAAI,SAAQ,aACX;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA;AAAA,MAEJ;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,GAAE;AAAA;AAAA,MACJ;AAAA,OACF;AAAA;AAAA,EAjBI;AAkBN;",
   "names": []
 }

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

@@ -39,7 +39,7 @@ const defaultProps = {
   animationDuration: 300,
   withoutPortal: false,
   placement: "top",
-  customOffset: [12, 12]
+  customOffset: [0, 12]
 };
 const DSFloatingContextPropTypes = {
   withoutPortal: import_ds_props_helpers.PropTypes.bool.description("If true, the tooltip will not be rendered inside a portal.").defaultValue(false),
@@ -76,6 +76,9 @@ const DSFloatingContextPropTypes = {
     import_ds_props_helpers.PropTypes.tuple([import_ds_props_helpers.PropTypes.oneOf(["left-start"])])
   ]).description("The order of the placement preference."),
   onOpen: import_ds_props_helpers.PropTypes.func.description("Callback when the tooltip is opened."),
-  onClose: import_ds_props_helpers.PropTypes.func.description("Callback when the tooltip is closed.")
+  onClose: import_ds_props_helpers.PropTypes.func.description("Callback when the tooltip is closed."),
+  externallyControlledIsOpen: import_ds_props_helpers.PropTypes.bool.description(
+    "If true, the context open/close state will be controlled externally."
+  )
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n  export interface DefaultProps {\n    withoutPortal: boolean;\n    withoutAnimation: boolean;\n    portalDOMContainer?: HTMLElement;\n    animationDuration: number;\n    placement: PopperPlacementsT;\n    customOffset: [number, number];\n  }\n\n  export interface OptionalProps {\n    placementOrderPreference?: PopperPlacementsT[];\n    onOpen?: () => void;\n    onClose?: () => void;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps {}\n\n  export 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';\n}\n\nexport const defaultProps: DSHookFloatingContextT.DefaultProps = {\n  withoutAnimation: false,\n  animationDuration: 300,\n  withoutPortal: false,\n  placement: 'top',\n  customOffset: [12, 12],\n};\n\nexport const DSFloatingContextPropTypes: DSPropTypesSchema<DSHookFloatingContextT.Props> = {\n  withoutPortal: PropTypes.bool\n    .description('If true, the tooltip will not be rendered inside a portal.')\n    .defaultValue(false),\n  withoutAnimation: PropTypes.bool.description('If true, the tooltip will not have an animation.').defaultValue(false),\n  portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n    .description('The DOM element where the tooltip will be rendered.')\n    .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n  animationDuration: PropTypes.number.description('The duration of the animation in milliseconds.').defaultValue(300),\n  placement: 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('The placement of the tooltip.')\n    .defaultValue('top'),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('The custom offset of the tooltip.')\n    .defaultValue([12, 12]),\n  placementOrderPreference: PropTypes.oneOfType([\n    PropTypes.tuple([PropTypes.oneOf(['top-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-start'])]),\n  ]).description('The order of the placement preference.'),\n  onOpen: PropTypes.func.description('Callback when the tooltip is opened.'),\n  onClose: PropTypes.func.description('Callback when the tooltip is closed.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAmCnB,MAAM,eAAoD;AAAA,EAC/D,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AACvB;AAEO,MAAM,6BAA8E;AAAA,EACzF,eAAe,kCAAU,KACtB,YAAY,4DAA4D,EACxE,aAAa,KAAK;AAAA,EACrB,kBAAkB,kCAAU,KAAK,YAAY,kDAAkD,EAAE,aAAa,KAAK;AAAA,EACnH,oBAAoB,kCAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,EACvG,mBAAmB,kCAAU,OAAO,YAAY,gDAAgD,EAAE,aAAa,GAAG;AAAA,EAClH,WAAW,kCAAU,MAAM;AAAA,IACzB;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,+BAA+B,EAC3C,aAAa,KAAK;AAAA,EACrB,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAC7C,YAAY,mCAAmC,EAC/C,aAAa,CAAC,IAAI,EAAE,CAAC;AAAA,EACxB,0BAA0B,kCAAU,UAAU;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAAA,IAC1C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;AAAA,IAC9C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAAA,IAClD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,IACjD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,IAC7C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;AAAA,IACnD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;AAAA,IAC/C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,IAC3C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,EACnD,CAAC,EAAE,YAAY,wCAAwC;AAAA,EACvD,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAC5E;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n  export interface DefaultProps {\n    withoutPortal: boolean;\n    withoutAnimation: boolean;\n    portalDOMContainer?: HTMLElement;\n    animationDuration: number;\n    placement: PopperPlacementsT;\n    customOffset: [number, number];\n  }\n\n  export interface OptionalProps {\n    placementOrderPreference?: PopperPlacementsT[];\n    onOpen?: () => void;\n    onClose?: () => void;\n    externallyControlledIsOpen?: boolean;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps {}\n\n  export 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';\n}\n\nexport const defaultProps: DSHookFloatingContextT.DefaultProps = {\n  withoutAnimation: false,\n  animationDuration: 300,\n  withoutPortal: false,\n  placement: 'top',\n  customOffset: [0, 12],\n};\n\nexport const DSFloatingContextPropTypes: DSPropTypesSchema<DSHookFloatingContextT.Props> = {\n  withoutPortal: PropTypes.bool\n    .description('If true, the tooltip will not be rendered inside a portal.')\n    .defaultValue(false),\n  withoutAnimation: PropTypes.bool.description('If true, the tooltip will not have an animation.').defaultValue(false),\n  portalDOMContainer: PropTypes.instanceOf(HTMLElement)\n    .description('The DOM element where the tooltip will be rendered.')\n    .defaultValue('the first \"main\" landmark available in the document or the body if no \"main\" is found'),\n  animationDuration: PropTypes.number.description('The duration of the animation in milliseconds.').defaultValue(300),\n  placement: 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('The placement of the tooltip.')\n    .defaultValue('top'),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('The custom offset of the tooltip.')\n    .defaultValue([12, 12]),\n  placementOrderPreference: PropTypes.oneOfType([\n    PropTypes.tuple([PropTypes.oneOf(['top-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-start'])]),\n  ]).description('The order of the placement preference.'),\n  onOpen: PropTypes.func.description('Callback when the tooltip is opened.'),\n  onClose: PropTypes.func.description('Callback when the tooltip is closed.'),\n  externallyControlledIsOpen: PropTypes.bool.description(\n    'If true, the context open/close state will be controlled externally.',\n  ),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAoCnB,MAAM,eAAoD;AAAA,EAC/D,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,GAAG,EAAE;AACtB;AAEO,MAAM,6BAA8E;AAAA,EACzF,eAAe,kCAAU,KACtB,YAAY,4DAA4D,EACxE,aAAa,KAAK;AAAA,EACrB,kBAAkB,kCAAU,KAAK,YAAY,kDAAkD,EAAE,aAAa,KAAK;AAAA,EACnH,oBAAoB,kCAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,EACvG,mBAAmB,kCAAU,OAAO,YAAY,gDAAgD,EAAE,aAAa,GAAG;AAAA,EAClH,WAAW,kCAAU,MAAM;AAAA,IACzB;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,+BAA+B,EAC3C,aAAa,KAAK;AAAA,EACrB,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAC7C,YAAY,mCAAmC,EAC/C,aAAa,CAAC,IAAI,EAAE,CAAC;AAAA,EACxB,0BAA0B,kCAAU,UAAU;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAAA,IAC1C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;AAAA,IAC9C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAAA,IAClD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,IACjD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,IAC7C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;AAAA,IACnD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;AAAA,IAC/C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,IAC3C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,EACnD,CAAC,EAAE,YAAY,wCAAwC;AAAA,EACvD,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC1E,4BAA4B,kCAAU,KAAK;AAAA,IACzC;AAAA,EACF;AACF;",
   "names": []
 }