@sanity/ui 2.8.4 → 2.8.6

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, useImperativeHandle, useDebugValue, useSyncExternalStore, createContext, useContext, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, useDebugValue, useImperativeHandle, useSyncExternalStore, createContext, useContext, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, 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";
@@ -178,10 +178,10 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
     const target = evt.target;
     if (!(target instanceof Node))
       return;
-    const resolvedBoundaryElement = typeof boundaryElement == "function" ? boundaryElement() : boundaryElement;
+    const resolvedBoundaryElement = boundaryElement == null ? void 0 : boundaryElement();
     if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
       return;
-    const elements = (Array.isArray(elementsArg) ? elementsArg : elementsArg()).flat();
+    const elements = elementsArg().flat();
     for (const el of elements)
       if (el && (target === el || el.contains(target)))
         return;
@@ -193,7 +193,7 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
     return document.addEventListener("mousedown", handleEvent), () => {
       document.removeEventListener("mousedown", handleEvent);
     };
-  }, [hasListener, onEvent]);
+  }, [hasListener, onEvent]), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
 function useCustomValidity(ref, customValidity) {
   useEffect(() => {
@@ -5334,13 +5334,13 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const { onKeyDown, originElement, shouldFocus } = props, elementsRef = useRef([]), [rootElement, setRootElement] = useState(null), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = elementsRef.current[activeIndex] || null, mounted = !!rootElement, setActiveIndex = useCallback((nextActiveIndex) => {
+  const { onKeyDown, originElement, shouldFocus, rootElementRef } = props, elementsRef = useRef([]), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
   }, []), mount = 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);
       }
@@ -5349,7 +5349,7 @@ function useMenuController(props) {
         idx > -1 && elementsRef.current.splice(idx, 1);
       };
     },
-    [rootElement, setActiveIndex]
+    [rootElementRef, setActiveIndex]
   ), handleKeyDown = useCallback(
     (event) => {
       if (event.key === "Tab") {
@@ -5404,44 +5404,40 @@ function useMenuController(props) {
     },
     [setActiveIndex]
   ), handleItemMouseLeave = useCallback(() => {
-    setActiveIndex(-2), rootElement == null || rootElement.focus();
-  }, [setActiveIndex, rootElement]);
+    var _a;
+    setActiveIndex(-2), (_a = rootElementRef.current) == null || _a.focus();
+  }, [rootElementRef, setActiveIndex]);
   return useEffect(() => {
     if (!mounted) return;
-    const rafId = window.requestAnimationFrame(() => {
-      const _activeIndex = activeIndexRef.current;
-      if (_activeIndex === -1) {
+    const rafId = requestAnimationFrame(() => {
+      if (activeIndex === -1) {
         if (shouldFocus === "first") {
           const el = _getFocusableElements(elementsRef.current)[0];
           if (el) {
             const currentIndex = elementsRef.current.indexOf(el);
-            setActiveIndex(currentIndex), activeIndexRef.current = currentIndex;
+            setActiveIndex(currentIndex);
           }
         }
         if (shouldFocus === "last") {
           const focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
           if (el) {
             const currentIndex = elementsRef.current.indexOf(el);
-            setActiveIndex(currentIndex), activeIndexRef.current = currentIndex;
+            setActiveIndex(currentIndex);
           }
         }
         return;
       }
-      const element = elementsRef.current[_activeIndex] || null;
+      const element = elementsRef.current[activeIndex] || null;
       element == null || element.focus();
     });
-    return () => {
-      window.cancelAnimationFrame(rafId);
-    };
+    return () => cancelAnimationFrame(rafId);
   }, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement
+    mount
   };
 }
 const Root$5 = styled(Box)`
@@ -5473,34 +5469,23 @@ const Root$5 = styled(Box)`
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
-    mount,
-    rootElement,
-    setRootElement
-  } = useMenuController({ onKeyDown, originElement, shouldFocus }), handleRefChange = useCallback(
+    mount
+  } = useMenuController({ onKeyDown, originElement, shouldFocus, rootElementRef: ref }), unregisterElementRef = useRef(null), handleRefChange = useCallback(
     (el) => {
-      setRootElement(el), ref.current = el;
+      unregisterElementRef.current && (unregisterElementRef.current(), unregisterElementRef.current = null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
     },
-    [setRootElement]
+    [registerElement]
   );
   useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutside(
-    useCallback(
-      (event) => isTopLayer && onClickOutside && onClickOutside(event),
-      [isTopLayer, onClickOutside]
-    ),
-    [rootElement]
-  ), useGlobalKeyDown(
+  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(
     useCallback(
       (event) => {
         isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
       },
       [isTopLayer, onEscape]
     )
-  ), useEffect(() => {
-    if (!(!rootElement || !registerElement))
-      return registerElement(rootElement);
-  }, [registerElement, rootElement]);
+  );
   const value = useMemo(
     () => ({
       version: 0,
@@ -5607,9 +5592,7 @@ const Root$5 = styled(Box)`
     [menuElements]
   ), handleItemClick = useCallback(() => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => {
-    setChildMenuElements((els) => els.filter((_el) => _el !== el));
-  }), []), menuProps = useMemo(
+  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => setChildMenuElements((els) => els.filter((_el) => _el !== el))), []), menuProps = useMemo(
     () => ({
       "aria-labelledby": id,
       onBlurCapture: handleBlur,
@@ -5813,7 +5796,7 @@ function MenuGroup(props) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), shouldFocusRef = useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), handleMouseEnter = useCallback(
+  } = menu, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), handleMouseEnter = useCallback(
     (event) => {
       setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
     },
@@ -5827,19 +5810,21 @@ function MenuGroup(props) {
     [rootElement]
   ), handleClick = useCallback(
     (event) => {
-      onClick && onClick(event), shouldFocusRef.current = "first", setOpen(!0), requestAnimationFrame(() => {
-        shouldFocusRef.current = null;
-      });
+      onClick == null || onClick(event), setShouldFocus("first"), setOpen(!0);
     },
     [onClick]
   ), handleChildItemClick = useCallback(() => {
-    setOpen(!1), onItemClick && onItemClick();
+    setOpen(!1), onItemClick == null || onItemClick();
   }, [onItemClick]), handleMenuMouseEnter = useCallback(() => setWithinMenu(!0), []);
   useEffect(() => mount(rootElement), [mount, rootElement]), useEffect(() => {
     active || setOpen(!1);
   }, [active]), useEffect(() => {
     open || setWithinMenu(!1);
-  }, [open]);
+  }, [open]), useEffect(() => {
+    if (!shouldFocus) return;
+    const rafId = requestAnimationFrame(() => setShouldFocus(null));
+    return () => cancelAnimationFrame(rafId);
+  }, [shouldFocus]);
   const childMenu = /* @__PURE__ */ jsx(
     Menu,
     {
@@ -5849,15 +5834,13 @@ function MenuGroup(props) {
       onKeyDown: handleMenuKeyDown,
       onMouseEnter: handleMenuMouseEnter,
       registerElement,
-      shouldFocus: shouldFocusRef.current,
+      shouldFocus,
       children
     }
   ), handleKeyDown = useCallback((event) => {
     const target = event.currentTarget;
     if (document.activeElement === target && event.key === "ArrowRight") {
-      shouldFocusRef.current = "first", setOpen(!0), setWithinMenu(!0), requestAnimationFrame(() => {
-        shouldFocusRef.current = null;
-      });
+      setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       return;
     }
   }, []);
@@ -6176,7 +6159,7 @@ const CustomInline = styled(Inline)`
   }
   100% {
     width: 100%;
-  } 
+  }
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2$1(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;