@sanity/ui 2.2.0 → 2.3.0

package/dist/index.d.mts

@@ -2686,6 +2686,13 @@ export declare function useElementSize(element: HTMLElement | null): ElementSize
 
 /**
  * @beta
+ * @deprecated use `useImperativeHandle` instead
+ * @example
+ * ```diff
+ * -const ref = useForwardedRef(forwardedRef)
+ * +const ref = useRef(null)
+ * +useImperativeHandle(forwardedRef, () => ref.current)
+ * ```
  */
 export declare function useForwardedRef<T>(
   ref: React.ForwardedRef<T>,

package/dist/index.d.ts

@@ -2686,6 +2686,13 @@ export declare function useElementSize(element: HTMLElement | null): ElementSize
 
 /**
  * @beta
+ * @deprecated use `useImperativeHandle` instead
+ * @example
+ * ```diff
+ * -const ref = useForwardedRef(forwardedRef)
+ * +const ref = useRef(null)
+ * +useImperativeHandle(forwardedRef, () => ref.current)
+ * ```
  */
 export declare function useForwardedRef<T>(
   ref: React.ForwardedRef<T>,

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 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, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isElement as isElement$1, isFragment, 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";
@@ -624,12 +624,9 @@ function getServerSnapshot() {
 function usePrefersReducedMotion() {
   return useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
 }
-const useIsomorphicEffect = typeof window < "u" ? useLayoutEffect : useEffect;
 function useForwardedRef(ref) {
   const innerRef = useRef(null);
-  return useIsomorphicEffect(() => {
-    ref && (typeof ref == "function" ? ref(innerRef.current) : ref.current = innerRef.current);
-  }), innerRef;
+  return useImperativeHandle(ref, () => innerRef.current), innerRef;
 }
 function useCustomValidity(ref, customValidity) {
   useEffect(() => {
@@ -2377,10 +2374,13 @@ const Root$r = styled.div(checkboxBaseStyles), Input$5 = styled.input(inputEleme
     readOnly,
     style,
     ...restProps
-  } = props, ref = useForwardedRef(forwardedRef);
-  return useCustomValidity(ref, customValidity), useEffect(() => {
+  } = props, ref = useRef(null);
+  return useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate, ref]), /* @__PURE__ */ jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
+  }, [indeterminate]), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$r, { className, "data-ui": "Checkbox", style, children: [
     /* @__PURE__ */ jsx(
       Input$5,
       {
@@ -2855,16 +2855,15 @@ function findMinBreakpoints(media, width) {
     media[i] <= width && ret.push(i);
   return ret;
 }
-const ElementQuery = forwardRef(function(props, ref) {
-  const theme = useTheme_v2(), { children, media = theme.media, ...restProps } = props, forwardedRef = useForwardedRef(ref), [element, setElement] = useState(null), elementSize = useElementSize(element), width = useMemo(() => {
+const ElementQuery = forwardRef(function(props, forwardedRef) {
+  const theme = useTheme_v2(), { children, media = theme.media, ...restProps } = props, ref = useRef(null), [element, setElement] = useState(null), elementSize = useElementSize(element), width = useMemo(() => {
     var _a;
     return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]), max = useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = useMemo(() => findMinBreakpoints(media, width), [media, width]), setRef = useCallback(
-    (el) => {
-      forwardedRef.current = el, setElement(el);
-    },
-    [forwardedRef]
-  );
+  }, [elementSize]), max = useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  useImperativeHandle(forwardedRef, () => ref.current);
+  const setRef = useCallback((el) => {
+    ref.current = el, setElement(el);
+  }, []);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3024,30 +3023,20 @@ function LayerProvider(props) {
   );
   return /* @__PURE__ */ jsx(LayerContext.Provider, { value, children });
 }
-const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(function(props, ref) {
-  const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), forwardedRef = useForwardedRef(ref), isTopLayerRef = useRef(isTopLayer);
-  useEffect(() => {
+const Root$j = styled.div({ position: "relative" }), LayerChildren = forwardRef(function(props, forwardedRef) {
+  const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer);
+  useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && (onActivate == null || onActivate({ activeElement: lastFocusedRef.current })), isTopLayerRef.current = isTopLayer;
   }, [isTopLayer, onActivate]);
   const handleFocus = 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__ */ jsx(
-    Root$j,
-    {
-      ...restProps,
-      "data-ui": "Layer",
-      onFocus: handleFocus,
-      ref: forwardedRef,
-      style: { ...style, zIndex },
-      children
-    }
+    [isTopLayer, onFocus]
   );
+  return /* @__PURE__ */ jsx(Root$j, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: { ...style, zIndex }, children });
 }), Layer = forwardRef(function(props, ref) {
   const { children, zOffset = 1, ...restProps } = props;
   return /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(LayerChildren, { ...restProps, ref, children }) });
@@ -3113,15 +3102,15 @@ const emptySubscribe$1 = () => () => {
   position: absolute;
   left: 0;
   right: 0;
-`, VirtualList = forwardRef(function(props, ref) {
-  const { as = "div", gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps } = props, { space } = useTheme_v2(), forwardedRef = useForwardedRef(ref), wrapperRef = useRef(null), [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), [itemHeight, setItemHeight] = useState(-1);
-  useEffect(() => {
+`, VirtualList = forwardRef(function(props, forwardedRef) {
+  const { as = "div", gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps } = props, { space } = useTheme_v2(), ref = useRef(null), wrapperRef = useRef(null), [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), [itemHeight, setItemHeight] = useState(-1);
+  useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => {
     if (!wrapperRef.current) return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
   }, [renderItem]), 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) {
@@ -3146,7 +3135,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;
   useEffect(() => {
     onChange && onChange({ fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex });
@@ -3155,7 +3144,7 @@ const emptySubscribe$1 = () => () => {
     const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
     return /* @__PURE__ */ jsx(ItemWrapper, { style: { top: itemIndex * (itemHeight + space[gap]) }, children: node }, key2);
   }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = useMemo(() => ({ height }), [height]);
-  return /* @__PURE__ */ jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref: forwardedRef, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
+  return /* @__PURE__ */ jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ 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"],
@@ -3301,7 +3290,7 @@ const MotionCard$1 = styled(motion(Card))`
 );
 PopoverCard.displayName = "PopoverCard";
 const Popover = memo(
-  forwardRef(function(props, ref) {
+  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,
@@ -3333,7 +3322,12 @@ const Popover = 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 = 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 = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
+    useImperativeHandle(
+      forwardedRef,
+      () => ref.current
+    );
+    const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0, width = calcCurrentWidth({
       container,
       mediaIndex,
       width: widthArrayProp
@@ -3347,11 +3341,11 @@ const Popover = memo(
     }, [maxWidth]);
     const referenceWidthRef = useRef();
     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 = useMemo(() => {
       const ret = [];
       return (constrainSize || preventOverflow) && ret.push(
@@ -3413,9 +3407,9 @@ const Popover = memo(
       arrowRef.current = arrowEl;
     }, []), setFloating = useCallback(
       (node) => {
-        forwardedRef.current = node, refs.setFloating(node);
+        ref.current = node, refs.setFloating(node);
       },
-      [forwardedRef, refs]
+      [refs]
     ), setReference = useCallback(
       (node) => {
         refs.setReference(node);
@@ -3588,8 +3582,11 @@ function inputElementStyle(props) {
   `;
 }
 const Root$g = styled.div(radioBaseStyle), Input$4 = styled.input(inputElementStyle), Radio = forwardRef(function(props, forwardedRef) {
-  const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = useForwardedRef(forwardedRef);
-  return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
+  const { className, disabled, style, customValidity, readOnly, ...restProps } = props, ref = useRef(null);
+  return useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$g, { className, "data-ui": "Radio", style, children: [
     /* @__PURE__ */ jsx(
       Input$4,
       {
@@ -3750,8 +3747,11 @@ const selectStyle = {
     readOnly,
     space = 3,
     ...restProps
-  } = props, ref = useForwardedRef(forwardedRef);
-  return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$f, { "data-ui": "Select", children: [
+  } = props, ref = useRef(null);
+  return useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxs(Root$f, { "data-ui": "Select", children: [
     /* @__PURE__ */ jsx(
       Input$3,
       {
@@ -3945,10 +3945,13 @@ function switchThumbStyles(props) {
   `;
 }
 const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInputStyles), Representation = styled.span(switchRepresentationStyles), Track = styled.span(switchTrackStyles), Thumb = styled.span(switchThumbStyles), Switch = forwardRef(function(props, forwardedRef) {
-  const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = useForwardedRef(forwardedRef);
-  return useEffect(() => {
+  const { checked, className, disabled, indeterminate, readOnly, style, ...restProps } = props, ref = useRef(null);
+  return useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [indeterminate, ref]), /* @__PURE__ */ jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
+  }, [indeterminate]), /* @__PURE__ */ jsxs(Root$d, { className, "data-ui": "Switch", style, children: [
     /* @__PURE__ */ jsx(
       Input$2,
       {
@@ -3987,8 +3990,11 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     radius = 2,
     weight,
     ...restProps
-  } = props, ref = useForwardedRef(forwardedRef), rootTheme = useRootTheme();
-  return useCustomValidity(ref, customValidity), /* @__PURE__ */ jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
+  } = props, ref = useRef(null), rootTheme = useRootTheme();
+  return useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
     /* @__PURE__ */ jsx(
       Input$1,
       {
@@ -4083,8 +4089,11 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     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 = 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;
+  useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useCustomValidity(ref, customValidity);
   const handleClearMouseDown = useCallback((event) => {
     event.preventDefault(), event.stopPropagation();
   }, []), handleClearClick = useCallback(
@@ -4331,7 +4340,7 @@ function TooltipDelayGroupProvider(props) {
 const Root$a = styled(Layer)`
   pointer-events: none;
   max-width: ${({ $maxWidth }) => $maxWidth}px;
-`, Tooltip = forwardRef(function(props, ref) {
+`, Tooltip = forwardRef(function(props, forwardedRef) {
   var _a, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
     animate: _animate = !1,
@@ -4350,7 +4359,9 @@ const Root$a = styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), forwardedRef = useForwardedRef(ref), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = useSyncExternalStore(
+  } = 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, documentBodyOffsetWidth = 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
@@ -4460,9 +4471,9 @@ const Root$a = styled(Layer)`
     [update]
   ), setFloating = 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 = useCallback(
     (node) => {
       typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node), setReferenceElement(node);
@@ -4596,7 +4607,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 = 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 = forwardRef(function(props, forwardedRef) {
   const {
     border: border2 = !0,
     customValidity,
@@ -4635,7 +4646,12 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   }), { activeValue, focused, listFocused, query, value } = state, defaultRenderOption = useCallback(
     ({ value: value2 }) => /* @__PURE__ */ jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ 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 = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1), forwardedRef = useForwardedRef(ref), listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = useMemo(
+  ), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
+  useImperativeHandle(
+    forwardedRef,
+    () => inputElementRef.current
+  );
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = useMemo(
     () => value !== null ? options.find((o) => o.value === value) : void 0,
     [options, value]
   ), filteredOptions = useMemo(
@@ -4739,12 +4755,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       }
     }
   }, [activeValue, filteredOptions]);
-  const setRef = useCallback(
-    (el) => {
-      inputElementRef.current = el, forwardedRef.current = el;
-    },
-    [forwardedRef]
-  ), clearButton = useMemo(() => {
+  const clearButton = useMemo(() => {
     if (!loading && !disabled && value)
       return {
         "aria-label": "Clear",
@@ -4819,7 +4830,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
       prefix,
       radius,
       readOnly,
-      ref: setRef,
+      ref: inputElementRef,
       role: "combobox",
       spellCheck: !1,
       suffix: suffix || openButtonNode,
@@ -5081,13 +5092,13 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
 `, DialogFooter = styled(Box)`
   position: relative;
   z-index: 3;
-`, DialogCard = forwardRef(function(props, ref) {
+`, DialogCard = forwardRef(function(props, forwardedRef) {
   var _a;
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
     children,
-    contentRef,
+    contentRef: forwardedContentRef,
     footer,
     header,
     id,
@@ -5098,10 +5109,13 @@ 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), forwardedRef = useForwardedRef(ref), [rootElement, setRootElement] = useState(null), localContentRef = useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
-  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 = 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(() => {
+    autoFocus && ref.current && focusFirstDescendant(ref.current);
+  }, [autoFocus, ref]), useGlobalKeyDown(
     useCallback(
       (event) => {
         if (!isTopLayer || !onClose) return;
@@ -5121,17 +5135,9 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     ),
     [rootElement]
   );
-  const setRef = useCallback(
-    (el) => {
-      setRootElement(el), forwardedRef.current = el;
-    },
-    [forwardedRef]
-  ), setContentRef = useCallback(
-    (el) => {
-      localContentRef.current = el, typeof contentRef == "function" ? contentRef(el) : contentRef && (contentRef.current = el);
-    },
-    [contentRef]
-  );
+  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 }) }),
@@ -5147,7 +5153,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx(DialogContent, { flex: 1, ref: setContentRef, tabIndex: -1, children }),
+    /* @__PURE__ */ jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }),
     footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer })
   ] }) }) });
 }), Dialog = forwardRef(function(props, ref) {
@@ -5423,7 +5429,7 @@ function useMenuController(props) {
 const Root$5 = styled(Box)`
   outline: none;
   overflow: auto;
-`, Menu = forwardRef(function(props, ref) {
+`, Menu = forwardRef(function(props, forwardedRef) {
   const {
     children,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -5441,7 +5447,9 @@ const Root$5 = styled(Box)`
     shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
     space = 1,
     ...restProps
-  } = props, forwardedRef = useForwardedRef(ref), { isTopLayer } = useLayer(), {
+  } = props, ref = useRef(null);
+  useImperativeHandle(forwardedRef, () => ref.current);
+  const { isTopLayer } = useLayer(), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
@@ -5452,9 +5460,9 @@ const Root$5 = styled(Box)`
     setRootElement
   } = useMenuController({ onKeyDown, originElement, shouldFocus }), handleRefChange = useCallback(
     (el) => {
-      setRootElement(el), forwardedRef.current = el;
+      setRootElement(el), ref.current = el;
     },
-    [forwardedRef, setRootElement]
+    [setRootElement]
   );
   useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
@@ -5889,9 +5897,9 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     onItemMouseLeave = menu.onMouseLeave
-  } = menu, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement;
-  useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
-  const ref = useForwardedRef(forwardedRef), handleClick = useCallback(
+  } = menu, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement, ref = useRef(null);
+  useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
+  const handleClick = useCallback(
     (event) => {
       disabled || (onClick && onClick(event), onItemClick && onItemClick());
     },
@@ -5907,12 +5915,9 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       paddingLeft
     }),
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]
-  ), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = useCallback(
-    (el) => {
-      ref.current = el, setRootElement(el);
-    },
-    [ref]
-  );
+  ), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = useCallback((el) => {
+    ref.current = el, setRootElement(el);
+  }, []);
   return /* @__PURE__ */ jsxs(
     Selectable,
     {
@@ -6051,16 +6056,21 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     padding = 2,
     selected,
     ...restProps
-  } = props, elementRef = useRef(null), focusedRef = useRef(!1), handleBlur = useCallback(() => {
+  } = props, ref = useRef(null), focusedRef = useRef(!1);
+  useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  );
+  const handleBlur = useCallback(() => {
     focusedRef.current = !1;
   }, []), handleFocus = useCallback(
     (event) => {
       focusedRef.current = !0, onFocus && onFocus(event);
     },
     [onFocus]
-  ), ref = useForwardedRef(forwardedRef);
+  );
   return 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__ */ jsx(
     CustomButton,
     {
@@ -6075,9 +6085,7 @@ const MenuItem = 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,
@@ -6360,9 +6368,12 @@ function _focusItemElement(el) {
   }
 }
 const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalScopedContext(key, null), Tree = memo(
-  forwardRef(function(props, ref) {
-    const { children, space = 1, onFocus, ...restProps } = props, forwardedRef = useForwardedRef(ref), [focusedElement, setFocusedElement] = useState(null), focusedElementRef = useRef(focusedElement), path = useMemo(() => [], []), [itemElements, setItemElements] = useState([]), [state, setState] = useState({}), stateRef = useRef(state);
-    useEffect(() => {
+  forwardRef(function(props, forwardedRef) {
+    const { children, space = 1, onFocus, ...restProps } = props, ref = useRef(null), [focusedElement, setFocusedElement] = useState(null), focusedElementRef = useRef(focusedElement), path = useMemo(() => [], []), [itemElements, setItemElements] = useState([]), [state, setState] = useState({}), stateRef = useRef(state);
+    useImperativeHandle(
+      forwardedRef,
+      () => ref.current
+    ), useEffect(() => {
       focusedElementRef.current = focusedElement;
     }, [focusedElement]), useEffect(() => {
       stateRef.current = state;
@@ -6456,12 +6467,12 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
       [onFocus]
     );
     return 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__ */ jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    }, [children, ref]), /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       Stack,
       {
         as: "ul",
@@ -6469,7 +6480,7 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
         ...restProps,
         onFocus: handleFocus,
         onKeyDown: handleKeyDown,
-        ref: forwardedRef,
+        ref,
         role: "tree",
         space,
         children