@elliemae/ds-floating-context 3.51.0-rc.2 → 3.51.0-rc.21

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    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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",
+  "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 type { PopoverArrowT } from './parts/PopoverArrow.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<PopoverArrowT>({\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/constants/index.js

@@ -39,7 +39,14 @@ const DSFloatingWrapperName = "DSFloatingwrapper";
 const DSFloatingWrapperSlots = {
   ROOT: "root",
   CONTENT: "content",
-  ARROW: "arrow"
+  ARROW: "arrow",
+  ARROW_SHADOW: "arrow_shadow",
+  ARROW_FILL: "arrow_fill"
+};
+const DSFloatingWrapperDataTestids = {
+  ...(0, import_ds_system.slotObjectToDataTestIds)(DSFloatingWrapperName, DSFloatingWrapperSlots),
+  // for legacy reasons we have to keep those around and override the slots...
+  ROOT: "ds-floating-wrapper-root",
+  ARROW: "ds-tooltip-arrow"
 };
-const DSFloatingWrapperDataTestids = (0, import_ds_system.slotObjectToDataTestIds)(DSFloatingWrapperName, DSFloatingWrapperSlots);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +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;",
+  "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  ARROW_SHADOW: 'arrow_shadow',\n  ARROW_FILL: 'arrow_fill',\n};\n\nexport const DSFloatingWrapperDataTestids = {\n  ...slotObjectToDataTestIds(DSFloatingWrapperName, DSFloatingWrapperSlots),\n  // for legacy reasons we have to keep those around and override the slots...\n  ROOT: 'ds-floating-wrapper-root',\n  ARROW: 'ds-tooltip-arrow',\n};\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;AAAA,EACP,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,+BAA+B;AAAA,EAC1C,OAAG,0CAAwB,uBAAuB,sBAAsB;AAAA;AAAA,EAExE,MAAM;AAAA,EACN,OAAO;AACT;",
   "names": []
 }

package/dist/cjs/index.js

@@ -26,8 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   DSFloatingWrapperDataTestids: () => import_FloatingWrapper2.DSFloatingWrapperDataTestids,
   DSFloatingWrapperName: () => import_FloatingWrapper2.DSFloatingWrapperName,
   DSFloatingWrapperSlots: () => import_FloatingWrapper2.DSFloatingWrapperSlots,
@@ -37,7 +37,7 @@ __export(src_exports, {
   UseFloatingContextWithSchema: () => import_DSFloatingContext.UseFloatingContextWithSchema,
   useFloatingContext: () => import_DSFloatingContext.useFloatingContext
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
 var import_DSFloatingContext = require("./DSFloatingContext.js");
 var import_PopoverArrow = require("./parts/PopoverArrow.js");

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

@@ -52,7 +52,8 @@ const ContentComponent = import_react.default.memo(
     withoutAnimation,
     handleAnimationEnd,
     xstyledProps,
-    globalsAttrs
+    globalsAttrs,
+    ownerPropsConfig
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_styled.StyledFloatingWrapper,
     {
@@ -60,7 +61,9 @@ const ContentComponent = import_react.default.memo(
       style: floatingStyles,
       ...xstyledProps,
       role: "complementary",
+      "data-testid": "ds-floating-wrapper-root",
       ...globalsAttrs,
+      ...ownerPropsConfig,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_styled.StyledFloatingAnimation,
         {
@@ -68,6 +71,7 @@ const ContentComponent = import_react.default.memo(
           isOpen,
           animationDuration,
           withoutAnimation,
+          ...ownerPropsConfig,
           children
         }
       )
@@ -77,6 +81,7 @@ const ContentComponent = import_react.default.memo(
 const FloatingWrapper = (props) => {
   const { propsWithDefault, xstyledProps, globalsAttrs } = (0, import_useFloatingWrapper.useFloatingWrapper)(props);
   const { isOpen } = propsWithDefault;
+  const ownerPropsConfig = (0, import_ds_props_helpers.useOwnerProps)(props);
   const { context, onAnimationEnd, onAnimationStartTriggered, ...contentProps } = propsWithDefault;
   const { portalDOMContainer, withoutPortal, withoutAnimation } = context;
   const [isAnimating, setIsAnimating] = import_react.default.useState(false);
@@ -100,6 +105,7 @@ const FloatingWrapper = (props) => {
         {
           xstyledProps,
           globalsAttrs,
+          ownerPropsConfig,
           ...contentProps,
           ...context,
           handleAnimationEnd
@@ -112,6 +118,7 @@ const FloatingWrapper = (props) => {
           {
             xstyledProps,
             globalsAttrs,
+            ownerPropsConfig,
             ...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  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;",
+  "sourcesContent": ["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap, useOwnerProps } 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  ownerPropsConfig: {\n    getOwnerProps: () => DSFloatingWrapperT.Props;\n    getOwnerPropsArguments: () => object;\n  };\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    ownerPropsConfig,\n  }) => (\n    <StyledFloatingWrapper\n      innerRef={innerRef}\n      style={floatingStyles}\n      {...xstyledProps}\n      role=\"complementary\"\n      data-testid=\"ds-floating-wrapper-root\"\n      {...globalsAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledFloatingAnimation\n        onAnimationEnd={handleAnimationEnd}\n        isOpen={isOpen}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        {...ownerPropsConfig}\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  const ownerPropsConfig = useOwnerProps(props);\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          ownerPropsConfig={ownerPropsConfig}\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              ownerPropsConfig={ownerPropsConfig}\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;AD4CjB;AA5CN,mBAAkB;AAClB,uBAA6B;AAC7B,8BAA4D;AAC5D,oBAA+D;AAC/D,mCAAoE;AACpE,gCAAmC;AACnC,uBAAsC;AACtC,2CAA8C;AAe9C,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,IACA;AAAA,EACF,MACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH;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;AACnB,QAAM,uBAAmB,uCAAc,KAAK;AAE5C,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,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,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/PopoverArrow.js

@@ -33,6 +33,7 @@ __export(PopoverArrow_exports, {
 module.exports = __toCommonJS(PopoverArrow_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../constants/index.js");
 const arrowWidth = 18;
@@ -89,31 +90,49 @@ const StyledArrow = (0, import_ds_system.styled)("div", {
   margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
   margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
 `;
-const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  StyledArrow,
-  {
-    "data-placement": placement,
-    style,
-    innerRef: arrowElementRef,
-    "data-testid": "ds-tooltip-arrow",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 30 30", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "path",
-        {
-          className: "stroke",
-          d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "path",
-        {
-          className: "fill",
-          d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
-        }
-      )
-    ] })
-  },
-  "popper-arrow"
-);
+const StylePathShadow = (0, import_ds_system.styled)("path", {
+  name: import_constants.DSFloatingWrapperName,
+  slot: import_constants.DSFloatingWrapperSlots.ARROW_SHADOW
+})``;
+const StylePathFill = (0, import_ds_system.styled)("path", {
+  name: import_constants.DSFloatingWrapperName,
+  slot: import_constants.DSFloatingWrapperSlots.ARROW_FILL
+})``;
+const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }) => {
+  const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(rest);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledArrow,
+    {
+      "data-placement": placement,
+      style,
+      innerRef: arrowElementRef,
+      "data-testid": "ds-tooltip-arrow",
+      "aria-hidden": "true",
+      ...ownerProps,
+      ...globalAttributes,
+      ...xstyledProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 30 30", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StylePathShadow,
+          {
+            ...ownerProps,
+            className: "stroke",
+            d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          StylePathFill,
+          {
+            ...ownerProps,
+            className: "fill",
+            d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+          }
+        )
+      ] })
+    },
+    "popper-arrow"
+  );
+};
 //# sourceMappingURL=PopoverArrow.js.map

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';\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;",
+  "sourcesContent": ["import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n  extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\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\nconst StylePathShadow = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n  const ownerProps = useOwnerProps(rest);\n  const globalAttributes = useGetGlobalAttributes(rest);\n  const xstyledProps = useGetXstyledProps(rest);\n  return (\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      {...ownerProps}\n      {...globalAttributes}\n      {...xstyledProps}\n    >\n      <svg viewBox=\"0 0 30 30\">\n        <StylePathShadow\n          {...ownerProps}\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        <StylePathFill\n          {...ownerProps}\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};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmGjB;AAlGN,8BAA0E;AAC1E,uBAAuB;AAEvB,uBAA8D;AAO9D,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;AAGZ,MAAM,sBAAkB,yBAAO,QAAQ;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAED,MAAM,oBAAgB,yBAAO,QAAQ;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,wCAAuB;AAC/B,CAAC;AAEM,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,iBAAiB,GAAG,KAAK,MAAyC;AACjH,QAAM,iBAAa,uCAAc,IAAI;AACrC,QAAM,uBAAmB,gDAAuB,IAAI;AACpD,QAAM,mBAAe,4CAAmB,IAAI;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,kBAAgB;AAAA,MAChB;AAAA,MACA,UAAU;AAAA,MACV,eAAY;AAAA,MACZ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,uDAAC,SAAI,SAAQ,aACX;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,GAAE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,GAAE;AAAA;AAAA,QACJ;AAAA,SACF;AAAA;AAAA,IAtBI;AAAA,EAuBN;AAEJ;",
   "names": []
 }

package/dist/esm/DSFloatingContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSFloatingContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 type { PopoverArrowT } from './parts/PopoverArrow.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<PopoverArrowT>({\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACMvB,OAAOA,UAAS,UAAU,WAAW,eAAe;AACpD,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,0BAA0B;AAEnC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAGhC,SAAS,cAAc,kCAAkC;AAEzD,MAAM,qBAAqB,CAAC,QAAsC,CAAC,MAAM;AACvE,QAAM,mBAAmB,6BAAmE,OAAO,YAAY;AAC/G,iCAA+B,kBAAkB,4BAA4B,iBAAiB;AAE9F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAkB,KAAK;AACzE,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,+BAA+B,OAAW,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,4BAA4B,cAAc,CAAC;AAE/C,QAAM,oBAAoBA,OAAM,YAAY,MAAM;AAChD,sBAAkB,IAAI;AACtB,aAAS;AAAA,EACX,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,qBAAqBA,OAAM,YAAY,MAAM;AACjD,sBAAkB,KAAK;AACvB,cAAU;AAAA,EACZ,GAAG,CAAC,OAAO,CAAC;AACZ,QAAM,iBAAiB,mBAAmB,EAAE,QAAQ,mBAAmB,SAAS,mBAAmB,CAAC;AAEpG,QAAM,EAAE,qBAAqB,aAAa,YAAY,IAAI;AAC1D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,EACd,CAAC;AACD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB;AAAA,IAC5D,OAAO,EAAE,MAAM,EAAE;AAAA,IACjB,WAAW;AAAA,EACb,CAAC;AAED,QAAM,CAAC,WAAW,aAAa,IAAIA,OAAM,SAAyB,IAAI;AACtE,QAAM,CAAC,UAAU,WAAW,IAAIA,OAAM,SAA6B,IAAI;AACvE,YAAU,MAAM;AACd,UAAM,SAAS,MAAM;AACnB,UAAI,uBAAuB,aAAa,UAAU;AAChD,cAAM,EAAE,aAAa,gBAAgB,YAAY,IAAI,gBAAgB;AAAA,UACnE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAED,cAAM,SAAwB;AAAA,UAC5B,UAAU;AAAA,UACV,QAAQ;AAAA;AAAA;AAAA,UAGR,GAAG;AAAA,QACL;AAEA,0BAAkB,MAAM;AACxB,uBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAAA,MAClE;AAAA,IACF;AAGA,WAAO;AAEP,UAAM,cAAc,SAAS,QAAQ,GAAG;AAGxC,WAAO,iBAAiB,UAAU,WAAW;AAE7C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,WAAW;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,WAAW,UAAU,WAAW,0BAA0B,cAAc,eAAe,mBAAmB,CAAC;AAE/G,QAAM,eAAe,UAAU,eAAe,mBAAmB;AAEjE,QAAM,OAAOA,OAAM;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,UAAU,SAAS;AAAA,EACpC;AAEA,QAAM,WAAWA,OAAM;AAAA,IACrB,OAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,cAAc,eAAe;AAAA,MAC7B,SAAS,eAAe;AAAA,MACxB,QAAQ,eAAe;AAAA,IACzB;AAAA,IACA,CAAC,eAAe,QAAQ,eAAe,SAAS,eAAe,cAAc,eAAe,YAAY;AAAA,EAC1G;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAC3B;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -4,9 +4,16 @@ const DSFloatingWrapperName = "DSFloatingwrapper";
 const DSFloatingWrapperSlots = {
   ROOT: "root",
   CONTENT: "content",
-  ARROW: "arrow"
+  ARROW: "arrow",
+  ARROW_SHADOW: "arrow_shadow",
+  ARROW_FILL: "arrow_fill"
+};
+const DSFloatingWrapperDataTestids = {
+  ...slotObjectToDataTestIds(DSFloatingWrapperName, DSFloatingWrapperSlots),
+  // for legacy reasons we have to keep those around and override the slots...
+  ROOT: "ds-floating-wrapper-root",
+  ARROW: "ds-tooltip-arrow"
 };
-const DSFloatingWrapperDataTestids = slotObjectToDataTestIds(DSFloatingWrapperName, DSFloatingWrapperSlots);
 export {
   DSFloatingWrapperDataTestids,
   DSFloatingWrapperName,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,+BAA+B,wBAAwB,uBAAuB,sBAAsB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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  ARROW_SHADOW: 'arrow_shadow',\n  ARROW_FILL: 'arrow_fill',\n};\n\nexport const DSFloatingWrapperDataTestids = {\n  ...slotObjectToDataTestIds(DSFloatingWrapperName, DSFloatingWrapperSlots),\n  // for legacy reasons we have to keep those around and override the slots...\n  ROOT: 'ds-floating-wrapper-root',\n  ARROW: 'ds-tooltip-arrow',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,wBAAwB;AAE9B,MAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,+BAA+B;AAAA,EAC1C,GAAG,wBAAwB,uBAAuB,sBAAsB;AAAA;AAAA,EAExE,MAAM;AAAA,EACN,OAAO;AACT;",
   "names": []
 }

package/dist/esm/parts/FloatingWrapper/FloatingWrapper.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import React2 from "react";
 import { createPortal } from "react-dom";
-import { describe } from "@elliemae/ds-props-helpers";
+import { describe, useOwnerProps } from "@elliemae/ds-props-helpers";
 import { StyledFloatingAnimation, StyledFloatingWrapper } from "./styled.js";
 import { DSFloatingWrapperPropTypes } from "./react-desc-prop-types.js";
 import { useFloatingWrapper } from "./config/useFloatingWrapper.js";
@@ -18,7 +18,8 @@ const ContentComponent = React2.memo(
     withoutAnimation,
     handleAnimationEnd,
     xstyledProps,
-    globalsAttrs
+    globalsAttrs,
+    ownerPropsConfig
   }) => /* @__PURE__ */ jsx(
     StyledFloatingWrapper,
     {
@@ -26,7 +27,9 @@ const ContentComponent = React2.memo(
       style: floatingStyles,
       ...xstyledProps,
       role: "complementary",
+      "data-testid": "ds-floating-wrapper-root",
       ...globalsAttrs,
+      ...ownerPropsConfig,
       children: /* @__PURE__ */ jsx(
         StyledFloatingAnimation,
         {
@@ -34,6 +37,7 @@ const ContentComponent = React2.memo(
           isOpen,
           animationDuration,
           withoutAnimation,
+          ...ownerPropsConfig,
           children
         }
       )
@@ -43,6 +47,7 @@ const ContentComponent = React2.memo(
 const FloatingWrapper = (props) => {
   const { propsWithDefault, xstyledProps, globalsAttrs } = useFloatingWrapper(props);
   const { isOpen } = propsWithDefault;
+  const ownerPropsConfig = useOwnerProps(props);
   const { context, onAnimationEnd, onAnimationStartTriggered, ...contentProps } = propsWithDefault;
   const { portalDOMContainer, withoutPortal, withoutAnimation } = context;
   const [isAnimating, setIsAnimating] = React2.useState(false);
@@ -66,6 +71,7 @@ const FloatingWrapper = (props) => {
         {
           xstyledProps,
           globalsAttrs,
+          ownerPropsConfig,
           ...contentProps,
           ...context,
           handleAnimationEnd
@@ -78,6 +84,7 @@ const FloatingWrapper = (props) => {
           {
             xstyledProps,
             globalsAttrs,
+            ownerPropsConfig,
             ...contentProps,
             ...context,
             handleAnimationEnd

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FloatingWrapper/FloatingWrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACqCjB,SAgDE,UAhDF;AArCN,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,gBAAoC;AAC7C,SAAS,yBAAyB,6BAA6B;AAC/D,SAAkC,kCAAkC;AACpE,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,qCAAqC;AAW9C,MAAM,mBAAmBA,OAAM;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,IAAI,mBAAmB,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,IAAIA,OAAM,SAAS,KAAK;AAC1D,EAAAA,OAAM,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,qBAAqBA,OAAM;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,gCACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QACA,sBAAsB,8BAA8B;AAAA,MACtD,GACF;AAAA,EAEN;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe, type ValidationMap, useOwnerProps } 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  ownerPropsConfig: {\n    getOwnerProps: () => DSFloatingWrapperT.Props;\n    getOwnerPropsArguments: () => object;\n  };\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    ownerPropsConfig,\n  }) => (\n    <StyledFloatingWrapper\n      innerRef={innerRef}\n      style={floatingStyles}\n      {...xstyledProps}\n      role=\"complementary\"\n      data-testid=\"ds-floating-wrapper-root\"\n      {...globalsAttrs}\n      {...ownerPropsConfig}\n    >\n      <StyledFloatingAnimation\n        onAnimationEnd={handleAnimationEnd}\n        isOpen={isOpen}\n        animationDuration={animationDuration}\n        withoutAnimation={withoutAnimation}\n        {...ownerPropsConfig}\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  const ownerPropsConfig = useOwnerProps(props);\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          ownerPropsConfig={ownerPropsConfig}\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              ownerPropsConfig={ownerPropsConfig}\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"],
+  "mappings": "AAAA,YAAY,WAAW;AC4CjB,SAmDE,UAnDF;AA5CN,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,UAA8B,qBAAqB;AAC5D,SAAS,yBAAyB,6BAA6B;AAC/D,SAAkC,kCAAkC;AACpE,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,qCAAqC;AAe9C,MAAM,mBAAmBA,OAAM;AAAA,EAC7B,CAAC;AAAA,IACC;AAAA,IACA;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,MACL,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,kBAAiE,CAAC,UAAU;AAChF,QAAM,EAAE,kBAAkB,cAAc,aAAa,IAAI,mBAAmB,KAAK;AACjF,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,mBAAmB,cAAc,KAAK;AAE5C,QAAM,EAAE,SAAS,gBAAgB,2BAA2B,GAAG,aAAa,IAAI;AAChF,QAAM,EAAE,oBAAoB,eAAe,iBAAiB,IAAI;AAEhE,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,EAAAA,OAAM,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,qBAAqBA,OAAM;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,UACA;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACJ;AAAA;AAAA,MACF;AAEJ,QAAI,CAAC;AACH,aACE,gCACG;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QACA,sBAAsB,8BAA8B;AAAA,MACtD,GACF;AAAA,EAEN;AACA,SAAO;AACT;AAEA,gBAAgB,cAAc;AAC9B,MAAM,4BAA4B,SAAS,eAAe;AAC1D,0BAA0B,YAAY;",
   "names": ["React"]
 }

package/dist/esm/parts/PopoverArrow.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import { styled } from "@elliemae/ds-system";
 import { DSFloatingWrapperSlots, DSFloatingWrapperName } from "../constants/index.js";
 const arrowWidth = 18;
@@ -56,33 +57,51 @@ const StyledArrow = styled("div", {
   margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
   margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
 `;
-const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ jsx(
-  StyledArrow,
-  {
-    "data-placement": placement,
-    style,
-    innerRef: arrowElementRef,
-    "data-testid": "ds-tooltip-arrow",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 30 30", children: [
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          className: "stroke",
-          d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "path",
-        {
-          className: "fill",
-          d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
-        }
-      )
-    ] })
-  },
-  "popper-arrow"
-);
+const StylePathShadow = styled("path", {
+  name: DSFloatingWrapperName,
+  slot: DSFloatingWrapperSlots.ARROW_SHADOW
+})``;
+const StylePathFill = styled("path", {
+  name: DSFloatingWrapperName,
+  slot: DSFloatingWrapperSlots.ARROW_FILL
+})``;
+const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }) => {
+  const ownerProps = useOwnerProps(rest);
+  const globalAttributes = useGetGlobalAttributes(rest);
+  const xstyledProps = useGetXstyledProps(rest);
+  return /* @__PURE__ */ jsx(
+    StyledArrow,
+    {
+      "data-placement": placement,
+      style,
+      innerRef: arrowElementRef,
+      "data-testid": "ds-tooltip-arrow",
+      "aria-hidden": "true",
+      ...ownerProps,
+      ...globalAttributes,
+      ...xstyledProps,
+      children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 30 30", children: [
+        /* @__PURE__ */ jsx(
+          StylePathShadow,
+          {
+            ...ownerProps,
+            className: "stroke",
+            d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StylePathFill,
+          {
+            ...ownerProps,
+            className: "fill",
+            d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+          }
+        )
+      ] })
+    },
+    "popper-arrow"
+  );
+};
 export {
   PopoverArrow
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/PopoverArrow.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;AC+EnB,SACE,KADF;AA9EJ,SAAS,cAAc;AACvB,SAAS,wBAAwB,6BAA6B;AAM9D,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,2BAA2B;AACjC,MAAM,cAAc,OAAO,OAAO;AAAA,EAChC,MAAM;AAAA,EACN,MAAM,uBAAuB;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,+BAAC,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 * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n  extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\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\nconst StylePathShadow = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n  const ownerProps = useOwnerProps(rest);\n  const globalAttributes = useGetGlobalAttributes(rest);\n  const xstyledProps = useGetXstyledProps(rest);\n  return (\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      {...ownerProps}\n      {...globalAttributes}\n      {...xstyledProps}\n    >\n      <svg viewBox=\"0 0 30 30\">\n        <StylePathShadow\n          {...ownerProps}\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        <StylePathFill\n          {...ownerProps}\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};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmGjB,SACE,KADF;AAlGN,SAAS,eAAe,wBAAwB,0BAA0B;AAC1E,SAAS,cAAc;AAEvB,SAAS,wBAAwB,6BAA6B;AAO9D,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,2BAA2B;AACjC,MAAM,cAAc,OAAO,OAAO;AAAA,EAChC,MAAM;AAAA,EACN,MAAM,uBAAuB;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;AAGZ,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAED,MAAM,gBAAgB,OAAO,QAAQ;AAAA,EACnC,MAAM;AAAA,EACN,MAAM,uBAAuB;AAC/B,CAAC;AAEM,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,iBAAiB,GAAG,KAAK,MAAyC;AACjH,QAAM,aAAa,cAAc,IAAI;AACrC,QAAM,mBAAmB,uBAAuB,IAAI;AACpD,QAAM,eAAe,mBAAmB,IAAI;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,kBAAgB;AAAA,MAChB;AAAA,MACA,UAAU;AAAA,MACV,eAAY;AAAA,MACZ,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ,+BAAC,SAAI,SAAQ,aACX;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,GAAE;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAU;AAAA,YACV,GAAE;AAAA;AAAA,QACJ;AAAA,SACF;AAAA;AAAA,IAtBI;AAAA,EAuBN;AAEJ;",
   "names": []
 }

package/dist/types/DSFloatingContext.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type CSSProperties } from 'styled-components';
 import type { DSHookFloatingContextT } from './react-desc-prop-types.js';
+import type { PopoverArrowT } from './parts/PopoverArrow.js';
 declare const useFloatingContext: {
     (props?: DSHookFloatingContextT.Props): {
         refs: {
@@ -17,10 +18,7 @@ declare const useFloatingContext: {
             onBlur: () => void;
         };
         isOpen: boolean;
-        arrowStyles: {
-            style: CSSProperties;
-            placement: string;
-        };
+        arrowStyles: PopoverArrowT;
         hideTooltip: () => void;
         showTooltip: () => void;
         context: {

package/dist/types/constants/index.d.ts

@@ -3,5 +3,10 @@ export declare const DSFloatingWrapperSlots: {
     ROOT: string;
     CONTENT: string;
     ARROW: string;
+    ARROW_SHADOW: string;
+    ARROW_FILL: string;
+};
+export declare const DSFloatingWrapperDataTestids: {
+    ROOT: string;
+    ARROW: string;
 };
-export declare const DSFloatingWrapperDataTestids: Record<string, string>;

package/dist/types/parts/FloatingWrapper/config/useFloatingWrapper.d.ts

@@ -11,30 +11,12 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
     propsWithDefault: DSFloatingWrapperT.InternalProps;
     xstyledProps: import("@elliemae/ds-props-helpers").XstyledProps;
     instanceUid: string;
-    globalsAttrs: Partial<Pick<object, "start" | "height" | "width" | "hidden" | "color" | "content" | "size" | "style" | "default" | "wrap" | "open" | "translate" | "multiple" | "disabled" | "onMouseEnter" | "onMouseLeave" | "onFocus" | "onBlur" | "accessKey" | "dir" | "draggable" | "lang" | "title" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "pattern" | "type" | "name" | "suppressHydrationWarning" | "className" | "id" | "max" | "media" | "method" | "min" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "high" | "low" | "optimum" | "autoComplete" | "cols" | "maxLength" | "minLength" | "placeholder" | "readOnly" | "required" | "rows" | "scoped" | "cellPadding" | "cellSpacing" | "src" | "accept" | "alt" | "capture" | "checked" | "list" | "step" | "download" | "hrefLang" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "dateTime" | "acceptCharset" | "action" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "integrity" | "charSet" | "httpEquiv" | "reversed" | "selected" | "async" | "defer" | "colSpan" | "headers" | "rowSpan" | "scope" | "kind" | "srcLang" | "poster"> & Omit<{
+    globalsAttrs: Partial<Pick<object, "start" | "height" | "width" | "content" | "style" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "default" | "type" | "name" | "suppressHydrationWarning" | "className" | "color" | "id" | "lang" | "max" | "media" | "method" | "min" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "scoped" | "download" | "hrefLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "src" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dateTime" | "open" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "sizes" | "srcSet" | "accept" | "capture" | "checked" | "list" | "maxLength" | "minLength" | "multiple" | "placeholder" | "readOnly" | "required" | "size" | "step" | "challenge" | "keyType" | "keyParams" | "htmlFor" | "integrity" | "charSet" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "selected" | "async" | "defer" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "wrap" | "kind" | "srcLang" | "poster"> & Omit<{
         start?: number | undefined;
         height?: string | number | undefined;
         width?: string | number | undefined;
-        hidden?: boolean | undefined;
-        color?: string | undefined;
         content?: string | undefined;
-        size?: number | undefined;
         style?: React.CSSProperties | undefined;
-        default?: boolean | undefined;
-        wrap?: string | undefined;
-        open?: boolean | undefined;
-        translate?: "yes" | "no" | undefined;
-        multiple?: boolean | undefined;
-        disabled?: boolean | undefined;
-        onMouseEnter?: React.MouseEventHandler<Element> | undefined;
-        onMouseLeave?: React.MouseEventHandler<Element> | undefined;
-        onFocus?: React.FocusEventHandler<Element> | undefined;
-        onBlur?: React.FocusEventHandler<Element> | undefined;
-        accessKey?: string | undefined;
-        dir?: string | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
-        lang?: string | undefined;
-        title?: string | undefined;
         cite?: string | undefined;
         data?: string | undefined;
         form?: string | undefined;
@@ -42,12 +24,16 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         slot?: string | undefined;
         span?: number | undefined;
         summary?: string | undefined;
+        title?: string | undefined;
         pattern?: string | undefined;
+        default?: boolean | undefined;
         type?: string | undefined;
         name?: string | undefined;
         suppressHydrationWarning?: boolean | undefined;
         className?: string | undefined;
+        color?: string | undefined;
         id?: string | undefined;
+        lang?: string | undefined;
         max?: string | number | undefined;
         media?: string | undefined;
         method?: string | undefined;
@@ -58,52 +44,52 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
         href?: string | undefined;
         "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "both" | "none" | "inline" | "list" | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
         "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
-        "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "listbox" | "grid" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
-        "aria-hidden"?: (boolean | "false" | "true") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
         "aria-level"?: number | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "false" | "true") | undefined;
-        "aria-multiline"?: (boolean | "false" | "true") | undefined;
-        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
-        "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
         "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
         "aria-valuemax"?: number | undefined;
@@ -123,7 +109,9 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         onCompositionStartCapture?: React.CompositionEventHandler<Element> | undefined;
         onCompositionUpdate?: React.CompositionEventHandler<Element> | undefined;
         onCompositionUpdateCapture?: React.CompositionEventHandler<Element> | undefined;
+        onFocus?: React.FocusEventHandler<Element> | undefined;
         onFocusCapture?: React.FocusEventHandler<Element> | undefined;
+        onBlur?: React.FocusEventHandler<Element> | undefined;
         onBlurCapture?: React.FocusEventHandler<Element> | undefined;
         onChange?: React.FormEventHandler<Element> | undefined;
         onChangeCapture?: React.FormEventHandler<Element> | undefined;
@@ -219,6 +207,8 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         onDropCapture?: React.DragEventHandler<Element> | undefined;
         onMouseDown?: React.MouseEventHandler<Element> | undefined;
         onMouseDownCapture?: React.MouseEventHandler<Element> | undefined;
+        onMouseEnter?: React.MouseEventHandler<Element> | undefined;
+        onMouseLeave?: React.MouseEventHandler<Element> | undefined;
         onMouseMove?: React.MouseEventHandler<Element> | undefined;
         onMouseMoveCapture?: React.MouseEventHandler<Element> | undefined;
         onMouseOut?: React.MouseEventHandler<Element> | undefined;
@@ -273,13 +263,18 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
-        autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: (string & {}) | "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined;
         autoFocus?: boolean | undefined;
-        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
-        enterKeyHint?: "next" | "search" | "enter" | "done" | "go" | "previous" | "send" | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        hidden?: boolean | undefined;
         nonce?: string | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         about?: string | undefined;
         datatype?: string | undefined;
@@ -301,37 +296,12 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
-        formAction?: string | undefined;
-        formEncType?: string | undefined;
-        formMethod?: string | undefined;
-        formNoValidate?: boolean | undefined;
-        formTarget?: string | undefined;
-        value?: string | number | readonly string[] | undefined;
-        high?: number | undefined;
-        low?: number | undefined;
-        optimum?: number | undefined;
-        autoComplete?: string | undefined;
-        cols?: number | undefined;
-        maxLength?: number | undefined;
-        minLength?: number | undefined;
-        placeholder?: string | undefined;
-        readOnly?: boolean | undefined;
-        required?: boolean | undefined;
-        rows?: number | undefined;
         scoped?: boolean | undefined;
-        cellPadding?: string | number | undefined;
-        cellSpacing?: string | number | undefined;
-        src?: string | undefined;
-        accept?: string | undefined;
-        alt?: string | undefined;
-        capture?: boolean | "user" | "environment" | undefined;
-        checked?: boolean | undefined;
-        list?: string | undefined;
-        step?: string | number | undefined;
         download?: any;
         hrefLang?: string | undefined;
+        alt?: string | undefined;
         coords?: string | undefined;
         shape?: string | undefined;
         autoPlay?: boolean | undefined;
@@ -341,9 +311,19 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         muted?: boolean | undefined;
         playsInline?: boolean | undefined;
         preload?: string | undefined;
+        src?: string | undefined;
+        disabled?: boolean | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         dateTime?: string | undefined;
+        open?: boolean | undefined;
         acceptCharset?: string | undefined;
         action?: string | undefined;
+        autoComplete?: string | undefined;
         encType?: string | undefined;
         noValidate?: boolean | undefined;
         manifest?: string | undefined;
@@ -358,6 +338,18 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         srcDoc?: string | undefined;
         sizes?: string | undefined;
         srcSet?: string | undefined;
+        accept?: string | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        checked?: boolean | undefined;
+        list?: string | undefined;
+        maxLength?: number | undefined;
+        minLength?: number | undefined;
+        multiple?: boolean | undefined;
+        placeholder?: string | undefined;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+        size?: number | undefined;
+        step?: string | number | undefined;
         challenge?: string | undefined;
         keyType?: string | undefined;
         keyParams?: string | undefined;
@@ -365,14 +357,22 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         integrity?: string | undefined;
         charSet?: string | undefined;
         httpEquiv?: string | undefined;
+        high?: number | undefined;
+        low?: number | undefined;
+        optimum?: number | undefined;
         reversed?: boolean | undefined;
         selected?: boolean | undefined;
         async?: boolean | undefined;
         defer?: boolean | undefined;
+        cellPadding?: string | number | undefined;
+        cellSpacing?: string | number | undefined;
         colSpan?: number | undefined;
         headers?: string | undefined;
         rowSpan?: number | undefined;
         scope?: string | undefined;
+        cols?: number | undefined;
+        rows?: number | undefined;
+        wrap?: string | undefined;
         kind?: string | undefined;
         srcLang?: string | undefined;
         poster?: string | undefined;

package/dist/types/parts/PopoverArrow.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-interface PopoverArrowT {
+import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';
+export interface PopoverArrowT extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {
     placement: string;
     style: React.CSSProperties;
     arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
 }
-export declare const PopoverArrow: ({ placement, style, arrowElementRef }: PopoverArrowT) => React.ReactElement;
-export {};
+export declare const PopoverArrow: ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT) => React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-floating-context",
-  "version": "3.51.0-rc.2",
+  "version": "3.51.0-rc.21",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper Hook",
   "files": [
@@ -36,15 +36,15 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-hooks-headless-tooltip": "3.51.0-rc.2",
-    "@elliemae/ds-props-helpers": "3.51.0-rc.2",
-    "@elliemae/ds-system": "3.51.0-rc.2",
-    "@elliemae/ds-typescript-helpers": "3.51.0-rc.2"
+    "@elliemae/ds-hooks-headless-tooltip": "3.51.0-rc.21",
+    "@elliemae/ds-typescript-helpers": "3.51.0-rc.21",
+    "@elliemae/ds-system": "3.51.0-rc.21",
+    "@elliemae/ds-props-helpers": "3.51.0-rc.21"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.55",
     "jest": "~29.7.0",
-    "@elliemae/ds-monorepo-devops": "3.51.0-rc.2"
+    "@elliemae/ds-monorepo-devops": "3.51.0-rc.21"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",