@elliemae/ds-floating-context 3.52.0-rc.8 → 3.52.0

package/dist/cjs/DSFloatingContext.js

@@ -34,12 +34,12 @@ __export(DSFloatingContext_exports, {
 module.exports = __toCommonJS(DSFloatingContext_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_lodash = require("lodash");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_hooks_headless_tooltip = require("@elliemae/ds-hooks-headless-tooltip");
 var import_ds_system = require("@elliemae/ds-system");
-var import_computePosition = require("./utils/computePosition.js");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_useComputedPositionStyles = require("./useComputedPositionStyles.js");
+var import_positionObserver = require("./utils/positionObserver.js");
 const useFloatingContext = (props = {}) => {
   const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.DSFloatingContextPropTypes, "FloatingContext");
@@ -70,48 +70,51 @@ const useFloatingContext = (props = {}) => {
   }, [onClose]);
   const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });
   const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
-  const [floatingStyles, setFloatingStyles] = (0, import_react.useState)({
-    position: "absolute",
-    zIndex: 3e3,
-    top: 0,
-    left: 0,
-    visibility: "hidden"
-  });
-  const [arrowStyles, setArrowStyles] = (0, import_react.useState)({
-    style: { left: 0 },
-    placement: "top"
-  });
   const [reference, _setReference] = import_react.default.useState(null);
   const [floating, setFloating] = import_react.default.useState(null);
+  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] = import_react.default.useState(0);
+  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = (0, import_useComputedPositionStyles.useComputedPositionStyles)({
+    reference,
+    floating,
+    placement,
+    placementOrderPreference,
+    customOffset,
+    withoutPortal
+  });
+  (0, import_react.useEffect)(() => {
+    requestAnimationFrame(() => {
+      mutableUpdateStyles?.current();
+    });
+  }, [reference, mutableUpdateStyles]);
+  const updatePosOnIntersection = import_react.default.useCallback(() => {
+    if (reference) {
+      requestAnimationFrame(() => {
+        debouncedUpdateStyles();
+      });
+    }
+  }, [reference, debouncedUpdateStyles]);
+  (0, import_positionObserver.usePositionObserver)(reference, updatePosOnIntersection);
+  (0, import_react.useEffect)(() => {
+    requestAnimationFrame(() => {
+      mutableUpdateStyles?.current();
+    });
+  }, [isOpenSourceOfTruth, mutableUpdateStyles]);
+  const { visibility } = floatingStyles;
+  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === "hidden";
   (0, import_react.useEffect)(() => {
-    const update = () => {
-      if (isOpenSourceOfTruth && reference && floating) {
-        const { coordsStyle, finalPlacement, coordsArrow } = (0, import_computePosition.computePosition)({
-          reference,
-          floating,
-          placement,
-          placementOrderPreference,
-          customOffset,
-          withoutPortal
-        });
-        const styles = {
-          position: "absolute",
-          zIndex: 3e3,
-          // top: 0,
-          // left: 0,
-          ...coordsStyle
-        };
-        setFloatingStyles(styles);
-        setArrowStyles({ style: coordsArrow, placement: finalPlacement });
-      }
-    };
-    update();
-    const debouncedCb = (0, import_lodash.debounce)(update, 300);
-    window.addEventListener("scroll", debouncedCb);
-    return () => {
-      window.removeEventListener("scroll", debouncedCb);
-    };
-  }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, isOpenSourceOfTruth]);
+    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {
+      mutableUpdateStyles?.current();
+      requestAnimationFrame(() => {
+        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);
+      });
+    }
+  }, [
+    needsToCalculateBecauseStillInvisibleWhenShouldBeOpen,
+    mutableUpdateStyles,
+    // this dependency is the point of this useEffect
+    //  it will keep triggering until the position is calculated if it needs to be calculated
+    workaroundToEnsureAPositionWasCalculatedIfOpen
+  ]);
   const setReference = (0, import_ds_system.mergeRefs)(_setReference, setReferenceElement);
   const refs = import_react.default.useMemo(
     () => ({
@@ -145,7 +148,8 @@ const useFloatingContext = (props = {}) => {
         withoutAnimation,
         portalDOMContainer,
         animationDuration
-      }
+      },
+      mutableUpdateStyles
     }),
     [
       refs,
@@ -158,7 +162,8 @@ const useFloatingContext = (props = {}) => {
       withoutPortal,
       withoutAnimation,
       portalDOMContainer,
-      animationDuration
+      animationDuration,
+      mutableUpdateStyles
     ]
   );
 };

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 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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",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useEffect, useMemo } from 'react';\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 { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.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  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const [reference, _setReference] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] =\n    React.useState<number>(0);\n\n  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = useComputedPositionStyles({\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n  });\n\n  // calculate position on mount\n  //   AND everytime the reference (which is actually immutable because it's stored in a React.useState)\n  // changes\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n    // the dependency array is equal to being empty because mutableUpdateStyles is a ref.\n    //   this is effectively an \"on mount\"\n  }, [reference, mutableUpdateStyles]);\n\n  // use intersection observer to detect when the position of the reference changes needing to recalculate the position\n  const updatePosOnIntersection = React.useCallback(() => {\n    if (reference) {\n      requestAnimationFrame(() => {\n        debouncedUpdateStyles();\n      });\n    }\n  }, [reference, debouncedUpdateStyles]);\n  usePositionObserver(reference, updatePosOnIntersection);\n\n  // when we detect that the flag about it being open/closed changes\n  //   we refresh the position of the tooltip calculation\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n  }, [isOpenSourceOfTruth, mutableUpdateStyles]);\n\n  // this is a workaround to ensure that the position is calculated at least once when the tooltip is open\n  const { visibility } = floatingStyles;\n  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === 'hidden';\n  useEffect(() => {\n    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {\n      mutableUpdateStyles?.current();\n      requestAnimationFrame(() => {\n        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);\n      });\n    }\n  }, [\n    needsToCalculateBecauseStillInvisibleWhenShouldBeOpen,\n    mutableUpdateStyles,\n    // this dependency is the point of this useEffect\n    //  it will keep triggering until the position is calculated if it needs to be calculated\n    workaroundToEnsureAPositionWasCalculatedIfOpen,\n  ]);\n\n  const setReference = mergeRefs(_setReference, setReferenceElement);\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      mutableUpdateStyles,\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      mutableUpdateStyles,\n    ],\n  );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n  DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

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

package/dist/cjs/useComputedPositionStyles.js

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useComputedPositionStyles_exports = {};
+__export(useComputedPositionStyles_exports, {
+  useComputedPositionStyles: () => useComputedPositionStyles
+});
+module.exports = __toCommonJS(useComputedPositionStyles_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_lodash_es = require("lodash-es");
+var import_computePosition = require("./utils/computePosition.js");
+const useComputedPositionStyles = (config) => {
+  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, preventComputing } = config;
+  const [arrowStyles, setArrowStyles] = (0, import_react.useState)({
+    style: { left: 0 },
+    placement: "top"
+  });
+  const [floatingStyles, setFloatingStyles] = (0, import_react.useState)({
+    position: "absolute",
+    zIndex: 3e3,
+    top: 0,
+    left: 0,
+    visibility: "hidden"
+  });
+  const canComputePosition = reference !== null && floating !== null;
+  const canAndShouldComputePosition = canComputePosition && preventComputing !== true;
+  const updateStyles = import_react.default.useCallback(() => {
+    if (canAndShouldComputePosition) {
+      const { coordsStyle, finalPlacement, coordsArrow } = (0, import_computePosition.computePosition)({
+        reference,
+        floating,
+        placement,
+        placementOrderPreference,
+        customOffset,
+        withoutPortal
+      });
+      setFloatingStyles({
+        position: "absolute",
+        zIndex: 3e3,
+        ...coordsStyle
+      });
+      setArrowStyles({ style: coordsArrow, placement: finalPlacement });
+    }
+  }, [
+    canAndShouldComputePosition,
+    reference,
+    floating,
+    placement,
+    placementOrderPreference,
+    customOffset,
+    withoutPortal
+  ]);
+  const mutableUpdateStyles = import_react.default.useRef(updateStyles);
+  mutableUpdateStyles.current = updateStyles;
+  const debouncedUpdateStyles = import_react.default.useMemo(() => (0, import_lodash_es.debounce)(() => mutableUpdateStyles.current(), 100), []);
+  const resetStyles = import_react.default.useCallback(() => {
+    setFloatingStyles({
+      position: "absolute",
+      zIndex: 3e3,
+      top: 0,
+      left: 0,
+      visibility: "hidden"
+    });
+    setArrowStyles({ style: { left: 0 }, placement: "top" });
+  }, []);
+  return import_react.default.useMemo(
+    () => ({ arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, mutableUpdateStyles, resetStyles }),
+    [arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, resetStyles]
+  );
+};
+//# sourceMappingURL=useComputedPositionStyles.js.map

package/dist/cjs/useComputedPositionStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/useComputedPositionStyles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useState } from 'react';\nimport { debounce } from 'lodash-es';\nimport { type CSSProperties } from 'styled-components';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport type { PopoverArrowT } from './parts/PopoverArrow.js';\n\ntype UseComputedPositionStylesT = {\n  preventComputing?: boolean;\n  reference: Element | null;\n  floating: HTMLElement | null;\n  placement: DSHookFloatingContextT.PopperPlacementsT;\n  placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n  customOffset: [number, number];\n  withoutPortal: boolean;\n};\n/**\n * this custom hook has a single purpose, to compute the position of the floating element relative to the reference element\n *\n * we ideally don't want to calculate positions if the open flag is false as the styles should not be visible so not relevant.\n * @param {UseComputedPositionStylesT} config - The configuration object.\n * @param {Boolean} config.preventComputing - If true, the position will not be computed, usually used when the open flag is false.\n * @param {Element} config.reference - The reference element as a DOM element.\n * @param {HTMLElement} config.floating - The floating element as a DOM element (required to calculate the best fitting position).\n * @param {DSHookFloatingContextT.PopperPlacementsT} config.placement - The placement of the floating element relative to the reference element to be applied if possible.\n * @param {DSHookFloatingContextT.PopperPlacementsT[]} config.placementOrderPreference - The order of preference for the placement of the floating element relative to the reference element, the first one that fits will be used.\n * @param {[number, number]} config.customOffset - The offset of the floating element relative to the reference element if any is desired.\n * @param {Boolean} config.withoutPortal - If true, the floating element will be positioned relative to the reference element, otherwise it will be positioned relative to the viewport.\n *\n * @returns results\n * @returns results.arrowStyles - the styles to be applied to the arrow element if any is desired\n * @returns results.floatingStyles - the styles to be applied to the floating element\n * @returns results.updateStyles - a function to be called to update the styles of the floating element on demand if needed\n * @returns results.debouncedUpdateStyles - a debounced version of the updateStyles function to be used when lot of invocations are expected (e.g. on scroll)\n * @returns results.mutableUpdateStyles - a ref to the updateStyles function to be used when the function needs to be called in a useEffect or similar\n */\nexport const useComputedPositionStyles = (config: UseComputedPositionStylesT) => {\n  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, preventComputing } =\n    config;\n\n  const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({\n    style: { left: 0 },\n    placement: 'top',\n  });\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    top: 0,\n    left: 0,\n    visibility: 'hidden',\n  });\n  const canComputePosition = reference !== null && floating !== null;\n  const canAndShouldComputePosition = canComputePosition && preventComputing !== true;\n\n  const updateStyles = React.useCallback(() => {\n    if (canAndShouldComputePosition) {\n      const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n        reference,\n        floating,\n        placement,\n        placementOrderPreference,\n        customOffset,\n        withoutPortal,\n      });\n\n      setFloatingStyles({\n        position: 'absolute',\n        zIndex: 3000,\n        ...coordsStyle,\n      });\n      setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n    }\n  }, [\n    canAndShouldComputePosition,\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n  ]);\n\n  // when deboucing we only care to invoke the most updated version of the function\n  //  continuously redefining the debouncedUpdateStyles function is a waste of resources\n  //  so we use a ref to store the latest version of the function\n  const mutableUpdateStyles = React.useRef(updateStyles);\n  mutableUpdateStyles.current = updateStyles;\n  // and we only define the debounced version once, using the ref to always have the latest version of the function.\n  //  notice the ()=> mutableUpdateStyles.current() syntax\n  //    we create a new closure (the anonymous function) that is referientially stable\n  //    and we call the mutableUpdateStyles.current function inside it (which is NOT referentially stable)\n  const debouncedUpdateStyles = React.useMemo(() => debounce(() => mutableUpdateStyles.current(), 100), []);\n\n  const resetStyles = React.useCallback(() => {\n    setFloatingStyles({\n      position: 'absolute',\n      zIndex: 3000,\n      top: 0,\n      left: 0,\n      visibility: 'hidden',\n    });\n    setArrowStyles({ style: { left: 0 }, placement: 'top' });\n  }, []);\n\n  return React.useMemo(\n    () => ({ arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, mutableUpdateStyles, resetStyles }),\n    [arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, resetStyles],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAChC,uBAAyB;AAEzB,6BAAgC;AAiCzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM,EAAE,WAAW,UAAU,WAAW,0BAA0B,cAAc,eAAe,iBAAiB,IAC9G;AAEF,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB;AAAA,IAC5D,OAAO,EAAE,MAAM,EAAE;AAAA,IACjB,WAAW;AAAA,EACb,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY;AAAA,EACd,CAAC;AACD,QAAM,qBAAqB,cAAc,QAAQ,aAAa;AAC9D,QAAM,8BAA8B,sBAAsB,qBAAqB;AAE/E,QAAM,eAAe,aAAAA,QAAM,YAAY,MAAM;AAC3C,QAAI,6BAA6B;AAC/B,YAAM,EAAE,aAAa,gBAAgB,YAAY,QAAI,wCAAgB;AAAA,QACnE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,wBAAkB;AAAA,QAChB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,GAAG;AAAA,MACL,CAAC;AACD,qBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAAA,IAClE;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAKD,QAAM,sBAAsB,aAAAA,QAAM,OAAO,YAAY;AACrD,sBAAoB,UAAU;AAK9B,QAAM,wBAAwB,aAAAA,QAAM,QAAQ,UAAM,2BAAS,MAAM,oBAAoB,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC;AAExG,QAAM,cAAc,aAAAA,QAAM,YAAY,MAAM;AAC1C,sBAAkB;AAAA,MAChB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,IACd,CAAC;AACD,mBAAe,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO,EAAE,aAAa,gBAAgB,cAAc,uBAAuB,qBAAqB,YAAY;AAAA,IAC5G,CAAC,aAAa,gBAAgB,cAAc,uBAAuB,WAAW;AAAA,EAChF;AACF;",
+  "names": ["React"]
+}

package/dist/cjs/utils/positionObserver.js

@@ -0,0 +1,158 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var positionObserver_exports = {};
+__export(positionObserver_exports, {
+  PositionObserver: () => PositionObserver,
+  usePositionObserver: () => usePositionObserver
+});
+module.exports = __toCommonJS(positionObserver_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+class PositionObserver {
+  intersectionObserver;
+  positionObserverCallback;
+  thresholdList;
+  constructor(positionObserverCallback, thresholdFraction = 1e3) {
+    this.positionObserverCallback = positionObserverCallback;
+    this.thresholdList = new Array(thresholdFraction + 1).fill(0).map((_, ind) => ind / thresholdFraction);
+  }
+  observe(targetElement) {
+    this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {
+      threshold: this.thresholdList,
+      rootMargin: "0px 0px 0px 0px",
+      root: document
+    });
+    this.intersectionObserver.observe(targetElement);
+  }
+  viewportCallback(e) {
+    const entry = e[0];
+    const { target } = entry;
+    const targetBounds = entry.boundingClientRect;
+    if (this.positionObserverCallback) {
+      this.positionObserverCallback({
+        x: targetBounds.left,
+        y: targetBounds.top,
+        target,
+        outOfViewport: !entry.isIntersecting,
+        rootBounds: entry.rootBounds
+      });
+    }
+    if (entry.intersectionRatio > 0) {
+      this.intersectionObserver?.unobserve(target);
+      this.intersectionObserver?.disconnect();
+      const options = {
+        threshold: this.thresholdList,
+        rootMargin: this.getMargins(
+          this.constructBoxWindow(targetBounds, entry.rootBounds),
+          entry.rootBounds
+        ),
+        root: document
+      };
+      this.intersectionObserver = new IntersectionObserver(this.intersectionObsCallback.bind(this), options);
+      this.intersectionObserver?.observe(target);
+    }
+  }
+  intersectionObsCallback(e) {
+    const entry = e[0];
+    const { target } = entry;
+    const targetBounds = entry.boundingClientRect;
+    if (this.positionObserverCallback) {
+      this.positionObserverCallback({
+        x: targetBounds.left,
+        y: targetBounds.top,
+        target,
+        outOfViewport: false,
+        rootBounds: entry.rootBounds
+      });
+    }
+    if (entry.intersectionRatio === 0) {
+      this.intersectionObserver?.unobserve(target);
+      this.intersectionObserver?.disconnect();
+      this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {
+        threshold: this.thresholdList,
+        rootMargin: "0px 0px 0px 0px",
+        root: document
+      });
+      this.intersectionObserver?.observe(target);
+    }
+  }
+  disconnect() {
+    this.intersectionObserver?.disconnect();
+  }
+  constructBoxWindow(targetBounds, rootBounds) {
+    const constrainedLeft = Math.min(
+      Math.max(rootBounds.left, targetBounds.left),
+      rootBounds.right - targetBounds.width
+    );
+    const constrainedTop = Math.min(
+      Math.max(rootBounds.top, targetBounds.top),
+      rootBounds.bottom - targetBounds.height
+    );
+    const constrainedRight = constrainedLeft + targetBounds.width;
+    const constrainedBottom = constrainedTop + targetBounds.height;
+    return {
+      left: constrainedLeft,
+      top: constrainedTop,
+      right: constrainedRight,
+      bottom: constrainedBottom
+    };
+  }
+  getMargins(windowDimensions, rootBounds) {
+    let viewportBounds;
+    if (!rootBounds) {
+      viewportBounds = {
+        top: visualViewport.offsetTop,
+        left: visualViewport.offsetLeft,
+        right: visualViewport.width + visualViewport.offsetLeft,
+        bottom: visualViewport.height + visualViewport.offsetTop
+      };
+    } else {
+      viewportBounds = rootBounds;
+    }
+    const constrainedTopMarginOfWindow = Math.min(-(windowDimensions.top - 1 - viewportBounds.top), 0);
+    const constrainedRightMarginOfWindow = Math.min(-(viewportBounds.right - (windowDimensions.right + 1)), 0);
+    const constrainedBottomMarginOfWindow = Math.min(-(viewportBounds.bottom - (windowDimensions.bottom + 1)), 0);
+    const constrainedLeftMarginOfWindow = Math.min(-(windowDimensions.left - 1 - viewportBounds.left), 0);
+    return `${constrainedTopMarginOfWindow}px ${constrainedRightMarginOfWindow}px ${constrainedBottomMarginOfWindow}px ${constrainedLeftMarginOfWindow}px`;
+  }
+}
+const usePositionObserver = (elementNode, onPositionChange = () => {
+}) => {
+  import_react.default.useEffect(() => {
+    const hasIOSupport = !!window.IntersectionObserver;
+    if (!hasIOSupport || !elementNode) return () => {
+    };
+    const positionObs = new PositionObserver(onPositionChange);
+    positionObs.observe(elementNode);
+    return () => {
+      positionObs.disconnect();
+    };
+  }, [elementNode, onPositionChange]);
+};
+//# sourceMappingURL=positionObserver.js.map

package/dist/cjs/utils/positionObserver.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/positionObserver.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\n\n/**\n * Copyright (c) 2025 AJK-Essential\n * This file is licensed under the MIT License.\n * See the LICENSE file in the project root for license information.\n */\n\nexport type PositionData = {\n  x: number;\n  y: number;\n  target: HTMLElement | Element;\n  outOfViewport: boolean;\n  rootBounds: DOMRect | null;\n};\nexport type PositionObserverCallback = (data: PositionData) => void;\n\nexport class PositionObserver {\n  private intersectionObserver!: IntersectionObserver;\n\n  private positionObserverCallback;\n\n  private thresholdList;\n\n  constructor(positionObserverCallback: PositionObserverCallback, thresholdFraction = 1000) {\n    this.positionObserverCallback = positionObserverCallback;\n    this.thresholdList = new Array(thresholdFraction + 1).fill(0).map((_, ind) => ind / thresholdFraction);\n  }\n\n  public observe(targetElement: HTMLElement | Element) {\n    this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {\n      threshold: this.thresholdList,\n      rootMargin: '0px 0px 0px 0px',\n      root: document,\n    });\n    this.intersectionObserver.observe(targetElement);\n  }\n\n  private viewportCallback(e: IntersectionObserverEntry[]) {\n    const entry = e[0];\n    const { target } = entry;\n    const targetBounds = entry.boundingClientRect;\n    if (this.positionObserverCallback) {\n      this.positionObserverCallback({\n        x: targetBounds.left,\n        y: targetBounds.top,\n        target,\n        outOfViewport: !entry.isIntersecting,\n        rootBounds: entry.rootBounds,\n      });\n    }\n    // If ever there is an intersection in this callback which observes\n    // viewport hits, that means, the target is peaking itself inside\n    // the viewport (Some part of the target is visible in the viewport).\n    // We therefore immediately pass it to the other callback with a finer\n    // window to capture changes.\n\n    // The finer window is constructed such that it is limited within the\n    // viewport boundaries and it has same size as that of target so that\n    // if the target enters or exits further, it will eventually increase\n    // or decrease the area of intersection (the common area between the\n    // target and the finer window) within the window, thus signalling\n    // the movement.\n    if (entry.intersectionRatio > 0) {\n      this.intersectionObserver?.unobserve(target);\n      this.intersectionObserver?.disconnect();\n      const options: IntersectionObserverInit = {\n        threshold: this.thresholdList,\n        rootMargin: this.getMargins(\n          this.constructBoxWindow(targetBounds, entry.rootBounds as DOMRect),\n          entry.rootBounds,\n        ),\n        root: document,\n      };\n      this.intersectionObserver = new IntersectionObserver(this.intersectionObsCallback.bind(this), options);\n      this.intersectionObserver?.observe(target);\n    }\n  }\n\n  private intersectionObsCallback(e: IntersectionObserverEntry[]) {\n    const entry = e[0];\n    const { target } = entry;\n    const targetBounds = entry.boundingClientRect;\n    if (this.positionObserverCallback) {\n      this.positionObserverCallback({\n        x: targetBounds.left,\n        y: targetBounds.top,\n        target,\n        outOfViewport: false,\n        rootBounds: entry.rootBounds,\n      });\n    }\n    // if intersectionRatio is 0, then it means\n    // the target is fully out of the finer window.\n    // In that case, we pass this to the viewport\n    // detector callback (whether it is inside the\n    // viewport or not).\n    // And it stays there in that callback until\n    // the viewport detector callback says, yah, we found it..\n    // when it comes back to this callback with an updated finer window\n    if (entry.intersectionRatio === 0) {\n      this.intersectionObserver?.unobserve(target);\n      this.intersectionObserver?.disconnect();\n      this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {\n        threshold: this.thresholdList,\n        rootMargin: '0px 0px 0px 0px',\n        root: document,\n      });\n      this.intersectionObserver?.observe(target);\n    }\n  }\n\n  public disconnect() {\n    this.intersectionObserver?.disconnect();\n  }\n\n  private constructBoxWindow(targetBounds: DOMRect, rootBounds: DOMRect) {\n    const constrainedLeft = Math.min(\n      Math.max(rootBounds.left, targetBounds.left),\n      rootBounds.right - targetBounds.width,\n    );\n    const constrainedTop = Math.min(\n      Math.max(rootBounds.top, targetBounds.top),\n      rootBounds.bottom - targetBounds.height,\n    );\n    const constrainedRight = constrainedLeft + targetBounds.width;\n    const constrainedBottom = constrainedTop + targetBounds.height;\n    return {\n      left: constrainedLeft,\n      top: constrainedTop,\n      right: constrainedRight,\n      bottom: constrainedBottom,\n    };\n  }\n\n  private getMargins(\n    windowDimensions: {\n      left: number;\n      top: number;\n      right: number;\n      bottom: number;\n    },\n    rootBounds: DOMRect | null,\n  ) {\n    let viewportBounds;\n    if (!rootBounds) {\n      viewportBounds = {\n        top: visualViewport!.offsetTop,\n        left: visualViewport!.offsetLeft,\n        right: visualViewport!.width + visualViewport!.offsetLeft,\n        bottom: visualViewport!.height + visualViewport!.offsetTop,\n      };\n    } else {\n      viewportBounds = rootBounds;\n    }\n    const constrainedTopMarginOfWindow = Math.min(-(windowDimensions.top - 1 - viewportBounds.top), 0);\n    const constrainedRightMarginOfWindow = Math.min(-(viewportBounds.right - (windowDimensions.right + 1)), 0);\n    const constrainedBottomMarginOfWindow = Math.min(-(viewportBounds.bottom - (windowDimensions.bottom + 1)), 0);\n    const constrainedLeftMarginOfWindow = Math.min(-(windowDimensions.left - 1 - viewportBounds.left), 0);\n    return `${constrainedTopMarginOfWindow}px ${constrainedRightMarginOfWindow}px ${constrainedBottomMarginOfWindow}px ${constrainedLeftMarginOfWindow}px`;\n  }\n}\n\nexport const usePositionObserver = (\n  elementNode: Element | null,\n  onPositionChange: PositionObserverCallback = () => {},\n) => {\n  React.useEffect(() => {\n    const hasIOSupport = !!window.IntersectionObserver;\n    if (!hasIOSupport || !elementNode) return () => {};\n    const positionObs = new PositionObserver(onPositionChange);\n    positionObs.observe(elementNode);\n\n    return () => {\n      positionObs.disconnect();\n    };\n  }, [elementNode, onPositionChange]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/DSFloatingContext.js

@@ -1,6 +1,5 @@
 import * as React from "react";
-import React2, { useState, useEffect, useMemo } from "react";
-import { debounce } from "lodash";
+import React2, { useEffect, useMemo } from "react";
 import {
   useMemoMergePropsWithDefault,
   useValidateTypescriptPropTypes,
@@ -8,8 +7,9 @@ import {
 } from "@elliemae/ds-props-helpers";
 import { useHeadlessTooltip } from "@elliemae/ds-hooks-headless-tooltip";
 import { mergeRefs } from "@elliemae/ds-system";
-import { computePosition } from "./utils/computePosition.js";
 import { defaultProps, DSFloatingContextPropTypes } from "./react-desc-prop-types.js";
+import { useComputedPositionStyles } from "./useComputedPositionStyles.js";
+import { usePositionObserver } from "./utils/positionObserver.js";
 const useFloatingContext = (props = {}) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, "FloatingContext");
@@ -40,48 +40,51 @@ const useFloatingContext = (props = {}) => {
   }, [onClose]);
   const tooltipHelpers = useHeadlessTooltip({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });
   const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
-  const [floatingStyles, setFloatingStyles] = useState({
-    position: "absolute",
-    zIndex: 3e3,
-    top: 0,
-    left: 0,
-    visibility: "hidden"
-  });
-  const [arrowStyles, setArrowStyles] = useState({
-    style: { left: 0 },
-    placement: "top"
-  });
   const [reference, _setReference] = React2.useState(null);
   const [floating, setFloating] = React2.useState(null);
+  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] = React2.useState(0);
+  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = useComputedPositionStyles({
+    reference,
+    floating,
+    placement,
+    placementOrderPreference,
+    customOffset,
+    withoutPortal
+  });
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      mutableUpdateStyles?.current();
+    });
+  }, [reference, mutableUpdateStyles]);
+  const updatePosOnIntersection = React2.useCallback(() => {
+    if (reference) {
+      requestAnimationFrame(() => {
+        debouncedUpdateStyles();
+      });
+    }
+  }, [reference, debouncedUpdateStyles]);
+  usePositionObserver(reference, updatePosOnIntersection);
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      mutableUpdateStyles?.current();
+    });
+  }, [isOpenSourceOfTruth, mutableUpdateStyles]);
+  const { visibility } = floatingStyles;
+  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === "hidden";
   useEffect(() => {
-    const update = () => {
-      if (isOpenSourceOfTruth && reference && floating) {
-        const { coordsStyle, finalPlacement, coordsArrow } = computePosition({
-          reference,
-          floating,
-          placement,
-          placementOrderPreference,
-          customOffset,
-          withoutPortal
-        });
-        const styles = {
-          position: "absolute",
-          zIndex: 3e3,
-          // top: 0,
-          // left: 0,
-          ...coordsStyle
-        };
-        setFloatingStyles(styles);
-        setArrowStyles({ style: coordsArrow, placement: finalPlacement });
-      }
-    };
-    update();
-    const debouncedCb = debounce(update, 300);
-    window.addEventListener("scroll", debouncedCb);
-    return () => {
-      window.removeEventListener("scroll", debouncedCb);
-    };
-  }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, isOpenSourceOfTruth]);
+    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {
+      mutableUpdateStyles?.current();
+      requestAnimationFrame(() => {
+        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);
+      });
+    }
+  }, [
+    needsToCalculateBecauseStillInvisibleWhenShouldBeOpen,
+    mutableUpdateStyles,
+    // this dependency is the point of this useEffect
+    //  it will keep triggering until the position is calculated if it needs to be calculated
+    workaroundToEnsureAPositionWasCalculatedIfOpen
+  ]);
   const setReference = mergeRefs(_setReference, setReferenceElement);
   const refs = React2.useMemo(
     () => ({
@@ -115,7 +118,8 @@ const useFloatingContext = (props = {}) => {
         withoutAnimation,
         portalDOMContainer,
         animationDuration
-      }
+      },
+      mutableUpdateStyles
     }),
     [
       refs,
@@ -128,7 +132,8 @@ const useFloatingContext = (props = {}) => {
       withoutPortal,
       withoutAnimation,
       portalDOMContainer,
-      animationDuration
+      animationDuration,
+      mutableUpdateStyles
     ]
   );
 };

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 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": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport React, { useEffect, useMemo } from 'react';\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 { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.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  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const [reference, _setReference] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] =\n    React.useState<number>(0);\n\n  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = useComputedPositionStyles({\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n  });\n\n  // calculate position on mount\n  //   AND everytime the reference (which is actually immutable because it's stored in a React.useState)\n  // changes\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n    // the dependency array is equal to being empty because mutableUpdateStyles is a ref.\n    //   this is effectively an \"on mount\"\n  }, [reference, mutableUpdateStyles]);\n\n  // use intersection observer to detect when the position of the reference changes needing to recalculate the position\n  const updatePosOnIntersection = React.useCallback(() => {\n    if (reference) {\n      requestAnimationFrame(() => {\n        debouncedUpdateStyles();\n      });\n    }\n  }, [reference, debouncedUpdateStyles]);\n  usePositionObserver(reference, updatePosOnIntersection);\n\n  // when we detect that the flag about it being open/closed changes\n  //   we refresh the position of the tooltip calculation\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n  }, [isOpenSourceOfTruth, mutableUpdateStyles]);\n\n  // this is a workaround to ensure that the position is calculated at least once when the tooltip is open\n  const { visibility } = floatingStyles;\n  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === 'hidden';\n  useEffect(() => {\n    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {\n      mutableUpdateStyles?.current();\n      requestAnimationFrame(() => {\n        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);\n      });\n    }\n  }, [\n    needsToCalculateBecauseStillInvisibleWhenShouldBeOpen,\n    mutableUpdateStyles,\n    // this dependency is the point of this useEffect\n    //  it will keep triggering until the position is calculated if it needs to be calculated\n    workaroundToEnsureAPositionWasCalculatedIfOpen,\n  ]);\n\n  const setReference = mergeRefs(_setReference, setReferenceElement);\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      mutableUpdateStyles,\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      mutableUpdateStyles,\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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",
   "names": ["React"]
 }

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

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

package/dist/esm/useComputedPositionStyles.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import React2, { useState } from "react";
+import { debounce } from "lodash-es";
+import { computePosition } from "./utils/computePosition.js";
+const useComputedPositionStyles = (config) => {
+  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, preventComputing } = config;
+  const [arrowStyles, setArrowStyles] = useState({
+    style: { left: 0 },
+    placement: "top"
+  });
+  const [floatingStyles, setFloatingStyles] = useState({
+    position: "absolute",
+    zIndex: 3e3,
+    top: 0,
+    left: 0,
+    visibility: "hidden"
+  });
+  const canComputePosition = reference !== null && floating !== null;
+  const canAndShouldComputePosition = canComputePosition && preventComputing !== true;
+  const updateStyles = React2.useCallback(() => {
+    if (canAndShouldComputePosition) {
+      const { coordsStyle, finalPlacement, coordsArrow } = computePosition({
+        reference,
+        floating,
+        placement,
+        placementOrderPreference,
+        customOffset,
+        withoutPortal
+      });
+      setFloatingStyles({
+        position: "absolute",
+        zIndex: 3e3,
+        ...coordsStyle
+      });
+      setArrowStyles({ style: coordsArrow, placement: finalPlacement });
+    }
+  }, [
+    canAndShouldComputePosition,
+    reference,
+    floating,
+    placement,
+    placementOrderPreference,
+    customOffset,
+    withoutPortal
+  ]);
+  const mutableUpdateStyles = React2.useRef(updateStyles);
+  mutableUpdateStyles.current = updateStyles;
+  const debouncedUpdateStyles = React2.useMemo(() => debounce(() => mutableUpdateStyles.current(), 100), []);
+  const resetStyles = React2.useCallback(() => {
+    setFloatingStyles({
+      position: "absolute",
+      zIndex: 3e3,
+      top: 0,
+      left: 0,
+      visibility: "hidden"
+    });
+    setArrowStyles({ style: { left: 0 }, placement: "top" });
+  }, []);
+  return React2.useMemo(
+    () => ({ arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, mutableUpdateStyles, resetStyles }),
+    [arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, resetStyles]
+  );
+};
+export {
+  useComputedPositionStyles
+};
+//# sourceMappingURL=useComputedPositionStyles.js.map

package/dist/esm/useComputedPositionStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useComputedPositionStyles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState } from 'react';\nimport { debounce } from 'lodash-es';\nimport { type CSSProperties } from 'styled-components';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport type { PopoverArrowT } from './parts/PopoverArrow.js';\n\ntype UseComputedPositionStylesT = {\n  preventComputing?: boolean;\n  reference: Element | null;\n  floating: HTMLElement | null;\n  placement: DSHookFloatingContextT.PopperPlacementsT;\n  placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n  customOffset: [number, number];\n  withoutPortal: boolean;\n};\n/**\n * this custom hook has a single purpose, to compute the position of the floating element relative to the reference element\n *\n * we ideally don't want to calculate positions if the open flag is false as the styles should not be visible so not relevant.\n * @param {UseComputedPositionStylesT} config - The configuration object.\n * @param {Boolean} config.preventComputing - If true, the position will not be computed, usually used when the open flag is false.\n * @param {Element} config.reference - The reference element as a DOM element.\n * @param {HTMLElement} config.floating - The floating element as a DOM element (required to calculate the best fitting position).\n * @param {DSHookFloatingContextT.PopperPlacementsT} config.placement - The placement of the floating element relative to the reference element to be applied if possible.\n * @param {DSHookFloatingContextT.PopperPlacementsT[]} config.placementOrderPreference - The order of preference for the placement of the floating element relative to the reference element, the first one that fits will be used.\n * @param {[number, number]} config.customOffset - The offset of the floating element relative to the reference element if any is desired.\n * @param {Boolean} config.withoutPortal - If true, the floating element will be positioned relative to the reference element, otherwise it will be positioned relative to the viewport.\n *\n * @returns results\n * @returns results.arrowStyles - the styles to be applied to the arrow element if any is desired\n * @returns results.floatingStyles - the styles to be applied to the floating element\n * @returns results.updateStyles - a function to be called to update the styles of the floating element on demand if needed\n * @returns results.debouncedUpdateStyles - a debounced version of the updateStyles function to be used when lot of invocations are expected (e.g. on scroll)\n * @returns results.mutableUpdateStyles - a ref to the updateStyles function to be used when the function needs to be called in a useEffect or similar\n */\nexport const useComputedPositionStyles = (config: UseComputedPositionStylesT) => {\n  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, preventComputing } =\n    config;\n\n  const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({\n    style: { left: 0 },\n    placement: 'top',\n  });\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    top: 0,\n    left: 0,\n    visibility: 'hidden',\n  });\n  const canComputePosition = reference !== null && floating !== null;\n  const canAndShouldComputePosition = canComputePosition && preventComputing !== true;\n\n  const updateStyles = React.useCallback(() => {\n    if (canAndShouldComputePosition) {\n      const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n        reference,\n        floating,\n        placement,\n        placementOrderPreference,\n        customOffset,\n        withoutPortal,\n      });\n\n      setFloatingStyles({\n        position: 'absolute',\n        zIndex: 3000,\n        ...coordsStyle,\n      });\n      setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n    }\n  }, [\n    canAndShouldComputePosition,\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n  ]);\n\n  // when deboucing we only care to invoke the most updated version of the function\n  //  continuously redefining the debouncedUpdateStyles function is a waste of resources\n  //  so we use a ref to store the latest version of the function\n  const mutableUpdateStyles = React.useRef(updateStyles);\n  mutableUpdateStyles.current = updateStyles;\n  // and we only define the debounced version once, using the ref to always have the latest version of the function.\n  //  notice the ()=> mutableUpdateStyles.current() syntax\n  //    we create a new closure (the anonymous function) that is referientially stable\n  //    and we call the mutableUpdateStyles.current function inside it (which is NOT referentially stable)\n  const debouncedUpdateStyles = React.useMemo(() => debounce(() => mutableUpdateStyles.current(), 100), []);\n\n  const resetStyles = React.useCallback(() => {\n    setFloatingStyles({\n      position: 'absolute',\n      zIndex: 3000,\n      top: 0,\n      left: 0,\n      visibility: 'hidden',\n    });\n    setArrowStyles({ style: { left: 0 }, placement: 'top' });\n  }, []);\n\n  return React.useMemo(\n    () => ({ arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, mutableUpdateStyles, resetStyles }),\n    [arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, resetStyles],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,gBAAgB;AAChC,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAiCzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM,EAAE,WAAW,UAAU,WAAW,0BAA0B,cAAc,eAAe,iBAAiB,IAC9G;AAEF,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB;AAAA,IAC5D,OAAO,EAAE,MAAM,EAAE;AAAA,IACjB,WAAW;AAAA,EACb,CAAC;AACD,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,qBAAqB,cAAc,QAAQ,aAAa;AAC9D,QAAM,8BAA8B,sBAAsB,qBAAqB;AAE/E,QAAM,eAAeA,OAAM,YAAY,MAAM;AAC3C,QAAI,6BAA6B;AAC/B,YAAM,EAAE,aAAa,gBAAgB,YAAY,IAAI,gBAAgB;AAAA,QACnE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,wBAAkB;AAAA,QAChB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,GAAG;AAAA,MACL,CAAC;AACD,qBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAAA,IAClE;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAKD,QAAM,sBAAsBA,OAAM,OAAO,YAAY;AACrD,sBAAoB,UAAU;AAK9B,QAAM,wBAAwBA,OAAM,QAAQ,MAAM,SAAS,MAAM,oBAAoB,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC;AAExG,QAAM,cAAcA,OAAM,YAAY,MAAM;AAC1C,sBAAkB;AAAA,MAChB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,MACN,YAAY;AAAA,IACd,CAAC;AACD,mBAAe,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAAA,EACzD,GAAG,CAAC,CAAC;AAEL,SAAOA,OAAM;AAAA,IACX,OAAO,EAAE,aAAa,gBAAgB,cAAc,uBAAuB,qBAAqB,YAAY;AAAA,IAC5G,CAAC,aAAa,gBAAgB,cAAc,uBAAuB,WAAW;AAAA,EAChF;AACF;",
+  "names": ["React"]
+}

package/dist/esm/utils/positionObserver.js

@@ -0,0 +1,128 @@
+import * as React from "react";
+import React2 from "react";
+class PositionObserver {
+  intersectionObserver;
+  positionObserverCallback;
+  thresholdList;
+  constructor(positionObserverCallback, thresholdFraction = 1e3) {
+    this.positionObserverCallback = positionObserverCallback;
+    this.thresholdList = new Array(thresholdFraction + 1).fill(0).map((_, ind) => ind / thresholdFraction);
+  }
+  observe(targetElement) {
+    this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {
+      threshold: this.thresholdList,
+      rootMargin: "0px 0px 0px 0px",
+      root: document
+    });
+    this.intersectionObserver.observe(targetElement);
+  }
+  viewportCallback(e) {
+    const entry = e[0];
+    const { target } = entry;
+    const targetBounds = entry.boundingClientRect;
+    if (this.positionObserverCallback) {
+      this.positionObserverCallback({
+        x: targetBounds.left,
+        y: targetBounds.top,
+        target,
+        outOfViewport: !entry.isIntersecting,
+        rootBounds: entry.rootBounds
+      });
+    }
+    if (entry.intersectionRatio > 0) {
+      this.intersectionObserver?.unobserve(target);
+      this.intersectionObserver?.disconnect();
+      const options = {
+        threshold: this.thresholdList,
+        rootMargin: this.getMargins(
+          this.constructBoxWindow(targetBounds, entry.rootBounds),
+          entry.rootBounds
+        ),
+        root: document
+      };
+      this.intersectionObserver = new IntersectionObserver(this.intersectionObsCallback.bind(this), options);
+      this.intersectionObserver?.observe(target);
+    }
+  }
+  intersectionObsCallback(e) {
+    const entry = e[0];
+    const { target } = entry;
+    const targetBounds = entry.boundingClientRect;
+    if (this.positionObserverCallback) {
+      this.positionObserverCallback({
+        x: targetBounds.left,
+        y: targetBounds.top,
+        target,
+        outOfViewport: false,
+        rootBounds: entry.rootBounds
+      });
+    }
+    if (entry.intersectionRatio === 0) {
+      this.intersectionObserver?.unobserve(target);
+      this.intersectionObserver?.disconnect();
+      this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {
+        threshold: this.thresholdList,
+        rootMargin: "0px 0px 0px 0px",
+        root: document
+      });
+      this.intersectionObserver?.observe(target);
+    }
+  }
+  disconnect() {
+    this.intersectionObserver?.disconnect();
+  }
+  constructBoxWindow(targetBounds, rootBounds) {
+    const constrainedLeft = Math.min(
+      Math.max(rootBounds.left, targetBounds.left),
+      rootBounds.right - targetBounds.width
+    );
+    const constrainedTop = Math.min(
+      Math.max(rootBounds.top, targetBounds.top),
+      rootBounds.bottom - targetBounds.height
+    );
+    const constrainedRight = constrainedLeft + targetBounds.width;
+    const constrainedBottom = constrainedTop + targetBounds.height;
+    return {
+      left: constrainedLeft,
+      top: constrainedTop,
+      right: constrainedRight,
+      bottom: constrainedBottom
+    };
+  }
+  getMargins(windowDimensions, rootBounds) {
+    let viewportBounds;
+    if (!rootBounds) {
+      viewportBounds = {
+        top: visualViewport.offsetTop,
+        left: visualViewport.offsetLeft,
+        right: visualViewport.width + visualViewport.offsetLeft,
+        bottom: visualViewport.height + visualViewport.offsetTop
+      };
+    } else {
+      viewportBounds = rootBounds;
+    }
+    const constrainedTopMarginOfWindow = Math.min(-(windowDimensions.top - 1 - viewportBounds.top), 0);
+    const constrainedRightMarginOfWindow = Math.min(-(viewportBounds.right - (windowDimensions.right + 1)), 0);
+    const constrainedBottomMarginOfWindow = Math.min(-(viewportBounds.bottom - (windowDimensions.bottom + 1)), 0);
+    const constrainedLeftMarginOfWindow = Math.min(-(windowDimensions.left - 1 - viewportBounds.left), 0);
+    return `${constrainedTopMarginOfWindow}px ${constrainedRightMarginOfWindow}px ${constrainedBottomMarginOfWindow}px ${constrainedLeftMarginOfWindow}px`;
+  }
+}
+const usePositionObserver = (elementNode, onPositionChange = () => {
+}) => {
+  React2.useEffect(() => {
+    const hasIOSupport = !!window.IntersectionObserver;
+    if (!hasIOSupport || !elementNode) return () => {
+    };
+    const positionObs = new PositionObserver(onPositionChange);
+    positionObs.observe(elementNode);
+    return () => {
+      positionObs.disconnect();
+    };
+  }, [elementNode, onPositionChange]);
+};
+export {
+  PositionObserver,
+  usePositionObserver
+};
+//# sourceMappingURL=positionObserver.js.map

package/dist/esm/utils/positionObserver.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/positionObserver.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\n/**\n * Copyright (c) 2025 AJK-Essential\n * This file is licensed under the MIT License.\n * See the LICENSE file in the project root for license information.\n */\n\nexport type PositionData = {\n  x: number;\n  y: number;\n  target: HTMLElement | Element;\n  outOfViewport: boolean;\n  rootBounds: DOMRect | null;\n};\nexport type PositionObserverCallback = (data: PositionData) => void;\n\nexport class PositionObserver {\n  private intersectionObserver!: IntersectionObserver;\n\n  private positionObserverCallback;\n\n  private thresholdList;\n\n  constructor(positionObserverCallback: PositionObserverCallback, thresholdFraction = 1000) {\n    this.positionObserverCallback = positionObserverCallback;\n    this.thresholdList = new Array(thresholdFraction + 1).fill(0).map((_, ind) => ind / thresholdFraction);\n  }\n\n  public observe(targetElement: HTMLElement | Element) {\n    this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {\n      threshold: this.thresholdList,\n      rootMargin: '0px 0px 0px 0px',\n      root: document,\n    });\n    this.intersectionObserver.observe(targetElement);\n  }\n\n  private viewportCallback(e: IntersectionObserverEntry[]) {\n    const entry = e[0];\n    const { target } = entry;\n    const targetBounds = entry.boundingClientRect;\n    if (this.positionObserverCallback) {\n      this.positionObserverCallback({\n        x: targetBounds.left,\n        y: targetBounds.top,\n        target,\n        outOfViewport: !entry.isIntersecting,\n        rootBounds: entry.rootBounds,\n      });\n    }\n    // If ever there is an intersection in this callback which observes\n    // viewport hits, that means, the target is peaking itself inside\n    // the viewport (Some part of the target is visible in the viewport).\n    // We therefore immediately pass it to the other callback with a finer\n    // window to capture changes.\n\n    // The finer window is constructed such that it is limited within the\n    // viewport boundaries and it has same size as that of target so that\n    // if the target enters or exits further, it will eventually increase\n    // or decrease the area of intersection (the common area between the\n    // target and the finer window) within the window, thus signalling\n    // the movement.\n    if (entry.intersectionRatio > 0) {\n      this.intersectionObserver?.unobserve(target);\n      this.intersectionObserver?.disconnect();\n      const options: IntersectionObserverInit = {\n        threshold: this.thresholdList,\n        rootMargin: this.getMargins(\n          this.constructBoxWindow(targetBounds, entry.rootBounds as DOMRect),\n          entry.rootBounds,\n        ),\n        root: document,\n      };\n      this.intersectionObserver = new IntersectionObserver(this.intersectionObsCallback.bind(this), options);\n      this.intersectionObserver?.observe(target);\n    }\n  }\n\n  private intersectionObsCallback(e: IntersectionObserverEntry[]) {\n    const entry = e[0];\n    const { target } = entry;\n    const targetBounds = entry.boundingClientRect;\n    if (this.positionObserverCallback) {\n      this.positionObserverCallback({\n        x: targetBounds.left,\n        y: targetBounds.top,\n        target,\n        outOfViewport: false,\n        rootBounds: entry.rootBounds,\n      });\n    }\n    // if intersectionRatio is 0, then it means\n    // the target is fully out of the finer window.\n    // In that case, we pass this to the viewport\n    // detector callback (whether it is inside the\n    // viewport or not).\n    // And it stays there in that callback until\n    // the viewport detector callback says, yah, we found it..\n    // when it comes back to this callback with an updated finer window\n    if (entry.intersectionRatio === 0) {\n      this.intersectionObserver?.unobserve(target);\n      this.intersectionObserver?.disconnect();\n      this.intersectionObserver = new IntersectionObserver(this.viewportCallback.bind(this), {\n        threshold: this.thresholdList,\n        rootMargin: '0px 0px 0px 0px',\n        root: document,\n      });\n      this.intersectionObserver?.observe(target);\n    }\n  }\n\n  public disconnect() {\n    this.intersectionObserver?.disconnect();\n  }\n\n  private constructBoxWindow(targetBounds: DOMRect, rootBounds: DOMRect) {\n    const constrainedLeft = Math.min(\n      Math.max(rootBounds.left, targetBounds.left),\n      rootBounds.right - targetBounds.width,\n    );\n    const constrainedTop = Math.min(\n      Math.max(rootBounds.top, targetBounds.top),\n      rootBounds.bottom - targetBounds.height,\n    );\n    const constrainedRight = constrainedLeft + targetBounds.width;\n    const constrainedBottom = constrainedTop + targetBounds.height;\n    return {\n      left: constrainedLeft,\n      top: constrainedTop,\n      right: constrainedRight,\n      bottom: constrainedBottom,\n    };\n  }\n\n  private getMargins(\n    windowDimensions: {\n      left: number;\n      top: number;\n      right: number;\n      bottom: number;\n    },\n    rootBounds: DOMRect | null,\n  ) {\n    let viewportBounds;\n    if (!rootBounds) {\n      viewportBounds = {\n        top: visualViewport!.offsetTop,\n        left: visualViewport!.offsetLeft,\n        right: visualViewport!.width + visualViewport!.offsetLeft,\n        bottom: visualViewport!.height + visualViewport!.offsetTop,\n      };\n    } else {\n      viewportBounds = rootBounds;\n    }\n    const constrainedTopMarginOfWindow = Math.min(-(windowDimensions.top - 1 - viewportBounds.top), 0);\n    const constrainedRightMarginOfWindow = Math.min(-(viewportBounds.right - (windowDimensions.right + 1)), 0);\n    const constrainedBottomMarginOfWindow = Math.min(-(viewportBounds.bottom - (windowDimensions.bottom + 1)), 0);\n    const constrainedLeftMarginOfWindow = Math.min(-(windowDimensions.left - 1 - viewportBounds.left), 0);\n    return `${constrainedTopMarginOfWindow}px ${constrainedRightMarginOfWindow}px ${constrainedBottomMarginOfWindow}px ${constrainedLeftMarginOfWindow}px`;\n  }\n}\n\nexport const usePositionObserver = (\n  elementNode: Element | null,\n  onPositionChange: PositionObserverCallback = () => {},\n) => {\n  React.useEffect(() => {\n    const hasIOSupport = !!window.IntersectionObserver;\n    if (!hasIOSupport || !elementNode) return () => {};\n    const positionObs = new PositionObserver(onPositionChange);\n    positionObs.observe(elementNode);\n\n    return () => {\n      positionObs.disconnect();\n    };\n  }, [elementNode, onPositionChange]);\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/types/DSFloatingContext.d.ts

@@ -1,7 +1,5 @@
 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: {
@@ -10,7 +8,7 @@ declare const useFloatingContext: {
             floating: HTMLElement | null;
             reference: Element | null;
         };
-        floatingStyles: CSSProperties;
+        floatingStyles: import("styled-components").CSSProperties;
         handlers: {
             onMouseEnter: () => void;
             onMouseLeave: () => void;
@@ -18,7 +16,7 @@ declare const useFloatingContext: {
             onBlur: () => void;
         };
         isOpen: boolean;
-        arrowStyles: PopoverArrowT;
+        arrowStyles: import("./parts/PopoverArrow.js").PopoverArrowT;
         hideTooltip: () => void;
         showTooltip: () => void;
         context: {
@@ -27,6 +25,7 @@ declare const useFloatingContext: {
             portalDOMContainer: HTMLElement | undefined;
             animationDuration: number;
         };
+        mutableUpdateStyles: React.MutableRefObject<() => void>;
     };
     displayName: string;
 };

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

@@ -11,7 +11,7 @@ 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" | "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" | "exportparts" | "part" | "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<{
+    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" | "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" | "exportparts" | "part" | "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;
@@ -165,8 +165,6 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         onProgressCapture?: React.ReactEventHandler<Element> | undefined;
         onRateChange?: React.ReactEventHandler<Element> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<Element> | undefined;
-        onResize?: React.ReactEventHandler<Element> | undefined;
-        onResizeCapture?: React.ReactEventHandler<Element> | undefined;
         onSeeked?: React.ReactEventHandler<Element> | undefined;
         onSeekedCapture?: React.ReactEventHandler<Element> | undefined;
         onSeeking?: React.ReactEventHandler<Element> | undefined;

package/dist/types/parts/FloatingWrapper/react-desc-prop-types.d.ts

@@ -27,7 +27,6 @@ export declare namespace DSFloatingWrapperT {
     }
     interface InternalProps extends DefaultProps, RequiredProps, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps>, XstyledProps {
     }
-    type ExampleState = '0' | '1';
 }
 export declare const defaultProps: Partial<DSFloatingWrapperT.DefaultProps>;
 export declare const DSFloatingWrapperPropTypes: DSPropTypesSchema<DSFloatingWrapperT.InternalProps>;

package/dist/types/useComputedPositionStyles.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="lodash" />
+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';
+type UseComputedPositionStylesT = {
+    preventComputing?: boolean;
+    reference: Element | null;
+    floating: HTMLElement | null;
+    placement: DSHookFloatingContextT.PopperPlacementsT;
+    placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];
+    customOffset: [number, number];
+    withoutPortal: boolean;
+};
+/**
+ * this custom hook has a single purpose, to compute the position of the floating element relative to the reference element
+ *
+ * we ideally don't want to calculate positions if the open flag is false as the styles should not be visible so not relevant.
+ * @param {UseComputedPositionStylesT} config - The configuration object.
+ * @param {Boolean} config.preventComputing - If true, the position will not be computed, usually used when the open flag is false.
+ * @param {Element} config.reference - The reference element as a DOM element.
+ * @param {HTMLElement} config.floating - The floating element as a DOM element (required to calculate the best fitting position).
+ * @param {DSHookFloatingContextT.PopperPlacementsT} config.placement - The placement of the floating element relative to the reference element to be applied if possible.
+ * @param {DSHookFloatingContextT.PopperPlacementsT[]} config.placementOrderPreference - The order of preference for the placement of the floating element relative to the reference element, the first one that fits will be used.
+ * @param {[number, number]} config.customOffset - The offset of the floating element relative to the reference element if any is desired.
+ * @param {Boolean} config.withoutPortal - If true, the floating element will be positioned relative to the reference element, otherwise it will be positioned relative to the viewport.
+ *
+ * @returns results
+ * @returns results.arrowStyles - the styles to be applied to the arrow element if any is desired
+ * @returns results.floatingStyles - the styles to be applied to the floating element
+ * @returns results.updateStyles - a function to be called to update the styles of the floating element on demand if needed
+ * @returns results.debouncedUpdateStyles - a debounced version of the updateStyles function to be used when lot of invocations are expected (e.g. on scroll)
+ * @returns results.mutableUpdateStyles - a ref to the updateStyles function to be used when the function needs to be called in a useEffect or similar
+ */
+export declare const useComputedPositionStyles: (config: UseComputedPositionStylesT) => {
+    arrowStyles: PopoverArrowT;
+    floatingStyles: CSSProperties;
+    updateStyles: () => void;
+    debouncedUpdateStyles: import("lodash").DebouncedFunc<() => void>;
+    mutableUpdateStyles: React.MutableRefObject<() => void>;
+    resetStyles: () => void;
+};
+export {};

package/dist/types/utils/positionObserver.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 AJK-Essential
+ * This file is licensed under the MIT License.
+ * See the LICENSE file in the project root for license information.
+ */
+export type PositionData = {
+    x: number;
+    y: number;
+    target: HTMLElement | Element;
+    outOfViewport: boolean;
+    rootBounds: DOMRect | null;
+};
+export type PositionObserverCallback = (data: PositionData) => void;
+export declare class PositionObserver {
+    private intersectionObserver;
+    private positionObserverCallback;
+    private thresholdList;
+    constructor(positionObserverCallback: PositionObserverCallback, thresholdFraction?: number);
+    observe(targetElement: HTMLElement | Element): void;
+    private viewportCallback;
+    private intersectionObsCallback;
+    disconnect(): void;
+    private constructBoxWindow;
+    private getMargins;
+}
+export declare const usePositionObserver: (elementNode: Element | null, onPositionChange?: PositionObserverCallback) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-floating-context",
-  "version": "3.52.0-rc.8",
+  "version": "3.52.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper Hook",
   "files": [
@@ -36,18 +36,18 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-hooks-headless-tooltip": "3.52.0-rc.8",
-    "@elliemae/ds-system": "3.52.0-rc.8",
-    "@elliemae/ds-props-helpers": "3.52.0-rc.8",
-    "@elliemae/ds-typescript-helpers": "3.52.0-rc.8"
+    "@elliemae/ds-hooks-headless-tooltip": "3.52.0",
+    "@elliemae/ds-props-helpers": "3.52.0",
+    "@elliemae/ds-system": "3.52.0",
+    "@elliemae/ds-typescript-helpers": "3.52.0"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.55",
+    "@elliemae/pui-cli": "9.0.0-next.63",
     "jest": "~29.7.0",
-    "@elliemae/ds-monorepo-devops": "3.52.0-rc.8"
+    "@elliemae/ds-monorepo-devops": "3.52.0"
   },
   "peerDependencies": {
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "~5.3.9",