@sanity/ui 3.0.11 → 3.0.12-canary.0

package/dist/_visual-editing.d.mts

@@ -5,10 +5,9 @@ import {ForwardRefExoticComponent} from 'react'
 import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
 import {IStyledComponentBase} from 'styled-components/dist/types'
-import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
+import {Ref} from 'react'
 import {RefAttributes} from 'react'
-import {RefCallback} from 'react'
 import {RootTheme} from '@sanity/ui/theme'
 import {Theme_v2} from '@sanity/ui/theme'
 import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
@@ -559,9 +558,7 @@ declare interface PopoverProps
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
   /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
   width?: PopoverWidth | PopoverWidth[]
 }
 

package/dist/_visual-editing.d.ts

@@ -5,10 +5,9 @@ import {ForwardRefExoticComponent} from 'react'
 import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
 import {IStyledComponentBase} from 'styled-components/dist/types'
-import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
+import {Ref} from 'react'
 import {RefAttributes} from 'react'
-import {RefCallback} from 'react'
 import {RootTheme} from '@sanity/ui/theme'
 import {Theme_v2} from '@sanity/ui/theme'
 import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
@@ -559,9 +558,7 @@ declare interface PopoverProps
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
   /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
   width?: PopoverWidth | PopoverWidth[]
 }
 

package/dist/index.d.mts

@@ -14,7 +14,6 @@ import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
 import {IStyledComponentBase} from 'styled-components/dist/types'
 import {multiply as multiply_2} from '@sanity/ui/theme'
-import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
 import {parseColor as parseColor_2} from '@sanity/ui/theme'
 import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
@@ -22,7 +21,6 @@ import {PropsWithChildren} from 'react'
 import {ReactNode} from 'react'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
-import {RefCallback} from 'react'
 import {RGB as RGB_2} from '@sanity/ui/theme'
 import {rgba as rgba_2} from '@sanity/ui/theme'
 import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
@@ -1618,9 +1616,7 @@ export declare interface PopoverProps
   scheme?: ThemeColorSchemeKey_2
   tone?: CardTone
   /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
   width?: PopoverWidth | PopoverWidth[]
 }
 

package/dist/index.d.ts

@@ -14,7 +14,6 @@ import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
 import {IStyledComponentBase} from 'styled-components/dist/types'
 import {multiply as multiply_2} from '@sanity/ui/theme'
-import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
 import {parseColor as parseColor_2} from '@sanity/ui/theme'
 import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
@@ -22,7 +21,6 @@ import {PropsWithChildren} from 'react'
 import {ReactNode} from 'react'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
-import {RefCallback} from 'react'
 import {RGB as RGB_2} from '@sanity/ui/theme'
 import {rgba as rgba_2} from '@sanity/ui/theme'
 import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
@@ -1618,9 +1616,7 @@ export declare interface PopoverProps
   scheme?: ThemeColorSchemeKey_2
   tone?: CardTone
   /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
   width?: PopoverWidth | PopoverWidth[]
 }
 

package/dist/index.js

@@ -566,28 +566,83 @@ const StyledBreadcrumbs = styledComponents.styled.ol.withConfig({
   displayName: "ExpandButton",
   componentId: "sc-1es8h8q-1"
 })`appearance:none;margin:-4px;`, Breadcrumbs = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(27);
+  let children, maxLength, restProps, separator, t0;
+  $[0] !== props ? ({
     children,
     maxLength,
     separator,
-    space: spaceRaw = 2,
+    space: t0,
     ...restProps
-  } = props, space = _visualEditing.useArrayProp(spaceRaw), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
-  _visualEditing.useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
-  const rawItems = react.useMemo(() => react.Children.toArray(children).filter(react.isValidElement), [children]), items = react.useMemo(() => {
-    const len = rawItems.length;
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
-      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { constrainSize: !0, content: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ol", overflow: "auto", padding: space, space, children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: open ? collapse : expand, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }) }, "button"), ...rawItems.slice(len - afterLength)];
-    }
-    return rawItems;
-  }, [collapse, expand, maxLength, open, rawItems, space]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledBreadcrumbs, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-    itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted: !0, children: "/" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { as: "li", children: item })
-  ] }, itemIndex)) });
+  } = props, $[0] = props, $[1] = children, $[2] = maxLength, $[3] = restProps, $[4] = separator, $[5] = t0) : (children = $[1], maxLength = $[2], restProps = $[3], separator = $[4], t0 = $[5]);
+  const space = _visualEditing.useArrayProp(t0 === void 0 ? 2 : t0), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null);
+  let t1;
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => setOpen(!1), $[6] = t1) : t1 = $[6];
+  const collapse = t1;
+  let t2;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setOpen(!0), $[7] = t2) : t2 = $[7];
+  const expand = t2;
+  let t3;
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => [expandElementRef.current, popoverElementRef.current], $[8] = t3) : t3 = $[8], _visualEditing.useClickOutsideEvent(collapse, t3);
+  let t4;
+  $[9] !== children ? (t4 = react.Children.toArray(children).filter(react.isValidElement), $[9] = children, $[10] = t4) : t4 = $[10];
+  const rawItems = t4;
+  let t5;
+  $[11] !== maxLength || $[12] !== open || $[13] !== rawItems || $[14] !== space ? (t5 = {
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    space
+  }, $[11] = maxLength, $[12] = open, $[13] = rawItems, $[14] = space, $[15] = t5) : t5 = $[15];
+  const items = useItems(t5);
+  let t6;
+  if ($[16] !== items || $[17] !== separator || $[18] !== space) {
+    let t72;
+    $[20] !== separator || $[21] !== space ? (t72 = (item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { muted: !0, children: "/" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Box, { as: "li", children: item })
+    ] }, itemIndex), $[20] = separator, $[21] = space, $[22] = t72) : t72 = $[22], t6 = items.map(t72), $[16] = items, $[17] = separator, $[18] = space, $[19] = t6;
+  } else
+    t6 = $[19];
+  let t7;
+  return $[23] !== ref || $[24] !== restProps || $[25] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(StyledBreadcrumbs, { "data-ui": "Breadcrumbs", ...restProps, ref, children: t6 }), $[23] = ref, $[24] = restProps, $[25] = t6, $[26] = t7) : t7 = $[26], t7;
 });
 Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
+function useItems(t0) {
+  const $ = reactCompilerRuntime.c(28), {
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    space
+  } = t0, len = rawItems.length;
+  if (maxLength && len > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
+    let t1;
+    if ($[0] !== afterLength || $[1] !== beforeLength || $[2] !== collapse || $[3] !== expand || $[4] !== expandElementRef || $[5] !== len || $[6] !== open || $[7] !== popoverElementRef || $[8] !== rawItems || $[9] !== space) {
+      const t2 = rawItems.slice(0, beforeLength - 1);
+      let t3;
+      $[11] !== afterLength || $[12] !== beforeLength || $[13] !== len || $[14] !== rawItems ? (t3 = rawItems.slice(beforeLength - 1, len - afterLength), $[11] = afterLength, $[12] = beforeLength, $[13] = len, $[14] = rawItems, $[15] = t3) : t3 = $[15];
+      let t4;
+      $[16] !== space || $[17] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Stack, { as: "ol", overflow: "auto", padding: space, space, children: t3 }), $[16] = space, $[17] = t3, $[18] = t4) : t4 = $[18];
+      const t5 = open ? collapse : expand;
+      let t6;
+      $[19] !== expandElementRef || $[20] !== open || $[21] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: t5, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }), $[19] = expandElementRef, $[20] = open, $[21] = t5, $[22] = t6) : t6 = $[22];
+      let t7;
+      $[23] !== open || $[24] !== popoverElementRef || $[25] !== t4 || $[26] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { constrainSize: !0, content: t4, open, placement: "top", portal: !0, ref: popoverElementRef, children: t6 }, "button"), $[23] = open, $[24] = popoverElementRef, $[25] = t4, $[26] = t6, $[27] = t7) : t7 = $[27], t1 = [...t2, t7, ...rawItems.slice(len - afterLength)], $[0] = afterLength, $[1] = beforeLength, $[2] = collapse, $[3] = expand, $[4] = expandElementRef, $[5] = len, $[6] = open, $[7] = popoverElementRef, $[8] = rawItems, $[9] = space, $[10] = t1;
+    } else
+      t1 = $[10];
+    return t1;
+  }
+  return rawItems;
+}
 function dialogStyle({
   theme: theme$1
 }) {