@elliemae/ds-floating-context 3.55.0-next.15 → 3.55.0-next.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/DSFloatingContext.js +2 -10
  2. package/dist/cjs/DSFloatingContext.js.map +2 -2
  3. package/dist/cjs/useComputedPositionStyles.js +5 -1
  4. package/dist/cjs/useComputedPositionStyles.js.map +2 -2
  5. package/dist/cjs/utils/computePosition.js +4 -7
  6. package/dist/cjs/utils/computePosition.js.map +2 -2
  7. package/dist/cjs/utils/detectOverflow.js +5 -3
  8. package/dist/cjs/utils/detectOverflow.js.map +2 -2
  9. package/dist/esm/DSFloatingContext.js +2 -10
  10. package/dist/esm/DSFloatingContext.js.map +2 -2
  11. package/dist/esm/useComputedPositionStyles.js +5 -1
  12. package/dist/esm/useComputedPositionStyles.js.map +2 -2
  13. package/dist/esm/utils/computePosition.js +4 -7
  14. package/dist/esm/utils/computePosition.js.map +2 -2
  15. package/dist/esm/utils/detectOverflow.js +5 -3
  16. package/dist/esm/utils/detectOverflow.js.map +2 -2
  17. package/dist/types/utils/computePosition.d.ts +2 -2
  18. package/package.json +6 -6
package/dist/cjs/DSFloatingContext.js CHANGED
@@ -88,20 +88,12 @@ const useFloatingContext = (props = {}) => {
88
88
  if (floating) {
89
89
  const roFloating = new ResizeObserver(() => {
90
90
  mutableUpdateStyles.current();
91
- requestAnimationFrame(() => mutableUpdateStyles.current());
92
91
  });
93
92
  roFloating.observe(floating);
94
93
  observers.push(roFloating);
95
94
  }
96
- if (reference) {
97
- const roRef = new ResizeObserver(() => {
98
- mutableUpdateStyles.current();
99
- });
100
- roRef.observe(reference);
101
- observers.push(roRef);
102
- }
103
95
  return () => observers.forEach((o) => o.disconnect());
104
- }, [isOpen, floating, reference, mutableUpdateStyles]);
96
+ }, [isOpen, floating, reference, updateStyles, mutableUpdateStyles]);
105
97
  const onObservedMovement = import_react.default.useCallback(() => {
106
98
  if (!isOpen) return;
107
99
  debouncedUpdateStyles();
@@ -112,7 +104,7 @@ const useFloatingContext = (props = {}) => {
112
104
  ...floatingStyles,
113
105
  visibility: isOpen && hasComputedOnce ? "visible" : "hidden"
114
106
  }),
115
- [floatingStyles, isOpen, hasComputedOnce]
107
+ [floatingStyles, hasComputedOnce, isOpen]
116
108
  );
117
109
  const setReference = (0, import_ds_system.mergeRefs)(setReferenceInternal, setReferenceElement);
118
110
  const refs = (0, import_react.useMemo)(
package/dist/cjs/DSFloatingContext.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSFloatingContext.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable max-statements */\nimport React, { useMemo, useEffect } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n const {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n placement,\n customOffset,\n placementOrderPreference,\n onOpen,\n onClose,\n externallyControlledIsOpen,\n } = propsWithDefault;\n\n const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n const isOpen = useMemo(\n () => (externallyControlledIsOpen !== undefined ? externallyControlledIsOpen : internalIsOpen),\n [externallyControlledIsOpen, internalIsOpen],\n );\n\n const handleOpen = React.useCallback(() => {\n setInternalIsOpen(true);\n onOpen?.();\n }, [onOpen]);\n\n const handleClose = React.useCallback(() => {\n setInternalIsOpen(false);\n onClose?.();\n }, [onClose]);\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n // Anchor and floating refs\n const [reference, setReferenceInternal] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n\n // Compute position (skip when closed)\n const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } =\n useComputedPositionStyles({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n preventComputing: !isOpen,\n debounceMs: 150,\n });\n\n useEffect(() => {\n if (!isOpen) return;\n\n const observers: ResizeObserver[] = [];\n\n if (floating) {\n const roFloating = new ResizeObserver(() => {\n mutableUpdateStyles.current();\n requestAnimationFrame(() => mutableUpdateStyles.current());\n });\n roFloating.observe(floating);\n observers.push(roFloating);\n }\n\n if (reference) {\n const roRef = new ResizeObserver(() => {\n mutableUpdateStyles.current();\n });\n roRef.observe(reference);\n observers.push(roRef);\n }\n\n return () => observers.forEach((o) => o.disconnect());\n }, [isOpen, floating, reference, mutableUpdateStyles]);\n\n const onObservedMovement = React.useCallback(() => {\n if (!isOpen) return;\n debouncedUpdateStyles();\n }, [isOpen, debouncedUpdateStyles]);\n usePositionObserver(reference, onObservedMovement);\n\n // Expose visibility: only visible if open and already computed at least once\n const computedFloatingStyles = useMemo<React.CSSProperties>(\n () => ({\n ...floatingStyles,\n visibility: isOpen && hasComputedOnce ? 'visible' : 'hidden',\n }),\n [floatingStyles, isOpen, hasComputedOnce],\n );\n\n const setReference = mergeRefs(setReferenceInternal, setReferenceElement);\n\n const refs = useMemo(\n () => ({\n setReference,\n setFloating,\n floating,\n reference,\n }),\n [setReference, floating, reference],\n );\n\n const handlers = useMemo(\n () => ({\n onMouseEnter: tooltipHelpers.onMouseEnter,\n onMouseLeave: tooltipHelpers.onMouseLeave,\n onFocus: tooltipHelpers.onFocus,\n onBlur: tooltipHelpers.onBlur,\n }),\n [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n );\n\n return useMemo(\n () => ({\n refs,\n floatingStyles: computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n context: {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n },\n mutableUpdateStyles,\n forceUpdatePosition: updateStyles,\n }),\n [\n refs,\n computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n mutableUpdateStyles,\n updateStyles,\n ],\n );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable max-statements */\nimport React, { useMemo, useEffect } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n const {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n placement,\n customOffset,\n placementOrderPreference,\n onOpen,\n onClose,\n externallyControlledIsOpen,\n } = propsWithDefault;\n\n const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n const isOpen = useMemo(\n () => (externallyControlledIsOpen !== undefined ? externallyControlledIsOpen : internalIsOpen),\n [externallyControlledIsOpen, internalIsOpen],\n );\n\n const handleOpen = React.useCallback(() => {\n setInternalIsOpen(true);\n onOpen?.();\n }, [onOpen]);\n\n const handleClose = React.useCallback(() => {\n setInternalIsOpen(false);\n onClose?.();\n }, [onClose]);\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n // Anchor and floating refs\n const [reference, setReferenceInternal] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n\n // Compute position (skip when closed)\n const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } =\n useComputedPositionStyles({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n preventComputing: !isOpen,\n debounceMs: 150,\n });\n\n useEffect(() => {\n if (!isOpen) return;\n\n const observers: ResizeObserver[] = [];\n\n if (floating) {\n const roFloating = new ResizeObserver(() => {\n mutableUpdateStyles.current();\n });\n roFloating.observe(floating);\n observers.push(roFloating);\n }\n\n return () => observers.forEach((o) => o.disconnect());\n }, [isOpen, floating, reference, updateStyles, mutableUpdateStyles]);\n\n const onObservedMovement = React.useCallback(() => {\n if (!isOpen) return;\n debouncedUpdateStyles();\n }, [isOpen, debouncedUpdateStyles]);\n usePositionObserver(reference, onObservedMovement);\n\n // Expose visibility: only visible if open and already computed at least once\n const computedFloatingStyles = useMemo<React.CSSProperties>(\n () => ({\n ...floatingStyles,\n visibility: isOpen && hasComputedOnce ? 'visible' : 'hidden',\n }),\n [floatingStyles, hasComputedOnce, isOpen],\n );\n\n const setReference = mergeRefs(setReferenceInternal, setReferenceElement);\n\n const refs = useMemo(\n () => ({\n setReference,\n setFloating,\n floating,\n reference,\n }),\n [setReference, floating, reference],\n );\n\n const handlers = useMemo(\n () => ({\n onMouseEnter: tooltipHelpers.onMouseEnter,\n onMouseLeave: tooltipHelpers.onMouseLeave,\n onFocus: tooltipHelpers.onFocus,\n onBlur: tooltipHelpers.onBlur,\n }),\n [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n );\n\n return useMemo(\n () => ({\n refs,\n floatingStyles: computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n context: {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n },\n mutableUpdateStyles,\n forceUpdatePosition: updateStyles,\n }),\n [\n refs,\n computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n mutableUpdateStyles,\n updateStyles,\n ],\n );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/useComputedPositionStyles.js CHANGED
@@ -77,7 +77,10 @@ const useComputedPositionStyles = (config) => {
77
77
  const mutableUpdateStyles = (0, import_react.useRef)(updateStyles);
78
78
  mutableUpdateStyles.current = updateStyles;
79
79
  const debouncedUpdateStyles = (0, import_react.useMemo)(() => {
80
- const d = (0, import_lodash_es.debounce)(() => mutableUpdateStyles.current(), debounceMs);
80
+ const d = (0, import_lodash_es.debounce)(() => {
81
+ console.log(" debounce");
82
+ mutableUpdateStyles.current();
83
+ }, debounceMs);
81
84
  return d;
82
85
  }, [debounceMs]);
83
86
  (0, import_react.useLayoutEffect)(
@@ -88,6 +91,7 @@ const useComputedPositionStyles = (config) => {
88
91
  );
89
92
  (0, import_react.useLayoutEffect)(() => {
90
93
  if (canCompute) {
94
+ console.log(" useLayoutEffect");
91
95
  mutableUpdateStyles.current();
92
96
  }
93
97
  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
package/dist/cjs/useComputedPositionStyles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/useComputedPositionStyles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-statements */\nimport { useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react';\nimport { debounce } from 'lodash-es';\nimport { type CSSProperties } from 'styled-components';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport type { PopoverArrowT } from './parts/PopoverArrow.js';\n\ntype UseComputedPositionStylesT = {\n /** Prevent computing when closed (optimization + avoids unnecessary frames) */\n preventComputing?: boolean;\n reference: Element | null;\n floating: HTMLElement | null;\n placement: DSHookFloatingContextT.PopperPlacementsT;\n placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n customOffset: [number, number];\n withoutPortal: boolean;\n /** Debounce ms for scroll/resize/observer events */\n debounceMs?: number;\n};\n\nexport const useComputedPositionStyles = (config: UseComputedPositionStylesT) => {\n const {\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n preventComputing = false,\n debounceMs = 150,\n } = config;\n\n const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({ style: { left: 0 }, placement: 'top' });\n\n // Important: do not initialize top/left to (0,0); keep hidden until the first computation\n const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n position: 'absolute',\n zIndex: 3000,\n visibility: 'hidden',\n willChange: '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(() => mutableUpdateStyles.current(), debounceMs);\n return d;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debounceMs]);\n\n // Clean up debounce on unmount\n useLayoutEffect(\n () => () => {\n debouncedUpdateStyles.cancel();\n },\n [debouncedUpdateStyles],\n );\n\n // Recalculate BEFORE paint when dependencies change\n useLayoutEffect(() => {\n if (canCompute) {\n mutableUpdateStyles.current();\n }\n }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const forceUpdatePosition = useCallback(() => {\n mutableUpdateStyles.current();\n }, []);\n\n // Do not reset coordinates when closing; just hide\n const resetVisibilityOnly = useCallback(() => {\n setFloatingStyles((prev) => ({\n ...prev,\n visibility: 'hidden',\n }));\n }, []);\n\n return useMemo(\n () => ({\n arrowStyles,\n floatingStyles,\n hasComputedOnce,\n updateStyles: forceUpdatePosition,\n debouncedUpdateStyles,\n mutableUpdateStyles,\n resetVisibilityOnly,\n }),\n [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwE;AACxE,uBAAyB;AAEzB,6BAAgC;AAiBzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,aAAa;AAAA,EACf,IAAI;AAEJ,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAGtG,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,EACd,CAAC;AAED,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAE5D,QAAM,aAAa,cAAc,QAAQ,aAAa,QAAQ,CAAC;AAE/D,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI,CAAC,WAAY;AAEjB,UAAM,EAAE,aAAa,gBAAgB,YAAY,QAAI,wCAAgB;AAAA,MACnE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAGD,sBAAkB,CAAC,UAAU;AAAA,MAC3B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL,EAAE;AACF,mBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAChE,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAGtG,QAAM,0BAAsB,qBAAO,YAAY;AAC/C,sBAAoB,UAAU;AAE9B,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,UAAM,QAAI,2BAAS,MAAM,oBAAoB,QAAQ,GAAG,UAAU;AAClE,WAAO;AAAA,EAET,GAAG,CAAC,UAAU,CAAC;AAGf;AAAA,IACE,MAAM,MAAM;AACV,4BAAsB,OAAO;AAAA,IAC/B;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAGA,oCAAgB,MAAM;AACpB,QAAI,YAAY;AACd,0BAAoB,QAAQ;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAEtG,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,wBAAoB,QAAQ;AAAA,EAC9B,GAAG,CAAC,CAAC;AAGL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,YAAY;AAAA,IACd,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,aAAa,gBAAgB,iBAAiB,qBAAqB,uBAAuB,mBAAmB;AAAA,EAChH;AACF;",
4
+ "sourcesContent": ["/* eslint-disable max-statements */\nimport { useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react';\nimport { debounce } from 'lodash-es';\nimport { type CSSProperties } from 'styled-components';\nimport { computePosition } from './utils/computePosition.js';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport type { PopoverArrowT } from './parts/PopoverArrow.js';\n\ntype UseComputedPositionStylesT = {\n /** Prevent computing when closed (optimization + avoids unnecessary frames) */\n preventComputing?: boolean;\n reference: Element | null;\n floating: HTMLElement | null;\n placement: DSHookFloatingContextT.PopperPlacementsT;\n placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n customOffset: [number, number];\n withoutPortal: boolean;\n /** Debounce ms for scroll/resize/observer events */\n debounceMs?: number;\n};\n\nexport const useComputedPositionStyles = (config: UseComputedPositionStylesT) => {\n const {\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n preventComputing = false,\n debounceMs = 150,\n } = config;\n\n const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({ style: { left: 0 }, placement: 'top' });\n\n // Important: do not initialize top/left to (0,0); keep hidden until the first computation\n const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n position: 'absolute',\n zIndex: 3000,\n visibility: 'hidden',\n willChange: '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 console.log(' 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 console.log(' useLayoutEffect');\n mutableUpdateStyles.current();\n }\n }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const forceUpdatePosition = useCallback(() => {\n mutableUpdateStyles.current();\n }, []);\n\n // Do not reset coordinates when closing; just hide\n const resetVisibilityOnly = useCallback(() => {\n setFloatingStyles((prev) => ({\n ...prev,\n visibility: 'hidden',\n }));\n }, []);\n\n return useMemo(\n () => ({\n arrowStyles,\n floatingStyles,\n hasComputedOnce,\n updateStyles: forceUpdatePosition,\n debouncedUpdateStyles,\n mutableUpdateStyles,\n resetVisibilityOnly,\n }),\n [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwE;AACxE,uBAAyB;AAEzB,6BAAgC;AAiBzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,aAAa;AAAA,EACf,IAAI;AAEJ,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAGtG,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,EACd,CAAC;AAED,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAE5D,QAAM,aAAa,cAAc,QAAQ,aAAa,QAAQ,CAAC;AAE/D,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI,CAAC,WAAY;AAEjB,UAAM,EAAE,aAAa,gBAAgB,YAAY,QAAI,wCAAgB;AAAA,MACnE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAGD,sBAAkB,CAAC,UAAU;AAAA,MAC3B,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL,EAAE;AACF,mBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAChE,uBAAmB,IAAI;AAAA,EACzB,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAGtG,QAAM,0BAAsB,qBAAO,YAAY;AAC/C,sBAAoB,UAAU;AAE9B,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,UAAM,QAAI,2BAAS,MAAM;AACvB,cAAQ,IAAI,WAAW;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,oCAAgB,MAAM;AACpB,QAAI,YAAY;AACd,cAAQ,IAAI,kBAAkB;AAC9B,0BAAoB,QAAQ;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAEtG,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,wBAAoB,QAAQ;AAAA,EAC9B,GAAG,CAAC,CAAC;AAGL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,YAAY;AAAA,IACd,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,aAAa,gBAAgB,iBAAiB,qBAAqB,uBAAuB,mBAAmB;AAAA,EAChH;AACF;",
6
6
  "names": []
7
7
  }
package/dist/cjs/utils/computePosition.js CHANGED
@@ -60,6 +60,7 @@ const adjustForFixedParent = (child) => {
60
60
  };
61
61
  const computePosition = (props) => {
62
62
  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal } = props;
63
+ const scrollBarY = window.innerHeight - document.documentElement.clientHeight;
63
64
  const parentOffsets = withoutPortal ? adjustForFixedParent(reference) : {
64
65
  top: 0,
65
66
  left: 0
@@ -90,7 +91,7 @@ const computePosition = (props) => {
90
91
  if (checks.every((check) => {
91
92
  return check;
92
93
  })) {
93
- coords.top = -overflows.top + window.scrollY - parentOffsets.top;
94
+ coords.top = -overflows.top + window.scrollY - parentOffsets.top + scrollBarY;
94
95
  coords.left = -overflows.left + window.scrollX - parentOffsets.left;
95
96
  finalPlacement = currentPlacement;
96
97
  break;
@@ -104,13 +105,9 @@ const computePosition = (props) => {
104
105
  }
105
106
  return {
106
107
  coordsStyle: {
107
- left: 0,
108
+ transform: `translate3d(${Math.round(coords.left ?? 0)}px, ${Math.round(coords.top ?? 0)}px, 0)`,
108
109
  top: 0,
109
- // we use transform -> translate because we know final computed left/top probably "split a pixel" (e.g. 10.005px)
110
- // when we use transform we force the browser to use hardware acceleration
111
- // hardware acceleration is faster and more reliable than the browser's own rounding
112
- // it also helps with css animations and so on
113
- transform: `translate(${coords.left}px, ${coords.top}px)`
110
+ left: 0
114
111
  },
115
112
  finalPlacement,
116
113
  coordsArrow: (0, import_getArrowOffset.getArrowOffset)(finalPlacement, isVertical)
package/dist/cjs/utils/computePosition.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/utils/computePosition.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": "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",
4
+ "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 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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": ["getOppositePlacement"]
7
7
  }
package/dist/cjs/utils/detectOverflow.js CHANGED
@@ -54,11 +54,13 @@ function domRectToObject(rect) {
54
54
  const detectOverflow = (referenceRect, floatingRect, placement, customOffset) => {
55
55
  const basePlacement = placement.split("-")[0];
56
56
  const isVertical = ["top", "bottom"].indexOf(basePlacement) >= 0;
57
+ const scrollBarX = window.innerWidth - document.documentElement.clientWidth;
58
+ const scrollBarY = window.innerHeight - document.documentElement.clientHeight;
57
59
  const clippingClientRect = {
58
60
  top: 0,
59
- right: document.documentElement.clientWidth,
60
- bottom: document.documentElement.clientHeight,
61
- left: 0
61
+ left: 0,
62
+ right: document.documentElement.clientWidth + scrollBarX,
63
+ bottom: document.documentElement.clientHeight + scrollBarY
62
64
  };
63
65
  const popperOffsets = (0, import_computeOffsets.default)(placement, referenceRect, floatingRect);
64
66
  const popperClientRect = rectToClientRect({ ...domRectToObject(floatingRect), ...popperOffsets });
package/dist/cjs/utils/detectOverflow.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/utils/detectOverflow.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "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;",
4
+ "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"],
5
+ "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;",
6
6
  "names": ["computeOffsets"]
7
7
  }
package/dist/esm/DSFloatingContext.js CHANGED
@@ -58,20 +58,12 @@ const useFloatingContext = (props = {}) => {
58
58
  if (floating) {
59
59
  const roFloating = new ResizeObserver(() => {
60
60
  mutableUpdateStyles.current();
61
- requestAnimationFrame(() => mutableUpdateStyles.current());
62
61
  });
63
62
  roFloating.observe(floating);
64
63
  observers.push(roFloating);
65
64
  }
66
- if (reference) {
67
- const roRef = new ResizeObserver(() => {
68
- mutableUpdateStyles.current();
69
- });
70
- roRef.observe(reference);
71
- observers.push(roRef);
72
- }
73
65
  return () => observers.forEach((o) => o.disconnect());
74
- }, [isOpen, floating, reference, mutableUpdateStyles]);
66
+ }, [isOpen, floating, reference, updateStyles, mutableUpdateStyles]);
75
67
  const onObservedMovement = React2.useCallback(() => {
76
68
  if (!isOpen) return;
77
69
  debouncedUpdateStyles();
@@ -82,7 +74,7 @@ const useFloatingContext = (props = {}) => {
82
74
  ...floatingStyles,
83
75
  visibility: isOpen && hasComputedOnce ? "visible" : "hidden"
84
76
  }),
85
- [floatingStyles, isOpen, hasComputedOnce]
77
+ [floatingStyles, hasComputedOnce, isOpen]
86
78
  );
87
79
  const setReference = mergeRefs(setReferenceInternal, setReferenceElement);
88
80
  const refs = useMemo(
package/dist/esm/DSFloatingContext.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSFloatingContext.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable max-statements */\nimport React, { useMemo, useEffect } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n const {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n placement,\n customOffset,\n placementOrderPreference,\n onOpen,\n onClose,\n externallyControlledIsOpen,\n } = propsWithDefault;\n\n const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n const isOpen = useMemo(\n () => (externallyControlledIsOpen !== undefined ? externallyControlledIsOpen : internalIsOpen),\n [externallyControlledIsOpen, internalIsOpen],\n );\n\n const handleOpen = React.useCallback(() => {\n setInternalIsOpen(true);\n onOpen?.();\n }, [onOpen]);\n\n const handleClose = React.useCallback(() => {\n setInternalIsOpen(false);\n onClose?.();\n }, [onClose]);\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n // Anchor and floating refs\n const [reference, setReferenceInternal] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n\n // Compute position (skip when closed)\n const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } =\n useComputedPositionStyles({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n preventComputing: !isOpen,\n debounceMs: 150,\n });\n\n useEffect(() => {\n if (!isOpen) return;\n\n const observers: ResizeObserver[] = [];\n\n if (floating) {\n const roFloating = new ResizeObserver(() => {\n mutableUpdateStyles.current();\n requestAnimationFrame(() => mutableUpdateStyles.current());\n });\n roFloating.observe(floating);\n observers.push(roFloating);\n }\n\n if (reference) {\n const roRef = new ResizeObserver(() => {\n mutableUpdateStyles.current();\n });\n roRef.observe(reference);\n observers.push(roRef);\n }\n\n return () => observers.forEach((o) => o.disconnect());\n }, [isOpen, floating, reference, mutableUpdateStyles]);\n\n const onObservedMovement = React.useCallback(() => {\n if (!isOpen) return;\n debouncedUpdateStyles();\n }, [isOpen, debouncedUpdateStyles]);\n usePositionObserver(reference, onObservedMovement);\n\n // Expose visibility: only visible if open and already computed at least once\n const computedFloatingStyles = useMemo<React.CSSProperties>(\n () => ({\n ...floatingStyles,\n visibility: isOpen && hasComputedOnce ? 'visible' : 'hidden',\n }),\n [floatingStyles, isOpen, hasComputedOnce],\n );\n\n const setReference = mergeRefs(setReferenceInternal, setReferenceElement);\n\n const refs = useMemo(\n () => ({\n setReference,\n setFloating,\n floating,\n reference,\n }),\n [setReference, floating, reference],\n );\n\n const handlers = useMemo(\n () => ({\n onMouseEnter: tooltipHelpers.onMouseEnter,\n onMouseLeave: tooltipHelpers.onMouseLeave,\n onFocus: tooltipHelpers.onFocus,\n onBlur: tooltipHelpers.onBlur,\n }),\n [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n );\n\n return useMemo(\n () => ({\n refs,\n floatingStyles: computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n context: {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n },\n mutableUpdateStyles,\n forceUpdatePosition: updateStyles,\n }),\n [\n refs,\n computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n mutableUpdateStyles,\n updateStyles,\n ],\n );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable max-statements */\nimport React, { useMemo, useEffect } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n type ValidationMap,\n} from '@elliemae/ds-props-helpers';\nimport { useHeadlessTooltip } from '@elliemae/ds-hooks-headless-tooltip';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport type { DSHookFloatingContextT } from './react-desc-prop-types.js';\nimport { defaultProps, DSFloatingContextPropTypes } from './react-desc-prop-types.js';\nimport { useComputedPositionStyles } from './useComputedPositionStyles.js';\nimport { usePositionObserver } from './utils/positionObserver.js';\n\nconst useFloatingContext = (props: DSHookFloatingContextT.Props = {}) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSHookFloatingContextT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSFloatingContextPropTypes, 'FloatingContext');\n\n const {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n placement,\n customOffset,\n placementOrderPreference,\n onOpen,\n onClose,\n externallyControlledIsOpen,\n } = propsWithDefault;\n\n const [internalIsOpen, setInternalIsOpen] = React.useState<boolean>(false);\n const isOpen = useMemo(\n () => (externallyControlledIsOpen !== undefined ? externallyControlledIsOpen : internalIsOpen),\n [externallyControlledIsOpen, internalIsOpen],\n );\n\n const handleOpen = React.useCallback(() => {\n setInternalIsOpen(true);\n onOpen?.();\n }, [onOpen]);\n\n const handleClose = React.useCallback(() => {\n setInternalIsOpen(false);\n onClose?.();\n }, [onClose]);\n\n const tooltipHelpers = useHeadlessTooltip({ onOpen: handleOpen, onClose: handleClose });\n const { setReferenceElement, hideTooltip, showTooltip } = tooltipHelpers;\n\n // Anchor and floating refs\n const [reference, setReferenceInternal] = React.useState<Element | null>(null);\n const [floating, setFloating] = React.useState<HTMLElement | null>(null);\n\n // Compute position (skip when closed)\n const { arrowStyles, floatingStyles, hasComputedOnce, updateStyles, debouncedUpdateStyles, mutableUpdateStyles } =\n useComputedPositionStyles({\n reference,\n floating,\n placement,\n placementOrderPreference,\n customOffset,\n withoutPortal,\n preventComputing: !isOpen,\n debounceMs: 150,\n });\n\n useEffect(() => {\n if (!isOpen) return;\n\n const observers: ResizeObserver[] = [];\n\n if (floating) {\n const roFloating = new ResizeObserver(() => {\n mutableUpdateStyles.current();\n });\n roFloating.observe(floating);\n observers.push(roFloating);\n }\n\n return () => observers.forEach((o) => o.disconnect());\n }, [isOpen, floating, reference, updateStyles, mutableUpdateStyles]);\n\n const onObservedMovement = React.useCallback(() => {\n if (!isOpen) return;\n debouncedUpdateStyles();\n }, [isOpen, debouncedUpdateStyles]);\n usePositionObserver(reference, onObservedMovement);\n\n // Expose visibility: only visible if open and already computed at least once\n const computedFloatingStyles = useMemo<React.CSSProperties>(\n () => ({\n ...floatingStyles,\n visibility: isOpen && hasComputedOnce ? 'visible' : 'hidden',\n }),\n [floatingStyles, hasComputedOnce, isOpen],\n );\n\n const setReference = mergeRefs(setReferenceInternal, setReferenceElement);\n\n const refs = useMemo(\n () => ({\n setReference,\n setFloating,\n floating,\n reference,\n }),\n [setReference, floating, reference],\n );\n\n const handlers = useMemo(\n () => ({\n onMouseEnter: tooltipHelpers.onMouseEnter,\n onMouseLeave: tooltipHelpers.onMouseLeave,\n onFocus: tooltipHelpers.onFocus,\n onBlur: tooltipHelpers.onBlur,\n }),\n [tooltipHelpers.onBlur, tooltipHelpers.onFocus, tooltipHelpers.onMouseEnter, tooltipHelpers.onMouseLeave],\n );\n\n return useMemo(\n () => ({\n refs,\n floatingStyles: computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n context: {\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n },\n mutableUpdateStyles,\n forceUpdatePosition: updateStyles,\n }),\n [\n refs,\n computedFloatingStyles,\n handlers,\n isOpen,\n arrowStyles,\n hideTooltip,\n showTooltip,\n withoutPortal,\n withoutAnimation,\n portalDOMContainer,\n animationDuration,\n mutableUpdateStyles,\n updateStyles,\n ],\n );\n};\n\nuseFloatingContext.displayName = 'FloatingContext';\nconst UseFloatingContextWithSchema = describe(useFloatingContext);\nUseFloatingContextWithSchema.propTypes =\n DSFloatingContextPropTypes as unknown as ValidationMap<DSHookFloatingContextT.Props>;\n\nexport { useFloatingContext, UseFloatingContextWithSchema };\n"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/useComputedPositionStyles.js CHANGED
@@ -44,7 +44,10 @@ const useComputedPositionStyles = (config) => {
44
44
  const mutableUpdateStyles = useRef(updateStyles);
45
45
  mutableUpdateStyles.current = updateStyles;
46
46
  const debouncedUpdateStyles = useMemo(() => {
47
- const d = debounce(() => mutableUpdateStyles.current(), debounceMs);
47
+ const d = debounce(() => {
48
+ console.log(" debounce");
49
+ mutableUpdateStyles.current();
50
+ }, debounceMs);
48
51
  return d;
49
52
  }, [debounceMs]);
50
53
  useLayoutEffect(
@@ -55,6 +58,7 @@ const useComputedPositionStyles = (config) => {
55
58
  );
56
59
  useLayoutEffect(() => {
57
60
  if (canCompute) {
61
+ console.log(" useLayoutEffect");
58
62
  mutableUpdateStyles.current();
59
63
  }
60
64
  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
package/dist/esm/useComputedPositionStyles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/useComputedPositionStyles.tsx"],
4
- "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(() => mutableUpdateStyles.current(), debounceMs);\n return d;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [debounceMs]);\n\n // Clean up debounce on unmount\n useLayoutEffect(\n () => () => {\n debouncedUpdateStyles.cancel();\n },\n [debouncedUpdateStyles],\n );\n\n // Recalculate BEFORE paint when dependencies change\n useLayoutEffect(() => {\n if (canCompute) {\n mutableUpdateStyles.current();\n }\n }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n const forceUpdatePosition = useCallback(() => {\n mutableUpdateStyles.current();\n }, []);\n\n // Do not reset coordinates when closing; just hide\n const resetVisibilityOnly = useCallback(() => {\n setFloatingStyles((prev) => ({\n ...prev,\n visibility: 'hidden',\n }));\n }, []);\n\n return useMemo(\n () => ({\n arrowStyles,\n floatingStyles,\n hasComputedOnce,\n updateStyles: forceUpdatePosition,\n debouncedUpdateStyles,\n mutableUpdateStyles,\n resetVisibilityOnly,\n }),\n [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly],\n );\n};\n"],
5
- "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,oBAAoB,QAAQ,GAAG,UAAU;AAClE,WAAO;AAAA,EAET,GAAG,CAAC,UAAU,CAAC;AAGf;AAAA,IACE,MAAM,MAAM;AACV,4BAAsB,OAAO;AAAA,IAC/B;AAAA,IACA,CAAC,qBAAqB;AAAA,EACxB;AAGA,kBAAgB,MAAM;AACpB,QAAI,YAAY;AACd,0BAAoB,QAAQ;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,UAAU,WAAW,0BAA0B,cAAc,aAAa,CAAC;AAEtG,QAAM,sBAAsB,YAAY,MAAM;AAC5C,wBAAoB,QAAQ;AAAA,EAC9B,GAAG,CAAC,CAAC;AAGL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,YAAY;AAAA,IACd,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,aAAa,gBAAgB,iBAAiB,qBAAqB,uBAAuB,mBAAmB;AAAA,EAChH;AACF;",
4
+ "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 console.log(' 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 console.log(' useLayoutEffect');\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"],
5
+ "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,cAAQ,IAAI,WAAW;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,cAAQ,IAAI,kBAAkB;AAC9B,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;",
6
6
  "names": []
7
7
  }
package/dist/esm/utils/computePosition.js CHANGED
@@ -27,6 +27,7 @@ const adjustForFixedParent = (child) => {
27
27
  };
28
28
  const computePosition = (props) => {
29
29
  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal } = props;
30
+ const scrollBarY = window.innerHeight - document.documentElement.clientHeight;
30
31
  const parentOffsets = withoutPortal ? adjustForFixedParent(reference) : {
31
32
  top: 0,
32
33
  left: 0
@@ -57,7 +58,7 @@ const computePosition = (props) => {
57
58
  if (checks.every((check) => {
58
59
  return check;
59
60
  })) {
60
- coords.top = -overflows.top + window.scrollY - parentOffsets.top;
61
+ coords.top = -overflows.top + window.scrollY - parentOffsets.top + scrollBarY;
61
62
  coords.left = -overflows.left + window.scrollX - parentOffsets.left;
62
63
  finalPlacement = currentPlacement;
63
64
  break;
@@ -71,13 +72,9 @@ const computePosition = (props) => {
71
72
  }
72
73
  return {
73
74
  coordsStyle: {
74
- left: 0,
75
+ transform: `translate3d(${Math.round(coords.left ?? 0)}px, ${Math.round(coords.top ?? 0)}px, 0)`,
75
76
  top: 0,
76
- // we use transform -> translate because we know final computed left/top probably "split a pixel" (e.g. 10.005px)
77
- // when we use transform we force the browser to use hardware acceleration
78
- // hardware acceleration is faster and more reliable than the browser's own rounding
79
- // it also helps with css animations and so on
80
- transform: `translate(${coords.left}px, ${coords.top}px)`
77
+ left: 0
81
78
  },
82
79
  finalPlacement,
83
80
  coordsArrow: getArrowOffset(finalPlacement, isVertical)
package/dist/esm/utils/computePosition.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/computePosition.ts"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/utils/detectOverflow.js CHANGED
@@ -21,11 +21,13 @@ function domRectToObject(rect) {
21
21
  const detectOverflow = (referenceRect, floatingRect, placement, customOffset) => {
22
22
  const basePlacement = placement.split("-")[0];
23
23
  const isVertical = ["top", "bottom"].indexOf(basePlacement) >= 0;
24
+ const scrollBarX = window.innerWidth - document.documentElement.clientWidth;
25
+ const scrollBarY = window.innerHeight - document.documentElement.clientHeight;
24
26
  const clippingClientRect = {
25
27
  top: 0,
26
- right: document.documentElement.clientWidth,
27
- bottom: document.documentElement.clientHeight,
28
- left: 0
28
+ left: 0,
29
+ right: document.documentElement.clientWidth + scrollBarX,
30
+ bottom: document.documentElement.clientHeight + scrollBarY
29
31
  };
30
32
  const popperOffsets = computeOffsets(placement, referenceRect, floatingRect);
31
33
  const popperClientRect = rectToClientRect({ ...domRectToObject(floatingRect), ...popperOffsets });
package/dist/esm/utils/detectOverflow.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/detectOverflow.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAO,oBAAoB;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,gBAAgB,eAAe,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;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACGvB,OAAO,oBAAoB;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,gBAAgB,eAAe,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;",
6
6
  "names": []
7
7
  }
package/dist/types/utils/computePosition.d.ts CHANGED
@@ -9,9 +9,9 @@ interface ComputePositionProps {
9
9
  }
10
10
  export declare const computePosition: (props: ComputePositionProps) => {
11
11
  coordsStyle: {
12
- left: number;
13
- top: number;
14
12
  transform: string;
13
+ top: number;
14
+ left: number;
15
15
  };
16
16
  finalPlacement: string;
17
17
  coordsArrow: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-floating-context",
3
- "version": "3.55.0-next.15",
3
+ "version": "3.55.0-next.17",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Popper Hook",
6
6
  "files": [
@@ -36,15 +36,15 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-hooks-headless-tooltip": "3.55.0-next.15",
40
- "@elliemae/ds-props-helpers": "3.55.0-next.15",
41
- "@elliemae/ds-system": "3.55.0-next.15",
42
- "@elliemae/ds-typescript-helpers": "3.55.0-next.15"
39
+ "@elliemae/ds-hooks-headless-tooltip": "3.55.0-next.17",
40
+ "@elliemae/ds-system": "3.55.0-next.17",
41
+ "@elliemae/ds-props-helpers": "3.55.0-next.17",
42
+ "@elliemae/ds-typescript-helpers": "3.55.0-next.17"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@elliemae/pui-cli": "9.0.0-next.65",
46
46
  "jest": "~29.7.0",
47
- "@elliemae/ds-monorepo-devops": "3.55.0-next.15"
47
+ "@elliemae/ds-monorepo-devops": "3.55.0-next.17"
48
48
  },
49
49
  "peerDependencies": {
50
50
  "lodash-es": "^4.17.21",