@sanity/ui 2.3.4-canary.0 → 2.3.5

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, Children, cloneElement, isValidElement, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
@@ -1559,8 +1559,9 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
     ...restProps
-  } = props, children = Children.toArray(childrenProp).filter(
-    (child) => typeof child != "string"
+  } = props, children = useMemo(
+    () => Children.toArray(childrenProp).filter(isValidElement),
+    [childrenProp]
   ), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
   return /* @__PURE__ */ jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
     len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }),
@@ -2634,7 +2635,7 @@ function inlineSpaceStyle(props) {
 }
 const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
   const { as, children: childrenProp, space, ...restProps } = props, children = useMemo(
-    () => Children.map(childrenProp, (child) => /* @__PURE__ */ jsx("div", { children: child })),
+    () => Children.map(childrenProp, (child) => child && /* @__PURE__ */ jsx("div", { children: child })),
     [childrenProp]
   );
   return /* @__PURE__ */ jsx(
@@ -4951,10 +4952,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 `, Breadcrumbs = forwardRef(function(props, ref) {
   const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = useArrayProp(spaceRaw), [open, setOpen] = useState(!1), [expandElement, setExpandElement] = useState(null), [popoverElement, setPopoverElement] = useState(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
   useClickOutside(collapse, [expandElement, popoverElement]);
-  const rawItems = useMemo(
-    () => Children.toArray(children).filter((child) => isValidElement(child)),
-    [children]
-  ), items = useMemo(() => {
+  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children]), items = useMemo(() => {
     const len = rawItems.length;
     if (maxLength && len > maxLength) {
       const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
@@ -5605,17 +5603,20 @@ const Root$5 = styled(Box)`
       shouldFocus
     ]
   ), menu = menuProp && cloneElement(menuProp, menuProps), ref = useRef(null), button = useMemo(
-    () => buttonProp && cloneElement(buttonProp, {
-      "data-ui": "MenuButton",
-      id,
-      onClick: handleButtonClick,
-      onKeyDown: handleButtonKeyDown,
-      onMouseDown: handleMouseDown,
-      "aria-haspopup": !0,
-      "aria-expanded": open,
-      ref,
-      selected: open
-    }),
+    () => {
+      var _a;
+      return buttonProp && cloneElement(buttonProp, {
+        "data-ui": "MenuButton",
+        id,
+        onClick: handleButtonClick,
+        onKeyDown: handleButtonKeyDown,
+        onMouseDown: handleMouseDown,
+        "aria-haspopup": !0,
+        "aria-expanded": open,
+        ref,
+        selected: (_a = buttonProp.props.selected) != null ? _a : open
+      });
+    },
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]
   );
   useImperativeHandle(
@@ -6467,7 +6468,7 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
         ref.current.querySelectorAll('[data-ui="TreeItem"]')
       );
       setItemElements(_itemElements);
-    }, [children, ref]), /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    }, [children]), /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       Stack,
       {
         as: "ul",