@elliemae/ds-floating-context 3.70.0-next.7 → 3.70.0-next.70

package/dist/cjs/hooks/useSyntheticEventFromControlledState.js

@@ -0,0 +1,53 @@
+"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 useSyntheticEventFromControlledState_exports = {};
+__export(useSyntheticEventFromControlledState_exports, {
+  useSyntheticEventFromControlledState: () => useSyntheticEventFromControlledState
+});
+module.exports = __toCommonJS(useSyntheticEventFromControlledState_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_useLatestRef = require("./useLatestRef.js");
+const useSyntheticEventFromControlledState = ({
+  controlledValue,
+  onEnter,
+  onExit
+}) => {
+  const onEnterRef = (0, import_useLatestRef.useLatestRef)(onEnter);
+  const onExitRef = (0, import_useLatestRef.useLatestRef)(onExit);
+  const previousValueRef = (0, import_react.useRef)(controlledValue);
+  (0, import_react.useEffect)(() => {
+    const previousValue = previousValueRef.current;
+    previousValueRef.current = controlledValue;
+    if (previousValue === controlledValue) return;
+    if (controlledValue === true) onEnterRef.current?.();
+    else if (controlledValue === false) onExitRef.current?.();
+  }, [controlledValue, onEnterRef, onExitRef]);
+};
+//# sourceMappingURL=useSyntheticEventFromControlledState.js.map

package/dist/cjs/hooks/useSyntheticEventFromControlledState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useSyntheticEventFromControlledState.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useEffect, useRef } from 'react';\nimport { useLatestRef } from './useLatestRef.js';\n\ninterface UseSyntheticEventFromControlledStateParams {\n  /**\n   * The externally-controlled value whose transitions are turned into events. `undefined` means\n   * the value is not being controlled (uncontrolled usage) \u2014 no events are synthesized in that case.\n   */\n  controlledValue: boolean | undefined;\n  /** Fired when `controlledValue` transitions to `true`. Passed inline is fine (latest-ref'd). */\n  onEnter?: () => void;\n  /** Fired when `controlledValue` transitions to `false`. Passed inline is fine (latest-ref'd). */\n  onExit?: () => void;\n}\n\n/**\n * Synthesizes semantic enter/exit events from transitions of an **externally-controlled** value.\n *\n * Why this is a hook (and an effect), not something a caller should hand-roll: when a value is\n * controlled by the consumer, its changes originate *outside* this component \u2014 there is no\n * interaction handler in here to hang a notification on. Reacting to that change and emitting an\n * event is the *sanctioned* `useEffect` use: **synchronizing with an external system**, where the\n * external system is the consumer that owns the controlled state. This is categorically different\n * from the `useEffect` misuse (deriving/coordinating internal state), and it is the reason the\n * emitted callback is a genuine \"for whatever reason the owner changed it\" event rather than a\n * per-interaction one.\n *\n * Guarantees:\n * - Never fires on mount \u2014 only on real transitions after the initial value.\n * - Never fires while uncontrolled (`undefined`); only on explicit `false \u2194 true` edges.\n * - The prev-value bookkeeping is a ref (not state) *on purpose*: it is read/written only inside\n *   the effect (post-commit), never during render, so it carries none of the render-purity hazards\n *   that would make a ref wrong for an in-render transition guard.\n */\nexport const useSyntheticEventFromControlledState = ({\n  controlledValue,\n  onEnter,\n  onExit,\n}: UseSyntheticEventFromControlledStateParams) => {\n  const onEnterRef = useLatestRef(onEnter);\n  const onExitRef = useLatestRef(onExit);\n  const previousValueRef = useRef(controlledValue);\n\n  useEffect(() => {\n    const previousValue = previousValueRef.current;\n    previousValueRef.current = controlledValue;\n    if (previousValue === controlledValue) return;\n    if (controlledValue === true) onEnterRef.current?.();\n    else if (controlledValue === false) onExitRef.current?.();\n  }, [controlledValue, onEnterRef, onExitRef]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAA6B;AAiCtB,MAAM,uCAAuC,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACF,MAAkD;AAChD,QAAM,iBAAa,kCAAa,OAAO;AACvC,QAAM,gBAAY,kCAAa,MAAM;AACrC,QAAM,uBAAmB,qBAAO,eAAe;AAE/C,8BAAU,MAAM;AACd,UAAM,gBAAgB,iBAAiB;AACvC,qBAAiB,UAAU;AAC3B,QAAI,kBAAkB,gBAAiB;AACvC,QAAI,oBAAoB,KAAM,YAAW,UAAU;AAAA,aAC1C,oBAAoB,MAAO,WAAU,UAAU;AAAA,EAC1D,GAAG,CAAC,iBAAiB,YAAY,SAAS,CAAC;AAC7C;",
+  "names": []
+}

package/dist/cjs/package.json

@@ -3,8 +3,5 @@
   "sideEffects": [
     "*.css",
     "*.scss"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+  ]
 }

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

@@ -53,7 +53,7 @@ const DSFloatingWrapperPropTypes = {
   isOpen: import_ds_props_helpers.PropTypes.bool.description("Whether the floating wrapper is open").isRequired,
   floatingStyles: import_ds_props_helpers.PropTypes.object.description("Style for the floating wrapper").isRequired,
   context: import_ds_props_helpers.PropTypes.shape({
-    portalDOMContainer: import_ds_props_helpers.PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
+    portalDOMContainer: import_ds_props_helpers.PropTypes.object.description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
     withoutPortal: import_ds_props_helpers.PropTypes.bool.description("Whether to render the floating wrapper without a portal"),
     animationDuration: import_ds_props_helpers.PropTypes.number.description("Duration of the animation"),
     withoutAnimation: import_ds_props_helpers.PropTypes.bool.description("Whether to render the floating wrapper without animation")

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\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;",
+  "sourcesContent": ["import 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 extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSFloatingWrapperName,\n    typeof DSFloatingWrapperSlots\n  > {\n    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;\n    onAnimationStartTriggered?: () => void;\n  }\n\n  export interface Props\n    extends\n      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\n      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.object\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;ADCvB,8BAKO;AAEP,uBAA8D;AAmDvD,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,OAC3B,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/parts/PopoverArrow.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/PopoverArrow.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT\n  extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFloatingWrapperName, typeof DSFloatingWrapperSlots> {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst OFFSET_FIX_SHADOW_DEFECT = 0.25;\n\nconst arrowDimensionBase13 = arrowWidth / 13;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;\nconst arrowDimensionBase16 = arrowWidth / 16;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;\n\nconst arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;\nconst arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;\n\nconst isTopOrBottom = (placement: string) => placement.startsWith('top') || placement.startsWith('bottom');\n\nconst isLeftOrRight = (placement: string) => placement.startsWith('left') || placement.startsWith('right');\n\nconst StyledArrow = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW,\n})<{ 'data-placement': string }>`\n  line-height: 0;\n  position: absolute;\n  width: ${arrowDimensionBase16}rem;\n  height: ${arrowDimensionBase16}rem;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: rgb(105, 116, 137);\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: rgb(255, 255, 255);\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowPlacementBase16}rem;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowPlacementBase16}rem;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowPlacementBase16}rem;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowPlacementBase16}rem;\n  }\n  margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n  margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    width: ${arrowDimensionBase13}rem;\n    height: ${arrowDimensionBase13}rem;\n\n    &[data-placement^='top'] {\n      bottom: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='bottom'] {\n      top: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='left'] {\n      right: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='right'] {\n      left: -${arrowPlacementBase13}rem;\n    }\n\n    margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n\n    margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n  }\n`;\n\nconst StylePathShadow = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n  const ownerProps = useOwnerProps(rest);\n  const globalAttributes = useGetGlobalAttributes(rest);\n  const xstyledProps = useGetXstyledProps(rest);\n  return (\n    <StyledArrow\n      key=\"popper-arrow\"\n      data-placement={placement}\n      style={style}\n      innerRef={arrowElementRef}\n      data-testid=\"ds-tooltip-arrow\"\n      aria-hidden=\"true\"\n      {...ownerProps}\n      {...globalAttributes}\n      {...xstyledProps}\n    >\n      <svg viewBox=\"0 0 30 30\">\n        <StylePathShadow\n          {...ownerProps}\n          className=\"stroke\"\n          d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n        />\n        <StylePathFill\n          {...ownerProps}\n          className=\"fill\"\n          d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n        />\n      </svg>\n    </StyledArrow>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport { useOwnerProps, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSFloatingWrapperSlots, DSFloatingWrapperName } from '../constants/index.js';\nexport interface PopoverArrowT extends TypescriptHelpersT.PropsForGlobalOnSlots<\n  typeof DSFloatingWrapperName,\n  typeof DSFloatingWrapperSlots\n> {\n  placement: string;\n  style: React.CSSProperties;\n  arrowElementRef?: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst OFFSET_FIX_SHADOW_DEFECT = 0.25;\n\nconst arrowDimensionBase13 = arrowWidth / 13;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE13 = OFFSET_FIX_SHADOW_DEFECT / 13;\nconst arrowDimensionBase16 = arrowWidth / 16;\nconst OFFSET_FIX_SHADOW_DEFECT_BASE16 = OFFSET_FIX_SHADOW_DEFECT / 16;\n\nconst arrowPlacementBase13 = arrowDimensionBase13 - OFFSET_FIX_SHADOW_DEFECT_BASE13;\nconst arrowPlacementBase16 = arrowDimensionBase16 - OFFSET_FIX_SHADOW_DEFECT_BASE16;\n\nconst isTopOrBottom = (placement: string) => placement.startsWith('top') || placement.startsWith('bottom');\n\nconst isLeftOrRight = (placement: string) => placement.startsWith('left') || placement.startsWith('right');\n\nconst StyledArrow = styled('div', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW,\n})<{ 'data-placement': string }>`\n  line-height: 0;\n  position: absolute;\n  width: ${arrowDimensionBase16}rem;\n  height: ${arrowDimensionBase16}rem;\n  pointer-events: none;\n  background-color: transparent;\n  & .stroke {\n    fill: rgb(105, 116, 137);\n    fill-opacity: 0.4;\n  }\n  & .fill {\n    fill: rgb(255, 255, 255);\n  }\n\n  &[data-placement^='top'] {\n    svg {\n      transform: rotateZ(180deg);\n    }\n    bottom: -${arrowPlacementBase16}rem;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='right'] {\n    svg {\n      transform: rotateZ(-90deg);\n    }\n    left: -${arrowPlacementBase16}rem;\n  }\n  &[data-placement^='bottom'] {\n    top: -${arrowPlacementBase16}rem;\n    left: ${(props) => {\n      if (props['data-placement'].endsWith('start')) return `25%`;\n      if (props['data-placement'].endsWith('end')) return `75%`;\n      return '';\n    }};\n  }\n  &[data-placement^='left'] {\n    svg {\n      transform: rotateZ(90deg);\n    }\n    right: -${arrowPlacementBase16}rem;\n  }\n  margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n  margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase16 / 2}rem` : '0')};\n\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    width: ${arrowDimensionBase13}rem;\n    height: ${arrowDimensionBase13}rem;\n\n    &[data-placement^='top'] {\n      bottom: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='bottom'] {\n      top: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='left'] {\n      right: -${arrowPlacementBase13}rem;\n    }\n\n    &[data-placement^='right'] {\n      left: -${arrowPlacementBase13}rem;\n    }\n\n    margin-left: ${(props) => (isTopOrBottom(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n\n    margin-top: ${(props) => (isLeftOrRight(props['data-placement']) ? `-${arrowDimensionBase13 / 2}rem` : '0')};\n  }\n`;\n\nconst StylePathShadow = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_SHADOW,\n})``;\n\nconst StylePathFill = styled('path', {\n  name: DSFloatingWrapperName,\n  slot: DSFloatingWrapperSlots.ARROW_FILL,\n})``;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef, ...rest }: PopoverArrowT): React.ReactElement => {\n  const ownerProps = useOwnerProps(rest);\n  const globalAttributes = useGetGlobalAttributes(rest);\n  const xstyledProps = useGetXstyledProps(rest);\n  return (\n    <StyledArrow\n      key=\"popper-arrow\"\n      data-placement={placement}\n      style={style}\n      innerRef={arrowElementRef}\n      data-testid=\"ds-tooltip-arrow\"\n      aria-hidden=\"true\"\n      {...ownerProps}\n      {...globalAttributes}\n      {...xstyledProps}\n    >\n      <svg viewBox=\"0 0 30 30\">\n        <StylePathShadow\n          {...ownerProps}\n          className=\"stroke\"\n          d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n        C26.7,29,24.6,28.1,23.7,27.1z\"\n        />\n        <StylePathFill\n          {...ownerProps}\n          className=\"fill\"\n          d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n        />\n      </svg>\n    </StyledArrow>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -39,12 +39,14 @@ const defaultProps = {
   animationDuration: 300,
   withoutPortal: false,
   placement: "top",
-  customOffset: [0, 12]
+  customOffset: [0, 12],
+  closeOnEscape: false,
+  returnFocusToReference: false
 };
 const DSFloatingContextPropTypes = {
   withoutPortal: import_ds_props_helpers.PropTypes.bool.description("If true, the tooltip will not be rendered inside a portal.").defaultValue(false),
   withoutAnimation: import_ds_props_helpers.PropTypes.bool.description("If true, the tooltip will not have an animation.").defaultValue(false),
-  portalDOMContainer: import_ds_props_helpers.PropTypes.instanceOf(HTMLElement).description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
+  portalDOMContainer: import_ds_props_helpers.PropTypes.object.description("The DOM element where the tooltip will be rendered.").defaultValue('the first "main" landmark available in the document or the body if no "main" is found'),
   animationDuration: import_ds_props_helpers.PropTypes.number.description("The duration of the animation in milliseconds.").defaultValue(300),
   placement: import_ds_props_helpers.PropTypes.oneOf([
     "top-start",
@@ -75,10 +77,26 @@ const DSFloatingContextPropTypes = {
     import_ds_props_helpers.PropTypes.tuple([import_ds_props_helpers.PropTypes.oneOf(["left"])]),
     import_ds_props_helpers.PropTypes.tuple([import_ds_props_helpers.PropTypes.oneOf(["left-start"])])
   ]).description("The order of the placement preference."),
-  onOpen: import_ds_props_helpers.PropTypes.func.description("Callback when the tooltip is opened."),
-  onClose: import_ds_props_helpers.PropTypes.func.description("Callback when the tooltip is closed."),
+  onOpen: import_ds_props_helpers.PropTypes.func.description(
+    "Called on every open transition (interaction or controlled-flip); receives arguments with a `reason`."
+  ),
+  onClose: import_ds_props_helpers.PropTypes.func.description(
+    "Called on every close transition (interaction or controlled-flip); receives arguments with a `reason`."
+  ),
   externallyControlledIsOpen: import_ds_props_helpers.PropTypes.bool.description(
     "If true, the context open/close state will be controlled externally."
-  )
+  ),
+  externalReferenceElement: import_ds_props_helpers.PropTypes.object.description(
+    "Pre-resolved reference element. When provided, used as the source of truth for positioning, avoiding the need for a follow-up refs.setReference() effect and the visibility:hidden race on open."
+  ),
+  boundaryElement: import_ds_props_helpers.PropTypes.object.description(
+    "Opt-in extra boundary the floating element should stay visually contained within, in addition to the viewport, when portaled. Not the same as withoutPortal: that clips unconditionally via native CSS overflow (cutting off oversized content); this only changes the clipping math and is ignored per-axis when the floating content does not fit that axis of the boundary, so oversized content still escapes fully into the page. Also auto-hides/shows the floating element (visually only) as the reference scrolls in and out of this boundary."
+  ),
+  onClickOutside: import_ds_props_helpers.PropTypes.func.description(
+    "Called on mousedown/touchstart outside both the floating element and the reference element while open."
+  ),
+  closeOnEscape: import_ds_props_helpers.PropTypes.bool.description("If true, listens for Escape on the floating element and calls onEscape (or onClose).").defaultValue(false),
+  onEscape: import_ds_props_helpers.PropTypes.func.description("Called when Escape is pressed while focus is within the floating element."),
+  returnFocusToReference: import_ds_props_helpers.PropTypes.bool.description("If true, returns focus to the reference element after Escape-close.").defaultValue(false)
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n  export interface DefaultProps {\n    withoutPortal: boolean;\n    withoutAnimation: boolean;\n    portalDOMContainer?: HTMLElement;\n    animationDuration: number;\n    placement: PopperPlacementsT;\n    customOffset: [number, number];\n  }\n\n  export interface OptionalProps {\n    placementOrderPreference?: PopperPlacementsT[];\n    onOpen?: () => void;\n    onClose?: () => void;\n    externallyControlledIsOpen?: boolean;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps {}\n\n  export type PopperPlacementsT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n}\n\nexport const defaultProps: DSHookFloatingContextT.DefaultProps = {\n  withoutAnimation: false,\n  animationDuration: 300,\n  withoutPortal: false,\n  placement: 'top',\n  customOffset: [0, 12],\n};\n\nexport const DSFloatingContextPropTypes: DSPropTypesSchema<DSHookFloatingContextT.Props> = {\n  withoutPortal: PropTypes.bool\n    .description('If true, the tooltip will not be rendered inside a portal.')\n    .defaultValue(false),\n  withoutAnimation: PropTypes.bool.description('If true, the tooltip will not have an animation.').defaultValue(false),\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  animationDuration: PropTypes.number.description('The duration of the animation in milliseconds.').defaultValue(300),\n  placement: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('The placement of the tooltip.')\n    .defaultValue('top'),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('The custom offset of the tooltip.')\n    .defaultValue([12, 12]),\n  placementOrderPreference: PropTypes.oneOfType([\n    PropTypes.tuple([PropTypes.oneOf(['top-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-start'])]),\n  ]).description('The order of the placement preference.'),\n  onOpen: PropTypes.func.description('Callback when the tooltip is opened.'),\n  onClose: PropTypes.func.description('Callback when the tooltip is closed.'),\n  externallyControlledIsOpen: PropTypes.bool.description(\n    'If true, the context open/close state will be controlled externally.',\n  ),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAA0B;AAoCnB,MAAM,eAAoD;AAAA,EAC/D,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,cAAc,CAAC,GAAG,EAAE;AACtB;AAEO,MAAM,6BAA8E;AAAA,EACzF,eAAe,kCAAU,KACtB,YAAY,4DAA4D,EACxE,aAAa,KAAK;AAAA,EACrB,kBAAkB,kCAAU,KAAK,YAAY,kDAAkD,EAAE,aAAa,KAAK;AAAA,EACnH,oBAAoB,kCAAU,WAAW,WAAW,EACjD,YAAY,qDAAqD,EACjE,aAAa,uFAAuF;AAAA,EACvG,mBAAmB,kCAAU,OAAO,YAAY,gDAAgD,EAAE,aAAa,GAAG;AAAA,EAClH,WAAW,kCAAU,MAAM;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC,EACE,YAAY,+BAA+B,EAC3C,aAAa,KAAK;AAAA,EACrB,cAAc,kCAAU,QAAQ,kCAAU,MAAM,EAC7C,YAAY,mCAAmC,EAC/C,aAAa,CAAC,IAAI,EAAE,CAAC;AAAA,EACxB,0BAA0B,kCAAU,UAAU;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAAA,IAC1C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;AAAA,IAC9C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;AAAA,IAClD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAAA,IAC5C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AAAA,IAChD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,IACjD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,IAC7C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC;AAAA,IACnD,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;AAAA,IAC/C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,IAC3C,kCAAU,MAAM,CAAC,kCAAU,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;AAAA,EACnD,CAAC,EAAE,YAAY,wCAAwC;AAAA,EACvD,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EACzE,SAAS,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC1E,4BAA4B,kCAAU,KAAK;AAAA,IACzC;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type React from 'react';\nimport type { DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes } from '@elliemae/ds-props-helpers';\nexport declare namespace DSHookFloatingContextT {\n  export interface DefaultProps {\n    withoutPortal: boolean;\n    withoutAnimation: boolean;\n    portalDOMContainer?: HTMLElement;\n    animationDuration: number;\n    placement: PopperPlacementsT;\n    customOffset: [number, number];\n    closeOnEscape: boolean;\n    returnFocusToReference: boolean;\n  }\n\n  /**\n   * Describes why onOpen/onClose fired.\n   * - `interaction`: driven by this hook's own interaction handling (focus/hover/escape, via\n   *   ds-hooks-headless-tooltip). Fires synchronously in the event catch phase and carries the\n   *   originating DOM event when there is one (absent for imperative show/hide). Fires for\n   *   controlled contexts too \u2014 it is the pre-flip, event-carrying signal a controlled consumer can\n   *   choose to act on.\n   * - `controlled-flip`: driven by the consumer flipping `externallyControlledIsOpen`. Fires from a\n   *   post-commit effect \u2014 the change originates outside this hook, so there is no event to carry.\n   *\n   * A controlled consumer may see BOTH for one logical transition (the pre-flip interaction, then\n   * the post-flip controlled-flip when they echo it into the prop); discriminate on `reason` (and\n   * `isControlled`) to pick which one your logic cares about. That choice is the consumer's \u2014 this\n   * hook does not decide it for them.\n   */\n  export type OpenChange =\n    | {\n        reason: 'interaction';\n        event?: React.FocusEvent | React.MouseEvent | React.KeyboardEvent | KeyboardEvent;\n        isControlled: boolean;\n      }\n    | {\n        reason: 'controlled-flip';\n        isControlled: true;\n      };\n\n  export interface OptionalProps {\n    placementOrderPreference?: PopperPlacementsT[];\n    /**\n     * Called on every open transition \u2014 both interaction-driven (pre-flip, with `event`) and\n     * controlled-flip-driven (post-flip). Discriminate on the `OpenChange` argument's `reason`.\n     */\n    onOpen?: (info: OpenChange) => void;\n    /**\n     * Called on every close transition \u2014 both interaction-driven and controlled-flip-driven.\n     * Discriminate on `reason`. Note a scoped Escape close routes to `onEscape` instead of `onClose`\n     * (see `onEscape`).\n     */\n    onClose?: (info: OpenChange) => void;\n    externallyControlledIsOpen?: boolean;\n    /**\n     * Pre-resolved reference element. When provided, the hook uses this as the\n     * source of truth for positioning and ignores its internal reference state.\n     * Eliminates the need for a follow-up `refs.setReference(...)` effect and\n     * removes the visibility:hidden race that breaks programmatic focus on open.\n     */\n    externalReferenceElement?: Element | null;\n    /**\n     * Opt-in extra boundary \u2014 e.g. a scrollable ancestor of the reference \u2014 the floating\n     * element should stay visually contained within, in addition to the viewport. Only\n     * applied when portaled (withoutPortal: false, the default).\n     *\n     * Not the same as `withoutPortal: true`, and not a substitute for it: withoutPortal already\n     * derives a clipping ancestor automatically, but does so by rendering the floating element\n     * as a literal DOM descendant of it \u2014 so the browser's own CSS overflow clipping applies\n     * unconditionally, cutting off any floating content taller/wider than that ancestor, with no\n     * way for position math to prevent it. boundaryElement keeps the portal, so oversized\n     * content (e.g. a full calendar popover inside a short container) still escapes fully into\n     * the page, unclipped \u2014 it only changes the clipping *math* used for shift/flip, ignored\n     * per-axis when the floating content doesn't fit that axis of the boundary, falling back to\n     * the plain viewport for that axis instead of forcing an impossible position.\n     *\n     * Also hides the floating element (opacity/pointer-events only \u2014 isOpen state is untouched)\n     * whenever the reference scrolls fully out of this boundary's visible area, and shows it\n     * again automatically once the reference is back in view.\n     */\n    boundaryElement?: Element | null;\n    /**\n     * Called when the user clicks/taps outside both the floating element and\n     * the reference element while the floating is open.\n     */\n    onClickOutside?: (event: MouseEvent | TouchEvent) => void;\n    /**\n     * Called when Escape is pressed while the floating element is open and focus is within the\n     * floating element or the reference element. Only fires when `closeOnEscape` is true.\n     * Receives the native KeyboardEvent \u2014 this is delivered via a document-level listener, not a\n     * JSX handler, so there is no React SyntheticEvent to hand back.\n     */\n    onEscape?: (event: KeyboardEvent) => void;\n  }\n  export interface Props extends Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends DefaultProps, OptionalProps {}\n\n  export type PopperPlacementsT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n}\n\nexport const defaultProps: DSHookFloatingContextT.DefaultProps = {\n  withoutAnimation: false,\n  animationDuration: 300,\n  withoutPortal: false,\n  placement: 'top',\n  customOffset: [0, 12],\n  closeOnEscape: false,\n  returnFocusToReference: false,\n};\n\nexport const DSFloatingContextPropTypes: DSPropTypesSchema<DSHookFloatingContextT.Props> = {\n  withoutPortal: PropTypes.bool\n    .description('If true, the tooltip will not be rendered inside a portal.')\n    .defaultValue(false),\n  withoutAnimation: PropTypes.bool.description('If true, the tooltip will not have an animation.').defaultValue(false),\n  portalDOMContainer: PropTypes.object\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  animationDuration: PropTypes.number.description('The duration of the animation in milliseconds.').defaultValue(300),\n  placement: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('The placement of the tooltip.')\n    .defaultValue('top'),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('The custom offset of the tooltip.')\n    .defaultValue([12, 12]),\n  placementOrderPreference: PropTypes.oneOfType([\n    PropTypes.tuple([PropTypes.oneOf(['top-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top'])]),\n    PropTypes.tuple([PropTypes.oneOf(['top-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right'])]),\n    PropTypes.tuple([PropTypes.oneOf(['right-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom'])]),\n    PropTypes.tuple([PropTypes.oneOf(['bottom-start'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-end'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left'])]),\n    PropTypes.tuple([PropTypes.oneOf(['left-start'])]),\n  ]).description('The order of the placement preference.'),\n  onOpen: PropTypes.func.description(\n    'Called on every open transition (interaction or controlled-flip); receives arguments with a `reason`.',\n  ),\n  onClose: PropTypes.func.description(\n    'Called on every close transition (interaction or controlled-flip); receives arguments with a `reason`.',\n  ),\n  externallyControlledIsOpen: PropTypes.bool.description(\n    'If true, the context open/close state will be controlled externally.',\n  ),\n  externalReferenceElement: PropTypes.object.description(\n    'Pre-resolved reference element. When provided, used as the source of truth for positioning, ' +\n      'avoiding the need for a follow-up refs.setReference() effect and the visibility:hidden race on open.',\n  ),\n  boundaryElement: PropTypes.object.description(\n    'Opt-in extra boundary the floating element should stay visually contained within, in addition to the ' +\n      'viewport, when portaled. Not the same as withoutPortal: that clips unconditionally via native CSS ' +\n      'overflow (cutting off oversized content); this only changes the clipping math and is ignored per-axis ' +\n      'when the floating content does not fit that axis of the boundary, so oversized content still escapes ' +\n      'fully into the page. Also auto-hides/shows the floating element (visually only) as the reference ' +\n      'scrolls in and out of this boundary.',\n  ),\n  onClickOutside: PropTypes.func.description(\n    'Called on mousedown/touchstart outside both the floating element and the reference element while open.',\n  ),\n  closeOnEscape: PropTypes.bool\n    .description('If true, listens for Escape on the floating element and calls onEscape (or onClose).')\n    .defaultValue(false),\n  onEscape: PropTypes.func.description('Called when Escape is pressed while focus is within the floating element.'),\n  returnFocusToReference: PropTypes.bool\n    .description('If true, returns focus to the reference element after Escape-close.')\n    .defaultValue(false),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -25,7 +25,9 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import__ = require("../index.js");
-const testOptionalProps = {};
+const testOptionalProps = {
+  boundaryElement: document.body
+};
 const testPartialDefaults = {
   withoutAnimation: false,
   withoutPortal: false,
@@ -37,7 +39,9 @@ const testCompleteDefaults = {
   animationDuration: 300,
   placement: "top",
   customOffset: [10, 10],
-  portalDOMContainer: document.body
+  portalDOMContainer: document.body,
+  closeOnEscape: false,
+  returnFocusToReference: false
 };
 const testInternalProps = {
   ...testOptionalProps,
@@ -54,6 +58,8 @@ const testExplicitDefinition = {
   placement: "top",
   customOffset: [10, 10],
   portalDOMContainer: document.body,
+  closeOnEscape: false,
+  returnFocusToReference: false,
   ...testOptionalProps
 };
 const testInferedTypeCompatibility = {

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

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

package/dist/cjs/useComputedPositionStyles.js

@@ -37,43 +37,54 @@ var import_lodash_es = require("lodash-es");
 var import_computePosition = require("./utils/computePosition.js");
 const useComputedPositionStyles = (config) => {
   const {
-    reference,
-    floating,
+    triggerElementReference,
+    floatingWrapperNode,
     placement,
     placementOrderPreference,
     customOffset,
     withoutPortal,
-    preventComputing = false,
+    boundaryElement,
+    isClose = false,
     debounceMs = 150
   } = config;
   const [arrowStyles, setArrowStyles] = (0, import_react.useState)({ style: { left: 0 }, placement: "top" });
   const [floatingStyles, setFloatingStyles] = (0, import_react.useState)({
     position: "absolute",
     zIndex: 3e3,
-    visibility: "hidden",
+    opacity: 0,
+    pointerEvents: "none",
     willChange: "transform"
   });
   const [hasComputedOnce, setHasComputedOnce] = (0, import_react.useState)(false);
-  const canCompute = reference !== null && floating !== null && !preventComputing;
+  const canCompute = triggerElementReference !== null && floatingWrapperNode !== null && !isClose;
   const updateStyles = (0, import_react.useCallback)(() => {
     if (!canCompute) return;
     const { coordsStyle, finalPlacement, coordsArrow } = (0, import_computePosition.computePosition)({
-      reference,
-      floating,
+      triggerElementReference,
+      floatingWrapperNode,
       placement,
       placementOrderPreference,
       customOffset,
-      withoutPortal
+      withoutPortal,
+      boundaryElement
+    });
+    const { transform, top, left } = coordsStyle;
+    setFloatingStyles((prev) => {
+      if (prev.transform === transform) return prev;
+      return { position: "absolute", zIndex: 3e3, ...prev, transform, top, left };
     });
-    setFloatingStyles((prev) => ({
-      position: "absolute",
-      zIndex: 3e3,
-      ...prev,
-      ...coordsStyle
-    }));
     setArrowStyles({ style: coordsArrow, placement: finalPlacement });
     setHasComputedOnce(true);
-  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
+  }, [
+    canCompute,
+    triggerElementReference,
+    floatingWrapperNode,
+    placement,
+    placementOrderPreference,
+    customOffset,
+    withoutPortal,
+    boundaryElement
+  ]);
   const mutableUpdateStyles = (0, import_react.useRef)(updateStyles);
   mutableUpdateStyles.current = updateStyles;
   const debouncedUpdateStyles = (0, import_react.useMemo)(() => {
@@ -82,6 +93,8 @@ const useComputedPositionStyles = (config) => {
     }, debounceMs);
     return d;
   }, [debounceMs]);
+  const mutableDebouncedStyles = (0, import_react.useRef)(debouncedUpdateStyles);
+  mutableDebouncedStyles.current = debouncedUpdateStyles;
   (0, import_react.useLayoutEffect)(
     () => () => {
       debouncedUpdateStyles.cancel();
@@ -92,14 +105,24 @@ const useComputedPositionStyles = (config) => {
     if (canCompute) {
       mutableUpdateStyles.current();
     }
-  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);
+  }, [
+    canCompute,
+    triggerElementReference,
+    floatingWrapperNode,
+    placement,
+    placementOrderPreference,
+    customOffset,
+    withoutPortal,
+    boundaryElement
+  ]);
   const forceUpdatePosition = (0, import_react.useCallback)(() => {
     mutableUpdateStyles.current();
   }, []);
   const resetVisibilityOnly = (0, import_react.useCallback)(() => {
     setFloatingStyles((prev) => ({
       ...prev,
-      visibility: "hidden"
+      opacity: 0,
+      pointerEvents: "none"
     }));
   }, []);
   return (0, import_react.useMemo)(
@@ -109,7 +132,7 @@ const useComputedPositionStyles = (config) => {
       hasComputedOnce,
       updateStyles: forceUpdatePosition,
       debouncedUpdateStyles,
-      mutableUpdateStyles,
+      mutableUpdateStyles: mutableDebouncedStyles,
       resetVisibilityOnly
     }),
     [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly]

package/dist/cjs/useComputedPositionStyles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useComputedPositionStyles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "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      mutableUpdateStyles.current();\n    }, debounceMs);\n    return d;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debounceMs]);\n\n  // Clean up debounce on unmount\n  useLayoutEffect(\n    () => () => {\n      debouncedUpdateStyles.cancel();\n    },\n    [debouncedUpdateStyles],\n  );\n\n  // Recalculate BEFORE paint when dependencies change\n  useLayoutEffect(() => {\n    if (canCompute) {\n      mutableUpdateStyles.current();\n    }\n  }, [canCompute, reference, floating, placement, placementOrderPreference, customOffset, withoutPortal]);\n\n  const forceUpdatePosition = useCallback(() => {\n    mutableUpdateStyles.current();\n  }, []);\n\n  // Do not reset coordinates when closing; just hide\n  const resetVisibilityOnly = useCallback(() => {\n    setFloatingStyles((prev) => ({\n      ...prev,\n      visibility: 'hidden',\n    }));\n  }, []);\n\n  return useMemo(\n    () => ({\n      arrowStyles,\n      floatingStyles,\n      hasComputedOnce,\n      updateStyles: forceUpdatePosition,\n      debouncedUpdateStyles,\n      mutableUpdateStyles,\n      resetVisibilityOnly,\n    }),\n    [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwE;AACxE,uBAAyB;AAEzB,6BAAgC;AAiBzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,aAAa;AAAA,EACf,IAAI;AAEJ,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAGtG,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,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,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,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;",
+  "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  isClose?: boolean;\n  triggerElementReference: Element | null;\n  floatingWrapperNode: HTMLElement | null;\n  placement: DSHookFloatingContextT.PopperPlacementsT;\n  placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n  customOffset: [number, number];\n  withoutPortal: boolean;\n  /** Opt-in extra boundary the floating element should stay visually contained within, in\n   * addition to the viewport, when portaled. See computePosition's boundaryElement doc. */\n  boundaryElement?: Element | null;\n  /** Debounce ms for scroll/resize/observer events */\n  debounceMs?: number;\n};\n\nexport const useComputedPositionStyles = (config: UseComputedPositionStylesT) => {\n  const {\n    triggerElementReference,\n    floatingWrapperNode,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n    boundaryElement,\n    isClose = false,\n    debounceMs = 150,\n  } = config;\n\n  const [arrowStyles, setArrowStyles] = useState<PopoverArrowT>({ style: { left: 0 }, placement: 'top' });\n\n  // Initial state: invisible (opacity:0) but FOCUSABLE.\n  // We intentionally use opacity instead of visibility:hidden \u2014 `visibility:hidden` blocks\n  // programmatic focus on descendants (including React's `autoFocus` attribute on inputs),\n  // which causes a race on first-open: the floating content's autoFocus fires before the\n  // position-computation useLayoutEffect can flip visibility to `visible`, so the focus\n  // silently no-ops. Opacity:0 keeps the element invisible while letting `.focus()` work.\n  // pointer-events:none prevents accidental clicks on the still-unpositioned (0,0) area.\n  const [floatingStyles, setFloatingStyles] = useState<CSSProperties>({\n    position: 'absolute',\n    zIndex: 3000,\n    opacity: 0,\n    pointerEvents: 'none',\n    willChange: 'transform',\n  });\n\n  const [hasComputedOnce, setHasComputedOnce] = useState(false);\n\n  const canCompute = triggerElementReference !== null && floatingWrapperNode !== null && !isClose;\n\n  const updateStyles = useCallback(() => {\n    if (!canCompute) return;\n\n    const { coordsStyle, finalPlacement, coordsArrow } = computePosition({\n      triggerElementReference,\n      floatingWrapperNode,\n      placement,\n      placementOrderPreference,\n      customOffset,\n      withoutPortal,\n      boundaryElement,\n    });\n    // INTENTIONAL explicit destructure \u2014 do NOT replace with `...coordsStyle`.\n    //\n    // PUI-18470 is a ghost bug: an infinite ResizeObserver \u2192 setState \u2192 re-render loop\n    // that only triggers at specific viewport pixel combinations (\"magic pixel\") and is\n    // nearly impossible to reproduce consistently across machines. It took a synthetic\n    // Playwright ResizeObserver-intercept test to surface it at all.\n    //\n    // Part of the fix is the bail-out below (`prev.transform === transform`): if the\n    // computed position hasn't changed we return the same state reference, preventing a\n    // re-render and breaking the loop. That bail-out only works if we know exactly which\n    // properties coordsStyle contributes. Spreading `...coordsStyle` hides that contract:\n    // if computePosition ever extends coordsStyle with a new property, the bail-out\n    // silently becomes incomplete and the loop can re-emerge with no obvious cause.\n    //\n    // Keeping the destructure explicit forces any future change to computePosition's\n    // coordsStyle contract to be a conscious, visible decision here \u2014 not a silent pass-through.\n    const { transform, top, left } = coordsStyle;\n\n    // Do not touch visibility here; it is managed outside depending on open/hasComputedOnce\n    setFloatingStyles((prev) => {\n      if (prev.transform === transform) return prev;\n      return { position: 'absolute', zIndex: 3000, ...prev, transform, top, left };\n    });\n    setArrowStyles({ style: coordsArrow, placement: finalPlacement });\n    setHasComputedOnce(true);\n  }, [\n    canCompute,\n    triggerElementReference,\n    floatingWrapperNode,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n    boundaryElement,\n  ]);\n\n  // Store latest update function in a ref to keep debounced stable\n  const mutableUpdateStyles = useRef(updateStyles);\n  mutableUpdateStyles.current = updateStyles;\n\n  const debouncedUpdateStyles = useMemo(() => {\n    const d = debounce(() => {\n      mutableUpdateStyles.current();\n    }, debounceMs);\n    return d;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debounceMs]);\n\n  const mutableDebouncedStyles = useRef(debouncedUpdateStyles);\n  mutableDebouncedStyles.current = debouncedUpdateStyles;\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  }, [\n    canCompute,\n    triggerElementReference,\n    floatingWrapperNode,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n    boundaryElement,\n  ]);\n\n  const forceUpdatePosition = useCallback(() => {\n    mutableUpdateStyles.current();\n  }, []);\n\n  // Do not reset coordinates when closing; just hide via opacity (keeps element focusable\n  // if anything inside needs to remain focusable during animations).\n  const resetVisibilityOnly = useCallback(() => {\n    setFloatingStyles((prev) => ({\n      ...prev,\n      opacity: 0,\n      pointerEvents: 'none',\n    }));\n  }, []);\n\n  return useMemo(\n    () => ({\n      arrowStyles,\n      floatingStyles,\n      hasComputedOnce,\n      updateStyles: forceUpdatePosition,\n      debouncedUpdateStyles,\n      mutableUpdateStyles: mutableDebouncedStyles,\n      resetVisibilityOnly,\n    }),\n    [arrowStyles, floatingStyles, hasComputedOnce, forceUpdatePosition, debouncedUpdateStyles, resetVisibilityOnly],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwE;AACxE,uBAAyB;AAEzB,6BAAgC;AAoBzB,MAAM,4BAA4B,CAAC,WAAuC;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,aAAa;AAAA,EACf,IAAI;AAEJ,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,MAAM,CAAC;AAStG,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB;AAAA,IAClE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,EACd,CAAC;AAED,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAE5D,QAAM,aAAa,4BAA4B,QAAQ,wBAAwB,QAAQ,CAAC;AAExF,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,MACA;AAAA,IACF,CAAC;AAiBD,UAAM,EAAE,WAAW,KAAK,KAAK,IAAI;AAGjC,sBAAkB,CAAC,SAAS;AAC1B,UAAI,KAAK,cAAc,UAAW,QAAO;AACzC,aAAO,EAAE,UAAU,YAAY,QAAQ,KAAM,GAAG,MAAM,WAAW,KAAK,KAAK;AAAA,IAC7E,CAAC;AACD,mBAAe,EAAE,OAAO,aAAa,WAAW,eAAe,CAAC;AAChE,uBAAmB,IAAI;AAAA,EACzB,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,0BAAsB,qBAAO,YAAY;AAC/C,sBAAoB,UAAU;AAE9B,QAAM,4BAAwB,sBAAQ,MAAM;AAC1C,UAAM,QAAI,2BAAS,MAAM;AACvB,0BAAoB,QAAQ;AAAA,IAC9B,GAAG,UAAU;AACb,WAAO;AAAA,EAET,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,6BAAyB,qBAAO,qBAAqB;AAC3D,yBAAuB,UAAU;AAGjC;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;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,wBAAoB,QAAQ;AAAA,EAC9B,GAAG,CAAC,CAAC;AAIL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,sBAAkB,CAAC,UAAU;AAAA,MAC3B,GAAG;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,IACjB,EAAE;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,aAAa,gBAAgB,iBAAiB,qBAAqB,uBAAuB,mBAAmB;AAAA,EAChH;AACF;",
   "names": []
 }

package/dist/cjs/utils/computePosition.js

@@ -37,16 +37,32 @@ var import_getArrowOffset = require("./getArrowOffset.js");
 var import_detectOverflow = require("./detectOverflow.js");
 var import_floatingPositioning = require("./floatingPositioning.js");
 const computePosition = (props) => {
-  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal } = props;
-  const parentOffsets = withoutPortal ? (0, import_floatingPositioning.adjustForFixedParent)(reference) : { top: 0, left: 0 };
-  const referenceRect = reference.getBoundingClientRect();
-  const floatingRect = floating.getBoundingClientRect();
+  const {
+    triggerElementReference,
+    floatingWrapperNode,
+    placement,
+    placementOrderPreference,
+    customOffset,
+    withoutPortal,
+    boundaryElement
+  } = props;
+  const parentOffsets = withoutPortal ? (0, import_floatingPositioning.adjustForFixedParent)(triggerElementReference) : { top: 0, left: 0 };
+  const referenceRect = triggerElementReference.getBoundingClientRect();
+  const floatingRect = floatingWrapperNode.getBoundingClientRect();
   const fallbackPlacements = placementOrderPreference || (0, import_getExpandedFallbackPlacements.getExpandedFallbackPlacements)(placement);
   const placements = (0, import_floatingPositioning.expandWithVariations)(
     [placement].concat(fallbackPlacements)
   );
-  const clippingParent = withoutPortal ? (0, import_floatingPositioning.getClippingParent)(reference) : null;
-  const clippingRect = clippingParent ? clippingParent.getBoundingClientRect() : (0, import_floatingPositioning.getViewportRect)();
+  const clippingParent = withoutPortal ? (0, import_floatingPositioning.getClippingParent)(triggerElementReference) : null;
+  const viewportRect = (0, import_floatingPositioning.getViewportRect)();
+  let clippingRect;
+  if (clippingParent) {
+    clippingRect = clippingParent.getBoundingClientRect();
+  } else if (boundaryElement) {
+    clippingRect = (0, import_floatingPositioning.getBoundaryConstrainedRect)(viewportRect, boundaryElement.getBoundingClientRect(), floatingRect);
+  } else {
+    clippingRect = viewportRect;
+  }
   let bestPlacement = placement;
   let bestOverflows = null;
   let bestScore = { total: Number.POSITIVE_INFINITY, maxSide: Number.POSITIVE_INFINITY };
@@ -71,10 +87,10 @@ const computePosition = (props) => {
   let x = -overflows.left - parentOffsets.left;
   let y = -overflows.top - parentOffsets.top;
   if (!withoutPortal) {
-    x += window.scrollX;
-    y += window.scrollY;
+    x += window.scrollX + clippingRect.left;
+    y += window.scrollY + clippingRect.top;
   } else {
-    const op = (0, import_floatingPositioning.getOffsetParentData)(floating);
+    const op = (0, import_floatingPositioning.getOffsetParentData)(floatingWrapperNode);
     x = x + clippingRect.left - op.left + op.scrollLeft;
     y = y + clippingRect.top - op.top + op.scrollTop;
   }
@@ -87,7 +103,7 @@ const computePosition = (props) => {
     y,
     withoutPortal,
     parentOffsets,
-    floatingEl: floating,
+    floatingEl: floatingWrapperNode,
     arrowPadding: 12
   });
   return {

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 max-lines */\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 { getArrowOffsetDynamic } from './getArrowOffset.js';\nimport { detectOverflow } from './detectOverflow.js';\nimport {\n  applyShift,\n  adjustForFixedParent,\n  expandWithVariations,\n  fits,\n  getClippingParent,\n  getOverflowScore,\n  getOffsetParentData,\n  getViewportRect,\n  type RectLike,\n  type OverflowOffsets,\n} from './floatingPositioning.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\nexport const computePosition = (props: ComputePositionProps) => {\n  const { reference, floating, placement, placementOrderPreference, customOffset, withoutPortal } = props;\n\n  // When WITHOUT portal: only apply fixed-parent offsets (absolute parents scroll and must NOT be treated as fixed)\n  const parentOffsets = withoutPortal ? adjustForFixedParent(reference) : { top: 0, left: 0 };\n\n  const referenceRect = reference.getBoundingClientRect();\n  const floatingRect = floating.getBoundingClientRect();\n\n  const fallbackPlacements = placementOrderPreference || getExpandedFallbackPlacements(placement);\n\n  const placements = expandWithVariations(\n    [placement].concat(fallbackPlacements as DSHookFloatingContextT.PopperPlacementsT[]),\n  );\n\n  // Boundary selection:\n  // - Portal => viewport (inset by body padding for Storybook)\n  // - No portal => nearest clipping/scroll container (fallback viewport rect)\n  const clippingParent = withoutPortal ? getClippingParent(reference) : null;\n  const clippingRect: RectLike = clippingParent ? clippingParent.getBoundingClientRect() : getViewportRect();\n\n  // Best-fit selection:\n  // 1) choose first placement that fully fits\n  // 2) otherwise choose placement with smallest max overflow, tie-break by total overflow\n  let bestPlacement = placement;\n  let bestOverflows: OverflowOffsets | null = null;\n  let bestScore = { total: Number.POSITIVE_INFINITY, maxSide: Number.POSITIVE_INFINITY };\n\n  for (let i = 0; i < placements.length; i += 1) {\n    const currentPlacement = placements[i];\n\n    const overflows = detectOverflow(referenceRect, floatingRect, currentPlacement, customOffset, clippingRect);\n\n    if (fits(overflows)) {\n      bestPlacement = currentPlacement;\n      bestOverflows = overflows;\n      break;\n    }\n\n    const score = getOverflowScore(overflows);\n\n    const isBetter =\n      score.maxSide < bestScore.maxSide || (score.maxSide === bestScore.maxSide && score.total < bestScore.total);\n\n    if (isBetter) {\n      bestPlacement = currentPlacement;\n      bestOverflows = overflows;\n      bestScore = score;\n    }\n  }\n\n  const finalPlacement = bestPlacement;\n\n  const overflows =\n    bestOverflows ?? detectOverflow(referenceRect, floatingRect, finalPlacement, customOffset, clippingRect);\n\n  // Convert overflow -> coordinates.\n  // detectOverflow uses viewport/clipping-rect coordinates.\n  //\n  // - If tooltip is rendered IN A PORTAL (withoutPortal === false) and is positioned with `position: absolute`,\n  //   convert viewport coords to page coords by adding window.scrollX/Y.\n  //\n  // - If tooltip is rendered WITHOUT portal, convert viewport coords to offsetParent coords\n  //   (subtract offsetParent rect, add its scroll).\n  let x = -overflows.left - parentOffsets.left;\n  let y = -overflows.top - parentOffsets.top;\n\n  if (!withoutPortal) {\n    x += window.scrollX;\n    y += window.scrollY;\n  } else {\n    // clippingRect.top/left may be non-zero (e.g. a scroll container below the viewport top).\n    // The overflow values already subtracted it; add it back so we convert pure viewport coords\n    // to offset-parent-relative coords: viewportCoord - offsetParent.top + offsetParent.scrollTop\n    const op = getOffsetParentData(floating);\n    x = x + clippingRect.left - op.left + op.scrollLeft;\n    y = y + clippingRect.top - op.top + op.scrollTop;\n  }\n\n  // Always shift back inside boundary\n  ({ x, y } = applyShift(x, y, overflows));\n\n  const coordsArrow = getArrowOffsetDynamic({\n    placement: finalPlacement,\n    referenceRect,\n    floatingRect,\n    x,\n    y,\n    withoutPortal,\n    parentOffsets,\n    floatingEl: floating,\n    arrowPadding: 12,\n  });\n\n  return {\n    coordsStyle: {\n      transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n      top: 0,\n      left: 0,\n    },\n    finalPlacement,\n    coordsArrow,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSvB,2CAA8C;AAC9C,4BAAsC;AACtC,4BAA+B;AAC/B,iCAWO;AAWA,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM,EAAE,WAAW,UAAU,WAAW,0BAA0B,cAAc,cAAc,IAAI;AAGlG,QAAM,gBAAgB,oBAAgB,iDAAqB,SAAS,IAAI,EAAE,KAAK,GAAG,MAAM,EAAE;AAE1F,QAAM,gBAAgB,UAAU,sBAAsB;AACtD,QAAM,eAAe,SAAS,sBAAsB;AAEpD,QAAM,qBAAqB,gCAA4B,oEAA8B,SAAS;AAE9F,QAAM,iBAAa;AAAA,IACjB,CAAC,SAAS,EAAE,OAAO,kBAAgE;AAAA,EACrF;AAKA,QAAM,iBAAiB,oBAAgB,8CAAkB,SAAS,IAAI;AACtE,QAAM,eAAyB,iBAAiB,eAAe,sBAAsB,QAAI,4CAAgB;AAKzG,MAAI,gBAAgB;AACpB,MAAI,gBAAwC;AAC5C,MAAI,YAAY,EAAE,OAAO,OAAO,mBAAmB,SAAS,OAAO,kBAAkB;AAErF,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK,GAAG;AAC7C,UAAM,mBAAmB,WAAW,CAAC;AAErC,UAAMA,iBAAY,sCAAe,eAAe,cAAc,kBAAkB,cAAc,YAAY;AAE1G,YAAI,iCAAKA,UAAS,GAAG;AACnB,sBAAgB;AAChB,sBAAgBA;AAChB;AAAA,IACF;AAEA,UAAM,YAAQ,6CAAiBA,UAAS;AAExC,UAAM,WACJ,MAAM,UAAU,UAAU,WAAY,MAAM,YAAY,UAAU,WAAW,MAAM,QAAQ,UAAU;AAEvG,QAAI,UAAU;AACZ,sBAAgB;AAChB,sBAAgBA;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,iBAAiB;AAEvB,QAAM,YACJ,qBAAiB,sCAAe,eAAe,cAAc,gBAAgB,cAAc,YAAY;AAUzG,MAAI,IAAI,CAAC,UAAU,OAAO,cAAc;AACxC,MAAI,IAAI,CAAC,UAAU,MAAM,cAAc;AAEvC,MAAI,CAAC,eAAe;AAClB,SAAK,OAAO;AACZ,SAAK,OAAO;AAAA,EACd,OAAO;AAIL,UAAM,SAAK,gDAAoB,QAAQ;AACvC,QAAI,IAAI,aAAa,OAAO,GAAG,OAAO,GAAG;AACzC,QAAI,IAAI,aAAa,MAAM,GAAG,MAAM,GAAG;AAAA,EACzC;AAGA,GAAC,EAAE,GAAG,EAAE,QAAI,uCAAW,GAAG,GAAG,SAAS;AAEtC,QAAM,kBAAc,6CAAsB;AAAA,IACxC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AAED,SAAO;AAAA,IACL,aAAa;AAAA,MACX,WAAW,eAAe,KAAK,MAAM,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;AAAA,MAC3D,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-lines */\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 { getArrowOffsetDynamic } from './getArrowOffset.js';\nimport { detectOverflow } from './detectOverflow.js';\nimport {\n  applyShift,\n  adjustForFixedParent,\n  expandWithVariations,\n  fits,\n  getBoundaryConstrainedRect,\n  getClippingParent,\n  getOverflowScore,\n  getOffsetParentData,\n  getViewportRect,\n  type RectLike,\n  type OverflowOffsets,\n} from './floatingPositioning.js';\n\ninterface ComputePositionProps {\n  triggerElementReference: Element;\n  floatingWrapperNode: HTMLElement;\n  placement: DSHookFloatingContextT.PopperPlacementsT;\n  placementOrderPreference?: DSHookFloatingContextT.PopperPlacementsT[];\n  customOffset: [number, number];\n  withoutPortal: boolean;\n  /**\n   * Opt-in extra boundary (e.g. a scrollable ancestor of the reference) the floating element\n   * should stay visually contained within, in addition to the viewport. Only applied when\n   * portaled \u2014 the non-portal path already derives its own clipping ancestor automatically via\n   * getClippingParent, by walking up from the reference.\n   *\n   * Why this exists instead of just setting `withoutPortal: true` to get that same automatic\n   * clipping-ancestor derivation: withoutPortal renders the floating element as a literal DOM\n   * descendant of the clipping ancestor, so the browser's own CSS overflow clipping applies\n   * unconditionally \u2014 any floating content taller/wider than that ancestor gets visually cut\n   * off, with no way for position math to prevent it. That is fine for content that always fits\n   * (e.g. a small filter's low/high inputs), but breaks content that can legitimately be larger\n   * than its reference's scroll container (e.g. a date-range calendar popover inside a short\n   * table row) \u2014 see PUI-17187 in ds-data-table's FilterPopover for the exact regression this\n   * caused when withoutPortal was tried first.\n   *\n   * boundaryElement keeps the portal (so oversized content still escapes fully into the page,\n   * unclipped, exactly like the no-boundaryElement case) and only changes the clipping *rect*\n   * used for shift/flip math \u2014 ignored per-axis when the floating content doesn't fit that axis\n   * of the boundary (see getBoundaryConstrainedRect), falling back to the plain viewport for\n   * that axis so oversized content is never forced into an impossible position.\n   */\n  boundaryElement?: Element | null;\n}\n\nexport const computePosition = (props: ComputePositionProps) => {\n  const {\n    triggerElementReference,\n    floatingWrapperNode,\n    placement,\n    placementOrderPreference,\n    customOffset,\n    withoutPortal,\n    boundaryElement,\n  } = props;\n\n  // When WITHOUT portal: only apply fixed-parent offsets (absolute parents scroll and must NOT be treated as fixed)\n  const parentOffsets = withoutPortal ? adjustForFixedParent(triggerElementReference) : { top: 0, left: 0 };\n\n  const referenceRect = triggerElementReference.getBoundingClientRect();\n  const floatingRect = floatingWrapperNode.getBoundingClientRect();\n\n  const fallbackPlacements = placementOrderPreference || getExpandedFallbackPlacements(placement);\n\n  const placements = expandWithVariations(\n    [placement].concat(fallbackPlacements as DSHookFloatingContextT.PopperPlacementsT[]),\n  );\n\n  // Boundary selection:\n  // - No portal => nearest clipping/scroll container (fallback viewport rect)\n  // - Portal + boundaryElement => viewport intersected with that element, per-axis (see\n  //   getBoundaryConstrainedRect)\n  // - Portal, no boundaryElement => viewport (inset by body padding for Storybook)\n  const clippingParent = withoutPortal ? getClippingParent(triggerElementReference) : null;\n  const viewportRect = getViewportRect();\n  let clippingRect: RectLike;\n  if (clippingParent) {\n    clippingRect = clippingParent.getBoundingClientRect();\n  } else if (boundaryElement) {\n    clippingRect = getBoundaryConstrainedRect(viewportRect, boundaryElement.getBoundingClientRect(), floatingRect);\n  } else {\n    clippingRect = viewportRect;\n  }\n\n  // Best-fit selection:\n  // 1) choose first placement that fully fits\n  // 2) otherwise choose placement with smallest max overflow, tie-break by total overflow\n  let bestPlacement = placement;\n  let bestOverflows: OverflowOffsets | null = null;\n  let bestScore = { total: Number.POSITIVE_INFINITY, maxSide: Number.POSITIVE_INFINITY };\n\n  for (let i = 0; i < placements.length; i += 1) {\n    const currentPlacement = placements[i];\n\n    const overflows = detectOverflow(referenceRect, floatingRect, currentPlacement, customOffset, clippingRect);\n\n    if (fits(overflows)) {\n      bestPlacement = currentPlacement;\n      bestOverflows = overflows;\n      break;\n    }\n\n    const score = getOverflowScore(overflows);\n\n    const isBetter =\n      score.maxSide < bestScore.maxSide || (score.maxSide === bestScore.maxSide && score.total < bestScore.total);\n\n    if (isBetter) {\n      bestPlacement = currentPlacement;\n      bestOverflows = overflows;\n      bestScore = score;\n    }\n  }\n\n  const finalPlacement = bestPlacement;\n\n  const overflows =\n    bestOverflows ?? detectOverflow(referenceRect, floatingRect, finalPlacement, customOffset, clippingRect);\n\n  // Convert overflow -> coordinates.\n  // detectOverflow uses viewport/clipping-rect coordinates.\n  //\n  // - If tooltip is rendered IN A PORTAL (withoutPortal === false) and is positioned with `position: absolute`,\n  //   convert viewport coords to page coords by adding window.scrollX/Y, plus clippingRect.left/top \u2014\n  //   normally 0 (plain viewport), but non-zero when boundaryElement constrains clippingRect to a\n  //   region that doesn't start at the viewport's own origin (e.g. below a sticky header).\n  //\n  // - If tooltip is rendered WITHOUT portal, convert viewport coords to offsetParent coords\n  //   (subtract offsetParent rect, add its scroll).\n  let x = -overflows.left - parentOffsets.left;\n  let y = -overflows.top - parentOffsets.top;\n\n  if (!withoutPortal) {\n    x += window.scrollX + clippingRect.left;\n    y += window.scrollY + clippingRect.top;\n  } else {\n    // clippingRect.top/left may be non-zero (e.g. a scroll container below the viewport top).\n    // The overflow values already subtracted it; add it back so we convert pure viewport coords\n    // to offset-parent-relative coords: viewportCoord - offsetParent.top + offsetParent.scrollTop\n    const op = getOffsetParentData(floatingWrapperNode);\n    x = x + clippingRect.left - op.left + op.scrollLeft;\n    y = y + clippingRect.top - op.top + op.scrollTop;\n  }\n\n  // Always shift back inside boundary\n  ({ x, y } = applyShift(x, y, overflows));\n\n  const coordsArrow = getArrowOffsetDynamic({\n    placement: finalPlacement,\n    referenceRect,\n    floatingRect,\n    x,\n    y,\n    withoutPortal,\n    parentOffsets,\n    floatingEl: floatingWrapperNode,\n    arrowPadding: 12,\n  });\n\n  return {\n    coordsStyle: {\n      transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,\n      top: 0,\n      left: 0,\n    },\n    finalPlacement,\n    coordsArrow,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSvB,2CAA8C;AAC9C,4BAAsC;AACtC,4BAA+B;AAC/B,iCAYO;AAkCA,MAAM,kBAAkB,CAAC,UAAgC;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAGJ,QAAM,gBAAgB,oBAAgB,iDAAqB,uBAAuB,IAAI,EAAE,KAAK,GAAG,MAAM,EAAE;AAExG,QAAM,gBAAgB,wBAAwB,sBAAsB;AACpE,QAAM,eAAe,oBAAoB,sBAAsB;AAE/D,QAAM,qBAAqB,gCAA4B,oEAA8B,SAAS;AAE9F,QAAM,iBAAa;AAAA,IACjB,CAAC,SAAS,EAAE,OAAO,kBAAgE;AAAA,EACrF;AAOA,QAAM,iBAAiB,oBAAgB,8CAAkB,uBAAuB,IAAI;AACpF,QAAM,mBAAe,4CAAgB;AACrC,MAAI;AACJ,MAAI,gBAAgB;AAClB,mBAAe,eAAe,sBAAsB;AAAA,EACtD,WAAW,iBAAiB;AAC1B,uBAAe,uDAA2B,cAAc,gBAAgB,sBAAsB,GAAG,YAAY;AAAA,EAC/G,OAAO;AACL,mBAAe;AAAA,EACjB;AAKA,MAAI,gBAAgB;AACpB,MAAI,gBAAwC;AAC5C,MAAI,YAAY,EAAE,OAAO,OAAO,mBAAmB,SAAS,OAAO,kBAAkB;AAErF,WAAS,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK,GAAG;AAC7C,UAAM,mBAAmB,WAAW,CAAC;AAErC,UAAMA,iBAAY,sCAAe,eAAe,cAAc,kBAAkB,cAAc,YAAY;AAE1G,YAAI,iCAAKA,UAAS,GAAG;AACnB,sBAAgB;AAChB,sBAAgBA;AAChB;AAAA,IACF;AAEA,UAAM,YAAQ,6CAAiBA,UAAS;AAExC,UAAM,WACJ,MAAM,UAAU,UAAU,WAAY,MAAM,YAAY,UAAU,WAAW,MAAM,QAAQ,UAAU;AAEvG,QAAI,UAAU;AACZ,sBAAgB;AAChB,sBAAgBA;AAChB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,iBAAiB;AAEvB,QAAM,YACJ,qBAAiB,sCAAe,eAAe,cAAc,gBAAgB,cAAc,YAAY;AAYzG,MAAI,IAAI,CAAC,UAAU,OAAO,cAAc;AACxC,MAAI,IAAI,CAAC,UAAU,MAAM,cAAc;AAEvC,MAAI,CAAC,eAAe;AAClB,SAAK,OAAO,UAAU,aAAa;AACnC,SAAK,OAAO,UAAU,aAAa;AAAA,EACrC,OAAO;AAIL,UAAM,SAAK,gDAAoB,mBAAmB;AAClD,QAAI,IAAI,aAAa,OAAO,GAAG,OAAO,GAAG;AACzC,QAAI,IAAI,aAAa,MAAM,GAAG,MAAM,GAAG;AAAA,EACzC;AAGA,GAAC,EAAE,GAAG,EAAE,QAAI,uCAAW,GAAG,GAAG,SAAS;AAEtC,QAAM,kBAAc,6CAAsB;AAAA,IACxC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AAED,SAAO;AAAA,IACL,aAAa;AAAA,MACX,WAAW,eAAe,KAAK,MAAM,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;AAAA,MAC3D,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["overflows"]
 }