@sanity/ui 2.3.1 → 2.3.3

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, useImperativeHandle, 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, 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";
@@ -630,7 +630,8 @@ function useForwardedRef(ref) {
 }
 function useCustomValidity(ref, customValidity) {
   useEffect(() => {
-    ref.current && ref.current.setCustomValidity(customValidity || "");
+    var _a;
+    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
   }, [customValidity, ref]);
 }
 function responsiveBorderStyle() {
@@ -1995,8 +1996,8 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
     children,
     disabled,
     fontSize: fontSize2 = 1,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     justify: justifyProp = "center",
     loading,
     mode = "default",
@@ -2046,10 +2047,10 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
       $width: width,
       children: [
         !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }),
-        (icon || text || iconRight) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
-          icon && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-            isValidElement(icon) && icon,
-            isValidElementType(icon) && createElement(icon)
+        (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
+          IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+            isValidElement(IconComponent) && IconComponent,
+            isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
           ] }),
           text && /* @__PURE__ */ jsx(
             Text,
@@ -2062,9 +2063,9 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
               children: text
             }
           ),
-          iconRight && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-            isValidElement(iconRight) && iconRight,
-            isValidElementType(iconRight) && createElement(iconRight)
+          IconRightComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+            isValidElement(IconRightComponent) && IconRightComponent,
+            isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
           ] })
         ] }) }),
         children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children })
@@ -4076,8 +4077,8 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     clearButton,
     disabled = !1,
     fontSize: fontSizeProp = 2,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     onClear,
     padding: paddingProp = 3,
     prefix,
@@ -4089,7 +4090,7 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     type = "text",
     weight,
     ...restProps
-  } = 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;
+  } = props, ref = useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   useImperativeHandle(
     forwardedRef,
     () => ref.current
@@ -4119,13 +4120,13 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone,
         children: [
-          icon && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-            isValidElement(icon) && icon,
-            isValidElementType(icon) && createElement(icon)
+          IconComponent && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+            isValidElement(IconComponent) && IconComponent,
+            isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
           ] }) }),
-          !$hasClearButton && iconRight && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-            isValidElement(iconRight) && iconRight,
-            isValidElementType(iconRight) && createElement(iconRight)
+          !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+            isValidElement(IconRightComponent) && IconRightComponent,
+            isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
           ] }) })
         ]
       }
@@ -4134,8 +4135,8 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
       __unstable_disableFocusRing,
       border2,
       fontSize2,
-      icon,
-      iconRight,
+      IconComponent,
+      IconRightComponent,
       padding,
       radius,
       rootTheme,
@@ -4474,19 +4475,14 @@ const Root$a = styled(Layer)`
       ref.current = node, refs.setFloating(node);
     },
     [refs]
-  ), childRef = childProp == null ? void 0 : childProp.ref, setReference = useCallback(
-    (node) => {
-      typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node), setReferenceElement(node);
-    },
-    [childRef]
-  ), child = useMemo(() => childProp ? cloneElement(childProp, {
+  ), childRef = useRef(null), child = useMemo(() => childProp ? cloneElement(childProp, {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleClick,
     onContextMenu: handleContextMenu,
-    ref: setReference
+    ref: childRef
   }) : null, [
     childProp,
     handleBlur,
@@ -4494,10 +4490,12 @@ const Root$a = styled(Layer)`
     handleContextMenu,
     handleFocus,
     handleMouseEnter,
-    handleMouseLeave,
-    setReference
+    handleMouseLeave
   ]);
-  if (!child) return /* @__PURE__ */ jsx(Fragment, {});
+  if (useEffect(() => {
+    if (child)
+      return setReferenceElement(childRef.current), () => setReferenceElement(null);
+  }, [child]), !child) return /* @__PURE__ */ jsx(Fragment, {});
   if (disabled) return child;
   const tooltip = /* @__PURE__ */ jsx(
     Root$a,
@@ -5524,7 +5522,7 @@ const Root$5 = styled(Box)`
       children: /* @__PURE__ */ jsx(Stack, { space, children })
     }
   ) });
-}), MenuButton = forwardRef(function(props, ref) {
+}), MenuButton = forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
     boundaryElement: deprecated_boundaryElement,
@@ -5612,12 +5610,7 @@ const Root$5 = styled(Box)`
       registerElement,
       shouldFocus
     ]
-  ), menu = menuProp && cloneElement(menuProp, menuProps), setButtonRef = useCallback(
-    (el) => {
-      typeof ref == "function" ? ref(el) : ref && (ref.current = el), setButtonElement(el);
-    },
-    [ref]
-  ), button = useMemo(
+  ), menu = menuProp && cloneElement(menuProp, menuProps), ref = useRef(null), button = useMemo(
     () => buttonProp && cloneElement(buttonProp, {
       "data-ui": "MenuButton",
       id,
@@ -5626,11 +5619,19 @@ const Root$5 = styled(Box)`
       onMouseDown: handleMouseDown,
       "aria-haspopup": !0,
       "aria-expanded": open,
-      ref: setButtonRef,
+      ref,
       selected: open
     }),
-    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef]
-  ), popoverProps = useMemo(
+    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]
+  );
+  useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), useEffect(() => {
+    if (button)
+      return setButtonElement(ref.current), () => setButtonElement(null);
+  }, [button]);
+  const popoverProps = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
       overflow: "auto",
@@ -5772,7 +5773,7 @@ function MenuGroup(props) {
     as = "button",
     children,
     fontSize: fontSize2 = 1,
-    icon,
+    icon: IconComponent,
     onClick,
     padding = 3,
     popover,
@@ -5857,9 +5858,9 @@ function MenuGroup(props) {
       tabIndex: -1,
       type: as === "button" ? "button" : void 0,
       children: /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
-        icon && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-          isValidElement(icon) && icon,
-          isValidElementType(icon) && createElement(icon)
+        IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+          isValidElement(IconComponent) && IconComponent,
+          isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
         ] }),
         /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
         /* @__PURE__ */ jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
@@ -5874,8 +5875,8 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     disabled,
     fontSize: fontSize2 = 1,
     hotkeys,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     onClick,
     padding = 3,
     paddingX,
@@ -5941,10 +5942,10 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       tabIndex: -1,
       type: as === "button" ? "button" : void 0,
       children: [
-        (icon || text || iconRight) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
-          icon && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-            isValidElement(icon) && icon,
-            isValidElementType(icon) && createElement(icon)
+        (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+          IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+            isValidElement(IconComponent) && IconComponent,
+            isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
           ] }),
           text && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
           hotkeys && /* @__PURE__ */ jsx(
@@ -5955,9 +5956,9 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
               style: { marginTop: -4, marginBottom: -4 }
             }
           ),
-          iconRight && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-            isValidElement(iconRight) && iconRight,
-            isValidElementType(iconRight) && createElement(iconRight)
+          IconRightComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+            isValidElement(IconRightComponent) && IconRightComponent,
+            isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
           ] })
         ] }),
         children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children })
@@ -6606,7 +6607,7 @@ const TreeGroup = memo(function(props) {
     expanded: expandedProp = !1,
     fontSize: fontSize2 = 1,
     href,
-    icon,
+    icon: IconComponent,
     id: idProp,
     linkAs,
     muted,
@@ -6645,10 +6646,13 @@ const TreeGroup = memo(function(props) {
       Box,
       {
         marginRight: space,
-        style: { visibility: icon || children ? "visible" : "hidden", pointerEvents: "none" },
+        style: {
+          visibility: IconComponent || children ? "visible" : "hidden",
+          pointerEvents: "none"
+        },
         children: [
-          icon && /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, weight, children: createElement(icon) }),
-          !icon && /* @__PURE__ */ jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
+          IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }),
+          !IconComponent && /* @__PURE__ */ jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
         ]
       }
     ),