@sanity/ui 2.6.4-canary.2 → 2.6.4

package/dist/index.d.mts

@@ -628,7 +628,7 @@ export declare interface CheckboxProps {
 /**
  * @public
  */
-export declare type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export declare type ClickOutsideListener = (event: MouseEvent) => void
 
 /**
  * @public
@@ -1432,7 +1432,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -2649,22 +2649,13 @@ export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPri
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /**
- * Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
- * ```tsx
- * useClickOutside(
- *   () => {},
- *   () => [ref.current],
- * )
- *
  * @public
  */
 export declare function useClickOutside(
   listener: ClickOutsideListener,
-  elementsArg?:
-    | Array<HTMLElement | HTMLElement[] | null>
-    | (() => Array<HTMLElement | HTMLElement[] | null>),
+  elementsArg?: Array<HTMLElement | HTMLElement[] | null>,
   boundaryElement?: HTMLElement | null,
-): void
+): (el: HTMLElement | null) => void
 
 /**
  * @beta
@@ -2722,18 +2713,6 @@ export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => vo
  */
 export declare function useLayer(): LayerContextValue
 
-/**
- * Efficiently subscribes to `window.matchMedia` queries
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export declare function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -2746,30 +2725,15 @@ export declare function useMediaIndex(): number
 export declare function usePortal(): PortalContextValue
 
 /**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
  * @public
  */
-export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
+export declare function usePrefersDark(): boolean
 
 /**
  * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
- *
  * @public
  */
-export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
+export declare function usePrefersReducedMotion(): boolean
 
 /**
  * @public

package/dist/index.d.ts

@@ -628,7 +628,7 @@ export declare interface CheckboxProps {
 /**
  * @public
  */
-export declare type ClickOutsideListener = (event: MouseEvent | TouchEvent) => void
+export declare type ClickOutsideListener = (event: MouseEvent) => void
 
 /**
  * @public
@@ -1432,7 +1432,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
    * @deprecated Use `shouldFocus="last"` instead.
    */
   focusLast?: boolean
-  onClickOutside?: (event: MouseEvent | TouchEvent) => void
+  onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -2649,22 +2649,13 @@ export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPri
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
 /**
- * Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
- * ```tsx
- * useClickOutside(
- *   () => {},
- *   () => [ref.current],
- * )
- *
  * @public
  */
 export declare function useClickOutside(
   listener: ClickOutsideListener,
-  elementsArg?:
-    | Array<HTMLElement | HTMLElement[] | null>
-    | (() => Array<HTMLElement | HTMLElement[] | null>),
+  elementsArg?: Array<HTMLElement | HTMLElement[] | null>,
   boundaryElement?: HTMLElement | null,
-): void
+): (el: HTMLElement | null) => void
 
 /**
  * @beta
@@ -2722,18 +2713,6 @@ export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => vo
  */
 export declare function useLayer(): LayerContextValue
 
-/**
- * Efficiently subscribes to `window.matchMedia` queries
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export declare function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -2746,30 +2725,15 @@ export declare function useMediaIndex(): number
 export declare function usePortal(): PortalContextValue
 
 /**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
  * @public
  */
-export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
+export declare function usePrefersDark(): boolean
 
 /**
  * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
- *
  * @public
  */
-export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
+export declare function usePrefersReducedMotion(): boolean
 
 /**
  * @public

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useEffect, useState, useRef, useImperativeHandle, useDebugValue, useSyncExternalStore, createContext, useContext, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
 import Refractor from "react-refractor";
-import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from "@floating-ui/react-dom";
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
 import { useEffectEvent } from "use-effect-event";
@@ -131,26 +131,45 @@ function useArrayProp(val, defaultVal) {
     [__perf_hash__]
   );
 }
+function _getElements(element, elementsArg) {
+  const ret = [element];
+  for (const el of elementsArg)
+    Array.isArray(el) ? ret.push(...el) : ret.push(el);
+  return ret.filter(Boolean);
+}
 function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
-  const eventHandler = useEffectEvent((evt) => {
-    const target = evt.target;
-    if (!(target instanceof Node) || boundaryElement && !boundaryElement.contains(target))
+  const [element, setElement] = useState(null), [elements, setElements] = useState(() => _getElements(element, elementsArg)), elementsRef = useRef(elements);
+  return useEffect(() => {
+    const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
+    if (prevElements.length !== nextElements.length) {
+      setElements(nextElements), elementsRef.current = nextElements;
       return;
-    const elements = (Array.isArray(elementsArg) ? elementsArg : elementsArg()).flat();
-    for (const el of elements)
-      if (el && (target === el || el.contains(target)))
+    }
+    for (const el of prevElements)
+      if (!nextElements.includes(el)) {
+        setElements(nextElements), elementsRef.current = nextElements;
         return;
-    listener(evt);
-  });
-  useEffect(() => (document.addEventListener("mousedown", eventHandler), document.addEventListener("touchstart", eventHandler), () => {
-    document.removeEventListener("mousedown", eventHandler), document.removeEventListener("touchstart", eventHandler);
-  }), [eventHandler]);
-}
-function useCustomValidity(ref, customValidity) {
-  useEffect(() => {
-    var _a;
-    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
-  }, [customValidity, ref]);
+      }
+    for (const el of nextElements)
+      if (!prevElements.includes(el)) {
+        setElements(nextElements), elementsRef.current = nextElements;
+        return;
+      }
+  }, [element, elementsArg]), useEffect(() => {
+    if (!listener) return;
+    const handleWindowMouseDown = (evt) => {
+      const target = evt.target;
+      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
+        for (const el of elements)
+          if (target === el || el.contains(target))
+            return;
+        listener(evt);
+      }
+    };
+    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
+      window.removeEventListener("mousedown", handleWindowMouseDown);
+    };
+  }, [boundaryElement, listener, elements]), setElement;
 }
 var resizeObservers = [], hasActiveObservations = function() {
   return resizeObservers.some(function(ro) {
@@ -485,27 +504,9 @@ function useElementRect(element) {
   const elementSize = useElementSize(element);
   return (elementSize == null ? void 0 : elementSize._contentRect) || null;
 }
-function useForwardedRef(ref) {
-  const innerRef = useRef(null);
-  return useImperativeHandle(ref, () => innerRef.current), innerRef;
-}
 function useGlobalKeyDown(onKeyDown) {
   return useEffect(() => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), [onKeyDown]);
 }
-function useMatchMedia(mediaQueryString, getServerSnapshot2) {
-  const { subscribe: subscribe2, getSnapshot } = useMemo(() => {
-    let MEDIA_QUERY_CACHE;
-    const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
-    return {
-      subscribe: (onStoreChange) => {
-        const matchMedia = getMatchMedia();
-        return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
-      },
-      getSnapshot: () => getMatchMedia().matches
-    };
-  }, [mediaQueryString]);
-  return useDebugValue(mediaQueryString), useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
-}
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -548,6 +549,7 @@ function useTheme() {
 function useTheme_v2() {
   return getTheme_v2(useTheme$1());
 }
+const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
 function _getMediaQuery(media, index) {
   return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
 }
@@ -582,18 +584,57 @@ function _createMediaStore(media) {
     };
   } };
 }
-function getServerSnapshot() {
+function getServerSnapshot$2() {
   return 0;
 }
 function useMediaIndex() {
-  const { media } = useTheme_v2(), store = useMemo(() => _createMediaStore(media), [media]);
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+  const { media } = useTheme_v2();
+  let store = MEDIA_STORE_CACHE.get(media);
+  return store || (store = _createMediaStore(media), MEDIA_STORE_CACHE.set(media, store)), useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot$2);
+}
+let MEDIA_QUERY_CACHE$1;
+function getMatchMedia$1() {
+  return MEDIA_QUERY_CACHE$1 || (MEDIA_QUERY_CACHE$1 = window.matchMedia("(prefers-color-scheme: dark)")), MEDIA_QUERY_CACHE$1;
 }
-function usePrefersDark(getServerSnapshot2 = () => !1) {
-  return useMatchMedia("(prefers-color-scheme: dark)", getServerSnapshot2);
+function subscribe$2(onStoreChange) {
+  const matchMedia = getMatchMedia$1();
+  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
 }
-function usePrefersReducedMotion(getServerSnapshot2 = () => !1) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", getServerSnapshot2);
+function getSnapshot$1() {
+  return getMatchMedia$1().matches;
+}
+function getServerSnapshot$1() {
+  return !1;
+}
+function usePrefersDark() {
+  return useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
+}
+let MEDIA_QUERY_CACHE;
+function getMatchMedia() {
+  return MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia("(prefers-reduced-motion: reduce)")), MEDIA_QUERY_CACHE;
+}
+function subscribe$1(onStoreChange) {
+  const matchMedia = getMatchMedia();
+  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+  return getMatchMedia().matches;
+}
+function getServerSnapshot() {
+  return !1;
+}
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
+}
+function useForwardedRef(ref) {
+  const innerRef = useRef(null);
+  return useImperativeHandle(ref, () => innerRef.current), innerRef;
+}
+function useCustomValidity(ref, customValidity) {
+  useEffect(() => {
+    var _a;
+    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
+  }, [customValidity, ref]);
 }
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
@@ -3019,6 +3060,16 @@ function Portal(props) {
   const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || ((_a = portal.elements) == null ? void 0 : _a.default);
   return portalElement ? createPortal(children, portalElement) : null;
 }
+function useUnique(value) {
+  const valueRef = useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
+}
+function _isEqual(objA, objB) {
+  if (!objA || !objB)
+    return objA === objB;
+  const keysA = Object.keys(objA), keysB = Object.keys(objB);
+  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
+}
 function useMounted() {
   return useSyncExternalStore(
     subscribe,
@@ -3029,7 +3080,7 @@ function useMounted() {
 const subscribe = () => () => {
 };
 function PortalProvider(props) {
-  const { boundaryElement, children, element, __unstable_elements: elements } = props, mounted = useMounted(), value = useMemo(() => ({
+  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), mounted = useMounted(), value = useMemo(() => ({
     version: 0,
     boundaryElement: boundaryElement || null,
     element: element || mounted ? document.body : null,
@@ -4292,6 +4343,7 @@ function TooltipDelayGroupProvider(props) {
 }
 const Root$a = styled(Layer)`
   pointer-events: none;
+  max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = forwardRef(function(props, forwardedRef) {
   var _a, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
@@ -4313,21 +4365,18 @@ const Root$a = styled(Layer)`
     ...restProps
   } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport";
   useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, middleware = useMemo(() => {
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, mounted = useMounted(), tooltipWidth = useMemo(() => {
+    const availableWidths = [
+      ...boundaryElement ? [boundaryElement.offsetWidth] : [],
+      portalElement != null && portalElement.offsetWidth || mounted ? document.body.offsetWidth : (
+        // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
+        800
+      )
+    ];
+    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
+  }, [boundaryElement, mounted, portalElement]), middleware = useMemo(() => {
     const ret = [];
     return ret.push(
-      size$2({
-        apply({ elements }) {
-          const availableWidths = [
-            ...boundaryElement ? [boundaryElement.offsetWidth] : [],
-            (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth
-          ], tooltipWidth = Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
-          Object.assign(elements.floating.style, {
-            maxWidth: tooltipWidth > 0 ? `${tooltipWidth}px` : void 0
-          });
-        }
-      })
-    ), ret.push(
       flip({
         boundary: boundaryElement || void 0,
         fallbackPlacements,
@@ -4341,7 +4390,7 @@ const Root$a = styled(Layer)`
         padding: DEFAULT_TOOLTIP_PADDING
       })
     ), arrowProp && ret.push(arrow({ element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements, portalElement]), { floatingStyles, placement, middlewareData, refs, update } = useFloating({
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), { floatingStyles, placement, middlewareData, refs, update } = useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate
@@ -4451,6 +4500,7 @@ const Root$a = styled(Layer)`
       ref: setFloating,
       style: floatingStyles,
       zOffset,
+      $maxWidth: tooltipWidth,
       children: /* @__PURE__ */ jsx(
         TooltipCard,
         {
@@ -4916,8 +4966,8 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = forwardRef(function(props, ref) {
-  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = useArrayProp(spaceRaw), [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
-  useClickOutside(collapse, () => [expandElementRef.current, popoverElementRef.current]);
+  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = useArrayProp(spaceRaw), [open, setOpen] = useState(!1), [expandElement, setExpandElement] = useState(null), [popoverElement, setPopoverElement] = useState(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
+  useClickOutside(collapse, [expandElement, popoverElement]);
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children]), items = useMemo(() => {
     const len = rawItems.length;
     if (maxLength && len > maxLength) {
@@ -4932,7 +4982,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
             open,
             placement: "top",
             portal: !0,
-            ref: popoverElementRef,
+            ref: setPopoverElement,
             children: /* @__PURE__ */ jsx(
               ExpandButton,
               {
@@ -4940,7 +4990,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
                 mode: "bleed",
                 onClick: open ? collapse : expand,
                 padding: 1,
-                ref: expandElementRef,
+                ref: setExpandElement,
                 selected: open,
                 text: "\u2026"
               }
@@ -5065,8 +5115,8 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     scheme,
     shadow: shadowProp,
     width: widthProp
-  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), contentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
-  return useImperativeHandle(forwardedRef, () => ref.current), useImperativeHandle(
+  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), [rootElement, setRootElement] = useState(null), contentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
+  useImperativeHandle(forwardedRef, () => ref.current), useImperativeHandle(
     forwardedContentRef,
     () => contentRef.current
   ), useEffect(() => {
@@ -5081,13 +5131,20 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
       [boundaryElement, isTopLayer, onClose, portalElement]
     )
   ), useClickOutside(
-    (event) => {
-      if (!isTopLayer || !onClickOutside) return;
-      const target = event.target;
-      target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
-    },
-    () => [ref.current]
-  ), /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref, scheme, shadow, children: /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
+    useCallback(
+      (event) => {
+        if (!isTopLayer || !onClickOutside) return;
+        const target = event.target;
+        target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
+      },
+      [boundaryElement, isTopLayer, onClickOutside, portalElement]
+    ),
+    [rootElement]
+  );
+  const setRef = useCallback((el) => {
+    setRootElement(el), ref.current = el;
+  }, []);
+  return /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref: setRef, scheme, shadow, children: /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
     showHeader && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", padding: 3, children: [
       /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
       showCloseButton && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(
@@ -5265,13 +5322,13 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = useRef([]), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = useCallback((nextActiveIndex) => {
+  const { onKeyDown, originElement, shouldFocus } = props, elementsRef = useRef([]), [rootElement, setRootElement] = useState(null), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = elementsRef.current[activeIndex] || null, mounted = !!rootElement, setActiveIndex = useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
   }, []), mount = useCallback(
     (element, selected) => {
       if (!element) return () => {
       };
-      if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
+      if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElement, elementsRef.current)), selected) {
         const selectedIndex = elementsRef.current.indexOf(element);
         setActiveIndex(selectedIndex);
       }
@@ -5280,7 +5337,7 @@ function useMenuController(props) {
         idx > -1 && elementsRef.current.splice(idx, 1);
       };
     },
-    [rootElementRef, setActiveIndex]
+    [rootElement, setActiveIndex]
   ), handleKeyDown = useCallback(
     (event) => {
       if (event.key === "Tab") {
@@ -5335,13 +5392,13 @@ function useMenuController(props) {
     },
     [setActiveIndex]
   ), handleItemMouseLeave = useCallback(() => {
-    var _a;
-    setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
-  }, [rootElementRef, setActiveIndex]);
+    setActiveIndex(-2), rootElement == null || rootElement.focus();
+  }, [setActiveIndex, rootElement]);
   return useEffect(() => {
     if (!mounted) return;
     const rafId = window.requestAnimationFrame(() => {
-      if (activeIndex === -1) {
+      const _activeIndex = activeIndexRef.current;
+      if (_activeIndex === -1) {
         if (shouldFocus === "first") {
           const el = _getFocusableElements(elementsRef.current)[0];
           if (el) {
@@ -5358,7 +5415,7 @@ function useMenuController(props) {
         }
         return;
       }
-      const element = elementsRef.current[activeIndex] || null;
+      const element = elementsRef.current[_activeIndex] || null;
       element == null || element.focus();
     });
     return () => {
@@ -5370,7 +5427,9 @@ function useMenuController(props) {
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount
+    mount,
+    rootElement,
+    setRootElement
   };
 }
 const Root$5 = styled(Box)`
@@ -5402,18 +5461,23 @@ const Root$5 = styled(Box)`
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount
-  } = useMenuController({ onKeyDown, originElement, shouldFocus, rootElementRef: ref }), handleRefChange = useCallback(
+    mount,
+    rootElement,
+    setRootElement
+  } = useMenuController({ onKeyDown, originElement, shouldFocus }), handleRefChange = useCallback(
     (el) => {
-      ref.current = el, ref.current && registerElement && registerElement(ref.current);
+      setRootElement(el), ref.current = el;
     },
-    [registerElement]
+    [setRootElement]
   );
   useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
   }, [activeIndex, onItemSelect]), useClickOutside(
-    (event) => isTopLayer && onClickOutside && onClickOutside(event),
-    () => [ref.current]
+    useCallback(
+      (event) => isTopLayer && onClickOutside && onClickOutside(event),
+      [isTopLayer, onClickOutside]
+    ),
+    [rootElement]
   ), useGlobalKeyDown(
     useCallback(
       (event) => {
@@ -5421,7 +5485,10 @@ const Root$5 = styled(Box)`
       },
       [isTopLayer, onEscape]
     )
-  );
+  ), useEffect(() => {
+    if (!(!rootElement || !registerElement))
+      return registerElement(rootElement);
+  }, [registerElement, rootElement]);
   const value = useMemo(
     () => ({
       version: 0,
@@ -6097,7 +6164,7 @@ const CustomInline = styled(Inline)`
   }
   100% {
     width: 100%;
-  }
+  } 
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2$1(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
@@ -6795,7 +6862,6 @@ export {
   useForwardedRef,
   useGlobalKeyDown,
   useLayer,
-  useMatchMedia,
   useMediaIndex,
   usePortal,
   usePrefersDark,