@primer/react 38.16.0 → 38.17.0-rc.0f1e4e0c9

package/dist/NavList/NavList.js

@@ -11,6 +11,7 @@ import classes from '../ActionList/ActionList.module.css.js';
 import navListClasses from './NavList.module.css.js';
 import { flushSync } from 'react-dom';
 import { isSlot } from '../utils/is-slot.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
@@ -72,128 +73,59 @@ Root.displayName = 'NavList';
 // ----------------------------------------------------------------------------
 // NavList.Item
 
-const Item = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(29);
-  let ariaCurrent;
-  let children;
-  let defaultOpen;
-  let props;
-  if ($[0] !== t0) {
-    ({
-      "aria-current": ariaCurrent,
-      children,
-      defaultOpen,
-      ...props
-    } = t0);
-    $[0] = t0;
-    $[1] = ariaCurrent;
-    $[2] = children;
-    $[3] = defaultOpen;
-    $[4] = props;
-  } else {
-    ariaCurrent = $[1];
-    children = $[2];
-    defaultOpen = $[3];
-    props = $[4];
-  }
+const ItemComponent = fixedForwardRef(({
+  'aria-current': ariaCurrent,
+  children,
+  defaultOpen,
+  as: Component,
+  ...props
+}, ref) => {
   const {
     depth
   } = React.useContext(SubNavContext);
-  let childrenWithoutSubNavOrTrailingAction;
-  let subNav;
-  let t1;
-  if ($[5] !== children || $[6] !== defaultOpen) {
-    subNav = React.Children.toArray(children).find(_temp);
-    let t2;
-    if ($[10] !== children) {
-      t2 = React.Children.toArray(children).filter(_temp2);
-      $[10] = children;
-      $[11] = t2;
-    } else {
-      t2 = $[11];
-    }
-    childrenWithoutSubNavOrTrailingAction = t2;
-    if (! /*#__PURE__*/isValidElement(subNav) && defaultOpen) {
-      console.error("NavList.Item must have a NavList.SubNav to use defaultOpen.");
-    }
-    t1 = subNav && /*#__PURE__*/isValidElement(subNav);
-    $[5] = children;
-    $[6] = defaultOpen;
-    $[7] = childrenWithoutSubNavOrTrailingAction;
-    $[8] = subNav;
-    $[9] = t1;
-  } else {
-    childrenWithoutSubNavOrTrailingAction = $[7];
-    subNav = $[8];
-    t1 = $[9];
-  }
-  if (t1) {
-    let t2;
-    if ($[12] !== depth) {
-      t2 = {
-        "--subitem-depth": depth
-      };
-      $[12] = depth;
-      $[13] = t2;
-    } else {
-      t2 = $[13];
-    }
-    const t3 = t2;
-    let t4;
-    if ($[14] !== childrenWithoutSubNavOrTrailingAction || $[15] !== defaultOpen || $[16] !== depth || $[17] !== subNav || $[18] !== t3) {
-      t4 = /*#__PURE__*/jsx(ItemWithSubNav, {
-        subNav: subNav,
-        depth: depth,
-        defaultOpen: defaultOpen,
-        style: t3,
-        children: childrenWithoutSubNavOrTrailingAction
-      });
-      $[14] = childrenWithoutSubNavOrTrailingAction;
-      $[15] = defaultOpen;
-      $[16] = depth;
-      $[17] = subNav;
-      $[18] = t3;
-      $[19] = t4;
-    } else {
-      t4 = $[19];
-    }
-    return t4;
-  }
-  const t2 = Boolean(ariaCurrent) && ariaCurrent !== "false";
-  let t3;
-  if ($[20] !== depth) {
-    t3 = {
-      "--subitem-depth": depth
-    };
-    $[20] = depth;
-    $[21] = t3;
-  } else {
-    t3 = $[21];
-  }
-  const t4 = t3;
-  let t5;
-  if ($[22] !== ariaCurrent || $[23] !== children || $[24] !== props || $[25] !== ref || $[26] !== t2 || $[27] !== t4) {
-    t5 = /*#__PURE__*/jsx(ActionList.LinkItem, {
-      ref: ref,
-      "aria-current": ariaCurrent,
-      active: t2,
-      style: t4,
-      ...props,
-      children: children
+
+  // Get SubNav from children
+  const subNav = React.Children.toArray(children).find(child => /*#__PURE__*/isValidElement(child) && (child.type === SubNav || isSlot(child, SubNav)));
+
+  // Get children without SubNav or TrailingAction
+  const childrenWithoutSubNavOrTrailingAction = React.Children.toArray(children).filter(child => /*#__PURE__*/isValidElement(child) ? child.type !== SubNav && child.type !== TrailingAction && !isSlot(child, SubNav) && !isSlot(child, TrailingAction) : true);
+  if (! /*#__PURE__*/isValidElement(subNav) && defaultOpen)
+    // eslint-disable-next-line no-console
+    console.error('NavList.Item must have a NavList.SubNav to use defaultOpen.');
+
+  // Render ItemWithSubNav if SubNav is present
+  if (subNav && /*#__PURE__*/isValidElement(subNav)) {
+    return /*#__PURE__*/jsx(ItemWithSubNav, {
+      subNav: subNav,
+      depth: depth,
+      defaultOpen: defaultOpen,
+      style: {
+        '--subitem-depth': depth
+      },
+      children: childrenWithoutSubNavOrTrailingAction
     });
-    $[22] = ariaCurrent;
-    $[23] = children;
-    $[24] = props;
-    $[25] = ref;
-    $[26] = t2;
-    $[27] = t4;
-    $[28] = t5;
-  } else {
-    t5 = $[28];
   }
-  return t5;
+
+  // Type safety for the polymorphic `as` prop is enforced at the
+  // Item boundary via fixedForwardRef. Internally we widen
+  // LinkItem's type so TypeScript doesn't re-check the generic
+  // constraint across two polymorphic layers.
+  const InternalLinkItem = ActionList.LinkItem;
+  return /*#__PURE__*/jsx(InternalLinkItem, {
+    ref: ref,
+    as: Component,
+    "aria-current": ariaCurrent,
+    active: Boolean(ariaCurrent) && ariaCurrent !== 'false',
+    style: {
+      '--subitem-depth': depth
+    },
+    ...props,
+    children: children
+  });
+});
+const Item = Object.assign(ItemComponent, {
+  displayName: 'NavList.Item'
 });
-Item.displayName = 'NavList.Item';
 
 // ----------------------------------------------------------------------------
 // ItemWithSubNav (internal)
@@ -259,7 +191,7 @@ function ItemWithSubNav(t0) {
   const t4 = !isOpen && containsCurrentItem;
   let t5;
   if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = () => setIsOpen(_temp3);
+    t5 = () => setIsOpen(_temp);
     $[8] = t5;
   } else {
     t5 = $[8];
@@ -341,7 +273,7 @@ function ItemWithSubNav(t0) {
 
 // ----------------------------------------------------------------------------
 // NavList.SubNav
-function _temp3(open) {
+function _temp(open) {
   return !open;
 }
 const SubNavContext = /*#__PURE__*/React.createContext({
@@ -696,11 +628,5 @@ const NavList = Object.assign(Root, {
   GroupExpand,
   GroupHeading
 });
-function _temp(child) {
-  return /*#__PURE__*/isValidElement(child) && (child.type === SubNav || isSlot(child, SubNav));
-}
-function _temp2(child_0) {
-  return /*#__PURE__*/isValidElement(child_0) ? child_0.type !== SubNav && child_0.type !== TrailingAction && !isSlot(child_0, SubNav) && !isSlot(child_0, TrailingAction) : true;
-}
 
 export { GroupExpand, NavList };

package/dist/Overlay/{Overlay-2e0ce8db.css → Overlay-f81a131d.css}

@@ -1,2 +1,2 @@
-@keyframes prc-Overlay-overlay-appear-JpFey{0%{opacity:0}to{opacity:1}}.prc-Overlay-Overlay-jfs-T{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));height:auto;max-height:100vh;max-width:calc(100vw - 2rem);min-width:192px;overflow:auto;position:absolute;width:auto}.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal]),.prc-Overlay-Overlay-jfs-T[data-anchor-position=false]{bottom:var(--bottom,auto);right:var(--right,auto)}@media screen and (max-width:calc(48rem - 0.02px)){[data-responsive=fullscreen]:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:0;top:0}}:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:var(--left,auto);top:var(--top,auto)}.prc-Overlay-Overlay-jfs-T:focus{outline:none}@media (forced-colors:active){.prc-Overlay-Overlay-jfs-T{outline:1px solid transparent}}.prc-Overlay-Overlay-jfs-T:where([data-reflow-container=true]){max-width:calc(100vw - 2rem)}.prc-Overlay-Overlay-jfs-T:where([data-overflow-auto]){overflow:auto}.prc-Overlay-Overlay-jfs-T:where([data-overflow-hidden]){overflow:hidden}.prc-Overlay-Overlay-jfs-T:where([data-overflow-scroll]){overflow:scroll}.prc-Overlay-Overlay-jfs-T:where([data-overflow-visible]){overflow:visible}.prc-Overlay-Overlay-jfs-T:where([data-height-xsmall]){height:192px}.prc-Overlay-Overlay-jfs-T:where([data-height-small]){height:256px}.prc-Overlay-Overlay-jfs-T:where([data-height-medium]){height:320px}.prc-Overlay-Overlay-jfs-T:where([data-height-large]){height:432px}.prc-Overlay-Overlay-jfs-T:where([data-height-xlarge]){height:600px}.prc-Overlay-Overlay-jfs-T:where([data-height-auto]),.prc-Overlay-Overlay-jfs-T:where([data-height-initial]){height:auto}.prc-Overlay-Overlay-jfs-T:where([data-height-fit-content]){height:-moz-fit-content;height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:192px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:432px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:600px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-width-small]){width:256px}.prc-Overlay-Overlay-jfs-T:where([data-width-medium]){width:320px}.prc-Overlay-Overlay-jfs-T:where([data-width-large]){width:480px}.prc-Overlay-Overlay-jfs-T:where([data-width-xlarge]){width:640px}.prc-Overlay-Overlay-jfs-T:where([data-width-xxlarge]){width:960px}.prc-Overlay-Overlay-jfs-T:where([data-width-auto]){width:auto}.prc-Overlay-Overlay-jfs-T:where([data-max-width-small]){max-width:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-medium]){max-width:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-large]){max-width:480px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xlarge]){max-width:640px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xxlarge]){max-width:960px}.prc-Overlay-Overlay-jfs-T:where([data-visibility-visible]){visibility:visible}.prc-Overlay-Overlay-jfs-T:where([data-visibility-hidden]){visibility:hidden}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){border-radius:unset;height:100vh;left:0;margin:0;max-height:none;max-width:none;padding-bottom:env(safe-area-inset-bottom);position:fixed;top:0;width:100vw}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){height:100dvh}}}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-variant=fullscreen]){height:100dvh}}@media (prefers-reduced-motion:no-preference){.prc-Overlay-Overlay-jfs-T{animation:prc-Overlay-overlay-appear-JpFey .2s cubic-bezier(.33,1,.68,1)}}
-/*# sourceMappingURL=Overlay-2e0ce8db.css.map */
+@keyframes prc-Overlay-overlay-appear-JpFey{0%{opacity:0}to{opacity:1}}.prc-Overlay-Overlay-jfs-T{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));height:auto;max-height:100vh;max-width:calc(100vw - 2rem);min-width:192px;overflow:auto;position:absolute;width:auto}.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal]),.prc-Overlay-Overlay-jfs-T[data-anchor-position=false]{bottom:var(--bottom,auto);right:var(--right,auto)}@media screen and (max-width:calc(48rem - 0.02px)){[data-responsive=fullscreen]:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:0;top:0}}:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:var(--left,auto);top:var(--top,auto)}.prc-Overlay-Overlay-jfs-T:focus{outline:none}@media (forced-colors:active){.prc-Overlay-Overlay-jfs-T{outline:1px solid transparent}}.prc-Overlay-Overlay-jfs-T:where([data-reflow-container=true]){max-width:calc(100vw - 2rem)}.prc-Overlay-Overlay-jfs-T:where([data-overflow-auto]){overflow:auto}.prc-Overlay-Overlay-jfs-T:where([data-overflow-hidden]){overflow:hidden}.prc-Overlay-Overlay-jfs-T:where([data-overflow-scroll]){overflow:scroll}.prc-Overlay-Overlay-jfs-T:where([data-overflow-visible]){overflow:visible}.prc-Overlay-Overlay-jfs-T:where([data-height-xsmall]){height:192px}.prc-Overlay-Overlay-jfs-T:where([data-height-small]){height:256px}.prc-Overlay-Overlay-jfs-T:where([data-height-medium]){height:320px}.prc-Overlay-Overlay-jfs-T:where([data-height-large]){height:432px}.prc-Overlay-Overlay-jfs-T:where([data-height-xlarge]){height:600px}.prc-Overlay-Overlay-jfs-T:where([data-height-auto]),.prc-Overlay-Overlay-jfs-T:where([data-height-initial]){height:auto}.prc-Overlay-Overlay-jfs-T:where([data-height-fit-content]){height:-moz-fit-content;height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:192px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:432px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:600px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]){max-height:min(192px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-small]){max-height:min(256px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-medium]){max-height:min(320px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-large]){max-height:min(432px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]){max-height:min(600px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-width-small]){width:256px}.prc-Overlay-Overlay-jfs-T:where([data-width-medium]){width:320px}.prc-Overlay-Overlay-jfs-T:where([data-width-large]){width:480px}.prc-Overlay-Overlay-jfs-T:where([data-width-xlarge]){width:640px}.prc-Overlay-Overlay-jfs-T:where([data-width-xxlarge]){width:960px}.prc-Overlay-Overlay-jfs-T:where([data-width-auto]){width:auto}.prc-Overlay-Overlay-jfs-T:where([data-max-width-small]){max-width:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-medium]){max-width:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-large]){max-width:480px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xlarge]){max-width:640px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xxlarge]){max-width:960px}.prc-Overlay-Overlay-jfs-T:where([data-visibility-visible]){visibility:visible}.prc-Overlay-Overlay-jfs-T:where([data-visibility-hidden]){visibility:hidden}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){border-radius:unset;height:100vh;left:0;margin:0;max-height:none;max-width:none;padding-bottom:env(safe-area-inset-bottom);position:fixed;top:0;width:100vw}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){height:100dvh}}}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-variant=fullscreen]){height:100dvh}}@media (prefers-reduced-motion:no-preference){.prc-Overlay-Overlay-jfs-T{animation:prc-Overlay-overlay-appear-JpFey .2s cubic-bezier(.33,1,.68,1)}}
+/*# sourceMappingURL=Overlay-f81a131d.css.map */

package/dist/Overlay/Overlay-f81a131d.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Overlay/Overlay.module.css.js"],"names":[],"mappings":"AAAA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,2BAQE,mEAAwC,CACxC,8CAAwC,CACxC,mEAAwC,CALxC,WAAY,CACZ,gBAAiB,CAJjB,4BAA6B,CAE7B,eAAgB,CAGhB,aAAc,CANd,iBAAkB,CAElB,UAyNF,CAhNE,wIAKE,yBAA2B,CAF3B,uBAkBF,CAZI,mDADF,6LAGI,MAAO,CADP,KAGJ,CADE,CAGF,iKAIE,qBAAuB,CAFvB,mBAGF,CAGF,iCACE,YACF,CAEA,8BAvCF,2BAyCI,6BAmLJ,CAlLE,CAEA,+DACE,4BACF,CAEA,uDACE,aACF,CAEA,yDACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,gBACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,6GAEE,WACF,CAEA,4DACE,uBAAmB,CAAnB,kBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAGA,8FACE,4BACF,CAEA,6FACE,4BACF,CAEA,8FACE,4BACF,CAEA,6FACE,4BACF,CAEA,8FACE,4BACF,CAEA,gEACE,2BAAuB,CAAvB,sBACF,CAEA,qDACE,WACF,CAEA,sDACE,WACF,CAEA,qDAEE,WACF,CAEA,sDAEE,WACF,CAEA,uDAEE,WACF,CAEA,oDACE,UACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,2DACE,eACF,CAEA,4DACE,kBACF,CAEA,2DACE,iBACF,CAGE,mDADF,+DAUI,mBAAoB,CAHpB,YAAa,CAHb,MAAO,CAKP,QAAS,CADT,eAAgB,CAFhB,cAAe,CAMf,0CAA2C,CAV3C,cAAe,CACf,KAAM,CAEN,WAcJ,CALI,0BAdJ,+DAgBM,aAGN,CAFI,CACF,CAGF,0BAEE,4DACE,aACF,CACF,CAGF,8CACE,2BACE,wEACF,CACF","file":"Overlay-f81a131d.css","sourcesContent":["@keyframes overlay-appear {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n.Overlay {\n  position: absolute;\n  max-width: calc(100vw - 2rem);\n  width: auto;\n  min-width: 192px;\n  height: auto;\n  max-height: 100vh;\n  overflow: auto;\n  background-color: var(--overlay-bgColor);\n  border-radius: var(--borderRadius-large);\n  box-shadow: var(--shadow-floating-small);\n\n  &[data-anchor-position='false'],\n  &:not([data-anchor-position]):not([data-variant='modal']) {\n    /* stylelint-disable-next-line primer/spacing */\n    right: var(--right, auto);\n    /* stylelint-disable-next-line primer/spacing */\n    bottom: var(--bottom, auto);\n\n    /* stylelint-disable-next-line selector-max-specificity */\n    &[data-responsive='fullscreen']:not([data-variant]) {\n      @media screen and (--viewportRange-narrow) {\n        top: 0;\n        left: 0;\n      }\n    }\n\n    &:not([data-variant]) {\n      /* stylelint-disable-next-line primer/spacing */\n      top: var(--top, auto);\n      /* stylelint-disable-next-line primer/spacing */\n      left: var(--left, auto);\n    }\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (forced-colors: active) {\n    /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n    outline: solid 1px transparent;\n  }\n\n  &:where([data-reflow-container='true']) {\n    max-width: calc(100vw - 2rem);\n  }\n\n  &:where([data-overflow-auto]) {\n    overflow: auto;\n  }\n\n  &:where([data-overflow-hidden]) {\n    overflow: hidden;\n  }\n\n  &:where([data-overflow-scroll]) {\n    overflow: scroll;\n  }\n\n  &:where([data-overflow-visible]) {\n    overflow: visible;\n  }\n\n  &:where([data-height-xsmall]) {\n    height: 192px;\n  }\n\n  &:where([data-height-small]) {\n    height: 256px;\n  }\n\n  &:where([data-height-medium]) {\n    height: 320px;\n  }\n\n  &:where([data-height-large]) {\n    height: 432px;\n  }\n\n  &:where([data-height-xlarge]) {\n    height: 600px;\n  }\n\n  &:where([data-height-auto]),\n  &:where([data-height-initial]) {\n    height: auto;\n  }\n\n  &:where([data-height-fit-content]) {\n    height: fit-content;\n  }\n\n  &:where([data-max-height-xsmall]) {\n    max-height: 192px;\n  }\n\n  &:where([data-max-height-small]) {\n    max-height: 256px;\n  }\n\n  &:where([data-max-height-medium]) {\n    max-height: 320px;\n  }\n\n  &:where([data-max-height-large]) {\n    max-height: 432px;\n  }\n\n  &:where([data-max-height-xlarge]) {\n    max-height: 600px;\n  }\n\n  /* Max-height size tokens clamped to viewport (enabled via feature flag) */\n  &:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]) {\n    max-height: min(192px, 100dvh);\n  }\n\n  &:where([data-max-height-clamp-to-viewport][data-max-height-small]) {\n    max-height: min(256px, 100dvh);\n  }\n\n  &:where([data-max-height-clamp-to-viewport][data-max-height-medium]) {\n    max-height: min(320px, 100dvh);\n  }\n\n  &:where([data-max-height-clamp-to-viewport][data-max-height-large]) {\n    max-height: min(432px, 100dvh);\n  }\n\n  &:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]) {\n    max-height: min(600px, 100dvh);\n  }\n\n  &:where([data-max-height-fit-content]) {\n    max-height: fit-content;\n  }\n\n  &:where([data-width-small]) {\n    width: 256px;\n  }\n\n  &:where([data-width-medium]) {\n    width: 320px;\n  }\n\n  &:where([data-width-large]) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 480px;\n  }\n\n  &:where([data-width-xlarge]) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 640px;\n  }\n\n  &:where([data-width-xxlarge]) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 960px;\n  }\n\n  &:where([data-width-auto]) {\n    width: auto;\n  }\n\n  &:where([data-max-width-small]) {\n    max-width: 256px;\n  }\n\n  &:where([data-max-width-medium]) {\n    max-width: 320px;\n  }\n\n  &:where([data-max-width-large]) {\n    max-width: 480px;\n  }\n\n  &:where([data-max-width-xlarge]) {\n    max-width: 640px;\n  }\n\n  &:where([data-max-width-xxlarge]) {\n    max-width: 960px;\n  }\n\n  &:where([data-visibility-visible]) {\n    visibility: visible;\n  }\n\n  &:where([data-visibility-hidden]) {\n    visibility: hidden;\n  }\n\n  &:where([data-responsive='fullscreen']) {\n    @media screen and (--viewportRange-narrow) {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      max-width: none;\n      height: 100vh;\n      max-height: none;\n      margin: 0;\n      border-radius: unset;\n      /* stylelint-disable-next-line primer/spacing */\n      padding-bottom: env(safe-area-inset-bottom);\n\n      @supports (height: 100dvh) {\n        /* fix for mobile safari (100vh clips the screen with the toolbar) */\n        height: 100dvh;\n      }\n    }\n  }\n\n  @supports (height: 100dvh) {\n    /* fix for mobile safari (100vh clips the screen with the toolbar) */\n    &:where([data-variant='fullscreen']) {\n      height: 100dvh;\n    }\n  }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .Overlay {\n    animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n  }\n}\n"]}

package/dist/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}

package/dist/Overlay/Overlay.js

@@ -116,7 +116,7 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
 
  */
 const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(45);
+  const $ = c(48);
   let anchorSide;
   let ignoreClickRefs;
   let initialFocusRef;
@@ -197,6 +197,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const visibility = t4 === undefined ? "visible" : t4;
   const width = t5 === undefined ? "auto" : t5;
   const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
+  const featureFlagMaxHeightClampToViewport = useFeatureFlag("primer_react_overlay_max_height_clamp_to_viewport");
   const overlayRef = useRef(null);
   useRefObjectAsForwardedRef(forwardedRef, overlayRef);
   let t6;
@@ -271,8 +272,18 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const leftPosition = left === undefined && right === undefined ? 0 : left;
   const t11 = !preventOverflow ? true : undefined;
   let t12;
-  if ($[32] !== height || $[33] !== leftPosition || $[34] !== props || $[35] !== responsiveVariant || $[36] !== right || $[37] !== role || $[38] !== t11 || $[39] !== visibility || $[40] !== width) {
-    t12 = /*#__PURE__*/jsx(BaseOverlay, {
+  if ($[32] !== featureFlagMaxHeightClampToViewport) {
+    t12 = featureFlagMaxHeightClampToViewport ? {
+      "data-max-height-clamp-to-viewport": ""
+    } : {};
+    $[32] = featureFlagMaxHeightClampToViewport;
+    $[33] = t12;
+  } else {
+    t12 = $[33];
+  }
+  let t13;
+  if ($[34] !== height || $[35] !== leftPosition || $[36] !== props || $[37] !== responsiveVariant || $[38] !== right || $[39] !== role || $[40] !== t11 || $[41] !== t12 || $[42] !== visibility || $[43] !== width) {
+    t13 = /*#__PURE__*/jsx(BaseOverlay, {
       role: role,
       width: width,
       "data-reflow-container": t11,
@@ -282,38 +293,40 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       height: height,
       visibility: visibility,
       "data-responsive": responsiveVariant,
+      ...t12,
       ...props
     });
-    $[32] = height;
-    $[33] = leftPosition;
-    $[34] = props;
-    $[35] = responsiveVariant;
-    $[36] = right;
-    $[37] = role;
-    $[38] = t11;
-    $[39] = visibility;
-    $[40] = width;
+    $[34] = height;
+    $[35] = leftPosition;
+    $[36] = props;
+    $[37] = responsiveVariant;
+    $[38] = right;
+    $[39] = role;
+    $[40] = t11;
     $[41] = t12;
+    $[42] = visibility;
+    $[43] = width;
+    $[44] = t13;
   } else {
-    t12 = $[41];
+    t13 = $[44];
   }
-  const overlayContent = t12;
+  const overlayContent = t13;
   if (cssAnchorPositioning) {
     return overlayContent;
   }
-  let t13;
-  if ($[42] !== overlayContent || $[43] !== portalContainerName) {
-    t13 = /*#__PURE__*/jsx(Portal, {
+  let t14;
+  if ($[45] !== overlayContent || $[46] !== portalContainerName) {
+    t14 = /*#__PURE__*/jsx(Portal, {
       containerName: portalContainerName,
       children: overlayContent
     });
-    $[42] = overlayContent;
-    $[43] = portalContainerName;
-    $[44] = t13;
+    $[45] = overlayContent;
+    $[46] = portalContainerName;
+    $[47] = t14;
   } else {
-    t13 = $[44];
+    t14 = $[47];
   }
-  return t13;
+  return t14;
 });
 
 export { BaseOverlay, Overlay as default, heightMap };

package/dist/Overlay/Overlay.module.css.js

@@ -1,4 +1,4 @@
-import './Overlay-2e0ce8db.css';
+import './Overlay-f81a131d.css';
 
 var classes = {"Overlay":"prc-Overlay-Overlay-jfs-T","overlay-appear":"prc-Overlay-overlay-appear-JpFey"};
 

package/dist/hooks/index.d.ts

@@ -16,4 +16,5 @@ export { useMnemonics } from './useMnemonics';
 export { useRefObjectAsForwardedRef } from './useRefObjectAsForwardedRef';
 export { useId } from './useId';
 export { useIsMacOS } from './useIsMacOS';
+export { useMergedRefs } from './useMergedRefs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAC,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrF,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAA;AAC3D,YAAY,EAAC,4BAA4B,EAAC,MAAM,wBAAwB,CAAA;AACxE,YAAY,EAAC,4BAA4B,EAAC,MAAM,uBAAuB,CAAA;AACvE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAA;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAA;AACnE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAC,0BAA0B,EAAC,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAA;AAC7B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAC,yBAAyB,EAAE,iBAAiB,EAAC,MAAM,qBAAqB,CAAA;AACrF,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAA;AAC3D,YAAY,EAAC,4BAA4B,EAAC,MAAM,wBAAwB,CAAA;AACxE,YAAY,EAAC,4BAA4B,EAAC,MAAM,uBAAuB,CAAA;AACvE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,YAAY,EAAC,kBAAkB,EAAC,MAAM,cAAc,CAAA;AACpD,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,4BAA4B,CAAA;AACnE,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAC,yBAAyB,EAAC,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAC,0BAA0B,EAAC,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAA;AAC7B,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAA;AACvC,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAA"}

package/dist/hooks/useMergedRefs.d.ts

@@ -0,0 +1,51 @@
+import type { ForwardedRef, Ref as StandardRef } from 'react';
+/**
+ * Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
+ * callback ref).
+ *
+ * If you need to combine more than two refs (what are you doing?) just nest the hook:
+ * `useMergedRefs(refA, useMergedRefs(refB, refC))`
+ *
+ * @param refA First ref to merge. The order is not important.
+ * @param refB Second ref to merge. The order is not important.
+ * @returns A new ref which must be passed to the relevant child component. **Important**: do not pass `refA` or
+ * `refB` to the component!
+ *
+ * @example
+ * // React 18
+ * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
+ *  const ref = useRef<HTMLButtonElement>(null)
+ *  const combinedRef = useMergedRefs(forwardedRef, ref)
+ *
+ *  return <button ref={combinedRef} />
+ * })
+ *
+ * @example
+ * // React 19
+ * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
+ *  const ref = useRef<HTMLButtonElement>(null)
+ *  const combinedRef = useMergedRefs(externalRef, ref)
+ *
+ *  return <button ref={combinedRef} />
+ * }
+ */
+export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => () => void;
+type CleanupFunction = () => void;
+/**
+ * React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the
+ * cleanup is called on unmount **instead** of setting the ref to null.
+ */
+type React19RefCallback<T> = {
+    bivarianceHack(instance: T): void | CleanupFunction;
+}['bivarianceHack'];
+/**
+ * Supporting React 18 and 19 while alleviating the need for any hacks or casts in consumers:
+ * - `ForwardedRef` from the React 18 `forwardRef` HOC
+ * - `React19RefCallback` for callback refs that can return a cleanup function (this is included in `Ref` in React 19
+ *   but not in 18)
+ * - `Ref` for standard refs from `useRef` or passed in as React 19 prop
+ * - `undefined` to allow for easy use of optional `ref` props in React 19
+ */
+type Ref<T> = ForwardedRef<T> | React19RefCallback<T> | StandardRef<T> | undefined;
+export {};
+//# sourceMappingURL=useMergedRefs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useMergedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAE,GAAG,IAAI,WAAW,EAAmB,MAAM,OAAO,CAAA;AAG7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,WAE7D,CAAC,GAAG,IAAI,gBAiBnB;AAED,KAAK,eAAe,GAAG,MAAM,IAAI,CAAA;AAEjC;;;GAGG;AAEH,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,cAAc,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,GAAG,eAAe,CAAA;CACpD,CAAC,gBAAgB,CAAC,CAAA;AAEnB;;;;;;;GAOG;AACH,KAAK,GAAG,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA"}

package/dist/hooks/useMergedRefs.js

@@ -0,0 +1,86 @@
+import { c } from 'react-compiler-runtime';
+import 'react';
+
+/**
+ * Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
+ * callback ref).
+ *
+ * If you need to combine more than two refs (what are you doing?) just nest the hook:
+ * `useMergedRefs(refA, useMergedRefs(refB, refC))`
+ *
+ * @param refA First ref to merge. The order is not important.
+ * @param refB Second ref to merge. The order is not important.
+ * @returns A new ref which must be passed to the relevant child component. **Important**: do not pass `refA` or
+ * `refB` to the component!
+ *
+ * @example
+ * // React 18
+ * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
+ *  const ref = useRef<HTMLButtonElement>(null)
+ *  const combinedRef = useMergedRefs(forwardedRef, ref)
+ *
+ *  return <button ref={combinedRef} />
+ * })
+ *
+ * @example
+ * // React 19
+ * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
+ *  const ref = useRef<HTMLButtonElement>(null)
+ *  const combinedRef = useMergedRefs(externalRef, ref)
+ *
+ *  return <button ref={combinedRef} />
+ * }
+ */
+function useMergedRefs(refA, refB) {
+  const $ = c(3);
+  let t0;
+  if ($[0] !== refA || $[1] !== refB) {
+    t0 = value => {
+      const cleanupA = setRef(refA, value);
+      const cleanupB = setRef(refB, value);
+      return () => {
+        if (cleanupA) {
+          cleanupA();
+        } else {
+          setRef(refA, null);
+        }
+        if (cleanupB) {
+          cleanupB();
+        } else {
+          setRef(refB, null);
+        }
+      };
+    };
+    $[0] = refA;
+    $[1] = refB;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+/**
+ * React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the
+ * cleanup is called on unmount **instead** of setting the ref to null.
+ */
+// bivarianceHack copied from React types
+
+/**
+ * Supporting React 18 and 19 while alleviating the need for any hacks or casts in consumers:
+ * - `ForwardedRef` from the React 18 `forwardRef` HOC
+ * - `React19RefCallback` for callback refs that can return a cleanup function (this is included in `Ref` in React 19
+ *   but not in 18)
+ * - `Ref` for standard refs from `useRef` or passed in as React 19 prop
+ * - `undefined` to allow for easy use of optional `ref` props in React 19
+ */
+
+function setRef(ref, value) {
+  if (typeof ref === 'function') {
+    return ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+export { useMergedRefs };

package/dist/hooks/useProvidedRefOrCreate.d.ts

@@ -6,6 +6,18 @@ import React from 'react';
  * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
+ *
+ * @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
+ * created ref instead.
+ *
+ * ```diff
+ * - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
+ * + const ref = useRef(null)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 export declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null>;
 //# sourceMappingURL=useProvidedRefOrCreate.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useProvidedRefOrCreate.d.ts","sourceRoot":"","sources":["../../src/hooks/useProvidedRefOrCreate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAGrH"}
+{"version":3,"file":"useProvidedRefOrCreate.d.ts","sourceRoot":"","sources":["../../src/hooks/useProvidedRefOrCreate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAGrH"}

package/dist/hooks/useProvidedRefOrCreate.js

@@ -7,6 +7,18 @@ import React from 'react';
  * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
+ *
+ * @deprecated This hook is incompatible with forwarded callback refs. Prefer `useMergedRefs` with an internally
+ * created ref instead.
+ *
+ * ```diff
+ * - const ref = useProvidedRefOrCreate(forwardedRef as RefObject<...>)
+ * + const ref = useRef(null)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 function useProvidedRefOrCreate(providedRef) {
   const createdRef = React.useRef(null);

package/dist/hooks/useRefObjectAsForwardedRef.d.ts

@@ -5,6 +5,18 @@ import type { ForwardedRef, RefObject } from 'react';
  * instance with `.current`.
  *
  * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
+ *
+ * @deprecated Migrate to `useMergedRefs`. It's safer, faster, and easier to use:
+ *
+ * ```diff
+ *   const ref = useRef(null)
+ *
+ * - useRefObjectAsForwardedRef(forwardedRef, ref)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 export declare function useRefObjectAsForwardedRef<T>(forwardedRef: ForwardedRef<T>, refObject: RefObject<T | null>): void;
 //# sourceMappingURL=useRefObjectAsForwardedRef.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRefObjectAsForwardedRef.d.ts","sourceRoot":"","sources":["../../src/hooks/useRefObjectAsForwardedRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAA;AAGlD;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAEjH"}
+{"version":3,"file":"useRefObjectAsForwardedRef.d.ts","sourceRoot":"","sources":["../../src/hooks/useRefObjectAsForwardedRef.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAA;AAGlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAEjH"}

package/dist/hooks/useRefObjectAsForwardedRef.js

@@ -7,6 +7,18 @@ import { useImperativeHandle } from 'react';
  * instance with `.current`.
  *
  * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
+ *
+ * @deprecated Migrate to `useMergedRefs`. It's safer, faster, and easier to use:
+ *
+ * ```diff
+ *   const ref = useRef(null)
+ *
+ * - useRefObjectAsForwardedRef(forwardedRef, ref)
+ * + const mergedRef = useMergedRefs(forwardedRef, ref)
+ *
+ * - return <div ref={ref} />
+ * + return <div ref={mergedRef} />
+ * ```
  */
 function useRefObjectAsForwardedRef(forwardedRef, refObject) {
   const $ = c(2);

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export type { FocusTrapHookSettings } from './hooks/useFocusTrap';
 export { useFocusZone } from './hooks/useFocusZone';
 export type { FocusZoneHookSettings } from './hooks/useFocusZone';
 export { useRefObjectAsForwardedRef } from './hooks/useRefObjectAsForwardedRef';
+export { useMergedRefs } from './hooks/useMergedRefs';
 export { useResizeObserver } from './hooks/useResizeObserver';
 export { useResponsiveValue, type ResponsiveValue } from './hooks/useResponsiveValue';
 export { default as useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect';