@sanity/ui 2.2.0 → 2.3.0

package/dist/index.js

@@ -621,12 +621,9 @@ function getServerSnapshot() {
 function usePrefersReducedMotion() {
   return react.useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
 }
-const useIsomorphicEffect = typeof window < "u" ? react.useLayoutEffect : react.useEffect;
 function useForwardedRef(ref) {
   const innerRef = react.useRef(null);
-  return useIsomorphicEffect(() => {
-    ref && (typeof ref == "function" ? ref(innerRef.current) : ref.current = innerRef.current);
-  }), innerRef;
+  return react.useImperativeHandle(ref, () => innerRef.current), innerRef;
 }
 function useCustomValidity(ref, customValidity) {
   react.useEffect(() => {
@@ -2374,10 +2371,13 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
     readOnly,
     style,
     ...restProps
-  } = props, ref = useForwardedRef(forwardedRef);
-  return useCustomValidity(ref, customValidity), react.useEffect(() => {
+  } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate, ref]), /* @__PURE__ */ jsxRuntime.jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
+  }, [indeterminate]), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$5,
       {
@@ -2852,16 +2852,15 @@ function findMinBreakpoints(media, width) {
     media[i] <= width && ret.push(i);
   return ret;
 }
-const ElementQuery = react.forwardRef(function(props, ref) {
-  const theme2 = useTheme_v2(), { children, media = theme2.media, ...restProps } = props, forwardedRef = useForwardedRef(ref), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => {
+const ElementQuery = react.forwardRef(function(props, forwardedRef) {
+  const theme2 = useTheme_v2(), { children, media = theme2.media, ...restProps } = props, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => {
     var _a;
     return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]), setRef = react.useCallback(
-    (el) => {
-      forwardedRef.current = el, setElement(el);
-    },
-    [forwardedRef]
-  );
+  }, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const setRef = react.useCallback((el) => {
+    ref.current = el, setElement(el);
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3021,30 +3020,20 @@ function LayerProvider(props) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
 }
-const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, ref) {
-  const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), forwardedRef = useForwardedRef(ref), isTopLayerRef = react.useRef(isTopLayer);
-  react.useEffect(() => {
+const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
+  const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && (onActivate == null || onActivate({ activeElement: lastFocusedRef.current })), isTopLayerRef.current = isTopLayer;
   }, [isTopLayer, onActivate]);
   const handleFocus = react.useCallback(
     (event) => {
       onFocus == null || onFocus(event);
-      const rootElement = forwardedRef.current, target = document.activeElement;
+      const rootElement = ref.current, target = document.activeElement;
       !isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
     },
-    [forwardedRef, isTopLayer, onFocus]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$j,
-    {
-      ...restProps,
-      "data-ui": "Layer",
-      onFocus: handleFocus,
-      ref: forwardedRef,
-      style: { ...style, zIndex },
-      children
-    }
+    [isTopLayer, onFocus]
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$j, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: { ...style, zIndex }, children });
 }), Layer = react.forwardRef(function(props, ref) {
   const { children, zOffset = 1, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(LayerChildren, { ...restProps, ref, children }) });
@@ -3110,15 +3099,15 @@ const emptySubscribe$1 = () => () => {
   position: absolute;
   left: 0;
   right: 0;
-`, VirtualList = react.forwardRef(function(props, ref) {
-  const { as = "div", gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps } = props, { space } = useTheme_v2(), forwardedRef = useForwardedRef(ref), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1);
-  react.useEffect(() => {
+`, VirtualList = react.forwardRef(function(props, forwardedRef) {
+  const { as = "div", gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps } = props, { space } = useTheme_v2(), ref = react.useRef(null), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1);
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     if (!wrapperRef.current) return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
   }, [renderItem]), react.useEffect(() => {
-    if (!forwardedRef.current) return;
-    let _scrollEl = forwardedRef.current.parentNode;
+    if (!ref.current) return;
+    let _scrollEl = ref.current.parentNode;
     for (; _scrollEl && !_isScrollable(_scrollEl); )
       _scrollEl = _scrollEl.parentNode;
     if (_scrollEl) {
@@ -3143,7 +3132,7 @@ const emptySubscribe$1 = () => () => {
     return window.addEventListener("scroll", handleScroll, { passive: !0 }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll(), () => {
       window.removeEventListener("scroll", handleScroll), window.removeEventListener("resize", handleResize);
     };
-  }, [forwardedRef]);
+  }, []);
   const len = items.length, height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
   react.useEffect(() => {
     onChange && onChange({ fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex });
@@ -3152,7 +3141,7 @@ const emptySubscribe$1 = () => () => {
     const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
     return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: { top: itemIndex * (itemHeight + space[gap]) }, children: node }, key2);
   }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = react.useMemo(() => ({ height }), [height]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref: forwardedRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
 }), DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER_ARROW_WIDTH = 19, DEFAULT_POPOVER_ARROW_HEIGHT = 8, DEFAULT_POPOVER_ARROW_RADIUS = 2, DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0], DEFAULT_FALLBACK_PLACEMENTS$1 = {
   top: ["bottom", "left", "right"],
   "top-start": ["bottom-start", "left-start", "right-start"],
@@ -3298,7 +3287,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
 );
 PopoverCard.displayName = "PopoverCard";
 const Popover = react.memo(
-  react.forwardRef(function(props, ref) {
+  react.forwardRef(function(props, forwardedRef) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
@@ -3330,7 +3319,12 @@ const Popover = react.memo(
       zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
-    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), forwardedRef = useForwardedRef(ref), arrowRef = react.useRef(null), rootBoundary = "viewport", mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0, width = calcCurrentWidth({
+    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+    react.useImperativeHandle(
+      forwardedRef,
+      () => ref.current
+    );
+    const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0, width = calcCurrentWidth({
       container,
       mediaIndex,
       width: widthArrayProp
@@ -3344,11 +3338,11 @@ const Popover = react.memo(
     }, [maxWidth]);
     const referenceWidthRef = react.useRef();
     react.useEffect(() => {
-      const floatingElement = forwardedRef.current;
+      const floatingElement = ref.current;
       if (!open || !floatingElement) return;
       const referenceWidth = referenceWidthRef.current;
       matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
-    }, [width, forwardedRef, matchReferenceWidth, maxWidth, open]);
+    }, [width, matchReferenceWidth, maxWidth, open]);
     const middleware = react.useMemo(() => {
       const ret = [];
       return (constrainSize || preventOverflow) && ret.push(
@@ -3410,9 +3404,9 @@ const Popover = react.memo(
       arrowRef.current = arrowEl;
     }, []), setFloating = react.useCallback(
       (node) => {
-        forwardedRef.current = node, refs.setFloating(node);
+        ref.current = node, refs.setFloating(node);
       },
-      [forwardedRef, refs]
+      [refs]
     ), setReference = react.useCallback(
       (node) => {
         refs.setReference(node);
@@ -3585,8 +3579,11 @@ function inputElementStyle(props) {
   `;
 }
 const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
-  const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = useForwardedRef(forwardedRef);
-  return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
+  const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$4,
       {
@@ -3747,8 +3744,11 @@ const selectStyle = {
     readOnly,
     space = 3,
     ...restProps
-  } = props, ref = useForwardedRef(forwardedRef);
-  return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$f, { "data-ui": "Select", children: [
+  } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$f, { "data-ui": "Select", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$3,
       {
@@ -3942,10 +3942,13 @@ function switchThumbStyles(props) {
   `;
 }
 const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
-  const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = useForwardedRef(forwardedRef);
-  return react.useEffect(() => {
+  const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate, ref]), /* @__PURE__ */ jsxRuntime.jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
+  }, [indeterminate]), /* @__PURE__ */ jsxRuntime.jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$2,
       {
@@ -3984,8 +3987,11 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     radius = 2,
     weight,
     ...restProps
-  } = props, ref = useForwardedRef(forwardedRef), rootTheme = useRootTheme();
-  return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
+  } = props, ref = react.useRef(null), rootTheme = useRootTheme();
+  return react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$1,
       {
@@ -4080,8 +4086,11 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     type = "text",
     weight,
     ...restProps
-  } = props, ref = useForwardedRef(forwardedRef), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!icon, $hasIconRight = !!iconRight, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
-  useCustomValidity(ref, customValidity);
+  } = props, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!icon, $hasIconRight = !!iconRight, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity);
   const handleClearMouseDown = react.useCallback((event) => {
     event.preventDefault(), event.stopPropagation();
   }, []), handleClearClick = react.useCallback(
@@ -4328,7 +4337,7 @@ function TooltipDelayGroupProvider(props) {
 const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
   max-width: ${({ $maxWidth }) => $maxWidth}px;
-`, Tooltip = react.forwardRef(function(props, ref) {
+`, Tooltip = react.forwardRef(function(props, forwardedRef) {
   var _a, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
     animate: _animate = !1,
@@ -4347,7 +4356,9 @@ const Root$a = styledComponents.styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), forwardedRef = useForwardedRef(ref), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = react.useSyncExternalStore(
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = react.useSyncExternalStore(
     emptySubscribe,
     () => 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
@@ -4457,9 +4468,9 @@ const Root$a = styledComponents.styled(Layer)`
     [update]
   ), setFloating = react.useCallback(
     (node) => {
-      forwardedRef.current = node, refs.setFloating(node);
+      ref.current = node, refs.setFloating(node);
     },
-    [forwardedRef, refs]
+    [refs]
   ), childRef = childProp == null ? void 0 : childProp.ref, setReference = react.useCallback(
     (node) => {
       typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node), setReferenceElement(node);
@@ -4593,7 +4604,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   "Meta",
   "Tab",
   "CapsLock"
-], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = react.forwardRef(function(props, ref) {
+], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = react.forwardRef(function(props, forwardedRef) {
   const {
     border: border2 = !0,
     customValidity,
@@ -4632,7 +4643,12 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   }), { activeValue, focused, listFocused, query, value } = state, defaultRenderOption = react.useCallback(
     ({ value: value2 }) => /* @__PURE__ */ jsxRuntime.jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", children: value2 }) }),
     [fontSize2, paddingProp]
-  ), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1), forwardedRef = useForwardedRef(ref), listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = react.useMemo(
+  ), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
+  react.useImperativeHandle(
+    forwardedRef,
+    () => inputElementRef.current
+  );
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = react.useMemo(
     () => value !== null ? options.find((o) => o.value === value) : void 0,
     [options, value]
   ), filteredOptions = react.useMemo(
@@ -4736,12 +4752,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       }
     }
   }, [activeValue, filteredOptions]);
-  const setRef = react.useCallback(
-    (el) => {
-      inputElementRef.current = el, forwardedRef.current = el;
-    },
-    [forwardedRef]
-  ), clearButton = react.useMemo(() => {
+  const clearButton = react.useMemo(() => {
     if (!loading && !disabled && value)
       return {
         "aria-label": "Clear",
@@ -4816,7 +4827,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       prefix,
       radius,
       readOnly,
-      ref: setRef,
+      ref: inputElementRef,
       role: "combobox",
       spellCheck: !1,
       suffix: suffix || openButtonNode,
@@ -5078,13 +5089,13 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
 `, DialogFooter = styledComponents.styled(Box)`
   position: relative;
   z-index: 3;
-`, DialogCard = react.forwardRef(function(props, ref) {
+`, DialogCard = react.forwardRef(function(props, forwardedRef) {
   var _a;
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
     children,
-    contentRef,
+    contentRef: forwardedContentRef,
     footer,
     header,
     id,
@@ -5095,10 +5106,13 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     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), forwardedRef = useForwardedRef(ref), [rootElement, setRootElement] = react.useState(null), localContentRef = react.useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
-  react.useEffect(() => {
-    autoFocus && forwardedRef.current && focusFirstDescendant(forwardedRef.current);
-  }, [autoFocus, forwardedRef]), useGlobalKeyDown(
+  } = 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 = react.useRef(null), [rootElement, setRootElement] = react.useState(null), contentRef = react.useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useImperativeHandle(
+    forwardedContentRef,
+    () => contentRef.current
+  ), react.useEffect(() => {
+    autoFocus && ref.current && focusFirstDescendant(ref.current);
+  }, [autoFocus, ref]), useGlobalKeyDown(
     react.useCallback(
       (event) => {
         if (!isTopLayer || !onClose) return;
@@ -5118,17 +5132,9 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     ),
     [rootElement]
   );
-  const setRef = react.useCallback(
-    (el) => {
-      setRootElement(el), forwardedRef.current = el;
-    },
-    [forwardedRef]
-  ), setContentRef = react.useCallback(
-    (el) => {
-      localContentRef.current = el, typeof contentRef == "function" ? contentRef(el) : contentRef && (contentRef.current = el);
-    },
-    [contentRef]
-  );
+  const setRef = react.useCallback((el) => {
+    setRootElement(el), ref.current = el;
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsxRuntime.jsx(DialogCardRoot, { radius, ref: setRef, scheme, shadow, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogLayout, { direction: "column", children: [
     showHeader && /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", padding: 3, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsxRuntime.jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
@@ -5144,7 +5150,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { flex: 1, ref: setContentRef, tabIndex: -1, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }),
     footer && /* @__PURE__ */ jsxRuntime.jsx(DialogFooter, { children: footer })
   ] }) }) });
 }), Dialog = react.forwardRef(function(props, ref) {
@@ -5420,7 +5426,7 @@ function useMenuController(props) {
 const Root$5 = styledComponents.styled(Box)`
   outline: none;
   overflow: auto;
-`, Menu = react.forwardRef(function(props, ref) {
+`, Menu = react.forwardRef(function(props, forwardedRef) {
   const {
     children,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -5438,7 +5444,9 @@ const Root$5 = styledComponents.styled(Box)`
     shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
     space = 1,
     ...restProps
-  } = props, forwardedRef = useForwardedRef(ref), { isTopLayer } = useLayer(), {
+  } = props, ref = react.useRef(null);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const { isTopLayer } = useLayer(), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
@@ -5449,9 +5457,9 @@ const Root$5 = styledComponents.styled(Box)`
     setRootElement
   } = useMenuController({ onKeyDown, originElement, shouldFocus }), handleRefChange = react.useCallback(
     (el) => {
-      setRootElement(el), forwardedRef.current = el;
+      setRootElement(el), ref.current = el;
     },
-    [forwardedRef, setRootElement]
+    [setRootElement]
   );
   react.useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
@@ -5886,9 +5894,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     onItemMouseLeave = menu.onMouseLeave
-  } = menu, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement;
-  react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
-  const ref = useForwardedRef(forwardedRef), handleClick = react.useCallback(
+  } = menu, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
+  const handleClick = react.useCallback(
     (event) => {
       disabled || (onClick && onClick(event), onItemClick && onItemClick());
     },
@@ -5904,12 +5912,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       paddingLeft
     }),
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]
-  ), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = react.useCallback(
-    (el) => {
-      ref.current = el, setRootElement(el);
-    },
-    [ref]
-  );
+  ), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = react.useCallback((el) => {
+    ref.current = el, setRootElement(el);
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Selectable,
     {
@@ -6048,16 +6053,21 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     padding = 2,
     selected,
     ...restProps
-  } = props, elementRef = react.useRef(null), focusedRef = react.useRef(!1), handleBlur = react.useCallback(() => {
+  } = props, ref = react.useRef(null), focusedRef = react.useRef(!1);
+  react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  );
+  const handleBlur = react.useCallback(() => {
     focusedRef.current = !1;
   }, []), handleFocus = react.useCallback(
     (event) => {
       focusedRef.current = !0, onFocus && onFocus(event);
     },
     [onFocus]
-  ), ref = useForwardedRef(forwardedRef);
+  );
   return react.useEffect(() => {
-    focused && !focusedRef.current && (elementRef.current && elementRef.current.focus(), focusedRef.current = !0);
+    focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
   }, [focused]), /* @__PURE__ */ jsxRuntime.jsx(
     CustomButton,
     {
@@ -6072,9 +6082,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       onBlur: handleBlur,
       onFocus: handleFocus,
       padding,
-      ref: (el) => {
-        elementRef.current = el, ref.current = el;
-      },
+      ref,
       role: "tab",
       selected,
       tabIndex: selected ? 0 : -1,
@@ -6357,9 +6365,12 @@ function _focusItemElement(el) {
   }
 }
 const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalScopedContext(key, null), Tree = react.memo(
-  react.forwardRef(function(props, ref) {
-    const { children, space = 1, onFocus, ...restProps } = props, forwardedRef = useForwardedRef(ref), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement), path = react.useMemo(() => [], []), [itemElements, setItemElements] = react.useState([]), [state, setState] = react.useState({}), stateRef = react.useRef(state);
-    react.useEffect(() => {
+  react.forwardRef(function(props, forwardedRef) {
+    const { children, space = 1, onFocus, ...restProps } = props, ref = react.useRef(null), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement), path = react.useMemo(() => [], []), [itemElements, setItemElements] = react.useState([]), [state, setState] = react.useState({}), stateRef = react.useRef(state);
+    react.useImperativeHandle(
+      forwardedRef,
+      () => ref.current
+    ), react.useEffect(() => {
       focusedElementRef.current = focusedElement;
     }, [focusedElement]), react.useEffect(() => {
       stateRef.current = state;
@@ -6453,12 +6464,12 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
       [onFocus]
     );
     return react.useEffect(() => {
-      if (!forwardedRef.current) return;
+      if (!ref.current) return;
       const _itemElements = Array.from(
-        forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]')
+        ref.current.querySelectorAll('[data-ui="TreeItem"]')
       );
       setItemElements(_itemElements);
-    }, [children, forwardedRef]), /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    }, [children, ref]), /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
       Stack,
       {
         as: "ul",
@@ -6466,7 +6477,7 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
         ...restProps,
         onFocus: handleFocus,
         onKeyDown: handleKeyDown,
-        ref: forwardedRef,
+        ref,
         role: "tree",
         space,
         children