@primer/react 38.19.0-rc.25e0da649 → 38.19.0-rc.4d14a3ca2

package/dist/Stack/Stack.js

@@ -6,10 +6,12 @@ import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
 const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(37);
+  const $ = c(45);
   let children;
   let className;
   let gap;
+  let paddingBlock;
+  let paddingInline;
   let rest;
   let t1;
   let t2;
@@ -26,6 +28,8 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
       gap,
       justify: t4,
       padding: t5,
+      paddingBlock,
+      paddingInline,
       wrap: t6,
       className,
       ...rest
@@ -34,24 +38,28 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[1] = children;
     $[2] = className;
     $[3] = gap;
-    $[4] = rest;
-    $[5] = t1;
-    $[6] = t2;
-    $[7] = t3;
-    $[8] = t4;
-    $[9] = t5;
-    $[10] = t6;
+    $[4] = paddingBlock;
+    $[5] = paddingInline;
+    $[6] = rest;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+    $[12] = t6;
   } else {
     children = $[1];
     className = $[2];
     gap = $[3];
-    rest = $[4];
-    t1 = $[5];
-    t2 = $[6];
-    t3 = $[7];
-    t4 = $[8];
-    t5 = $[9];
-    t6 = $[10];
+    paddingBlock = $[4];
+    paddingInline = $[5];
+    rest = $[6];
+    t1 = $[7];
+    t2 = $[8];
+    t3 = $[9];
+    t4 = $[10];
+    t5 = $[11];
+    t6 = $[12];
   }
   const Component = t1 === undefined ? "div" : t1;
   const align = t2 === undefined ? "stretch" : t2;
@@ -60,64 +68,80 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const padding = t5 === undefined ? "none" : t5;
   const wrap = t6 === undefined ? "nowrap" : t6;
   let t7;
-  if ($[11] !== className) {
+  if ($[13] !== className) {
     t7 = clsx(className, classes.Stack);
-    $[11] = className;
-    $[12] = t7;
+    $[13] = className;
+    $[14] = t7;
   } else {
-    t7 = $[12];
+    t7 = $[14];
   }
   let t8;
-  if ($[13] !== gap) {
+  if ($[15] !== gap) {
     t8 = getResponsiveAttributes("gap", gap);
-    $[13] = gap;
-    $[14] = t8;
+    $[15] = gap;
+    $[16] = t8;
   } else {
-    t8 = $[14];
+    t8 = $[16];
   }
   let t9;
-  if ($[15] !== direction) {
+  if ($[17] !== direction) {
     t9 = getResponsiveAttributes("direction", direction);
-    $[15] = direction;
-    $[16] = t9;
+    $[17] = direction;
+    $[18] = t9;
   } else {
-    t9 = $[16];
+    t9 = $[18];
   }
   let t10;
-  if ($[17] !== align) {
+  if ($[19] !== align) {
     t10 = getResponsiveAttributes("align", align);
-    $[17] = align;
-    $[18] = t10;
+    $[19] = align;
+    $[20] = t10;
   } else {
-    t10 = $[18];
+    t10 = $[20];
   }
   let t11;
-  if ($[19] !== wrap) {
+  if ($[21] !== wrap) {
     t11 = getResponsiveAttributes("wrap", wrap);
-    $[19] = wrap;
-    $[20] = t11;
+    $[21] = wrap;
+    $[22] = t11;
   } else {
-    t11 = $[20];
+    t11 = $[22];
   }
   let t12;
-  if ($[21] !== justify) {
+  if ($[23] !== justify) {
     t12 = getResponsiveAttributes("justify", justify);
-    $[21] = justify;
-    $[22] = t12;
+    $[23] = justify;
+    $[24] = t12;
   } else {
-    t12 = $[22];
+    t12 = $[24];
   }
   let t13;
-  if ($[23] !== padding) {
+  if ($[25] !== padding) {
     t13 = getResponsiveAttributes("padding", padding);
-    $[23] = padding;
-    $[24] = t13;
+    $[25] = padding;
+    $[26] = t13;
   } else {
-    t13 = $[24];
+    t13 = $[26];
   }
   let t14;
-  if ($[25] !== Component || $[26] !== children || $[27] !== forwardedRef || $[28] !== rest || $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t13 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9) {
-    t14 = /*#__PURE__*/jsx(Component, {
+  if ($[27] !== paddingBlock) {
+    t14 = getResponsiveAttributes("padding-block", paddingBlock);
+    $[27] = paddingBlock;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  let t15;
+  if ($[29] !== paddingInline) {
+    t15 = getResponsiveAttributes("padding-inline", paddingInline);
+    $[29] = paddingInline;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+  let t16;
+  if ($[31] !== Component || $[32] !== children || $[33] !== forwardedRef || $[34] !== rest || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t15 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
+    t16 = /*#__PURE__*/jsx(Component, {
       ref: forwardedRef,
       ...rest,
       className: t7,
@@ -127,24 +151,28 @@ const Stack = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
       ...t11,
       ...t12,
       ...t13,
+      ...t14,
+      ...t15,
       children: children
     });
-    $[25] = Component;
-    $[26] = children;
-    $[27] = forwardedRef;
-    $[28] = rest;
-    $[29] = t10;
-    $[30] = t11;
-    $[31] = t12;
-    $[32] = t13;
-    $[33] = t7;
-    $[34] = t8;
-    $[35] = t9;
-    $[36] = t14;
-  } else {
-    t14 = $[36];
-  }
-  return t14;
+    $[31] = Component;
+    $[32] = children;
+    $[33] = forwardedRef;
+    $[34] = rest;
+    $[35] = t10;
+    $[36] = t11;
+    $[37] = t12;
+    $[38] = t13;
+    $[39] = t14;
+    $[40] = t15;
+    $[41] = t7;
+    $[42] = t8;
+    $[43] = t9;
+    $[44] = t16;
+  } else {
+    t16 = $[44];
+  }
+  return t16;
 });
 const StackItem = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(21);

package/dist/Stack/Stack.module.css.js

@@ -1,4 +1,4 @@
-import './Stack-9e7b935d.css';
+import './Stack-58c33984.css';
 
 var classes = {"Stack":"prc-Stack-Stack-UQ9k6","StackItem":"prc-Stack-StackItem-TzbLx"};
 

package/dist/TextInputWithTokens/TextInputWithTokens.js

@@ -3,7 +3,7 @@ import { FocusKeys } from '@primer/behaviors';
 import { isFocusable } from '@primer/behaviors/utils';
 import React, { useRef, useState } from 'react';
 import { isValidElementType } from 'react-is';
-import { useMergedRefs } from '../hooks/useMergedRefs.js';
+import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import { useId } from '../hooks/useId.js';
 import Token from '../Token/Token.js';
@@ -25,7 +25,7 @@ const overflowCountClassMap = {
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent(t0, forwardedRef) {
-  const $ = c(152);
+  const $ = c(151);
   let IconComponent;
   let LeadingVisual;
   let TrailingVisual;
@@ -165,7 +165,7 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
   }
   const ref = useRef(null);
   const selectedValuesDescriptionId = useId();
-  const mergedRef = useMergedRefs(forwardedRef, ref);
+  useRefObjectAsForwardedRef(forwardedRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
   const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   let t6;
@@ -455,9 +455,9 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
   const t32 = validationStatus === "error" ? "true" : "false";
   const t33 = ariaDescribedBy || undefined;
   let t34;
-  if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== mergedRef || $[86] !== role || $[87] !== t32 || $[88] !== t33) {
+  if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== role || $[86] !== t32 || $[87] !== t33) {
     t34 = /*#__PURE__*/jsx(UnstyledTextInput, {
-      ref: mergedRef,
+      ref: ref,
       disabled: disabled,
       onFocus: handleInputFocus,
       onBlur: handleInputBlur,
@@ -474,43 +474,42 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
     $[82] = handleInputFocus;
     $[83] = handleInputKeyDown;
     $[84] = inputPropsRest;
-    $[85] = mergedRef;
-    $[86] = role;
-    $[87] = t32;
-    $[88] = t33;
-    $[89] = t34;
+    $[85] = role;
+    $[86] = t32;
+    $[87] = t33;
+    $[88] = t34;
   } else {
-    t34 = $[89];
+    t34 = $[88];
   }
   let t35;
-  if ($[90] !== selectedValuesDescription || $[91] !== selectedValuesDescriptionId || $[92] !== shouldExposeSelectedValuesDescription) {
+  if ($[89] !== selectedValuesDescription || $[90] !== selectedValuesDescriptionId || $[91] !== shouldExposeSelectedValuesDescription) {
     t35 = shouldExposeSelectedValuesDescription ? /*#__PURE__*/jsx(VisuallyHidden, {
       id: selectedValuesDescriptionId,
       children: selectedValuesDescription
     }) : null;
-    $[90] = selectedValuesDescription;
-    $[91] = selectedValuesDescriptionId;
-    $[92] = shouldExposeSelectedValuesDescription;
-    $[93] = t35;
+    $[89] = selectedValuesDescription;
+    $[90] = selectedValuesDescriptionId;
+    $[91] = shouldExposeSelectedValuesDescription;
+    $[92] = t35;
   } else {
-    t35 = $[93];
+    t35 = $[92];
   }
   let t36;
-  if ($[94] !== t34 || $[95] !== t35) {
+  if ($[93] !== t34 || $[94] !== t35) {
     t36 = /*#__PURE__*/jsxs("div", {
       className: styles.InputWrapper,
       children: [t34, t35]
     });
-    $[94] = t34;
-    $[95] = t35;
-    $[96] = t36;
+    $[93] = t34;
+    $[94] = t35;
+    $[95] = t36;
   } else {
-    t36 = $[96];
+    t36 = $[95];
   }
   let t37;
-  if ($[97] !== TokenComponent || $[98] !== disabled || $[99] !== handleTokenBlur || $[100] !== handleTokenFocus || $[101] !== handleTokenRemove || $[102] !== hideTokenRemoveButtons || $[103] !== selectedTokenIndex || $[104] !== size || $[105] !== visibleTokens) {
+  if ($[96] !== TokenComponent || $[97] !== disabled || $[98] !== handleTokenBlur || $[99] !== handleTokenFocus || $[100] !== handleTokenRemove || $[101] !== hideTokenRemoveButtons || $[102] !== selectedTokenIndex || $[103] !== size || $[104] !== visibleTokens) {
     let t38;
-    if ($[107] !== TokenComponent || $[108] !== disabled || $[109] !== handleTokenBlur || $[110] !== handleTokenFocus || $[111] !== handleTokenRemove || $[112] !== hideTokenRemoveButtons || $[113] !== selectedTokenIndex || $[114] !== size) {
+    if ($[106] !== TokenComponent || $[107] !== disabled || $[108] !== handleTokenBlur || $[109] !== handleTokenFocus || $[110] !== handleTokenRemove || $[111] !== hideTokenRemoveButtons || $[112] !== selectedTokenIndex || $[113] !== size) {
       t38 = (t39, i) => {
         const {
           id,
@@ -532,89 +531,89 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
           ...tokenRest
         }, id);
       };
-      $[107] = TokenComponent;
-      $[108] = disabled;
-      $[109] = handleTokenBlur;
-      $[110] = handleTokenFocus;
-      $[111] = handleTokenRemove;
-      $[112] = hideTokenRemoveButtons;
-      $[113] = selectedTokenIndex;
-      $[114] = size;
-      $[115] = t38;
+      $[106] = TokenComponent;
+      $[107] = disabled;
+      $[108] = handleTokenBlur;
+      $[109] = handleTokenFocus;
+      $[110] = handleTokenRemove;
+      $[111] = hideTokenRemoveButtons;
+      $[112] = selectedTokenIndex;
+      $[113] = size;
+      $[114] = t38;
     } else {
-      t38 = $[115];
+      t38 = $[114];
     }
     t37 = visibleTokens.map(t38);
-    $[97] = TokenComponent;
-    $[98] = disabled;
-    $[99] = handleTokenBlur;
-    $[100] = handleTokenFocus;
-    $[101] = handleTokenRemove;
-    $[102] = hideTokenRemoveButtons;
-    $[103] = selectedTokenIndex;
-    $[104] = size;
-    $[105] = visibleTokens;
-    $[106] = t37;
+    $[96] = TokenComponent;
+    $[97] = disabled;
+    $[98] = handleTokenBlur;
+    $[99] = handleTokenFocus;
+    $[100] = handleTokenRemove;
+    $[101] = hideTokenRemoveButtons;
+    $[102] = selectedTokenIndex;
+    $[103] = size;
+    $[104] = visibleTokens;
+    $[105] = t37;
   } else {
-    t37 = $[106];
+    t37 = $[105];
   }
   let t38;
-  if ($[116] !== size || $[117] !== tokens.length || $[118] !== tokensAreTruncated || $[119] !== visibleTokens.length) {
+  if ($[115] !== size || $[116] !== tokens.length || $[117] !== tokensAreTruncated || $[118] !== visibleTokens.length) {
     t38 = tokensAreTruncated && tokens.length - visibleTokens.length ? /*#__PURE__*/jsxs(Text, {
       className: overflowCountClassMap[size],
       children: ["+", tokens.length - visibleTokens.length]
     }) : null;
-    $[116] = size;
-    $[117] = tokens.length;
-    $[118] = tokensAreTruncated;
-    $[119] = visibleTokens.length;
-    $[120] = t38;
+    $[115] = size;
+    $[116] = tokens.length;
+    $[117] = tokensAreTruncated;
+    $[118] = visibleTokens.length;
+    $[119] = t38;
   } else {
-    t38 = $[120];
+    t38 = $[119];
   }
   let t39;
-  if ($[121] !== preventTokenWrapping || $[122] !== t31 || $[123] !== t36 || $[124] !== t37 || $[125] !== t38) {
+  if ($[120] !== preventTokenWrapping || $[121] !== t31 || $[122] !== t36 || $[123] !== t37 || $[124] !== t38) {
     t39 = /*#__PURE__*/jsxs("div", {
       ref: t31,
       className: styles.Container,
       "data-prevent-token-wrapping": preventTokenWrapping,
       children: [t36, t37, t38]
     });
-    $[121] = preventTokenWrapping;
-    $[122] = t31;
-    $[123] = t36;
-    $[124] = t37;
-    $[125] = t38;
-    $[126] = t39;
+    $[120] = preventTokenWrapping;
+    $[121] = t31;
+    $[122] = t36;
+    $[123] = t37;
+    $[124] = t38;
+    $[125] = t39;
   } else {
-    t39 = $[126];
+    t39 = $[125];
   }
   const t40 = typeof loading === "boolean";
   let t41;
-  if ($[127] !== TrailingVisual) {
+  if ($[126] !== TrailingVisual) {
     t41 = typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual;
-    $[127] = TrailingVisual;
-    $[128] = t41;
+    $[126] = TrailingVisual;
+    $[127] = t41;
   } else {
-    t41 = $[128];
+    t41 = $[127];
   }
   let t42;
-  if ($[129] !== showTrailingLoadingIndicator || $[130] !== t40 || $[131] !== t41) {
+  if ($[128] !== showTrailingLoadingIndicator || $[129] !== t40 || $[130] !== t41) {
     t42 = /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
       hasLoadingIndicator: t40,
       visualPosition: "trailing",
       showLoadingIndicator: showTrailingLoadingIndicator,
       children: t41
     });
-    $[129] = showTrailingLoadingIndicator;
-    $[130] = t40;
-    $[131] = t41;
-    $[132] = t42;
+    $[128] = showTrailingLoadingIndicator;
+    $[129] = t40;
+    $[130] = t41;
+    $[131] = t42;
   } else {
-    t42 = $[132];
+    t42 = $[131];
   }
   let t43;
-  if ($[133] !== block || $[134] !== contrast || $[135] !== disabled || $[136] !== maxWidthProp || $[137] !== minWidthProp || $[138] !== t21 || $[139] !== t22 || $[140] !== t23 || $[141] !== t24 || $[142] !== t25 || $[143] !== t26 || $[144] !== t27 || $[145] !== t30 || $[146] !== t39 || $[147] !== t42 || $[148] !== validationStatus || $[149] !== variantProp || $[150] !== widthProp) {
+  if ($[132] !== block || $[133] !== contrast || $[134] !== disabled || $[135] !== maxWidthProp || $[136] !== minWidthProp || $[137] !== t21 || $[138] !== t22 || $[139] !== t23 || $[140] !== t24 || $[141] !== t25 || $[142] !== t26 || $[143] !== t27 || $[144] !== t30 || $[145] !== t39 || $[146] !== t42 || $[147] !== validationStatus || $[148] !== variantProp || $[149] !== widthProp) {
     t43 = /*#__PURE__*/jsxs(TextInputWrapper, {
       block: block,
       contrast: contrast,
@@ -633,27 +632,27 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
       style: t26,
       children: [t27, t30, t39, t42]
     });
-    $[133] = block;
-    $[134] = contrast;
-    $[135] = disabled;
-    $[136] = maxWidthProp;
-    $[137] = minWidthProp;
-    $[138] = t21;
-    $[139] = t22;
-    $[140] = t23;
-    $[141] = t24;
-    $[142] = t25;
-    $[143] = t26;
-    $[144] = t27;
-    $[145] = t30;
-    $[146] = t39;
-    $[147] = t42;
-    $[148] = validationStatus;
-    $[149] = variantProp;
-    $[150] = widthProp;
-    $[151] = t43;
+    $[132] = block;
+    $[133] = contrast;
+    $[134] = disabled;
+    $[135] = maxWidthProp;
+    $[136] = minWidthProp;
+    $[137] = t21;
+    $[138] = t22;
+    $[139] = t23;
+    $[140] = t24;
+    $[141] = t25;
+    $[142] = t26;
+    $[143] = t27;
+    $[144] = t30;
+    $[145] = t39;
+    $[146] = t42;
+    $[147] = validationStatus;
+    $[148] = variantProp;
+    $[149] = widthProp;
+    $[150] = t43;
   } else {
-    t43 = $[151];
+    t43 = $[150];
   }
   return t43;
 }

package/dist/deprecated/DialogV1/Dialog.js

@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
 import React, { forwardRef, useRef } from 'react';
 import { IconButton } from '../../Button/IconButton.js';
 import useDialog from '../../hooks/useDialog.js';
-import { useMergedRefs } from '../../hooks/useMergedRefs.js';
+import { useRefObjectAsForwardedRef } from '../../hooks/useRefObjectAsForwardedRef.js';
 import { XIcon } from '@primer/octicons-react';
 import { clsx } from 'clsx';
 import classes from './Dialog.module.css.js';
@@ -78,7 +78,7 @@ function _temp(ch) {
   return typeof ch === "string";
 }
 const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(26);
+  const $ = c(25);
   let children;
   let className;
   let initialFocusRef;
@@ -121,7 +121,7 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const Component = t2 === undefined ? "div" : t2;
   const overlayRef = useRef(null);
   const modalRef = useRef(null);
-  const mergedRef = useMergedRefs(forwardedRef, modalRef);
+  useRefObjectAsForwardedRef(forwardedRef, modalRef);
   const closeButtonRef = useRef(null);
   let t3;
   if ($[9] !== onDismiss || $[10] !== returnFocusRef) {
@@ -161,14 +161,14 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     getDialogProps
   } = useDialog(t4);
   let t5;
-  if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== mergedRef || $[23] !== onCloseClick || $[24] !== props) {
+  if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== onCloseClick || $[23] !== props) {
     t5 = isOpen ? /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx("span", {
         className: classes.Overlay,
         ref: overlayRef
       }), /*#__PURE__*/jsxs(Component, {
         tabIndex: -1,
-        ref: mergedRef,
+        ref: modalRef,
         role: "dialog",
         "aria-modal": "true",
         ...props,
@@ -190,12 +190,11 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[19] = className;
     $[20] = getDialogProps;
     $[21] = isOpen;
-    $[22] = mergedRef;
-    $[23] = onCloseClick;
-    $[24] = props;
-    $[25] = t5;
+    $[22] = onCloseClick;
+    $[23] = props;
+    $[24] = t5;
   } else {
-    t5 = $[25];
+    t5 = $[24];
   }
   return t5;
 });

package/dist/hooks/useAnchoredPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAKvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA6EA"}
+{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA4GA"}

package/dist/hooks/useAnchoredPosition.js

@@ -4,6 +4,26 @@ import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
 import { useResizeObserver } from './useResizeObserver.js';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 
+/**
+ * Returns all scrollable ancestor elements of the given element, plus the window.
+ * An element is scrollable if its computed overflow/overflow-x/overflow-y is
+ * 'auto', 'scroll', or 'overlay'.
+ */
+function getScrollableAncestors(element) {
+  const scrollables = [];
+  let current = element.parentElement;
+  while (current) {
+    const style = getComputedStyle(current);
+    const overflowY = style.overflowY;
+    const overflowX = style.overflowX;
+    if (/auto|scroll|overlay/.test(overflowY) || /auto|scroll|overlay/.test(overflowX)) {
+      scrollables.push(current);
+    }
+    current = current.parentElement;
+  }
+  scrollables.push(window);
+  return scrollables;
+}
 /**
  * Calculates the top and left values for an absolutely-positioned floating element
  * to be anchored to some anchor element. Returns refs for the floating element
@@ -76,6 +96,33 @@ function useAnchoredPosition(settings, dependencies = []) {
   useResizeObserver(updatePosition); // watches for changes in window size
   useResizeObserver(updatePosition, floatingElementRef); // watches for changes in floating element size
 
+  // Recalculate position when any scrollable ancestor of the anchor scrolls.
+  // Uses requestAnimationFrame to avoid layout thrashing during scroll.
+  React.useEffect(() => {
+    const anchorEl = anchorElementRef.current;
+    if (!anchorEl) return;
+    let rafId = null;
+    const handleScroll = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        updatePosition();
+      });
+    };
+    const scrollables = getScrollableAncestors(anchorEl);
+    for (const scrollable of scrollables) {
+      // eslint-disable-next-line github/prefer-observers -- IntersectionObserver cannot detect continuous scroll position changes needed for repositioning
+      scrollable.addEventListener('scroll', handleScroll);
+    }
+    return () => {
+      for (const scrollable of scrollables) {
+        scrollable.removeEventListener('scroll', handleScroll);
+      }
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [anchorElementRef, updatePosition]);
   return {
     floatingElementRef,
     anchorElementRef,

package/dist/hooks/useMergedRefs.d.ts

@@ -15,18 +15,18 @@ import type { ForwardedRef, Ref as StandardRef } from 'react';
  * // React 18
  * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const mergedRef = useMergedRefs(forwardedRef, ref)
+ *  const combinedRef = useMergedRefs(forwardedRef, ref)
  *
- *  return <button ref={mergedRef} />
+ *  return <button ref={combinedRef} />
  * })
  *
  * @example
  * // React 19
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const mergedRef = useMergedRefs(externalRef, ref)
+ *  const combinedRef = useMergedRefs(externalRef, ref)
  *
- *  return <button ref={mergedRef} />
+ *  return <button ref={combinedRef} />
  * }
  */
 export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => () => void;