@sanity/ui 2.10.18 → 2.11.0

package/dist/index.js

@@ -6091,13 +6091,14 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const $ = reactCompilerRuntime.c(77);
-  let IconComponent, children, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
+  const $ = reactCompilerRuntime.c(79);
+  let IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
     children,
     fontSize: t1,
     icon: IconComponent,
+    menu: menuProps,
     onClick,
     padding: t2,
     popover,
@@ -6106,7 +6107,7 @@ function MenuGroup(props) {
     text,
     tone: t5,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = onClick, $[4] = popover, $[5] = restProps, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5, $[12] = text) : (IconComponent = $[1], children = $[2], onClick = $[3], popover = $[4], restProps = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], t5 = $[11], text = $[12]);
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = menuProps, $[4] = onClick, $[5] = popover, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = text) : (IconComponent = $[1], children = $[2], menuProps = $[3], onClick = $[4], popover = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], text = $[13]);
   const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, menu = useMenu(), {
     scheme
   } = useRootTheme(), {
@@ -6119,80 +6120,80 @@ function MenuGroup(props) {
     registerElement
   } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1);
   let t6;
-  $[13] !== onItemMouseEnter ? (t6 = (event) => {
+  $[14] !== onItemMouseEnter ? (t6 = (event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, $[13] = onItemMouseEnter, $[14] = t6) : t6 = $[14];
+  }, $[14] = onItemMouseEnter, $[15] = t6) : t6 = $[15];
   const handleMouseEnter = t6;
   let t7;
-  $[15] !== rootElement ? (t7 = (event_0) => {
+  $[16] !== rootElement ? (t7 = (event_0) => {
     event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
       rootElement?.focus();
     }));
-  }, $[15] = rootElement, $[16] = t7) : t7 = $[16];
+  }, $[16] = rootElement, $[17] = t7) : t7 = $[17];
   const handleMenuKeyDown = t7;
   let t8;
-  $[17] !== onClick ? (t8 = (event_1) => {
+  $[18] !== onClick ? (t8 = (event_1) => {
     onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
-  }, $[17] = onClick, $[18] = t8) : t8 = $[18];
+  }, $[18] = onClick, $[19] = t8) : t8 = $[19];
   const handleClick = t8;
   let t9;
-  $[19] !== onItemClick ? (t9 = () => {
+  $[20] !== onItemClick ? (t9 = () => {
     setOpen(!1), onItemClick?.();
-  }, $[19] = onItemClick, $[20] = t9) : t9 = $[20];
+  }, $[20] = onItemClick, $[21] = t9) : t9 = $[21];
   const handleChildItemClick = t9;
   let t10;
-  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[21] = t10) : t10 = $[21];
+  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[22] = t10) : t10 = $[22];
   const handleMenuMouseEnter = t10;
   let t11, t12;
-  $[22] !== mount || $[23] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[22] = mount, $[23] = rootElement, $[24] = t11, $[25] = t12) : (t11 = $[24], t12 = $[25]), react.useEffect(t11, t12);
+  $[23] !== mount || $[24] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[23] = mount, $[24] = rootElement, $[25] = t11, $[26] = t12) : (t11 = $[25], t12 = $[26]), react.useEffect(t11, t12);
   let t13, t14;
-  $[26] !== active ? (t13 = () => {
+  $[27] !== active ? (t13 = () => {
     active || setOpen(!1);
-  }, t14 = [active], $[26] = active, $[27] = t13, $[28] = t14) : (t13 = $[27], t14 = $[28]), react.useEffect(t13, t14);
+  }, t14 = [active], $[27] = active, $[28] = t13, $[29] = t14) : (t13 = $[28], t14 = $[29]), react.useEffect(t13, t14);
   let t15, t16;
-  $[29] !== open ? (t15 = () => {
+  $[30] !== open ? (t15 = () => {
     open || setWithinMenu(!1);
-  }, t16 = [open], $[29] = open, $[30] = t15, $[31] = t16) : (t15 = $[30], t16 = $[31]), react.useEffect(t15, t16);
+  }, t16 = [open], $[30] = open, $[31] = t15, $[32] = t16) : (t15 = $[31], t16 = $[32]), react.useEffect(t15, t16);
   let t17, t18;
-  $[32] !== shouldFocus ? (t17 = () => {
+  $[33] !== shouldFocus ? (t17 = () => {
     if (!shouldFocus)
       return;
     const rafId = requestAnimationFrame(() => setShouldFocus(null));
     return () => cancelAnimationFrame(rafId);
-  }, t18 = [shouldFocus], $[32] = shouldFocus, $[33] = t17, $[34] = t18) : (t17 = $[33], t18 = $[34]), react.useEffect(t17, t18);
+  }, t18 = [shouldFocus], $[33] = shouldFocus, $[34] = t17, $[35] = t18) : (t17 = $[34], t18 = $[35]), react.useEffect(t17, t18);
   let t19;
-  $[35] !== children || $[36] !== handleChildItemClick || $[37] !== handleMenuKeyDown || $[38] !== onClickOutside || $[39] !== onEscape || $[40] !== registerElement || $[41] !== shouldFocus ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[35] = children, $[36] = handleChildItemClick, $[37] = handleMenuKeyDown, $[38] = onClickOutside, $[39] = onEscape, $[40] = registerElement, $[41] = shouldFocus, $[42] = t19) : t19 = $[42];
+  $[36] !== children || $[37] !== handleChildItemClick || $[38] !== handleMenuKeyDown || $[39] !== menuProps || $[40] !== onClickOutside || $[41] !== onEscape || $[42] !== registerElement || $[43] !== shouldFocus ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { ...menuProps, onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[36] = children, $[37] = handleChildItemClick, $[38] = handleMenuKeyDown, $[39] = menuProps, $[40] = onClickOutside, $[41] = onEscape, $[42] = registerElement, $[43] = shouldFocus, $[44] = t19) : t19 = $[44];
   const childMenu = t19;
   let t20;
-  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
+  $[45] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
     const target = event_2.currentTarget;
     if (document.activeElement === target && event_2.key === "ArrowRight") {
       setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       return;
     }
-  }, $[43] = t20) : t20 = $[43];
+  }, $[45] = t20) : t20 = $[45];
   const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0, t24 = useArrayProp(radius), t25 = as === "button" ? "button" : void 0;
   let t26;
-  $[44] !== IconComponent || $[45] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+  $[46] !== IconComponent || $[47] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
     react.isValidElement(IconComponent) && IconComponent,
     ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-  ] }), $[44] = IconComponent, $[45] = fontSize2, $[46] = t26) : t26 = $[46];
+  ] }), $[46] = IconComponent, $[47] = fontSize2, $[48] = t26) : t26 = $[48];
   let t27;
-  $[47] !== fontSize2 || $[48] !== text ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[47] = fontSize2, $[48] = text, $[49] = t27) : t27 = $[49];
+  $[49] !== fontSize2 || $[50] !== text ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[49] = fontSize2, $[50] = text, $[51] = t27) : t27 = $[51];
   let t28;
-  $[50] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[50] = t28) : t28 = $[50];
+  $[52] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[52] = t28) : t28 = $[52];
   let t29;
-  $[51] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[51] = fontSize2, $[52] = t29) : t29 = $[52];
+  $[53] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[53] = fontSize2, $[54] = t29) : t29 = $[54];
   let t30;
-  $[53] !== padding || $[54] !== space || $[55] !== t26 || $[56] !== t27 || $[57] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
+  $[55] !== padding || $[56] !== space || $[57] !== t26 || $[58] !== t27 || $[59] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
     t26,
     t27,
     t29
-  ] }), $[53] = padding, $[54] = space, $[55] = t26, $[56] = t27, $[57] = t29, $[58] = t30) : t30 = $[58];
+  ] }), $[55] = padding, $[56] = space, $[57] = t26, $[58] = t27, $[59] = t29, $[60] = t30) : t30 = $[60];
   let t31;
-  $[59] !== as || $[60] !== handleClick || $[61] !== handleMouseEnter || $[62] !== restProps || $[63] !== scheme || $[64] !== t21 || $[65] !== t22 || $[66] !== t23 || $[67] !== t24 || $[68] !== t25 || $[69] !== t30 || $[70] !== tone ? (t31 = /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[59] = as, $[60] = handleClick, $[61] = handleMouseEnter, $[62] = restProps, $[63] = scheme, $[64] = t21, $[65] = t22, $[66] = t23, $[67] = t24, $[68] = t25, $[69] = t30, $[70] = tone, $[71] = t31) : t31 = $[71];
+  $[61] !== as || $[62] !== handleClick || $[63] !== handleMouseEnter || $[64] !== restProps || $[65] !== scheme || $[66] !== t21 || $[67] !== t22 || $[68] !== t23 || $[69] !== t24 || $[70] !== t25 || $[71] !== t30 || $[72] !== tone ? (t31 = /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[61] = as, $[62] = handleClick, $[63] = handleMouseEnter, $[64] = restProps, $[65] = scheme, $[66] = t21, $[67] = t22, $[68] = t23, $[69] = t24, $[70] = t25, $[71] = t30, $[72] = tone, $[73] = t31) : t31 = $[73];
   let t32;
-  return $[72] !== childMenu || $[73] !== open || $[74] !== popover || $[75] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[72] = childMenu, $[73] = open, $[74] = popover, $[75] = t31, $[76] = t32) : t32 = $[76], t32;
+  return $[74] !== childMenu || $[75] !== open || $[76] !== popover || $[77] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[74] = childMenu, $[75] = open, $[76] = popover, $[77] = t31, $[78] = t32) : t32 = $[78], t32;
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {