@elliemae/ds-floating-context 3.55.1 → 3.57.0-next.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/detectOverflow.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\nimport { type DSHookFloatingContextT } from '../react-desc-prop-types.js';\nimport computeOffsets from './computeOffsets.js';\n\nconst paddingObject = { top: 0, right: 0, bottom: 0, left: 0 };\n\nfunction rectToClientRect(rect: DOMRect) {\n  return { ...rect, left: rect.x, top: rect.y, right: rect.x + rect.width, bottom: rect.y + rect.height };\n}\n\nfunction domRectToObject(rect: {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}): DOMRect {\n  return {\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n    top: rect.top,\n    right: rect.right,\n    bottom: rect.bottom,\n    left: rect.left,\n    toJSON: () => {},\n  };\n}\n\nexport const detectOverflow = (\n  referenceRect: DOMRect,\n  floatingRect: DOMRect,\n  placement: DSHookFloatingContextT.PopperPlacementsT,\n  customOffset: [number, number],\n) => {\n  const basePlacement = placement.split('-')[0];\n  const isVertical = ['top', 'bottom'].indexOf(basePlacement) >= 0;\n  const clippingClientRect = {\n    top: 0,\n    right: document.documentElement.clientWidth,\n    bottom: document.documentElement.clientHeight,\n    left: 0,\n  };\n  const popperOffsets = computeOffsets(placement, referenceRect, floatingRect);\n  const popperClientRect = rectToClientRect({ ...domRectToObject(floatingRect), ...popperOffsets });\n\n  const overflowOffsets = {\n    top: clippingClientRect.top - popperClientRect.top + paddingObject.top,\n    bottom: popperClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,\n    left: clippingClientRect.left - popperClientRect.left + paddingObject.left,\n    right: popperClientRect.right - clippingClientRect.right + paddingObject.right,\n  };\n\n  const offset = {\n    x: basePlacement === 'left' ? -(customOffset?.[0] ?? 12) : (customOffset?.[0] ?? 12),\n    y: basePlacement === 'top' ? -(customOffset?.[1] ?? -12) : (customOffset?.[1] ?? 12),\n  };\n\n  // if vertical switch x for y and vice versa\n  if (!isVertical) {\n    const temp = offset.x;\n    offset.x = offset.y * (basePlacement === 'right' ? 1 : -1);\n    offset.y = temp;\n  }\n\n  Object.keys(overflowOffsets).forEach((key) => {\n    const multiply = ['right', 'bottom'].indexOf(key) >= 0 ? 1 : -1;\n    const axis = ['top', 'bottom'].indexOf(key) >= 0 ? 'y' : 'x';\n    overflowOffsets[key as keyof typeof overflowOffsets] += offset[axis] * multiply;\n  });\n  return overflowOffsets;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,4BAA2B;AAE3B,MAAM,gBAAgB,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAE7D,SAAS,iBAAiB,MAAe;AACvC,SAAO,EAAE,GAAG,MAAM,MAAM,KAAK,GAAG,KAAK,KAAK,GAAG,OAAO,KAAK,IAAI,KAAK,OAAO,QAAQ,KAAK,IAAI,KAAK,OAAO;AACxG;AAEA,SAAS,gBAAgB,MASb;AACV,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,IACR,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,KAAK,KAAK;AAAA,IACV,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,MAAM,KAAK;AAAA,IACX,QAAQ,MAAM;AAAA,IAAC;AAAA,EACjB;AACF;AAEO,MAAM,iBAAiB,CAC5B,eACA,cACA,WACA,iBACG;AACH,QAAM,gBAAgB,UAAU,MAAM,GAAG,EAAE,CAAC;AAC5C,QAAM,aAAa,CAAC,OAAO,QAAQ,EAAE,QAAQ,aAAa,KAAK;AAC/D,QAAM,qBAAqB;AAAA,IACzB,KAAK;AAAA,IACL,OAAO,SAAS,gBAAgB;AAAA,IAChC,QAAQ,SAAS,gBAAgB;AAAA,IACjC,MAAM;AAAA,EACR;AACA,QAAM,oBAAgB,sBAAAA,SAAe,WAAW,eAAe,YAAY;AAC3E,QAAM,mBAAmB,iBAAiB,EAAE,GAAG,gBAAgB,YAAY,GAAG,GAAG,cAAc,CAAC;AAEhG,QAAM,kBAAkB;AAAA,IACtB,KAAK,mBAAmB,MAAM,iBAAiB,MAAM,cAAc;AAAA,IACnE,QAAQ,iBAAiB,SAAS,mBAAmB,SAAS,cAAc;AAAA,IAC5E,MAAM,mBAAmB,OAAO,iBAAiB,OAAO,cAAc;AAAA,IACtE,OAAO,iBAAiB,QAAQ,mBAAmB,QAAQ,cAAc;AAAA,EAC3E;AAEA,QAAM,SAAS;AAAA,IACb,GAAG,kBAAkB,SAAS,EAAE,eAAe,CAAC,KAAK,MAAO,eAAe,CAAC,KAAK;AAAA,IACjF,GAAG,kBAAkB,QAAQ,EAAE,eAAe,CAAC,KAAK,OAAQ,eAAe,CAAC,KAAK;AAAA,EACnF;AAGA,MAAI,CAAC,YAAY;AACf,UAAM,OAAO,OAAO;AACpB,WAAO,IAAI,OAAO,KAAK,kBAAkB,UAAU,IAAI;AACvD,WAAO,IAAI;AAAA,EACb;AAEA,SAAO,KAAK,eAAe,EAAE,QAAQ,CAAC,QAAQ;AAC5C,UAAM,WAAW,CAAC,SAAS,QAAQ,EAAE,QAAQ,GAAG,KAAK,IAAI,IAAI;AAC7D,UAAM,OAAO,CAAC,OAAO,QAAQ,EAAE,QAAQ,GAAG,KAAK,IAAI,MAAM;AACzD,oBAAgB,GAAmC,KAAK,OAAO,IAAI,IAAI;AAAA,EACzE,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-params */\nimport { type DSHookFloatingContextT } from '../react-desc-prop-types.js';\nimport computeOffsets from './computeOffsets.js';\n\nconst paddingObject = { top: 0, right: 0, bottom: 0, left: 0 };\n\nfunction rectToClientRect(rect: DOMRect) {\n  return { ...rect, left: rect.x, top: rect.y, right: rect.x + rect.width, bottom: rect.y + rect.height };\n}\n\nfunction domRectToObject(rect: {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}): DOMRect {\n  return {\n    x: rect.x,\n    y: rect.y,\n    width: rect.width,\n    height: rect.height,\n    top: rect.top,\n    right: rect.right,\n    bottom: rect.bottom,\n    left: rect.left,\n    toJSON: () => {},\n  };\n}\n\nexport const detectOverflow = (\n  referenceRect: DOMRect,\n  floatingRect: DOMRect,\n  placement: DSHookFloatingContextT.PopperPlacementsT,\n  customOffset: [number, number],\n) => {\n  const basePlacement = placement.split('-')[0];\n  const isVertical = ['top', 'bottom'].indexOf(basePlacement) >= 0;\n\n  const scrollBarX = window.innerWidth - document.documentElement.clientWidth;\n  const scrollBarY = window.innerHeight - document.documentElement.clientHeight;\n\n  const clippingClientRect = {\n    top: 0,\n    left: 0,\n    right: document.documentElement.clientWidth + scrollBarX,\n    bottom: document.documentElement.clientHeight + scrollBarY,\n  };\n\n  const popperOffsets = computeOffsets(placement, referenceRect, floatingRect);\n  const popperClientRect = rectToClientRect({ ...domRectToObject(floatingRect), ...popperOffsets });\n\n  const overflowOffsets = {\n    top: clippingClientRect.top - popperClientRect.top + paddingObject.top,\n    bottom: popperClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,\n    left: clippingClientRect.left - popperClientRect.left + paddingObject.left,\n    right: popperClientRect.right - clippingClientRect.right + paddingObject.right,\n  };\n\n  const offset = {\n    x: basePlacement === 'left' ? -(customOffset?.[0] ?? 12) : (customOffset?.[0] ?? 12),\n    y: basePlacement === 'top' ? -(customOffset?.[1] ?? -12) : (customOffset?.[1] ?? 12),\n  };\n\n  // if vertical switch x for y and vice versa\n  if (!isVertical) {\n    const temp = offset.x;\n    offset.x = offset.y * (basePlacement === 'right' ? 1 : -1);\n    offset.y = temp;\n  }\n\n  Object.keys(overflowOffsets).forEach((key) => {\n    const multiply = ['right', 'bottom'].indexOf(key) >= 0 ? 1 : -1;\n    const axis = ['top', 'bottom'].indexOf(key) >= 0 ? 'y' : 'x';\n    overflowOffsets[key as keyof typeof overflowOffsets] += offset[axis] * multiply;\n  });\n  return overflowOffsets;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,4BAA2B;AAE3B,MAAM,gBAAgB,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE;AAE7D,SAAS,iBAAiB,MAAe;AACvC,SAAO,EAAE,GAAG,MAAM,MAAM,KAAK,GAAG,KAAK,KAAK,GAAG,OAAO,KAAK,IAAI,KAAK,OAAO,QAAQ,KAAK,IAAI,KAAK,OAAO;AACxG;AAEA,SAAS,gBAAgB,MASb;AACV,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,IACR,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,KAAK,KAAK;AAAA,IACV,OAAO,KAAK;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,MAAM,KAAK;AAAA,IACX,QAAQ,MAAM;AAAA,IAAC;AAAA,EACjB;AACF;AAEO,MAAM,iBAAiB,CAC5B,eACA,cACA,WACA,iBACG;AACH,QAAM,gBAAgB,UAAU,MAAM,GAAG,EAAE,CAAC;AAC5C,QAAM,aAAa,CAAC,OAAO,QAAQ,EAAE,QAAQ,aAAa,KAAK;AAE/D,QAAM,aAAa,OAAO,aAAa,SAAS,gBAAgB;AAChE,QAAM,aAAa,OAAO,cAAc,SAAS,gBAAgB;AAEjE,QAAM,qBAAqB;AAAA,IACzB,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO,SAAS,gBAAgB,cAAc;AAAA,IAC9C,QAAQ,SAAS,gBAAgB,eAAe;AAAA,EAClD;AAEA,QAAM,oBAAgB,sBAAAA,SAAe,WAAW,eAAe,YAAY;AAC3E,QAAM,mBAAmB,iBAAiB,EAAE,GAAG,gBAAgB,YAAY,GAAG,GAAG,cAAc,CAAC;AAEhG,QAAM,kBAAkB;AAAA,IACtB,KAAK,mBAAmB,MAAM,iBAAiB,MAAM,cAAc;AAAA,IACnE,QAAQ,iBAAiB,SAAS,mBAAmB,SAAS,cAAc;AAAA,IAC5E,MAAM,mBAAmB,OAAO,iBAAiB,OAAO,cAAc;AAAA,IACtE,OAAO,iBAAiB,QAAQ,mBAAmB,QAAQ,cAAc;AAAA,EAC3E;AAEA,QAAM,SAAS;AAAA,IACb,GAAG,kBAAkB,SAAS,EAAE,eAAe,CAAC,KAAK,MAAO,eAAe,CAAC,KAAK;AAAA,IACjF,GAAG,kBAAkB,QAAQ,EAAE,eAAe,CAAC,KAAK,OAAQ,eAAe,CAAC,KAAK;AAAA,EACnF;AAGA,MAAI,CAAC,YAAY;AACf,UAAM,OAAO,OAAO;AACpB,WAAO,IAAI,OAAO,KAAK,kBAAkB,UAAU,IAAI;AACvD,WAAO,IAAI;AAAA,EACb;AAEA,SAAO,KAAK,eAAe,EAAE,QAAQ,CAAC,QAAQ;AAC5C,UAAM,WAAW,CAAC,SAAS,QAAQ,EAAE,QAAQ,GAAG,KAAK,IAAI,IAAI;AAC7D,UAAM,OAAO,CAAC,OAAO,QAAQ,EAAE,QAAQ,GAAG,KAAK,IAAI,MAAM;AACzD,oBAAgB,GAAmC,KAAK,OAAO,IAAI,IAAI;AAAA,EACzE,CAAC;AACD,SAAO;AACT;",
   "names": ["computeOffsets"]
 }

package/dist/esm/DSFloatingContext.js

@@ -1,12 +1,11 @@
 import * as React from "react";
-import React2, { useEffect, useMemo } from "react";
+import React2, { useMemo, useEffect } from "react";
 import {
   useMemoMergePropsWithDefault,
   useValidateTypescriptPropTypes,
   describe
 } from "@elliemae/ds-props-helpers";
 import { useHeadlessTooltip } from "@elliemae/ds-hooks-headless-tooltip";
-import { mergeRefs } from "@elliemae/ds-system";
 import { defaultProps, DSFloatingContextPropTypes } from "./react-desc-prop-types.js";
 import { useComputedPositionStyles } from "./useComputedPositionStyles.js";
 import { usePositionObserver } from "./utils/positionObserver.js";
@@ -26,76 +25,65 @@ 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 { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;
-  const [reference, _setReference] = React2.useState(null);
+  const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });
+  const { setReferenceElement, referenceElement, hideTooltip, showTooltip } = tooltipHelpers;
   const [floating, setFloating] = React2.useState(null);
-  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] = React2.useState(0);
-  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = useComputedPositionStyles({
-    reference,
+  const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } = useComputedPositionStyles({
+    reference: referenceElement,
     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();
       });
+      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);
-      });
-    }
-  }, [
-    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, updateStyles, mutableUpdateStyles]);
+  const onObservedMovement = React2.useCallback(() => {
+    if (!isOpen) return;
+    debouncedUpdateStyles();
+  }, [isOpen, debouncedUpdateStyles]);
+  usePositionObserver(referenceElement, onObservedMovement);
+  const computedFloatingStyles = useMemo(
+    () => ({
+      ...floatingStyles,
+      visibility: isOpen && hasComputedOnce ? "visible" : "hidden"
+    }),
+    [floatingStyles, hasComputedOnce, isOpen]
+  );
+  const refs = useMemo(
     () => ({
-      setReference,
+      setReference: setReferenceElement,
       setFloating,
       floating,
-      reference
+      reference: referenceElement
     }),
-    [setReference, floating, reference]
+    [setReferenceElement, floating, referenceElement]
   );
-  const handlers = React2.useMemo(
+  const handlers = useMemo(
     () => ({
       onMouseEnter: tooltipHelpers.onMouseEnter,
       onMouseLeave: tooltipHelpers.onMouseLeave,
@@ -107,9 +95,9 @@ const useFloatingContext = (props = {}) => {
   return useMemo(
     () => ({
       refs,
-      floatingStyles,
+      floatingStyles: computedFloatingStyles,
       handlers,
-      isOpen: isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -119,13 +107,14 @@ const useFloatingContext = (props = {}) => {
         portalDOMContainer,
         animationDuration
       },
-      mutableUpdateStyles
+      mutableUpdateStyles,
+      forceUpdatePosition: updateStyles
     }),
     [
       refs,
-      floatingStyles,
+      computedFloatingStyles,
       handlers,
-      isOpenSourceOfTruth,
+      isOpen,
       arrowStyles,
       hideTooltip,
       showTooltip,
@@ -133,7 +122,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": "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",
+  "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 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, referenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n  // Anchor and floating refs\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: referenceElement,\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        mutableUpdateStyles.current();\n      });\n      roFloating.observe(floating);\n      observers.push(roFloating);\n    }\n\n    return () => observers.forEach((o) => o.disconnect());\n  }, [isOpen, floating, updateStyles, mutableUpdateStyles]);\n\n  const onObservedMovement = React.useCallback(() => {\n    if (!isOpen) return;\n    debouncedUpdateStyles();\n  }, [isOpen, debouncedUpdateStyles]);\n  usePositionObserver(referenceElement, 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, hasComputedOnce, isOpen],\n  );\n\n  const refs = useMemo(\n    () => ({\n      setReference: setReferenceElement,\n      setFloating,\n      floating,\n      reference: referenceElement,\n    }),\n    [setReferenceElement, floating, referenceElement],\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,85 @@
 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: "transform"
+  });
+  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: 'transform',\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(() => {\n      mutableUpdateStyles.current();\n    }, 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,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;AACvB,0BAAoB,QAAQ;AAAA,IAC9B,GAAG,UAAU;AACb,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/esm/utils/computePosition.js

@@ -27,6 +27,7 @@ const adjustForFixedParent = (child) => {
 };
 const computePosition = (props) => {
   const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal } = props;
+  const scrollBarY = window.innerHeight - document.documentElement.clientHeight;
   const parentOffsets = withoutPortal ? adjustForFixedParent(reference) : {
     top: 0,
     left: 0
@@ -57,7 +58,7 @@ const computePosition = (props) => {
     if (checks.every((check) => {
       return check;
     })) {
-      coords.top = -overflows.top + window.scrollY - parentOffsets.top;
+      coords.top = -overflows.top + window.scrollY - parentOffsets.top + scrollBarY;
       coords.left = -overflows.left + window.scrollX - parentOffsets.left;
       finalPlacement = currentPlacement;
       break;
@@ -71,13 +72,9 @@ const computePosition = (props) => {
   }
   return {
     coordsStyle: {
-      left: 0,
+      transform: `translate3d(${Math.round(coords.left ?? 0)}px, ${Math.round(coords.top ?? 0)}px, 0)`,
       top: 0,
-      // we use transform -> translate because we know final computed left/top probably "split a pixel" (e.g. 10.005px)
-      //  when we use transform we force the browser to use hardware acceleration
-      //  hardware acceleration is faster and more reliable than the browser's own rounding
-      //  it also helps with css animations and so on
-      transform: `translate(${coords.left}px, ${coords.top}px)`
+      left: 0
     },
     finalPlacement,
     coordsArrow: getArrowOffset(finalPlacement, isVertical)

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/computePosition.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable arrow-body-style */\nimport type { DSHookFloatingContextT } from '../react-desc-prop-types.js';\nimport { getExpandedFallbackPlacements } from './getExpandedFallbackPlacements.js';\nimport { getArrowOffset } from './getArrowOffset.js';\nimport getOppositePlacement from './getOppositePlacement.js';\nimport { detectOverflow } from './detectOverflow.js';\n\ninterface ComputePositionProps {\n  reference: Element;\n  floating: HTMLElement;\n  placement: DSHookFloatingContextT.PopperPlacementsT;\n  placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n  customOffset: [number, number];\n  withoutPortal: boolean;\n}\n\nconst findFixedParent = (el: Element | null) => {\n  let element = el;\n  while (element && element !== document.body) {\n    const style = getComputedStyle(element);\n    if (style.position === 'fixed' || style.position === 'absolute') {\n      return element;\n    }\n    element = element.parentElement;\n  }\n  return null;\n};\n\nconst adjustForFixedParent = (child: Element) => {\n  const fixedParent = findFixedParent(child);\n  if (fixedParent) {\n    const rect = fixedParent.getBoundingClientRect();\n    return { top: rect.top, left: rect.left };\n  }\n  return {\n    top: 0,\n    left: 0,\n  };\n};\n\nexport const computePosition = (props: ComputePositionProps) => {\n  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal } = props;\n\n  const parentOffsets = withoutPortal\n    ? adjustForFixedParent(reference)\n    : {\n        top: 0,\n        left: 0,\n      };\n  const referenceRect = reference.getBoundingClientRect();\n  const floatingRect = floating.getBoundingClientRect();\n\n  const variationPlacement = placement.split('-')[1];\n  const fallbackPlacements = placementOrderPreference || getExpandedFallbackPlacements(placement);\n\n  const coords: { top?: number; left?: number; bottom?: number; right?: number } = {};\n\n  let isVertical = false;\n  const placements = [placement].concat(fallbackPlacements as DSHookFloatingContextT.PopperPlacementsT[]);\n  let finalPlacement = '';\n\n  for (let i = 0; i < placements.length; i += 1) {\n    const currentPlacement = placements[i];\n\n    const currentBasePlacement = currentPlacement.split('-')[0] as keyof typeof coords;\n    isVertical = ['top', 'bottom'].indexOf(currentBasePlacement) >= 0;\n\n    const overflows = detectOverflow(referenceRect, floatingRect, currentPlacement, customOffset);\n\n    const checks: boolean[] = [];\n\n    const isStartVariation = variationPlacement === 'start';\n\n    let mainVariationSide: keyof typeof coords = isVertical\n      ? isStartVariation\n        ? 'right'\n        : 'left'\n      : isStartVariation\n        ? 'bottom'\n        : 'top';\n\n    const len = isVertical ? 'width' : 'height';\n\n    if (referenceRect[len] > floatingRect[len]) {\n      mainVariationSide = getOppositePlacement(mainVariationSide) as keyof typeof coords;\n    }\n\n    const altVariationSide = getOppositePlacement(mainVariationSide) as keyof typeof coords;\n\n    checks.push(overflows[currentBasePlacement] <= 0);\n    checks.push(overflows[mainVariationSide] <= 0, overflows[altVariationSide] <= 0);\n\n    if (\n      checks.every((check) => {\n        return check;\n      })\n    ) {\n      coords.top = -overflows.top + window.scrollY - parentOffsets.top;\n      coords.left = -overflows.left + window.scrollX - parentOffsets.left;\n      finalPlacement = currentPlacement;\n\n      break;\n    }\n  }\n\n  if (!finalPlacement) {\n    // if we don't find a placement that fits, we use the original one\n    finalPlacement = placement;\n    const overflows = detectOverflow(referenceRect, floatingRect, placement, customOffset);\n    coords.top = -overflows.top + window.scrollY - parentOffsets.top;\n    coords.left = -overflows.left + window.scrollX - parentOffsets.left;\n  }\n\n  return {\n    coordsStyle: {\n      left: 0,\n      top: 0,\n      // we use transform -> translate because we know final computed left/top probably \"split a pixel\" (e.g. 10.005px)\n      //  when we use transform we force the browser to use hardware acceleration\n      //  hardware acceleration is faster and more reliable than the browser's own rounding\n      //  it also helps with css animations and so on\n      transform: `translate(${coords.left}px, ${coords.top}px)`,\n    },\n    finalPlacement,\n    coordsArrow: getArrowOffset(finalPlacement, isVertical),\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable arrow-body-style */\nimport type { DSHookFloatingContextT } from '../react-desc-prop-types.js';\nimport { getExpandedFallbackPlacements } from './getExpandedFallbackPlacements.js';\nimport { getArrowOffset } from './getArrowOffset.js';\nimport getOppositePlacement from './getOppositePlacement.js';\nimport { detectOverflow } from './detectOverflow.js';\n\ninterface ComputePositionProps {\n  reference: Element;\n  floating: HTMLElement;\n  placement: DSHookFloatingContextT.PopperPlacementsT;\n  placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n  customOffset: [number, number];\n  withoutPortal: boolean;\n}\n\nconst findFixedParent = (el: Element | null) => {\n  let element = el;\n  while (element && element !== document.body) {\n    const style = getComputedStyle(element);\n    if (style.position === 'fixed' || style.position === 'absolute') {\n      return element;\n    }\n    element = element.parentElement;\n  }\n  return null;\n};\n\nconst adjustForFixedParent = (child: Element) => {\n  const fixedParent = findFixedParent(child);\n  if (fixedParent) {\n    const rect = fixedParent.getBoundingClientRect();\n    return { top: rect.top, left: rect.left };\n  }\n  return {\n    top: 0,\n    left: 0,\n  };\n};\n\nexport const computePosition = (props: ComputePositionProps) => {\n  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal } = props;\n\n  const scrollBarY = window.innerHeight - document.documentElement.clientHeight;\n\n  const parentOffsets = withoutPortal\n    ? adjustForFixedParent(reference)\n    : {\n        top: 0,\n        left: 0,\n      };\n  const referenceRect = reference.getBoundingClientRect();\n  const floatingRect = floating.getBoundingClientRect();\n\n  const variationPlacement = placement.split('-')[1];\n  const fallbackPlacements = placementOrderPreference || getExpandedFallbackPlacements(placement);\n\n  const coords: { top?: number; left?: number; bottom?: number; right?: number } = {};\n\n  let isVertical = false;\n  const placements = [placement].concat(fallbackPlacements as DSHookFloatingContextT.PopperPlacementsT[]);\n  let finalPlacement = '';\n\n  for (let i = 0; i < placements.length; i += 1) {\n    const currentPlacement = placements[i];\n\n    const currentBasePlacement = currentPlacement.split('-')[0] as keyof typeof coords;\n    isVertical = ['top', 'bottom'].indexOf(currentBasePlacement) >= 0;\n\n    const overflows = detectOverflow(referenceRect, floatingRect, currentPlacement, customOffset);\n\n    const checks: boolean[] = [];\n\n    const isStartVariation = variationPlacement === 'start';\n\n    let mainVariationSide: keyof typeof coords = isVertical\n      ? isStartVariation\n        ? 'right'\n        : 'left'\n      : isStartVariation\n        ? 'bottom'\n        : 'top';\n\n    const len = isVertical ? 'width' : 'height';\n\n    if (referenceRect[len] > floatingRect[len]) {\n      mainVariationSide = getOppositePlacement(mainVariationSide) as keyof typeof coords;\n    }\n\n    const altVariationSide = getOppositePlacement(mainVariationSide) as keyof typeof coords;\n\n    checks.push(overflows[currentBasePlacement] <= 0);\n    checks.push(overflows[mainVariationSide] <= 0, overflows[altVariationSide] <= 0);\n    if (\n      checks.every((check) => {\n        return check;\n      })\n    ) {\n      coords.top = -overflows.top + window.scrollY - parentOffsets.top + scrollBarY;\n      coords.left = -overflows.left + window.scrollX - parentOffsets.left;\n      finalPlacement = currentPlacement;\n\n      break;\n    }\n  }\n\n  if (!finalPlacement) {\n    // if we don't find a placement that fits, we use the original one\n    finalPlacement = placement;\n    const overflows = detectOverflow(referenceRect, floatingRect, placement, customOffset);\n    coords.top = -overflows.top + window.scrollY - parentOffsets.top;\n    coords.left = -overflows.left + window.scrollX - parentOffsets.left;\n  }\n\n  return {\n    coordsStyle: {\n      transform: `translate3d(${Math.round(coords.left ?? 0)}px, ${Math.round(coords.top ?? 0)}px, 0)`,\n      top: 0,\n      left: 0,\n    },\n    finalPlacement,\n    coordsArrow: getArrowOffset(finalPlacement, isVertical),\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACQvB,SAAS,qCAAqC;AAC9C,SAAS,sBAAsB;AAC/B,OAAO,0BAA0B;AACjC,SAAS,sBAAsB;AAW/B,MAAM,kBAAkB,CAAC,OAAuB;AAC9C,MAAI,UAAU;AACd,SAAO,WAAW,YAAY,SAAS,MAAM;AAC3C,UAAM,QAAQ,iBAAiB,OAAO;AACtC,QAAI,MAAM,aAAa,WAAW,MAAM,aAAa,YAAY;AAC/D,aAAO;AAAA,IACT;AACA,cAAU,QAAQ;AAAA,EACpB;AACA,SAAO;AACT;AAEA,MAAM,uBAAuB,CAAC,UAAmB;AAC/C,QAAM,cAAc,gBAAgB,KAAK;AACzC,MAAI,aAAa;AACf,UAAM,OAAO,YAAY,sBAAsB;AAC/C,WAAO,EAAE,KAAK,KAAK,KAAK,MAAM,KAAK,KAAK;AAAA,EAC1C;AACA,SAAO;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF;AAEO,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,WAAW,UAAU,WAAW,0BAA0B,cAAc,cAAc,IAAI;AAElG,QAAM,aAAa,OAAO,cAAc,SAAS,gBAAgB;AAEjE,QAAM,gBAAgB,gBAClB,qBAAqB,SAAS,IAC9B;AAAA,IACE,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACJ,QAAM,gBAAgB,UAAU,sBAAsB;AACtD,QAAM,eAAe,SAAS,sBAAsB;AAEpD,QAAM,qBAAqB,UAAU,MAAM,GAAG,EAAE,CAAC;AACjD,QAAM,qBAAqB,4BAA4B,8BAA8B,SAAS;AAE9F,QAAM,SAA2E,CAAC;AAElF,MAAI,aAAa;AACjB,QAAM,aAAa,CAAC,SAAS,EAAE,OAAO,kBAAgE;AACtG,MAAI,iBAAiB;AAErB,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK,GAAG;AAC7C,UAAM,mBAAmB,WAAW,CAAC;AAErC,UAAM,uBAAuB,iBAAiB,MAAM,GAAG,EAAE,CAAC;AAC1D,iBAAa,CAAC,OAAO,QAAQ,EAAE,QAAQ,oBAAoB,KAAK;AAEhE,UAAM,YAAY,eAAe,eAAe,cAAc,kBAAkB,YAAY;AAE5F,UAAM,SAAoB,CAAC;AAE3B,UAAM,mBAAmB,uBAAuB;AAEhD,QAAI,oBAAyC,aACzC,mBACE,UACA,SACF,mBACE,WACA;AAEN,UAAM,MAAM,aAAa,UAAU;AAEnC,QAAI,cAAc,GAAG,IAAI,aAAa,GAAG,GAAG;AAC1C,0BAAoB,qBAAqB,iBAAiB;AAAA,IAC5D;AAEA,UAAM,mBAAmB,qBAAqB,iBAAiB;AAE/D,WAAO,KAAK,UAAU,oBAAoB,KAAK,CAAC;AAChD,WAAO,KAAK,UAAU,iBAAiB,KAAK,GAAG,UAAU,gBAAgB,KAAK,CAAC;AAC/E,QACE,OAAO,MAAM,CAAC,UAAU;AACtB,aAAO;AAAA,IACT,CAAC,GACD;AACA,aAAO,MAAM,CAAC,UAAU,MAAM,OAAO,UAAU,cAAc,MAAM;AACnE,aAAO,OAAO,CAAC,UAAU,OAAO,OAAO,UAAU,cAAc;AAC/D,uBAAiB;AAEjB;AAAA,IACF;AAAA,EACF;AAEA,MAAI,CAAC,gBAAgB;AAEnB,qBAAiB;AACjB,UAAM,YAAY,eAAe,eAAe,cAAc,WAAW,YAAY;AACrF,WAAO,MAAM,CAAC,UAAU,MAAM,OAAO,UAAU,cAAc;AAC7D,WAAO,OAAO,CAAC,UAAU,OAAO,OAAO,UAAU,cAAc;AAAA,EACjE;AAEA,SAAO;AAAA,IACL,aAAa;AAAA,MACX,WAAW,eAAe,KAAK,MAAM,OAAO,QAAQ,CAAC,CAAC,OAAO,KAAK,MAAM,OAAO,OAAO,CAAC,CAAC;AAAA,MACxF,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA;AAAA,IACA,aAAa,eAAe,gBAAgB,UAAU;AAAA,EACxD;AACF;",
   "names": []
 }

package/dist/esm/utils/detectOverflow.js

@@ -21,11 +21,13 @@ function domRectToObject(rect) {
 const detectOverflow = (referenceRect, floatingRect, placement, customOffset) => {
   const basePlacement = placement.split("-")[0];
   const isVertical = ["top", "bottom"].indexOf(basePlacement) >= 0;
+  const scrollBarX = window.innerWidth - document.documentElement.clientWidth;
+  const scrollBarY = window.innerHeight - document.documentElement.clientHeight;
   const clippingClientRect = {
     top: 0,
-    right: document.documentElement.clientWidth,
-    bottom: document.documentElement.clientHeight,
-    left: 0
+    left: 0,
+    right: document.documentElement.clientWidth + scrollBarX,
+    bottom: document.documentElement.clientHeight + scrollBarY
   };
   const popperOffsets = computeOffsets(placement, referenceRect, floatingRect);
   const popperClientRect = rectToClientRect({ ...domRectToObject(floatingRect), ...popperOffsets });