@elliemae/ds-floating-context 3.52.0-rc.3 → 3.52.0-rc.31

package/dist/cjs/DSFloatingContext.js

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

package/dist/cjs/DSFloatingContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSFloatingContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable arrow-body-style */\n/* eslint-disable no-unused-vars */\n/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useState, useEffect, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { type CSSProperties } from 'styled-components';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport type { PopoverArrowT } from './parts/PopoverArrow.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n  const {\n    withoutPortal,\n    withoutAnimation,\n    portalDOMContainer,\n    animationDuration,\n    placement,\n    customOffset,\n    placementOrderPreference,\n    onOpen,\n    onClose,\n    externallyControlledIsOpen,\n  } = propsWithDefault;\n\n  const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n  const isOpenSourceOfTruth = useMemo(() => {\n    if (externallyControlledIsOpen !== undefined) return externallyControlledIsOpen;\n    return internalIsOpen;\n  }, [externallyControlledIsOpen, internalIsOpen]);\n\n  const overChargedOnOpen = React.useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n  const overChargedOnClose = React.useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n  const tooltipHelpers = useHeadlessTooltip({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });\n\n  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    top: 0,\n    left: 0,\n    visibility: 'hidden',\n  });\n  const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({\n    style: { left: 0 },\n    placement: 'top',\n  });\n\n  const [reference, _setReference] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n  useEffect(() => {\n    const update = () => {\n      if (isOpenSourceOfTruth && reference && floating) {\n        const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n          reference,\n          floating,\n          placement,\n          placementOrderPreference,\n          customOffset,\n          withoutPortal,\n        });\n\n        const styles: CSSProperties = {\n          position: 'absolute',\n          zIndex: 3000,\n          // top: 0,\n          // left: 0,\n          ...coordsStyle,\n        };\n\n        setFloatingStyles(styles);\n        setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n      }\n    };\n\n    // initial position calculation\n    update();\n\n    const debouncedCb = debounce(update, 300);\n\n    // auto update position on scrolling\n    window.addEventListener('scroll', debouncedCb);\n\n    return () => {\n      window.removeEventListener('scroll', debouncedCb);\n    };\n  }, [reference, floating, placement, placementOrderPreference, customOffset, withoutPortal, isOpenSourceOfTruth]);\n\n  const setReference = mergeRefs(_setReference, setReferenceElement);\n\n  const refs = React.useMemo(\n    () => ({\n      setReference,\n      setFloating,\n      floating,\n      reference,\n    }),\n    [setReference, floating, reference],\n  );\n\n  const handlers = React.useMemo(\n    () => ({\n      onMouseEnter: tooltipHelpers.onMouseEnter,\n      onMouseLeave: tooltipHelpers.onMouseLeave,\n      onFocus: tooltipHelpers.onFocus,\n      onBlur: tooltipHelpers.onBlur,\n    }),\n    [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n  );\n\n  return useMemo(\n    () => ({\n      refs,\n      floatingStyles,\n      handlers,\n      isOpen: isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n    }),\n    [\n      refs,\n      floatingStyles,\n      handlers,\n      isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      withoutPortal,\n      withoutAnimation,\n      portalDOMContainer,\n      animationDuration,\n    ],\n  );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n  DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport React, { useEffect, useMemo } from 'react';\nimport {\n  useMemoMergePropsWithDefault,\n  useValidateTypescriptPropTypes,\n  describe,\n  type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n  const {\n    withoutPortal,\n    withoutAnimation,\n    portalDOMContainer,\n    animationDuration,\n    placement,\n    customOffset,\n    placementOrderPreference,\n    onOpen,\n    onClose,\n    externallyControlledIsOpen,\n  } = propsWithDefault;\n\n  const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n  const isOpenSourceOfTruth = useMemo(() => {\n    if (externallyControlledIsOpen !== undefined) return externallyControlledIsOpen;\n    return internalIsOpen;\n  }, [externallyControlledIsOpen, internalIsOpen]);\n\n  const overChargedOnOpen = React.useCallback(() => {\n    setInternalIsOpen(true);\n    onOpen?.();\n  }, [onOpen]);\n  const overChargedOnClose = React.useCallback(() => {\n    setInternalIsOpen(false);\n    onClose?.();\n  }, [onClose]);\n  const tooltipHelpers = useHeadlessTooltip({ onOpen: overChargedOnOpen, onClose: overChargedOnClose });\n  const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const [reference, _setReference] = React.useState<Element | null>(null);\n  const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n  const [workaroundToEnsureAPositionWasCalculatedIfOpen, setWorkaroundToEnsureAPositionWasCalculatedIfOpen] =\n    React.useState<number>(0);\n\n  const { arrowStyles, floatingStyles, mutableUpdateStyles, debouncedUpdateStyles } = useComputedPositionStyles({\n    reference,\n    floating,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n  });\n\n  // calculate position on mount\n  //   AND everytime the reference (which is actually immutable because it's stored in a React.useState)\n  // changes\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n    // the dependency array is equal to being empty because mutableUpdateStyles is a ref.\n    //   this is effectively an \"on mount\"\n  }, [reference, mutableUpdateStyles]);\n\n  // use intersection observer to detect when the position of the reference changes needing to recalculate the position\n  const updatePosOnIntersection = React.useCallback(() => {\n    if (reference) {\n      requestAnimationFrame(() => {\n        debouncedUpdateStyles();\n      });\n    }\n  }, [reference, debouncedUpdateStyles]);\n  usePositionObserver(reference, updatePosOnIntersection);\n\n  // when we detect that the flag about it being open/closed changes\n  //   we refresh the position of the tooltip calculation\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      mutableUpdateStyles?.current();\n    });\n  }, [isOpenSourceOfTruth, mutableUpdateStyles]);\n\n  // this is a workaround to ensure that the position is calculated at least once when the tooltip is open\n  const { visibility } = floatingStyles;\n  const needsToCalculateBecauseStillInvisibleWhenShouldBeOpen = isOpenSourceOfTruth && visibility === 'hidden';\n  useEffect(() => {\n    if (needsToCalculateBecauseStillInvisibleWhenShouldBeOpen) {\n      mutableUpdateStyles?.current();\n      requestAnimationFrame(() => {\n        setWorkaroundToEnsureAPositionWasCalculatedIfOpen((o) => o + 1);\n      });\n    }\n  }, [\n    needsToCalculateBecauseStillInvisibleWhenShouldBeOpen,\n    mutableUpdateStyles,\n    // this dependency is the point of this useEffect\n    //  it will keep triggering until the position is calculated if it needs to be calculated\n    workaroundToEnsureAPositionWasCalculatedIfOpen,\n  ]);\n\n  const setReference = mergeRefs(_setReference, setReferenceElement);\n  const refs = React.useMemo(\n    () => ({\n      setReference,\n      setFloating,\n      floating,\n      reference,\n    }),\n    [setReference, floating, reference],\n  );\n\n  const handlers = React.useMemo(\n    () => ({\n      onMouseEnter: tooltipHelpers.onMouseEnter,\n      onMouseLeave: tooltipHelpers.onMouseLeave,\n      onFocus: tooltipHelpers.onFocus,\n      onBlur: tooltipHelpers.onBlur,\n    }),\n    [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n  );\n\n  return useMemo(\n    () => ({\n      refs,\n      floatingStyles,\n      handlers,\n      isOpen: isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      context: {\n        withoutPortal,\n        withoutAnimation,\n        portalDOMContainer,\n        animationDuration,\n      },\n      mutableUpdateStyles,\n    }),\n    [\n      refs,\n      floatingStyles,\n      handlers,\n      isOpenSourceOfTruth,\n      arrowStyles,\n      hideTooltip,\n      showTooltip,\n      withoutPortal,\n      withoutAnimation,\n      portalDOMContainer,\n      animationDuration,\n      mutableUpdateStyles,\n    ],\n  );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n  DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

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

package/dist/cjs/useComputedPositionStyles.js

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

package/dist/cjs/useComputedPositionStyles.js.map

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

package/dist/cjs/utils/computePosition.js

@@ -96,6 +96,12 @@ const computePosition = (props) => {
       break;
     }
   }
+  if (!finalPlacement) {
+    finalPlacement = placement;
+    const overflows = (0, import_detectOverflow.detectOverflow)(referenceRect, floatingRect, placement, customOffset);
+    coords.top = -overflows.top + window.scrollY - parentOffsets.top;
+    coords.left = -overflows.left + window.scrollX - parentOffsets.left;
+  }
   return {
     coordsStyle: {
       left: 0,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/computePosition.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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  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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADQvB,2CAA8C;AAC9C,4BAA+B;AAC/B,kCAAiC;AACjC,4BAA+B;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,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,gCAA4B,oEAA8B,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,gBAAY,sCAAe,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,8BAAoB,4BAAAA,SAAqB,iBAAiB;AAAA,IAC5D;AAEA,UAAM,uBAAmB,4BAAAA,SAAqB,iBAAiB;AAE/D,WAAO,KAAK,UAAU,oBAAoB,KAAK,CAAC;AAChD,WAAO,KAAK,UAAU,iBAAiB,KAAK,GAAG,UAAU,gBAAgB,KAAK,CAAC;AAE/E,QACE,OAAO,MAAM,CAAC,UAAU;AACtB,aAAO;AAAA,IACT,CAAC,GACD;AACA,aAAO,MAAM,CAAC,UAAU,MAAM,OAAO,UAAU,cAAc;AAC7D,aAAO,OAAO,CAAC,UAAU,OAAO,OAAO,UAAU,cAAc;AAC/D,uBAAiB;AAEjB;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,MAKL,WAAW,aAAa,OAAO,IAAI,OAAO,OAAO,GAAG;AAAA,IACtD;AAAA,IACA;AAAA,IACA,iBAAa,sCAAe,gBAAgB,UAAU;AAAA,EACxD;AACF;",
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["getOppositePlacement"]
 }

package/dist/cjs/utils/positionObserver.js

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

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

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