@sanity/ui 2.3.1 → 2.3.3

package/dist/index.js

@@ -627,7 +627,8 @@ function useForwardedRef(ref) {
 }
 function useCustomValidity(ref, customValidity) {
   react.useEffect(() => {
-    ref.current && ref.current.setCustomValidity(customValidity || "");
+    var _a;
+    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
   }, [customValidity, ref]);
 }
 function responsiveBorderStyle() {
@@ -1992,8 +1993,8 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
     children,
     disabled,
     fontSize: fontSize2 = 1,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     justify: justifyProp = "center",
     loading,
     mode = "default",
@@ -2043,10 +2044,10 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
       $width: width,
       children: [
         !!loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }),
-        (icon || text || iconRight) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-            react.isValidElement(icon) && icon,
-            ReactIs.isValidElementType(icon) && react.createElement(icon)
+        (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
+          IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+            react.isValidElement(IconComponent) && IconComponent,
+            ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }),
           text && /* @__PURE__ */ jsxRuntime.jsx(
             Text,
@@ -2059,9 +2060,9 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
               children: text
             }
           ),
-          iconRight && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-            react.isValidElement(iconRight) && iconRight,
-            ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)
+          IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+            react.isValidElement(IconRightComponent) && IconRightComponent,
+            ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
           ] })
         ] }) }),
         children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children })
@@ -4073,8 +4074,8 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     clearButton,
     disabled = !1,
     fontSize: fontSizeProp = 2,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     onClear,
     padding: paddingProp = 3,
     prefix,
@@ -4086,7 +4087,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     type = "text",
     weight,
     ...restProps
-  } = 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;
+  } = props, ref = react.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;
   react.useImperativeHandle(
     forwardedRef,
     () => ref.current
@@ -4116,13 +4117,13 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone,
         children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-            react.isValidElement(icon) && icon,
-            ReactIs.isValidElementType(icon) && react.createElement(icon)
+          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+            react.isValidElement(IconComponent) && IconComponent,
+            ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }) }),
-          !$hasClearButton && iconRight && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-            react.isValidElement(iconRight) && iconRight,
-            ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)
+          !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+            react.isValidElement(IconRightComponent) && IconRightComponent,
+            ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
           ] }) })
         ]
       }
@@ -4131,8 +4132,8 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
       __unstable_disableFocusRing,
       border2,
       fontSize2,
-      icon,
-      iconRight,
+      IconComponent,
+      IconRightComponent,
       padding,
       radius,
       rootTheme,
@@ -4471,19 +4472,14 @@ const Root$a = styledComponents.styled(Layer)`
       ref.current = node, refs.setFloating(node);
     },
     [refs]
-  ), childRef = childProp == null ? void 0 : childProp.ref, setReference = react.useCallback(
-    (node) => {
-      typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node), setReferenceElement(node);
-    },
-    [childRef]
-  ), child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
+  ), childRef = react.useRef(null), child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleClick,
     onContextMenu: handleContextMenu,
-    ref: setReference
+    ref: childRef
   }) : null, [
     childProp,
     handleBlur,
@@ -4491,10 +4487,12 @@ const Root$a = styledComponents.styled(Layer)`
     handleContextMenu,
     handleFocus,
     handleMouseEnter,
-    handleMouseLeave,
-    setReference
+    handleMouseLeave
   ]);
-  if (!child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  if (react.useEffect(() => {
+    if (child)
+      return setReferenceElement(childRef.current), () => setReferenceElement(null);
+  }, [child]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
   const tooltip = /* @__PURE__ */ jsxRuntime.jsx(
     Root$a,
@@ -5521,7 +5519,7 @@ const Root$5 = styledComponents.styled(Box)`
       children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children })
     }
   ) });
-}), MenuButton = react.forwardRef(function(props, ref) {
+}), MenuButton = react.forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
     boundaryElement: deprecated_boundaryElement,
@@ -5609,12 +5607,7 @@ const Root$5 = styledComponents.styled(Box)`
       registerElement,
       shouldFocus
     ]
-  ), menu = menuProp && react.cloneElement(menuProp, menuProps), setButtonRef = react.useCallback(
-    (el) => {
-      typeof ref == "function" ? ref(el) : ref && (ref.current = el), setButtonElement(el);
-    },
-    [ref]
-  ), button = react.useMemo(
+  ), menu = menuProp && react.cloneElement(menuProp, menuProps), ref = react.useRef(null), button = react.useMemo(
     () => buttonProp && react.cloneElement(buttonProp, {
       "data-ui": "MenuButton",
       id,
@@ -5623,11 +5616,19 @@ const Root$5 = styledComponents.styled(Box)`
       onMouseDown: handleMouseDown,
       "aria-haspopup": !0,
       "aria-expanded": open,
-      ref: setButtonRef,
+      ref,
       selected: open
     }),
-    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef]
-  ), popoverProps = react.useMemo(
+    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]
+  );
+  react.useImperativeHandle(
+    forwardedRef,
+    () => ref.current
+  ), react.useEffect(() => {
+    if (button)
+      return setButtonElement(ref.current), () => setButtonElement(null);
+  }, [button]);
+  const popoverProps = react.useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
       overflow: "auto",
@@ -5769,7 +5770,7 @@ function MenuGroup(props) {
     as = "button",
     children,
     fontSize: fontSize2 = 1,
-    icon,
+    icon: IconComponent,
     onClick,
     padding = 3,
     popover,
@@ -5854,9 +5855,9 @@ function MenuGroup(props) {
       tabIndex: -1,
       type: as === "button" ? "button" : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-          react.isValidElement(icon) && icon,
-          ReactIs.isValidElementType(icon) && react.createElement(icon)
+        IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+          react.isValidElement(IconComponent) && IconComponent,
+          ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}) })
@@ -5871,8 +5872,8 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     disabled,
     fontSize: fontSize2 = 1,
     hotkeys,
-    icon,
-    iconRight,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
     onClick,
     padding = 3,
     paddingX,
@@ -5938,10 +5939,10 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       tabIndex: -1,
       type: as === "button" ? "button" : void 0,
       children: [
-        (icon || text || iconRight) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-            react.isValidElement(icon) && icon,
-            ReactIs.isValidElementType(icon) && react.createElement(icon)
+        (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+          IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+            react.isValidElement(IconComponent) && IconComponent,
+            ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }),
           text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
           hotkeys && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5952,9 +5953,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
               style: { marginTop: -4, marginBottom: -4 }
             }
           ),
-          iconRight && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-            react.isValidElement(iconRight) && iconRight,
-            ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)
+          IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+            react.isValidElement(IconRightComponent) && IconRightComponent,
+            ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
           ] })
         ] }),
         children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children })
@@ -6603,7 +6604,7 @@ const TreeGroup = react.memo(function(props) {
     expanded: expandedProp = !1,
     fontSize: fontSize2 = 1,
     href,
-    icon,
+    icon: IconComponent,
     id: idProp,
     linkAs,
     muted,
@@ -6642,10 +6643,13 @@ const TreeGroup = react.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__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: react.createElement(icon) }),
-          !icon && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
+          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
+          !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
         ]
       }
     ),