@sanity/ui 2.6.5 → 2.6.7-canary.0

package/dist/index.js

@@ -126,45 +126,26 @@ function useArrayProp(val, defaultVal) {
     [__perf_hash__]
   );
 }
-function _getElements(element, elementsArg) {
-  const ret = [element];
-  for (const el of elementsArg)
-    Array.isArray(el) ? ret.push(...el) : ret.push(el);
-  return ret.filter(Boolean);
-}
 function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
-  const [element, setElement] = react.useState(null), [elements, setElements] = react.useState(() => _getElements(element, elementsArg)), elementsRef = react.useRef(elements);
-  return react.useEffect(() => {
-    const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
-    if (prevElements.length !== nextElements.length) {
-      setElements(nextElements), elementsRef.current = nextElements;
+  const eventHandler = useEffectEvent.useEffectEvent((evt) => {
+    const target = evt.target;
+    if (!(target instanceof Node) || boundaryElement && !boundaryElement.contains(target))
       return;
-    }
-    for (const el of prevElements)
-      if (!nextElements.includes(el)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
-      }
-    for (const el of nextElements)
-      if (!prevElements.includes(el)) {
-        setElements(nextElements), elementsRef.current = nextElements;
+    const elements = (Array.isArray(elementsArg) ? elementsArg : elementsArg()).flat();
+    for (const el of elements)
+      if (el && (target === el || el.contains(target)))
         return;
-      }
-  }, [element, elementsArg]), react.useEffect(() => {
-    if (!listener) return;
-    const handleWindowMouseDown = (evt) => {
-      const target = evt.target;
-      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
-        for (const el of elements)
-          if (target === el || el.contains(target))
-            return;
-        listener(evt);
-      }
-    };
-    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
-      window.removeEventListener("mousedown", handleWindowMouseDown);
-    };
-  }, [boundaryElement, listener, elements]), setElement;
+    listener(evt);
+  });
+  react.useEffect(() => (document.addEventListener("mousedown", eventHandler), document.addEventListener("touchstart", eventHandler), () => {
+    document.removeEventListener("mousedown", eventHandler), document.removeEventListener("touchstart", eventHandler);
+  }), [eventHandler]);
+}
+function useCustomValidity(ref, customValidity) {
+  react.useEffect(() => {
+    var _a;
+    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
+  }, [customValidity, ref]);
 }
 var resizeObservers = [], hasActiveObservations = function() {
   return resizeObservers.some(function(ro) {
@@ -499,9 +480,27 @@ function useElementRect(element) {
   const elementSize = useElementSize(element);
   return (elementSize == null ? void 0 : elementSize._contentRect) || null;
 }
+function useForwardedRef(ref) {
+  const innerRef = react.useRef(null);
+  return react.useImperativeHandle(ref, () => innerRef.current), innerRef;
+}
 function useGlobalKeyDown(onKeyDown) {
   return react.useEffect(() => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), [onKeyDown]);
 }
+function useMatchMedia(mediaQueryString, getServerSnapshot2) {
+  const { subscribe: subscribe2, getSnapshot } = react.useMemo(() => {
+    let MEDIA_QUERY_CACHE;
+    const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
+    return {
+      subscribe: (onStoreChange) => {
+        const matchMedia = getMatchMedia();
+        return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+      },
+      getSnapshot: () => getMatchMedia().matches
+    };
+  }, [mediaQueryString]);
+  return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
+}
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -544,7 +543,6 @@ function useTheme() {
 function useTheme_v2() {
   return theme.getTheme_v2(styledComponents.useTheme());
 }
-const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
 function _getMediaQuery(media, index) {
   return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
 }
@@ -579,57 +577,18 @@ function _createMediaStore(media) {
     };
   } };
 }
-function getServerSnapshot$2() {
+function getServerSnapshot() {
   return 0;
 }
 function useMediaIndex() {
-  const { media } = useTheme_v2();
-  let store = MEDIA_STORE_CACHE.get(media);
-  return store || (store = _createMediaStore(media), MEDIA_STORE_CACHE.set(media, store)), react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot$2);
+  const { media } = useTheme_v2(), store = react.useMemo(() => _createMediaStore(media), [media]);
+  return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
-let MEDIA_QUERY_CACHE$1;
-function getMatchMedia$1() {
-  return MEDIA_QUERY_CACHE$1 || (MEDIA_QUERY_CACHE$1 = window.matchMedia("(prefers-color-scheme: dark)")), MEDIA_QUERY_CACHE$1;
+function usePrefersDark(getServerSnapshot2 = () => !1) {
+  return useMatchMedia("(prefers-color-scheme: dark)", getServerSnapshot2);
 }
-function subscribe$2(onStoreChange) {
-  const matchMedia = getMatchMedia$1();
-  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
-}
-function getSnapshot$1() {
-  return getMatchMedia$1().matches;
-}
-function getServerSnapshot$1() {
-  return !1;
-}
-function usePrefersDark() {
-  return react.useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
-}
-let MEDIA_QUERY_CACHE;
-function getMatchMedia() {
-  return MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia("(prefers-reduced-motion: reduce)")), MEDIA_QUERY_CACHE;
-}
-function subscribe$1(onStoreChange) {
-  const matchMedia = getMatchMedia();
-  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
-}
-function getSnapshot() {
-  return getMatchMedia().matches;
-}
-function getServerSnapshot() {
-  return !1;
-}
-function usePrefersReducedMotion() {
-  return react.useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
-}
-function useForwardedRef(ref) {
-  const innerRef = react.useRef(null);
-  return react.useImperativeHandle(ref, () => innerRef.current), innerRef;
-}
-function useCustomValidity(ref, customValidity) {
-  react.useEffect(() => {
-    var _a;
-    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
-  }, [customValidity, ref]);
+function usePrefersReducedMotion(getServerSnapshot2 = () => !1) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", getServerSnapshot2);
 }
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
@@ -3055,16 +3014,6 @@ function Portal(props) {
   const { children, __unstable_name: name } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || ((_a = portal.elements) == null ? void 0 : _a.default);
   return portalElement ? reactDom.createPortal(children, portalElement) : null;
 }
-function useUnique(value) {
-  const valueRef = react.useRef(value);
-  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
-}
-function _isEqual(objA, objB) {
-  if (!objA || !objB)
-    return objA === objB;
-  const keysA = Object.keys(objA), keysB = Object.keys(objB);
-  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
-}
 function useMounted() {
   return react.useSyncExternalStore(
     subscribe,
@@ -3075,7 +3024,7 @@ function useMounted() {
 const subscribe = () => () => {
 };
 function PortalProvider(props) {
-  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), mounted = useMounted(), value = react.useMemo(() => ({
+  const { boundaryElement, children, element, __unstable_elements: elements } = props, mounted = useMounted(), value = react.useMemo(() => ({
     version: 0,
     boundaryElement: boundaryElement || null,
     element: element || mounted ? document.body : null,
@@ -4430,7 +4379,7 @@ const Root$a = styledComponents.styled(Layer)`
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
-  react.useEffect(() => {
+  useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip }), react.useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
   }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
@@ -4442,7 +4391,7 @@ const Root$a = styledComponents.styled(Layer)`
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip }), react.useLayoutEffect(() => {
+  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
     const availableWidths = [
       ...boundaryElement ? [boundaryElement.offsetWidth] : [],
       (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth
@@ -4540,13 +4489,13 @@ function useCloseOnMouseLeave({
   referenceElement,
   showTooltip
 }) {
-  const onMouseMove = useEffectEvent.useEffectEvent((target) => {
-    referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || handleIsOpenChange(!1));
+  const onMouseMove = useEffectEvent.useEffectEvent((target, teardown) => {
+    referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
   });
   react.useEffect(() => {
     if (!showTooltip) return;
     const handleMouseMove = (event) => {
-      onMouseMove(event.target);
+      onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
     };
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
   }, [onMouseMove, showTooltip]);
@@ -4962,8 +4911,8 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = react.forwardRef(function(props, ref) {
-  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = useArrayProp(spaceRaw), [open, setOpen] = react.useState(!1), [expandElement, setExpandElement] = react.useState(null), [popoverElement, setPopoverElement] = react.useState(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
-  useClickOutside(collapse, [expandElement, popoverElement]);
+  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = 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), []);
+  useClickOutside(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) {
@@ -4978,7 +4927,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
             open,
             placement: "top",
             portal: !0,
-            ref: setPopoverElement,
+            ref: popoverElementRef,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               ExpandButton,
               {
@@ -4986,7 +4935,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
                 mode: "bleed",
                 onClick: open ? collapse : expand,
                 padding: 1,
-                ref: setExpandElement,
+                ref: expandElementRef,
                 selected: open,
                 text: "\u2026"
               }
@@ -5111,8 +5060,8 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     scheme,
     shadow: shadowProp,
     width: widthProp
-  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = react.useRef(null), [rootElement, setRootElement] = react.useState(null), contentRef = react.useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useImperativeHandle(
+  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = react.useRef(null), contentRef = react.useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
+  return react.useImperativeHandle(forwardedRef, () => ref.current), react.useImperativeHandle(
     forwardedContentRef,
     () => contentRef.current
   ), react.useEffect(() => {
@@ -5127,20 +5076,13 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
       [boundaryElement, isTopLayer, onClose, portalElement]
     )
   ), useClickOutside(
-    react.useCallback(
-      (event) => {
-        if (!isTopLayer || !onClickOutside) return;
-        const target = event.target;
-        target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
-      },
-      [boundaryElement, isTopLayer, onClickOutside, portalElement]
-    ),
-    [rootElement]
-  );
-  const setRef = react.useCallback((el) => {
-    setRootElement(el), ref.current = el;
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsxRuntime.jsx(DialogCardRoot, { radius, ref: setRef, scheme, shadow, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogLayout, { direction: "column", children: [
+    (event) => {
+      if (!isTopLayer || !onClickOutside) return;
+      const target = event.target;
+      target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
+    },
+    () => [ref.current]
+  ), /* @__PURE__ */ jsxRuntime.jsx(DialogContainer, { "data-ui": "DialogCard", width, children: /* @__PURE__ */ jsxRuntime.jsx(DialogCardRoot, { radius, ref, scheme, shadow, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogLayout, { direction: "column", children: [
     showHeader && /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", padding: 3, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsxRuntime.jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
       showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5318,13 +5260,13 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const { onKeyDown, originElement, shouldFocus } = props, elementsRef = react.useRef([]), [rootElement, setRootElement] = react.useState(null), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), activeElement = elementsRef.current[activeIndex] || null, mounted = !!rootElement, setActiveIndex = react.useCallback((nextActiveIndex) => {
+  const { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = react.useRef([]), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), activeElement = react.useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = react.useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
   }, []), mount = react.useCallback(
     (element, selected) => {
       if (!element) return () => {
       };
-      if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElement, elementsRef.current)), selected) {
+      if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
         const selectedIndex = elementsRef.current.indexOf(element);
         setActiveIndex(selectedIndex);
       }
@@ -5333,7 +5275,7 @@ function useMenuController(props) {
         idx > -1 && elementsRef.current.splice(idx, 1);
       };
     },
-    [rootElement, setActiveIndex]
+    [rootElementRef, setActiveIndex]
   ), handleKeyDown = react.useCallback(
     (event) => {
       if (event.key === "Tab") {
@@ -5388,13 +5330,13 @@ function useMenuController(props) {
     },
     [setActiveIndex]
   ), handleItemMouseLeave = react.useCallback(() => {
-    setActiveIndex(-2), rootElement == null || rootElement.focus();
-  }, [setActiveIndex, rootElement]);
+    var _a;
+    setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
+  }, [rootElementRef, setActiveIndex]);
   return react.useEffect(() => {
     if (!mounted) return;
     const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current;
-      if (_activeIndex === -1) {
+      if (activeIndex === -1) {
         if (shouldFocus === "first") {
           const el = _getFocusableElements(elementsRef.current)[0];
           if (el) {
@@ -5411,7 +5353,7 @@ function useMenuController(props) {
         }
         return;
       }
-      const element = elementsRef.current[_activeIndex] || null;
+      const element = elementsRef.current[activeIndex] || null;
       element == null || element.focus();
     });
     return () => {
@@ -5423,9 +5365,7 @@ function useMenuController(props) {
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement
+    mount
   };
 }
 const Root$5 = styledComponents.styled(Box)`
@@ -5457,23 +5397,18 @@ const Root$5 = styledComponents.styled(Box)`
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement
-  } = useMenuController({ onKeyDown, originElement, shouldFocus }), handleRefChange = react.useCallback(
+    mount
+  } = useMenuController({ onKeyDown, originElement, shouldFocus, rootElementRef: ref }), handleRefChange = react.useCallback(
     (el) => {
-      setRootElement(el), ref.current = el;
+      ref.current = el, ref.current && registerElement && registerElement(ref.current);
     },
-    [setRootElement]
+    [registerElement]
   );
   react.useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
   }, [activeIndex, onItemSelect]), useClickOutside(
-    react.useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside]
-    ),
-    [rootElement]
+    (event) => isTopLayer && onClickOutside && onClickOutside(event),
+    () => [ref.current]
   ), useGlobalKeyDown(
     react.useCallback(
       (event) => {
@@ -5481,10 +5416,7 @@ const Root$5 = styledComponents.styled(Box)`
       },
       [isTopLayer, onEscape]
     )
-  ), react.useEffect(() => {
-    if (!(!rootElement || !registerElement))
-      return registerElement(rootElement);
-  }, [registerElement, rootElement]);
+  );
   const value = react.useMemo(
     () => ({
       version: 0,
@@ -6160,7 +6092,7 @@ const CustomInline = styledComponents.styled(Inline)`
   }
   100% {
     width: 100%;
-  } 
+  }
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2.getTheme_v2(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
@@ -6857,6 +6789,7 @@ exports.useElementSize = useElementSize;
 exports.useForwardedRef = useForwardedRef;
 exports.useGlobalKeyDown = useGlobalKeyDown;
 exports.useLayer = useLayer;
+exports.useMatchMedia = useMatchMedia;
 exports.useMediaIndex = useMediaIndex;
 exports.usePortal = usePortal;
 exports.usePrefersDark = usePrefersDark;