@sanity/ui 2.1.6 → 2.1.7

package/dist/index.d.mts

@@ -14,7 +14,7 @@ import {HSL as HSL_2} from '@sanity/ui/theme'
 import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
 import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
-import {IStyledComponent} from 'styled-components'
+import {IStyledComponentBase} from 'styled-components/dist/types'
 import {MemoExoticComponent} from 'react'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
@@ -1364,10 +1364,11 @@ export declare interface MenuButtonProps {
 /**
  * @public
  */
-export declare const MenuDivider: IStyledComponent<
+export declare const MenuDivider: IStyledComponentBase<
   'web',
   FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
->
+> &
+  string
 
 /**
  * @public

package/dist/index.d.ts

@@ -14,7 +14,7 @@ import {HSL as HSL_2} from '@sanity/ui/theme'
 import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
 import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
-import {IStyledComponent} from 'styled-components'
+import {IStyledComponentBase} from 'styled-components/dist/types'
 import {MemoExoticComponent} from 'react'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
@@ -1364,10 +1364,11 @@ export declare interface MenuButtonProps {
 /**
  * @public
  */
-export declare const MenuDivider: IStyledComponent<
+export declare const MenuDivider: IStyledComponentBase<
   'web',
   FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
->
+> &
+  string
 
 /**
  * @public

package/dist/index.esm.js

@@ -154,8 +154,7 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
         return;
       }
   }, [element, elementsArg]), useEffect(() => {
-    if (!listener)
-      return;
+    if (!listener) return;
     const handleWindowMouseDown = (evt) => {
       const target = evt.target;
       if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
@@ -507,14 +506,10 @@ function useGlobalKeyDown(onKeyDown) {
   return useEffect(() => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), [onKeyDown]);
 }
 function getGlobalScope() {
-  if (typeof globalThis < "u")
-    return globalThis;
-  if (typeof window < "u")
-    return window;
-  if (typeof self < "u")
-    return self;
-  if (typeof global < "u")
-    return global;
+  if (typeof globalThis < "u") return globalThis;
+  if (typeof window < "u") return window;
+  if (typeof self < "u") return self;
+  if (typeof global < "u") return global;
   throw new Error("@sanity/ui: could not locate global scope");
 }
 const globalScope = getGlobalScope();
@@ -571,8 +566,7 @@ function _createMediaStore(media) {
   };
   return { getSnapshot: () => {
     for (const { index, mq } of getSizes())
-      if (mq.matches)
-        return index;
+      if (mq.matches) return index;
     return 0;
   }, subscribe: (onStoreChange) => {
     const disposeFns = [];
@@ -1190,8 +1184,7 @@ function toBoxShadow(shadow, color) {
   return `${shadow.map(rem).join(" ")} ${color}`;
 }
 function shadowStyle(shadow, outlineWidth = 1) {
-  if (!shadow)
-    return EMPTY_RECORD;
+  if (!shadow) return EMPTY_RECORD;
   const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`, umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)"), penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)"), ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
   return { boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}` };
 }
@@ -1426,8 +1419,7 @@ const Root$B = styled.div(
     animateArrowFrom || arrowPositionProp || "inside"
   ), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
   useEffect(() => {
-    if (arrowPosition === arrowPositionProp)
-      return;
+    if (arrowPosition === arrowPositionProp) return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
   }, [arrowPosition, arrowPositionProp]), useEffect(() => {
@@ -2883,7 +2875,7 @@ const ElementQuery = forwardRef(function(props, ref) {
     }
   );
 });
-var __defProp = Object.defineProperty, __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key2] = value, __publicField = (obj, key2, value) => (__defNormalProp(obj, key2 + "", value), value);
+var __defProp = Object.defineProperty, __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key2] = value, __publicField = (obj, key2, value) => __defNormalProp(obj, key2 + "", value);
 class ErrorBoundary extends Component {
   constructor() {
     super(...arguments), __publicField(this, "state", { error: null });
@@ -2994,8 +2986,7 @@ function focusLastDescendant(element) {
   return !1;
 }
 function _isScrollable(el) {
-  if (!(el instanceof Element))
-    return !1;
+  if (!(el instanceof Element)) return !1;
   const style = window.getComputedStyle(el);
   return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
 }
@@ -3123,20 +3114,17 @@ const emptySubscribe$1 = () => () => {
 `, VirtualList = forwardRef(function(props, ref) {
   const { as = "div", gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps } = props, { space } = useTheme_v2(), forwardedRef = useForwardedRef(ref), wrapperRef = useRef(null), [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), [itemHeight, setItemHeight] = useState(-1);
   useEffect(() => {
-    if (!wrapperRef.current)
-      return;
+    if (!wrapperRef.current) return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
   }, [renderItem]), useEffect(() => {
-    if (!forwardedRef.current)
-      return;
+    if (!forwardedRef.current) return;
     let _scrollEl = forwardedRef.current.parentNode;
     for (; _scrollEl && !_isScrollable(_scrollEl); )
       _scrollEl = _scrollEl.parentNode;
     if (_scrollEl) {
       const scrollEl = _scrollEl;
-      if (!(scrollEl instanceof HTMLElement))
-        return;
+      if (!(scrollEl instanceof HTMLElement)) return;
       const handleScroll2 = () => {
         setScrollTop(scrollEl.scrollTop);
       };
@@ -3358,8 +3346,7 @@ const Popover = memo(
     const referenceWidthRef = useRef();
     useEffect(() => {
       const floatingElement = forwardedRef.current;
-      if (!open || !floatingElement)
-        return;
+      if (!open || !floatingElement) return;
       const referenceWidth = referenceWidthRef.current;
       matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
     }, [width, forwardedRef, matchReferenceWidth, maxWidth, open]);
@@ -4231,8 +4218,7 @@ function useDelayedState(initialState) {
     const action = () => {
       setState(nextState);
     };
-    if (delayedAction.current && (clearTimeout(delayedAction.current), delayedAction.current = void 0), !delay)
-      return action();
+    if (delayedAction.current && (clearTimeout(delayedAction.current), delayedAction.current = void 0), !delay) return action();
     delayedAction.current = setTimeout(action, delay);
   }, []);
   return [state, onStateChange];
@@ -4445,8 +4431,7 @@ const Root$a = styled(Layer)`
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   useEffect(() => {
-    if (!showTooltip)
-      return;
+    if (!showTooltip) return;
     function handleWindowMouseMove(event) {
       referenceElement && (referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target) || (handleIsOpenChange(!1), window.removeEventListener("mousemove", handleWindowMouseMove)));
     }
@@ -4458,8 +4443,7 @@ const Root$a = styled(Layer)`
   }, [disabled, handleIsOpenChange, showTooltip]), useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
   }, [content, handleIsOpenChange, showTooltip]), useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]), useEffect(() => {
-    if (!showTooltip)
-      return;
+    if (!showTooltip) return;
     function handleWindowKeyDown(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
     }
@@ -4500,10 +4484,8 @@ const Root$a = styled(Layer)`
     handleMouseLeave,
     setReference
   ]);
-  if (!child)
-    return /* @__PURE__ */ jsx(Fragment, {});
-  if (disabled)
-    return child;
+  if (!child) return /* @__PURE__ */ jsx(Fragment, {});
+  if (disabled) return child;
   const tooltip = /* @__PURE__ */ jsx(
     Root$a,
     {
@@ -4691,15 +4673,13 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     (event) => {
       var _a, _b;
       if (event.key === "ArrowDown") {
-        if (event.preventDefault(), !filteredOptionsLen)
-          return;
+        if (event.preventDefault(), !filteredOptionsLen) return;
         const activeOption = filteredOptions.find((o) => o.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
         nextActiveOption && dispatch({ type: "root/setActiveValue", value: nextActiveOption.value, listFocused: !0 });
         return;
       }
       if (event.key === "ArrowUp") {
-        if (event.preventDefault(), !filteredOptionsLen)
-          return;
+        if (event.preventDefault(), !filteredOptionsLen) return;
         const activeOption = filteredOptions.find((o) => o.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[activeIndex === -1 ? filteredOptionsLen - 1 : (filteredOptionsLen + activeIndex - 1) % filteredOptionsLen];
         nextActiveOption && dispatch({ type: "root/setActiveValue", value: nextActiveOption.value, listFocused: !0 });
         return;
@@ -4746,8 +4726,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     !focused && valueRef.current && dispatch({ type: "root/setActiveValue", value: valueRef.current });
   }, [focused]), useEffect(() => {
     const listElement = listBoxElementRef.current;
-    if (!listElement)
-      return;
+    if (!listElement) return;
     const activeOption = filteredOptions.find((o) => o.value === activeValue);
     if (activeOption) {
       const activeIndex = filteredOptions.indexOf(activeOption), activeItemElement = listElement.childNodes[activeIndex];
@@ -5123,8 +5102,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
   }, [autoFocus, forwardedRef]), useGlobalKeyDown(
     useCallback(
       (event) => {
-        if (!isTopLayer || !onClose)
-          return;
+        if (!isTopLayer || !onClose) return;
         const target = document.activeElement;
         target && !isTargetWithinScope(boundaryElement, portalElement, target) || event.key === "Escape" && (event.preventDefault(), event.stopPropagation(), onClose());
       },
@@ -5133,8 +5111,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
   ), useClickOutside(
     useCallback(
       (event) => {
-        if (!isTopLayer || !onClickOutside)
-          return;
+        if (!isTopLayer || !onClickOutside) return;
         const target = event.target;
         target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
       },
@@ -5305,8 +5282,7 @@ function _getDOMPath(rootElement, el) {
   let e = el;
   for (; e !== rootElement; ) {
     const parentElement = e.parentElement;
-    if (!parentElement)
-      return path;
+    if (!parentElement) return path;
     const index = Array.from(parentElement.childNodes).indexOf(e);
     if (path.unshift(index), parentElement === rootElement)
       return path;
@@ -5316,8 +5292,7 @@ function _getDOMPath(rootElement, el) {
 }
 const EMPTY_PATH = [];
 function _sortElements(rootElement, elements) {
-  if (!rootElement)
-    return;
+  if (!rootElement) return;
   const map = /* @__PURE__ */ new WeakMap();
   for (const el of elements)
     map.set(el, _getDOMPath(rootElement, el));
@@ -5337,9 +5312,8 @@ function useMenuController(props) {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
   }, []), mount = useCallback(
     (element, selected) => {
-      if (!element)
-        return () => {
-        };
+      if (!element) return () => {
+      };
       if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElement, elementsRef.current)), selected) {
         const selectedIndex = elementsRef.current.indexOf(element);
         setActiveIndex(selectedIndex);
@@ -5359,8 +5333,7 @@ function useMenuController(props) {
       if (event.key === "Home") {
         event.preventDefault(), event.stopPropagation();
         const el = _getFocusableElements(elementsRef.current)[0];
-        if (!el)
-          return;
+        if (!el) return;
         const currentIndex = elementsRef.current.indexOf(el);
         setActiveIndex(currentIndex);
         return;
@@ -5368,8 +5341,7 @@ function useMenuController(props) {
       if (event.key === "End") {
         event.preventDefault(), event.stopPropagation();
         const focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
-        if (!el)
-          return;
+        if (!el) return;
         const currentIndex = elementsRef.current.indexOf(el);
         setActiveIndex(currentIndex);
         return;
@@ -5377,8 +5349,7 @@ function useMenuController(props) {
       if (event.key === "ArrowUp") {
         event.preventDefault(), event.stopPropagation();
         const focusableElements = _getFocusableElements(elementsRef.current), focusableLen = focusableElements.length;
-        if (focusableLen === 0)
-          return;
+        if (focusableLen === 0) return;
         const focusedElement = elementsRef.current[activeIndexRef.current];
         let focusedIndex = focusableElements.indexOf(focusedElement);
         focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
@@ -5389,8 +5360,7 @@ function useMenuController(props) {
       if (event.key === "ArrowDown") {
         event.preventDefault(), event.stopPropagation();
         const focusableElements = _getFocusableElements(elementsRef.current), focusableLen = focusableElements.length;
-        if (focusableLen === 0)
-          return;
+        if (focusableLen === 0) return;
         const focusedElement = elementsRef.current[activeIndexRef.current];
         let focusedIndex = focusableElements.indexOf(focusedElement);
         focusedIndex = (focusedIndex + 1) % focusableLen;
@@ -5411,8 +5381,7 @@ function useMenuController(props) {
     setActiveIndex(-2), rootElement == null || rootElement.focus();
   }, [setActiveIndex, rootElement]);
   return useEffect(() => {
-    if (!mounted)
-      return;
+    if (!mounted) return;
     const rafId = window.requestAnimationFrame(() => {
       const _activeIndex = activeIndexRef.current;
       if (_activeIndex === -1) {
@@ -5633,13 +5602,13 @@ const Root$5 = styled(Box)`
       registerElement,
       shouldFocus
     ]
-  ), menu = isElement$1(menuProp) ? cloneElement(menuProp, menuProps) : null, setButtonRef = useCallback(
+  ), menu = menuProp && cloneElement(menuProp, menuProps), setButtonRef = useCallback(
     (el) => {
       typeof ref == "function" ? ref(el) : ref && (ref.current = el), setButtonElement(el);
     },
     [ref]
   ), button = useMemo(
-    () => isElement$1(buttonProp) ? cloneElement(buttonProp, {
+    () => buttonProp && cloneElement(buttonProp, {
       "data-ui": "MenuButton",
       id,
       onClick: handleButtonClick,
@@ -5649,7 +5618,7 @@ const Root$5 = styled(Box)`
       "aria-expanded": open,
       ref: setButtonRef,
       selected: open
-    }) : null,
+    }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef]
   ), popoverProps = useMemo(
     () => ({
@@ -6449,11 +6418,9 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
           if (event.key === "ArrowLeft") {
             event.preventDefault();
             const itemKey = focusedElementRef.current.getAttribute("data-tree-key");
-            if (!itemKey)
-              return;
+            if (!itemKey) return;
             const itemState = stateRef.current[itemKey];
-            if (!itemState)
-              return;
+            if (!itemState) return;
             if (itemState.expanded)
               setState((s) => {
                 const itemState2 = s[itemKey];
@@ -6470,8 +6437,7 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
           if (event.key === "ArrowRight") {
             event.preventDefault();
             const focusedKey = focusedElementRef.current.getAttribute("data-tree-key");
-            if (!focusedKey)
-              return;
+            if (!focusedKey) return;
             (_a = stateRef.current[focusedKey]) != null && _a.expanded || setState((s) => {
               const itemState = s[focusedKey];
               return itemState ? { ...s, [focusedKey]: { ...itemState, expanded: !0 } } : s;
@@ -6488,8 +6454,7 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
       [onFocus]
     );
     return useEffect(() => {
-      if (!forwardedRef.current)
-        return;
+      if (!forwardedRef.current) return;
       const _itemElements = Array.from(
         forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]')
       );