@elliemae/ds-floating-context 3.54.1 → 3.55.0-next.10

package/dist/cjs/DSFloatingContext.js

@@ -56,67 +56,66 @@ const useFloatingContext = (props = {}) => {
     externallyControlledIsOpen
   } = propsWithDefault;
   const [internalIsOpen, setInternalIsOpen] = import_react.default.useState(false);
-  const isOpenSourceOfTruth = (0, import_react.useMemo)(() => {
-    if (externallyControlledIsOpen !== void 0) return externallyControlledIsOpen;
-    return internalIsOpen;
-  }, [externallyControlledIsOpen, internalIsOpen]);
-  const overChargedOnOpen = import_react.default.useCallback(() => {
+  const isOpen = (0, import_react.useMemo)(
+    () => externallyControlledIsOpen !== void 0 ? externallyControlledIsOpen : internalIsOpen,
+    [externallyControlledIsOpen, internalIsOpen]
+  );
+  const handleOpen = import_react.default.useCallback(() => {
     setInternalIsOpen(true);
     onOpen?.();
   }, [onOpen]);
-  const overChargedOnClose = import_react.default.useCallback(() => {
+  const handleClose = import_react.default.useCallback(() => {
     setInternalIsOpen(false);
     onClose?.();
   }, [onClose]);
-  const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });
+  const tooltipHelpers = (0, import_ds_hooks_headless_tooltip.useHeadlessTooltip)({ onOpen: handleOpen, onClose: handleClose });
   const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
-  const [reference, _setReference] = import_react.default.useState(null);
+  const [reference, setReferenceInternal] = 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)({
+  const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } = (0, import_useComputedPositionStyles.useComputedPositionStyles)({
     reference,
     floating,
     placement,
     placementOrderPreference,
     customOffset,
-    withoutPortal
+    withoutPortal,
+    preventComputing: !isOpen,
+    debounceMs: 150
   });
   (0, import_react.useEffect)(() => {
-    requestAnimationFrame(() => {
-      mutableUpdateStyles?.current();
-    });
-  }, [reference, mutableUpdateStyles]);
-  const updatePosOnIntersection = import_react.default.useCallback(() => {
-    if (reference) {
-      requestAnimationFrame(() => {
-        debouncedUpdateStyles();
+    if (!isOpen) return;
+    const observers = [];
+    if (floating) {
+      const roFloating = new ResizeObserver(() => {
+        mutableUpdateStyles.current();
+        requestAnimationFrame(() => mutableUpdateStyles.current());
       });
+      roFloating.observe(floating);
+      observers.push(roFloating);
     }
-  }, [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)(() => {
-    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {
-      mutableUpdateStyles?.current();
-      requestAnimationFrame(() => {
-        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);
+    if (reference) {
+      const roRef = new ResizeObserver(() => {
+        mutableUpdateStyles.current();
       });
+      roRef.observe(reference);
+      observers.push(roRef);
     }
-  }, [
-    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(
+    return () => observers.forEach((o) => o.disconnect());
+  }, [isOpen, floating, reference, mutableUpdateStyles]);
+  const onObservedMovement = import_react.default.useCallback(() => {
+    if (!isOpen) return;
+    debouncedUpdateStyles();
+  }, [isOpen, debouncedUpdateStyles]);
+  (0, import_positionObserver.usePositionObserver)(reference, onObservedMovement);
+  const computedFloatingStyles = (0, import_react.useMemo)(
+    () => ({
+      ...floatingStyles,
+      visibility: isOpen && hasComputedOnce ? "visible" : "hidden"
+    }),
+    [floatingStyles, isOpen, hasComputedOnce]
+  );
+  const setReference = (0, import_ds_system.mergeRefs)(setReferenceInternal, setReferenceElement);
+  const refs = (0, import_react.useMemo)(
     () => ({
       setReference,
       setFloating,
@@ -125,7 +124,7 @@ const useFloatingContext = (props = {}) => {
     }),
     [setReference, floating, reference]
   );
-  const handlers = import_react.default.useMemo(
+  const handlers = (0, import_react.useMemo)(
     () => ({
       onMouseEnter: tooltipHelpers.onMouseEnter,
       onMouseLeave: tooltipHelpers.onMouseLeave,
@@ -137,9 +136,9 @@ const useFloatingContext = (props = {}) => {
   return (0, import_react.useMemo)(
     () => ({
       refs,
-      floatingStyles,
+      floatingStyles: computedFloatingStyles,
       handlers,
-      isOpen: isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -149,13 +148,14 @@ const useFloatingContext = (props = {}) => {
         portalDOMContainer,
         animationDuration
       },
-      mutableUpdateStyles
+      mutableUpdateStyles,
+      forceUpdatePosition: updateStyles
     }),
     [
       refs,
-      floatingStyles,
+      computedFloatingStyles,
       handlers,
-      isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -163,7 +163,8 @@ const useFloatingContext = (props = {}) => {
       withoutAnimation,
       portalDOMContainer,
       animationDuration,
-      mutableUpdateStyles
+      mutableUpdateStyles,
+      updateStyles
     ]
   );
 };

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 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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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable max-statements */\nimport React, { useMemo, useEffect } 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 isOpen = useMemo(\n    () => (externallyControlledIsOpen !== undefined ? externallyControlledIsOpen : internalIsOpen),\n    [externallyControlledIsOpen, internalIsOpen],\n  );\n\n  const handleOpen = React.useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const handleClose = React.useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });\n  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n  // Anchor and floating refs\n  const [reference, setReferenceInternal] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n\n  // Compute position (skip when closed)\n  const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } =\n    useComputedPositionStyles({\n      reference,\n      floating,\n      placement,\n      placementOrderPreference,\n      customOffset,\n      withoutPortal,\n      preventComputing: !isOpen,\n      debounceMs: 150,\n    });\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const observers: ResizeObserver[] = [];\n\n    if (floating) {\n      const roFloating = new ResizeObserver(() => {\n        // inmediato + siguiente frame para asentar\n        mutableUpdateStyles.current();\n        requestAnimationFrame(() => mutableUpdateStyles.current());\n      });\n      roFloating.observe(floating);\n      observers.push(roFloating);\n    }\n\n    if (reference) {\n      const roRef = new ResizeObserver(() => {\n        mutableUpdateStyles.current();\n      });\n      roRef.observe(reference);\n      observers.push(roRef);\n    }\n\n    return () => observers.forEach((o) => o.disconnect());\n  }, [isOpen, floating, reference, mutableUpdateStyles]);\n\n  const onObservedMovement = React.useCallback(() => {\n    if (!isOpen) return;\n    debouncedUpdateStyles();\n  }, [isOpen, debouncedUpdateStyles]);\n  usePositionObserver(reference, onObservedMovement);\n\n  // Expose visibility: only visible if open and already computed at least once\n  const computedFloatingStyles = useMemo<React.CSSProperties>(\n    () => ({\n      ...floatingStyles,\n      visibility: isOpen && hasComputedOnce ? 'visible' : 'hidden',\n    }),\n    [floatingStyles, isOpen, hasComputedOnce],\n  );\n\n  const setReference = mergeRefs(setReferenceInternal, setReferenceElement);\n\n  const refs = useMemo(\n    () => ({\n      setReference,\n      setFloating,\n      floating,\n      reference,\n    }),\n    [setReference, floating, reference],\n  );\n\n  const handlers = 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: computedFloatingStyles,\n      handlers,\n      isOpen,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n      mutableUpdateStyles,\n      forceUpdatePosition: updateStyles,\n    }),\n    [\n      refs,\n      computedFloatingStyles,\n      handlers,\n      isOpen,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      withoutPortal,\n      withoutAnimation,\n      portalDOMContainer,\n      animationDuration,\n      mutableUpdateStyles,\n      updateStyles,\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAA0C;AAC1C,8BAKO;AACP,uCAAmC;AACnC,uBAA0B;AAE1B,mCAAyD;AACzD,uCAA0C;AAC1C,8BAAoC;AAEpC,MAAM,qBAAqB,CAAC,QAAsC,CAAC,MAAM;AACvE,QAAM,uBAAmB,sDAAmE,OAAO,yCAAY;AAC/G,8DAA+B,kBAAkB,yDAA4B,iBAAiB;AAE9F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAAA,QAAM,SAAkB,KAAK;AACzE,QAAM,aAAS;AAAA,IACb,MAAO,+BAA+B,SAAY,6BAA6B;AAAA,IAC/E,CAAC,4BAA4B,cAAc;AAAA,EAC7C;AAEA,QAAM,aAAa,aAAAA,QAAM,YAAY,MAAM;AACzC,sBAAkB,IAAI;AACtB,aAAS;AAAA,EACX,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,cAAc,aAAAA,QAAM,YAAY,MAAM;AAC1C,sBAAkB,KAAK;AACvB,cAAU;AAAA,EACZ,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,qBAAiB,qDAAmB,EAAE,QAAQ,YAAY,SAAS,YAAY,CAAC;AACtF,QAAM,EAAE,qBAAqB,aAAa,YAAY,IAAI;AAG1D,QAAM,CAAC,WAAW,oBAAoB,IAAI,aAAAA,QAAM,SAAyB,IAAI;AAC7E,QAAM,CAAC,UAAU,WAAW,IAAI,aAAAA,QAAM,SAA6B,IAAI;AAGvE,QAAM,EAAE,aAAa,gBAAgB,iBAAiB,cAAc,uBAAuB,oBAAoB,QAC7G,4DAA0B;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,CAAC;AAAA,IACnB,YAAY;AAAA,EACd,CAAC;AAEH,8BAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,YAA8B,CAAC;AAErC,QAAI,UAAU;AACZ,YAAM,aAAa,IAAI,eAAe,MAAM;AAE1C,4BAAoB,QAAQ;AAC5B,8BAAsB,MAAM,oBAAoB,QAAQ,CAAC;AAAA,MAC3D,CAAC;AACD,iBAAW,QAAQ,QAAQ;AAC3B,gBAAU,KAAK,UAAU;AAAA,IAC3B;AAEA,QAAI,WAAW;AACb,YAAM,QAAQ,IAAI,eAAe,MAAM;AACrC,4BAAoB,QAAQ;AAAA,MAC9B,CAAC;AACD,YAAM,QAAQ,SAAS;AACvB,gBAAU,KAAK,KAAK;AAAA,IACtB;AAEA,WAAO,MAAM,UAAU,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;AAAA,EACtD,GAAG,CAAC,QAAQ,UAAU,WAAW,mBAAmB,CAAC;AAErD,QAAM,qBAAqB,aAAAA,QAAM,YAAY,MAAM;AACjD,QAAI,CAAC,OAAQ;AACb,0BAAsB;AAAA,EACxB,GAAG,CAAC,QAAQ,qBAAqB,CAAC;AAClC,mDAAoB,WAAW,kBAAkB;AAGjD,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY,UAAU,kBAAkB,YAAY;AAAA,IACtD;AAAA,IACA,CAAC,gBAAgB,QAAQ,eAAe;AAAA,EAC1C;AAEA,QAAM,mBAAe,4BAAU,sBAAsB,mBAAmB;AAExE,QAAM,WAAO;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,UAAU,SAAS;AAAA,EACpC;AAEA,QAAM,eAAW;AAAA,IACf,OAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,cAAc,eAAe;AAAA,MAC7B,SAAS,eAAe;AAAA,MACxB,QAAQ,eAAe;AAAA,IACzB;AAAA,IACA,CAAC,eAAe,QAAQ,eAAe,SAAS,eAAe,cAAc,eAAe,YAAY;AAAA,EAC1G;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,IACvB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAC3B;",
   "names": ["React"]
 }

package/dist/cjs/typescript-testing/typescript-floating-context-valid.js

@@ -0,0 +1,94 @@
+"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 __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 React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import__ = require("../index.js");
+const testOptionalProps = {};
+const testPartialDefaults = {
+  withoutAnimation: false,
+  withoutPortal: false,
+  animationDuration: 300
+};
+const testCompleteDefaults = {
+  withoutAnimation: false,
+  withoutPortal: false,
+  animationDuration: 300,
+  placement: "top",
+  customOffset: [10, 10],
+  portalDOMContainer: document.body
+};
+const testInternalProps = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  animationDuration: 300,
+  withoutAnimation: false,
+  withoutPortal: false,
+  placement: "top",
+  customOffset: [10, 10],
+  portalDOMContainer: document.body,
+  ...testOptionalProps
+};
+const testInferedTypeCompatibility = {
+  ...testOptionalProps,
+  ...testPartialDefaults,
+  animationDuration: 300
+};
+const testDefinitionAsConst = {
+  animationDuration: 300,
+  withoutAnimation: false,
+  withoutPortal: false,
+  placement: "top",
+  portalDOMContainer: document.body
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.FloatingWrapper,
+    {
+      ...testExplicitDefinition,
+      innerRef: import_react.default.createRef(),
+      isOpen: true,
+      floatingStyles: {},
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Content" })
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.FloatingWrapper,
+    {
+      ...testInferedTypeCompatibility,
+      innerRef: import_react.default.createRef(),
+      isOpen: true,
+      floatingStyles: {},
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Content" })
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.FloatingWrapper, { ...testDefinitionAsConst, innerRef: import_react.default.createRef(), isOpen: true, floatingStyles: {}, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "Content" }) })
+] });
+//# sourceMappingURL=typescript-floating-context-valid.js.map

package/dist/cjs/typescript-testing/typescript-floating-context-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-floating-context-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { FloatingWrapper } from '../index.js';\nimport type { DSHookFloatingContextT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSHookFloatingContextT.Props;\ntype ComponentPropsInternals = DSHookFloatingContextT.InternalProps;\ntype ComponentPropsDefaultProps = DSHookFloatingContextT.DefaultProps;\ntype ComponentPropsOptionalProps = DSHookFloatingContextT.OptionalProps;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  withoutAnimation: false,\n  withoutPortal: false,\n  animationDuration: 300,\n};\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  withoutAnimation: false,\n  withoutPortal: false,\n  animationDuration: 300,\n  placement: 'top',\n  customOffset: [10, 10],\n  portalDOMContainer: document.body,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  animationDuration: 300,\n  withoutAnimation: false,\n  withoutPortal: false,\n  placement: 'top',\n  customOffset: [10, 10],\n  portalDOMContainer: document.body,\n  ...testOptionalProps,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n  animationDuration: 300,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  animationDuration: 300,\n  withoutAnimation: false,\n  withoutPortal: false,\n  placement: 'top',\n  portalDOMContainer: document.body,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <FloatingWrapper\n      {...testExplicitDefinition}\n      innerRef={React.createRef<HTMLDivElement>()}\n      isOpen\n      floatingStyles={{}}\n    >\n      <div>Content</div>\n    </FloatingWrapper>\n    <FloatingWrapper\n      {...testInferedTypeCompatibility}\n      innerRef={React.createRef<HTMLDivElement>()}\n      isOpen\n      floatingStyles={{}}\n    >\n      <div>Content</div>\n    </FloatingWrapper>\n    <FloatingWrapper {...testDefinitionAsConst} innerRef={React.createRef<HTMLDivElement>()} isOpen floatingStyles={{}}>\n      <div>Content</div>\n    </FloatingWrapper>\n    {/* works with inline values */}\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACoErB;AAnEF,mBAAkB;AAClB,eAAgC;AAShC,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AACrB;AAGA,MAAM,uBAA6D;AAAA,EACjE,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AAAA,EACrB,oBAAoB,SAAS;AAC/B;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AAAA,EACrB,oBAAoB,SAAS;AAAA,EAC7B,GAAG;AACL;AAGA,MAAM,+BAA+B;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,mBAAmB;AACrB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,oBAAoB,SAAS;AAC/B;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,aAAAA,QAAM,UAA0B;AAAA,MAC1C,QAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MAEjB,sDAAC,SAAI,qBAAO;AAAA;AAAA,EACd;AAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,aAAAA,QAAM,UAA0B;AAAA,MAC1C,QAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MAEjB,sDAAC,SAAI,qBAAO;AAAA;AAAA,EACd;AAAA,EACA,4CAAC,4BAAiB,GAAG,uBAAuB,UAAU,aAAAA,QAAM,UAA0B,GAAG,QAAM,MAAC,gBAAgB,CAAC,GAC/G,sDAAC,SAAI,qBAAO,GACd;AAAA,GAEF;",
+  "names": ["React"]
+}

package/dist/cjs/useComputedPositionStyles.js

@@ -32,66 +32,86 @@ __export(useComputedPositionStyles_exports, {
 });
 module.exports = __toCommonJS(useComputedPositionStyles_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_react = 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,
+  const {
     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({
+    withoutPortal,
+    preventComputing = false,
+    debounceMs = 150
+  } = config;
+  const [arrowStyles, setArrowStyles] = (0, import_react.useState)({ style: { left: 0 }, placement: "top" });
+  const [floatingStyles, setFloatingStyles] = (0, import_react.useState)({
+    position: "absolute",
+    zIndex: 3e3,
+    visibility: "hidden",
+    willChange: "top,left"
+    // hint to browser for smoother positioning updates
+  });
+  const [hasComputedOnce, setHasComputedOnce] = (0, import_react.useState)(false);
+  const canCompute = reference !== null && floating !== null && !preventComputing;
+  const updateStyles = (0, import_react.useCallback)(() => {
+    if (!canCompute) return;
+    const { coordsStyle, finalPlacement, coordsArrow } = (0, import_computePosition.computePosition)({
+      reference,
+      floating,
+      placement,
+      placementOrderPreference,
+      customOffset,
+      withoutPortal
+    });
+    setFloatingStyles((prev) => ({
       position: "absolute",
       zIndex: 3e3,
-      top: 0,
-      left: 0,
+      ...prev,
+      ...coordsStyle
+    }));
+    setArrowStyles({ style: coordsArrow, placement: finalPlacement });
+    setHasComputedOnce(true);
+  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
+  const mutableUpdateStyles = (0, import_react.useRef)(updateStyles);
+  mutableUpdateStyles.current = updateStyles;
+  const debouncedUpdateStyles = (0, import_react.useMemo)(() => {
+    const d = (0, import_lodash_es.debounce)(() => mutableUpdateStyles.current(), debounceMs);
+    return d;
+  }, [debounceMs]);
+  (0, import_react.useLayoutEffect)(
+    () => () => {
+      debouncedUpdateStyles.cancel();
+    },
+    [debouncedUpdateStyles]
+  );
+  (0, import_react.useLayoutEffect)(() => {
+    if (canCompute) {
+      mutableUpdateStyles.current();
+    }
+  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
+  const forceUpdatePosition = (0, import_react.useCallback)(() => {
+    mutableUpdateStyles.current();
+  }, []);
+  const resetVisibilityOnly = (0, import_react.useCallback)(() => {
+    setFloatingStyles((prev) => ({
+      ...prev,
       visibility: "hidden"
-    });
-    setArrowStyles({ style: { left: 0 }, placement: "top" });
+    }));
   }, []);
-  return import_react.default.useMemo(
-    () => ({ arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, mutableUpdateStyles, resetStyles }),
-    [arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, resetStyles]
+  return (0, import_react.useMemo)(
+    () => ({
+      arrowStyles,
+      floatingStyles,
+      hasComputedOnce,
+      updateStyles: forceUpdatePosition,
+      debouncedUpdateStyles,
+      mutableUpdateStyles,
+      resetVisibilityOnly
+    }),
+    [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly]
   );
 };
 //# sourceMappingURL=useComputedPositionStyles.js.map

package/dist/cjs/useComputedPositionStyles.js.map

@@ -1,7 +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"]
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useLayoutEffect, useMemo, useRef, useState, useCallback } 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  /** Prevent computing when closed (optimization + avoids unnecessary frames) */\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  /** Debounce ms for scroll/resize/observer events */\n  debounceMs?: number;\n};\n\nexport const useComputedPositionStyles = (config: UseComputedPositionStylesT) => {\n  const {\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n    preventComputing = false,\n    debounceMs = 150,\n  } = config;\n\n  const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({ style: { left: 0 }, placement: 'top' });\n\n  // Important: do not initialize top/left to (0,0); keep hidden until the first computation\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    visibility: 'hidden',\n    willChange: 'top,left', // hint to browser for smoother positioning updates\n  });\n\n  const [hasComputedOnce, setHasComputedOnce] = useState(false);\n\n  const canCompute = reference !== null && floating !== null && !preventComputing;\n\n  const updateStyles = useCallback(() => {\n    if (!canCompute) return;\n\n    const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n      reference,\n      floating,\n      placement,\n      placementOrderPreference,\n      customOffset,\n      withoutPortal,\n    });\n\n    // Do not touch visibility here; it is managed outside depending on open/hasComputedOnce\n    setFloatingStyles((prev) => ({\n      position: 'absolute',\n      zIndex: 3000,\n      ...prev,\n      ...coordsStyle,\n    }));\n    setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n    setHasComputedOnce(true);\n  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n  // Store latest update function in a ref to keep debounced stable\n  const mutableUpdateStyles = useRef(updateStyles);\n  mutableUpdateStyles.current = updateStyles;\n\n  const debouncedUpdateStyles = useMemo(() => {\n    const d = debounce(() => mutableUpdateStyles.current(), debounceMs);\n    return d;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debounceMs]);\n\n  // Clean up debounce on unmount\n  useLayoutEffect(\n    () => () => {\n      debouncedUpdateStyles.cancel();\n    },\n    [debouncedUpdateStyles],\n  );\n\n  // Recalculate BEFORE paint when dependencies change\n  useLayoutEffect(() => {\n    if (canCompute) {\n      mutableUpdateStyles.current();\n    }\n  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n  const forceUpdatePosition = useCallback(() => {\n    mutableUpdateStyles.current();\n  }, []);\n\n  // Do not reset coordinates when closing; just hide\n  const resetVisibilityOnly = useCallback(() => {\n    setFloatingStyles((prev) => ({\n      ...prev,\n      visibility: 'hidden',\n    }));\n  }, []);\n\n  return useMemo(\n    () => ({\n      arrowStyles,\n      floatingStyles,\n      hasComputedOnce,\n      updateStyles: forceUpdatePosition,\n      debouncedUpdateStyles,\n      mutableUpdateStyles,\n      resetVisibilityOnly,\n    }),\n    [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwE;AACxE,uBAAyB;AAEzB,6BAAgC;AAiBzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,aAAa;AAAA,EACf,IAAI;AAEJ,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAGtG,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EACd,CAAC;AAED,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAE5D,QAAM,aAAa,cAAc,QAAQ,aAAa,QAAQ,CAAC;AAE/D,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI,CAAC,WAAY;AAEjB,UAAM,EAAE,aAAa,gBAAgB,YAAY,QAAI,wCAAgB;AAAA,MACnE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAGD,sBAAkB,CAAC,UAAU;AAAA,MAC3B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL,EAAE;AACF,mBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAChE,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAGtG,QAAM,0BAAsB,qBAAO,YAAY;AAC/C,sBAAoB,UAAU;AAE9B,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,UAAM,QAAI,2BAAS,MAAM,oBAAoB,QAAQ,GAAG,UAAU;AAClE,WAAO;AAAA,EAET,GAAG,CAAC,UAAU,CAAC;AAGf;AAAA,IACE,MAAM,MAAM;AACV,4BAAsB,OAAO;AAAA,IAC/B;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAGA,oCAAgB,MAAM;AACpB,QAAI,YAAY;AACd,0BAAoB,QAAQ;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAEtG,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,wBAAoB,QAAQ;AAAA,EAC9B,GAAG,CAAC,CAAC;AAGL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,YAAY;AAAA,IACd,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,aAAa,gBAAgB,iBAAiB,qBAAqB,uBAAuB,mBAAmB;AAAA,EAChH;AACF;",
+  "names": []
 }

package/dist/esm/DSFloatingContext.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2, { useEffect, useMemo } from "react";
+import React2, { useMemo, useEffect } from "react";
 import {
   useMemoMergePropsWithDefault,
   useValidateTypescriptPropTypes,
@@ -26,67 +26,66 @@ const useFloatingContext = (props = {}) => {
     externallyControlledIsOpen
   } = propsWithDefault;
   const [internalIsOpen, setInternalIsOpen] = React2.useState(false);
-  const isOpenSourceOfTruth = useMemo(() => {
-    if (externallyControlledIsOpen !== void 0) return externallyControlledIsOpen;
-    return internalIsOpen;
-  }, [externallyControlledIsOpen, internalIsOpen]);
-  const overChargedOnOpen = React2.useCallback(() => {
+  const isOpen = useMemo(
+    () => externallyControlledIsOpen !== void 0 ? externallyControlledIsOpen : internalIsOpen,
+    [externallyControlledIsOpen, internalIsOpen]
+  );
+  const handleOpen = React2.useCallback(() => {
     setInternalIsOpen(true);
     onOpen?.();
   }, [onOpen]);
-  const overChargedOnClose = React2.useCallback(() => {
+  const handleClose = React2.useCallback(() => {
     setInternalIsOpen(false);
     onClose?.();
   }, [onClose]);
-  const tooltipHelpers = useHeadlessTooltip({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });
+  const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });
   const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
-  const [reference, _setReference] = React2.useState(null);
+  const [reference, setReferenceInternal] = React2.useState(null);
   const [floating, setFloating] = React2.useState(null);
-  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] = React2.useState(0);
-  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = useComputedPositionStyles({
+  const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } = useComputedPositionStyles({
     reference,
     floating,
     placement,
     placementOrderPreference,
     customOffset,
-    withoutPortal
+    withoutPortal,
+    preventComputing: !isOpen,
+    debounceMs: 150
   });
   useEffect(() => {
-    requestAnimationFrame(() => {
-      mutableUpdateStyles?.current();
-    });
-  }, [reference, mutableUpdateStyles]);
-  const updatePosOnIntersection = React2.useCallback(() => {
-    if (reference) {
-      requestAnimationFrame(() => {
-        debouncedUpdateStyles();
+    if (!isOpen) return;
+    const observers = [];
+    if (floating) {
+      const roFloating = new ResizeObserver(() => {
+        mutableUpdateStyles.current();
+        requestAnimationFrame(() => mutableUpdateStyles.current());
       });
+      roFloating.observe(floating);
+      observers.push(roFloating);
     }
-  }, [reference, debouncedUpdateStyles]);
-  usePositionObserver(reference, updatePosOnIntersection);
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      mutableUpdateStyles?.current();
-    });
-  }, [isOpenSourceOfTruth, mutableUpdateStyles]);
-  const { visibility } = floatingStyles;
-  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === "hidden";
-  useEffect(() => {
-    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {
-      mutableUpdateStyles?.current();
-      requestAnimationFrame(() => {
-        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);
+    if (reference) {
+      const roRef = new ResizeObserver(() => {
+        mutableUpdateStyles.current();
       });
+      roRef.observe(reference);
+      observers.push(roRef);
     }
-  }, [
-    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(
+    return () => observers.forEach((o) => o.disconnect());
+  }, [isOpen, floating, reference, mutableUpdateStyles]);
+  const onObservedMovement = React2.useCallback(() => {
+    if (!isOpen) return;
+    debouncedUpdateStyles();
+  }, [isOpen, debouncedUpdateStyles]);
+  usePositionObserver(reference, onObservedMovement);
+  const computedFloatingStyles = useMemo(
+    () => ({
+      ...floatingStyles,
+      visibility: isOpen && hasComputedOnce ? "visible" : "hidden"
+    }),
+    [floatingStyles, isOpen, hasComputedOnce]
+  );
+  const setReference = mergeRefs(setReferenceInternal, setReferenceElement);
+  const refs = useMemo(
     () => ({
       setReference,
       setFloating,
@@ -95,7 +94,7 @@ const useFloatingContext = (props = {}) => {
     }),
     [setReference, floating, reference]
   );
-  const handlers = React2.useMemo(
+  const handlers = useMemo(
     () => ({
       onMouseEnter: tooltipHelpers.onMouseEnter,
       onMouseLeave: tooltipHelpers.onMouseLeave,
@@ -107,9 +106,9 @@ const useFloatingContext = (props = {}) => {
   return useMemo(
     () => ({
       refs,
-      floatingStyles,
+      floatingStyles: computedFloatingStyles,
       handlers,
-      isOpen: isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -119,13 +118,14 @@ const useFloatingContext = (props = {}) => {
         portalDOMContainer,
         animationDuration
       },
-      mutableUpdateStyles
+      mutableUpdateStyles,
+      forceUpdatePosition: updateStyles
     }),
     [
       refs,
-      floatingStyles,
+      computedFloatingStyles,
       handlers,
-      isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -133,7 +133,8 @@ const useFloatingContext = (props = {}) => {
       withoutAnimation,
       portalDOMContainer,
       animationDuration,
-      mutableUpdateStyles
+      mutableUpdateStyles,
+      updateStyles
     ]
   );
 };

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 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": "AAAA,YAAY,WAAW;ACCvB,OAAOA,UAAS,WAAW,eAAe;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAE1B,SAAS,cAAc,kCAAkC;AACzD,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AAEpC,MAAM,qBAAqB,CAAC,QAAsC,CAAC,MAAM;AACvE,QAAM,mBAAmB,6BAAmE,OAAO,YAAY;AAC/G,iCAA+B,kBAAkB,4BAA4B,iBAAiB;AAE9F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,OAAM,SAAkB,KAAK;AACzE,QAAM,sBAAsB,QAAQ,MAAM;AACxC,QAAI,+BAA+B,OAAW,QAAO;AACrD,WAAO;AAAA,EACT,GAAG,CAAC,4BAA4B,cAAc,CAAC;AAE/C,QAAM,oBAAoBA,OAAM,YAAY,MAAM;AAChD,sBAAkB,IAAI;AACtB,aAAS;AAAA,EACX,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,qBAAqBA,OAAM,YAAY,MAAM;AACjD,sBAAkB,KAAK;AACvB,cAAU;AAAA,EACZ,GAAG,CAAC,OAAO,CAAC;AACZ,QAAM,iBAAiB,mBAAmB,EAAE,QAAQ,mBAAmB,SAAS,mBAAmB,CAAC;AACpG,QAAM,EAAE,qBAAqB,aAAa,YAAY,IAAI;AAE1D,QAAM,CAAC,WAAW,aAAa,IAAIA,OAAM,SAAyB,IAAI;AACtE,QAAM,CAAC,UAAU,WAAW,IAAIA,OAAM,SAA6B,IAAI;AACvE,QAAM,CAAC,gDAAgD,iDAAiD,IACtGA,OAAM,SAAiB,CAAC;AAE1B,QAAM,EAAE,aAAa,gBAAgB,qBAAqB,sBAAsB,IAAI,0BAA0B;AAAA,IAC5G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAKD,YAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,2BAAqB,QAAQ;AAAA,IAC/B,CAAC;AAAA,EAGH,GAAG,CAAC,WAAW,mBAAmB,CAAC;AAGnC,QAAM,0BAA0BA,OAAM,YAAY,MAAM;AACtD,QAAI,WAAW;AACb,4BAAsB,MAAM;AAC1B,8BAAsB;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,qBAAqB,CAAC;AACrC,sBAAoB,WAAW,uBAAuB;AAItD,YAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,2BAAqB,QAAQ;AAAA,IAC/B,CAAC;AAAA,EACH,GAAG,CAAC,qBAAqB,mBAAmB,CAAC;AAG7C,QAAM,EAAE,WAAW,IAAI;AACvB,QAAM,wDAAwD,uBAAuB,eAAe;AACpG,YAAU,MAAM;AACd,QAAI,uDAAuD;AACzD,2BAAqB,QAAQ;AAC7B,4BAAsB,MAAM;AAC1B,0DAAkD,CAAC,MAAM,IAAI,CAAC;AAAA,MAChE,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,UAAU,eAAe,mBAAmB;AACjE,QAAM,OAAOA,OAAM;AAAA,IACjB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,UAAU,SAAS;AAAA,EACpC;AAEA,QAAM,WAAWA,OAAM;AAAA,IACrB,OAAO;AAAA,MACL,cAAc,eAAe;AAAA,MAC7B,cAAc,eAAe;AAAA,MAC7B,SAAS,eAAe;AAAA,MACxB,QAAQ,eAAe;AAAA,IACzB;AAAA,IACA,CAAC,eAAe,QAAQ,eAAe,SAAS,eAAe,cAAc,eAAe,YAAY;AAAA,EAC1G;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAC3B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable max-statements */\nimport React, { useMemo, useEffect } 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 isOpen = useMemo(\n    () => (externallyControlledIsOpen !== undefined ? externallyControlledIsOpen : internalIsOpen),\n    [externallyControlledIsOpen, internalIsOpen],\n  );\n\n  const handleOpen = React.useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n\n  const handleClose = React.useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n\n  const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });\n  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n  // Anchor and floating refs\n  const [reference, setReferenceInternal] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n\n  // Compute position (skip when closed)\n  const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } =\n    useComputedPositionStyles({\n      reference,\n      floating,\n      placement,\n      placementOrderPreference,\n      customOffset,\n      withoutPortal,\n      preventComputing: !isOpen,\n      debounceMs: 150,\n    });\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const observers: ResizeObserver[] = [];\n\n    if (floating) {\n      const roFloating = new ResizeObserver(() => {\n        // inmediato + siguiente frame para asentar\n        mutableUpdateStyles.current();\n        requestAnimationFrame(() => mutableUpdateStyles.current());\n      });\n      roFloating.observe(floating);\n      observers.push(roFloating);\n    }\n\n    if (reference) {\n      const roRef = new ResizeObserver(() => {\n        mutableUpdateStyles.current();\n      });\n      roRef.observe(reference);\n      observers.push(roRef);\n    }\n\n    return () => observers.forEach((o) => o.disconnect());\n  }, [isOpen, floating, reference, mutableUpdateStyles]);\n\n  const onObservedMovement = React.useCallback(() => {\n    if (!isOpen) return;\n    debouncedUpdateStyles();\n  }, [isOpen, debouncedUpdateStyles]);\n  usePositionObserver(reference, onObservedMovement);\n\n  // Expose visibility: only visible if open and already computed at least once\n  const computedFloatingStyles = useMemo<React.CSSProperties>(\n    () => ({\n      ...floatingStyles,\n      visibility: isOpen && hasComputedOnce ? 'visible' : 'hidden',\n    }),\n    [floatingStyles, isOpen, hasComputedOnce],\n  );\n\n  const setReference = mergeRefs(setReferenceInternal, setReferenceElement);\n\n  const refs = useMemo(\n    () => ({\n      setReference,\n      setFloating,\n      floating,\n      reference,\n    }),\n    [setReference, floating, reference],\n  );\n\n  const handlers = 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: computedFloatingStyles,\n      handlers,\n      isOpen,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n      mutableUpdateStyles,\n      forceUpdatePosition: updateStyles,\n    }),\n    [\n      refs,\n      computedFloatingStyles,\n      handlers,\n      isOpen,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      withoutPortal,\n      withoutAnimation,\n      portalDOMContainer,\n      animationDuration,\n      mutableUpdateStyles,\n      updateStyles,\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/typescript-testing/typescript-floating-context-valid.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { FloatingWrapper } from "../index.js";
+const testOptionalProps = {};
+const testPartialDefaults = {
+  withoutAnimation: false,
+  withoutPortal: false,
+  animationDuration: 300
+};
+const testCompleteDefaults = {
+  withoutAnimation: false,
+  withoutPortal: false,
+  animationDuration: 300,
+  placement: "top",
+  customOffset: [10, 10],
+  portalDOMContainer: document.body
+};
+const testInternalProps = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  animationDuration: 300,
+  withoutAnimation: false,
+  withoutPortal: false,
+  placement: "top",
+  customOffset: [10, 10],
+  portalDOMContainer: document.body,
+  ...testOptionalProps
+};
+const testInferedTypeCompatibility = {
+  ...testOptionalProps,
+  ...testPartialDefaults,
+  animationDuration: 300
+};
+const testDefinitionAsConst = {
+  animationDuration: 300,
+  withoutAnimation: false,
+  withoutPortal: false,
+  placement: "top",
+  portalDOMContainer: document.body
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    FloatingWrapper,
+    {
+      ...testExplicitDefinition,
+      innerRef: React2.createRef(),
+      isOpen: true,
+      floatingStyles: {},
+      children: /* @__PURE__ */ jsx("div", { children: "Content" })
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    FloatingWrapper,
+    {
+      ...testInferedTypeCompatibility,
+      innerRef: React2.createRef(),
+      isOpen: true,
+      floatingStyles: {},
+      children: /* @__PURE__ */ jsx("div", { children: "Content" })
+    }
+  ),
+  /* @__PURE__ */ jsx(FloatingWrapper, { ...testDefinitionAsConst, innerRef: React2.createRef(), isOpen: true, floatingStyles: {}, children: /* @__PURE__ */ jsx("div", { children: "Content" }) })
+] });
+//# sourceMappingURL=typescript-floating-context-valid.js.map

package/dist/esm/typescript-testing/typescript-floating-context-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-floating-context-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport { FloatingWrapper } from '../index.js';\nimport type { DSHookFloatingContextT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSHookFloatingContextT.Props;\ntype ComponentPropsInternals = DSHookFloatingContextT.InternalProps;\ntype ComponentPropsDefaultProps = DSHookFloatingContextT.DefaultProps;\ntype ComponentPropsOptionalProps = DSHookFloatingContextT.OptionalProps;\n\nconst testOptionalProps: ComponentPropsOptionalProps = {};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  withoutAnimation: false,\n  withoutPortal: false,\n  animationDuration: 300,\n};\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  withoutAnimation: false,\n  withoutPortal: false,\n  animationDuration: 300,\n  placement: 'top',\n  customOffset: [10, 10],\n  portalDOMContainer: document.body,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  animationDuration: 300,\n  withoutAnimation: false,\n  withoutPortal: false,\n  placement: 'top',\n  customOffset: [10, 10],\n  portalDOMContainer: document.body,\n  ...testOptionalProps,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  ...testOptionalProps,\n  ...testPartialDefaults,\n  animationDuration: 300,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  animationDuration: 300,\n  withoutAnimation: false,\n  withoutPortal: false,\n  placement: 'top',\n  portalDOMContainer: document.body,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <FloatingWrapper\n      {...testExplicitDefinition}\n      innerRef={React.createRef<HTMLDivElement>()}\n      isOpen\n      floatingStyles={{}}\n    >\n      <div>Content</div>\n    </FloatingWrapper>\n    <FloatingWrapper\n      {...testInferedTypeCompatibility}\n      innerRef={React.createRef<HTMLDivElement>()}\n      isOpen\n      floatingStyles={{}}\n    >\n      <div>Content</div>\n    </FloatingWrapper>\n    <FloatingWrapper {...testDefinitionAsConst} innerRef={React.createRef<HTMLDivElement>()} isOpen floatingStyles={{}}>\n      <div>Content</div>\n    </FloatingWrapper>\n    {/* works with inline values */}\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoErB,mBAQI,KARJ;AAnEF,OAAOA,YAAW;AAClB,SAAS,uBAAuB;AAShC,MAAM,oBAAiD,CAAC;AAIxD,MAAM,sBAA2D;AAAA,EAC/D,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AACrB;AAGA,MAAM,uBAA6D;AAAA,EACjE,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AAAA,EACrB,oBAAoB,SAAS;AAC/B;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,IAAI,EAAE;AAAA,EACrB,oBAAoB,SAAS;AAAA,EAC7B,GAAG;AACL;AAGA,MAAM,+BAA+B;AAAA,EACnC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,mBAAmB;AACrB;AAEA,MAAM,wBAAwB;AAAA,EAC5B,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,oBAAoB,SAAS;AAC/B;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAUA,OAAM,UAA0B;AAAA,MAC1C,QAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MAEjB,8BAAC,SAAI,qBAAO;AAAA;AAAA,EACd;AAAA,EACA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAUA,OAAM,UAA0B;AAAA,MAC1C,QAAM;AAAA,MACN,gBAAgB,CAAC;AAAA,MAEjB,8BAAC,SAAI,qBAAO;AAAA;AAAA,EACd;AAAA,EACA,oBAAC,mBAAiB,GAAG,uBAAuB,UAAUA,OAAM,UAA0B,GAAG,QAAM,MAAC,gBAAgB,CAAC,GAC/G,8BAAC,SAAI,qBAAO,GACd;AAAA,GAEF;",
+  "names": ["React"]
+}

package/dist/esm/useComputedPositionStyles.js

@@ -1,64 +1,84 @@
 import * as React from "react";
-import React2, { useState } from "react";
+import { useLayoutEffect, useMemo, useRef, useState, useCallback } 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,
+  const {
     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({
+    withoutPortal,
+    preventComputing = false,
+    debounceMs = 150
+  } = config;
+  const [arrowStyles, setArrowStyles] = useState({ style: { left: 0 }, placement: "top" });
+  const [floatingStyles, setFloatingStyles] = useState({
+    position: "absolute",
+    zIndex: 3e3,
+    visibility: "hidden",
+    willChange: "top,left"
+    // hint to browser for smoother positioning updates
+  });
+  const [hasComputedOnce, setHasComputedOnce] = useState(false);
+  const canCompute = reference !== null && floating !== null && !preventComputing;
+  const updateStyles = useCallback(() => {
+    if (!canCompute) return;
+    const { coordsStyle, finalPlacement, coordsArrow } = computePosition({
+      reference,
+      floating,
+      placement,
+      placementOrderPreference,
+      customOffset,
+      withoutPortal
+    });
+    setFloatingStyles((prev) => ({
       position: "absolute",
       zIndex: 3e3,
-      top: 0,
-      left: 0,
+      ...prev,
+      ...coordsStyle
+    }));
+    setArrowStyles({ style: coordsArrow, placement: finalPlacement });
+    setHasComputedOnce(true);
+  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
+  const mutableUpdateStyles = useRef(updateStyles);
+  mutableUpdateStyles.current = updateStyles;
+  const debouncedUpdateStyles = useMemo(() => {
+    const d = debounce(() => mutableUpdateStyles.current(), debounceMs);
+    return d;
+  }, [debounceMs]);
+  useLayoutEffect(
+    () => () => {
+      debouncedUpdateStyles.cancel();
+    },
+    [debouncedUpdateStyles]
+  );
+  useLayoutEffect(() => {
+    if (canCompute) {
+      mutableUpdateStyles.current();
+    }
+  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
+  const forceUpdatePosition = useCallback(() => {
+    mutableUpdateStyles.current();
+  }, []);
+  const resetVisibilityOnly = useCallback(() => {
+    setFloatingStyles((prev) => ({
+      ...prev,
       visibility: "hidden"
-    });
-    setArrowStyles({ style: { left: 0 }, placement: "top" });
+    }));
   }, []);
-  return React2.useMemo(
-    () => ({ arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, mutableUpdateStyles, resetStyles }),
-    [arrowStyles, floatingStyles, updateStyles, debouncedUpdateStyles, resetStyles]
+  return useMemo(
+    () => ({
+      arrowStyles,
+      floatingStyles,
+      hasComputedOnce,
+      updateStyles: forceUpdatePosition,
+      debouncedUpdateStyles,
+      mutableUpdateStyles,
+      resetVisibilityOnly
+    }),
+    [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly]
   );
 };
 export {

package/dist/esm/useComputedPositionStyles.js.map

@@ -1,7 +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"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useLayoutEffect, useMemo, useRef, useState, useCallback } 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  /** Prevent computing when closed (optimization + avoids unnecessary frames) */\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  /** Debounce ms for scroll/resize/observer events */\n  debounceMs?: number;\n};\n\nexport const useComputedPositionStyles = (config: UseComputedPositionStylesT) => {\n  const {\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n    preventComputing = false,\n    debounceMs = 150,\n  } = config;\n\n  const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({ style: { left: 0 }, placement: 'top' });\n\n  // Important: do not initialize top/left to (0,0); keep hidden until the first computation\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    visibility: 'hidden',\n    willChange: 'top,left', // hint to browser for smoother positioning updates\n  });\n\n  const [hasComputedOnce, setHasComputedOnce] = useState(false);\n\n  const canCompute = reference !== null && floating !== null && !preventComputing;\n\n  const updateStyles = useCallback(() => {\n    if (!canCompute) return;\n\n    const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n      reference,\n      floating,\n      placement,\n      placementOrderPreference,\n      customOffset,\n      withoutPortal,\n    });\n\n    // Do not touch visibility here; it is managed outside depending on open/hasComputedOnce\n    setFloatingStyles((prev) => ({\n      position: 'absolute',\n      zIndex: 3000,\n      ...prev,\n      ...coordsStyle,\n    }));\n    setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n    setHasComputedOnce(true);\n  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n  // Store latest update function in a ref to keep debounced stable\n  const mutableUpdateStyles = useRef(updateStyles);\n  mutableUpdateStyles.current = updateStyles;\n\n  const debouncedUpdateStyles = useMemo(() => {\n    const d = debounce(() => mutableUpdateStyles.current(), debounceMs);\n    return d;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debounceMs]);\n\n  // Clean up debounce on unmount\n  useLayoutEffect(\n    () => () => {\n      debouncedUpdateStyles.cancel();\n    },\n    [debouncedUpdateStyles],\n  );\n\n  // Recalculate BEFORE paint when dependencies change\n  useLayoutEffect(() => {\n    if (canCompute) {\n      mutableUpdateStyles.current();\n    }\n  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n  const forceUpdatePosition = useCallback(() => {\n    mutableUpdateStyles.current();\n  }, []);\n\n  // Do not reset coordinates when closing; just hide\n  const resetVisibilityOnly = useCallback(() => {\n    setFloatingStyles((prev) => ({\n      ...prev,\n      visibility: 'hidden',\n    }));\n  }, []);\n\n  return useMemo(\n    () => ({\n      arrowStyles,\n      floatingStyles,\n      hasComputedOnce,\n      updateStyles: forceUpdatePosition,\n      debouncedUpdateStyles,\n      mutableUpdateStyles,\n      resetVisibilityOnly,\n    }),\n    [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,iBAAiB,SAAS,QAAQ,UAAU,mBAAmB;AACxE,SAAS,gBAAgB;AAEzB,SAAS,uBAAuB;AAiBzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,aAAa;AAAA,EACf,IAAI;AAEJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAGtG,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA;AAAA,EACd,CAAC;AAED,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,aAAa,cAAc,QAAQ,aAAa,QAAQ,CAAC;AAE/D,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,CAAC,WAAY;AAEjB,UAAM,EAAE,aAAa,gBAAgB,YAAY,IAAI,gBAAgB;AAAA,MACnE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAGD,sBAAkB,CAAC,UAAU;AAAA,MAC3B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL,EAAE;AACF,mBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAChE,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAGtG,QAAM,sBAAsB,OAAO,YAAY;AAC/C,sBAAoB,UAAU;AAE9B,QAAM,wBAAwB,QAAQ,MAAM;AAC1C,UAAM,IAAI,SAAS,MAAM,oBAAoB,QAAQ,GAAG,UAAU;AAClE,WAAO;AAAA,EAET,GAAG,CAAC,UAAU,CAAC;AAGf;AAAA,IACE,MAAM,MAAM;AACV,4BAAsB,OAAO;AAAA,IAC/B;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAGA,kBAAgB,MAAM;AACpB,QAAI,YAAY;AACd,0BAAoB,QAAQ;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAEtG,QAAM,sBAAsB,YAAY,MAAM;AAC5C,wBAAoB,QAAQ;AAAA,EAC9B,GAAG,CAAC,CAAC;AAGL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,YAAY;AAAA,IACd,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,aAAa,gBAAgB,iBAAiB,qBAAqB,uBAAuB,mBAAmB;AAAA,EAChH;AACF;",
+  "names": []
 }

package/dist/types/DSFloatingContext.d.ts

@@ -8,7 +8,7 @@ declare const useFloatingContext: {
             floating: HTMLElement | null;
             reference: Element | null;
         };
-        floatingStyles: import("styled-components").CSSProperties;
+        floatingStyles: React.CSSProperties;
         handlers: {
             onMouseEnter: () => void;
             onMouseLeave: () => void;
@@ -26,6 +26,7 @@ declare const useFloatingContext: {
             animationDuration: number;
         };
         mutableUpdateStyles: React.MutableRefObject<() => void>;
+        forceUpdatePosition: () => void;
     };
     displayName: string;
 };

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

@@ -115,7 +115,7 @@ export declare const useFloatingWrapper: (propsFromUser: DSFloatingWrapperT.Prop
         onBlurCapture?: React.FocusEventHandler<Element> | undefined;
         onChange?: React.FormEventHandler<Element> | undefined;
         onChangeCapture?: React.FormEventHandler<Element> | undefined;
-        onBeforeInput?: React.FormEventHandler<Element> | undefined;
+        onBeforeInput?: React.InputEventHandler<Element> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<Element> | undefined;
         onInput?: React.FormEventHandler<Element> | undefined;
         onInputCapture?: React.FormEventHandler<Element> | undefined;

package/dist/types/tests/FloatingContext.event.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/FloatingContext.exports.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/FloatingContext.get-owner-props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/playwright/FloatingContext.test.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/typescript-testing/typescript-floating-context-valid.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/useComputedPositionStyles.d.ts

@@ -1,8 +1,8 @@
-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 = {
+    /** Prevent computing when closed (optimization + avoids unnecessary frames) */
     preventComputing?: boolean;
     reference: Element | null;
     floating: HTMLElement | null;
@@ -10,33 +10,16 @@ type UseComputedPositionStylesT = {
     placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];
     customOffset: [number, number];
     withoutPortal: boolean;
+    /** Debounce ms for scroll/resize/observer events */
+    debounceMs?: number;
 };
-/**
- * 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;
+    hasComputedOnce: boolean;
     updateStyles: () => void;
     debouncedUpdateStyles: import("lodash").DebouncedFunc<() => void>;
-    mutableUpdateStyles: React.MutableRefObject<() => void>;
-    resetStyles: () => void;
+    mutableUpdateStyles: import("react").MutableRefObject<() => void>;
+    resetVisibilityOnly: () => void;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-floating-context",
-  "version": "3.54.1",
+  "version": "3.55.0-next.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Popper Hook",
   "files": [
@@ -36,15 +36,15 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.54.1",
-    "@elliemae/ds-hooks-headless-tooltip": "3.54.1",
-    "@elliemae/ds-system": "3.54.1",
-    "@elliemae/ds-typescript-helpers": "3.54.1"
+    "@elliemae/ds-hooks-headless-tooltip": "3.55.0-next.10",
+    "@elliemae/ds-system": "3.55.0-next.10",
+    "@elliemae/ds-typescript-helpers": "3.55.0-next.10",
+    "@elliemae/ds-props-helpers": "3.55.0-next.10"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.65",
     "jest": "~29.7.0",
-    "@elliemae/ds-monorepo-devops": "3.54.1"
+    "@elliemae/ds-monorepo-devops": "3.55.0-next.10"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",
@@ -59,7 +59,7 @@
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
-    "test": "pui-cli test --passWithNoTests --coverage=\"false\"",
+    "test": "[ -n \"$CI\" ] || playwright test -c ./playwright.config.mjs && pui-cli test --passWithNoTests --coverage=\"false\"",
     "lint": "node ../../../scripts/lint.mjs --fix",
     "lint:strict": "node ../../../scripts/lint-strict.mjs",
     "dts": "node ../../../scripts/dts.mjs",