@sanity/ui 2.1.5 → 2.1.7

package/dist/index.js

@@ -151,8 +151,7 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
         return;
       }
   }, [element, elementsArg]), react.useEffect(() => {
-    if (!listener)
-      return;
+    if (!listener) return;
     const handleWindowMouseDown = (evt) => {
       const target = evt.target;
       if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
@@ -504,14 +503,10 @@ function useGlobalKeyDown(onKeyDown) {
   return react.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();
@@ -568,8 +563,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 = [];
@@ -1187,8 +1181,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}` };
 }
@@ -1423,8 +1416,7 @@ const Root$B = styledComponents.styled.div(
     animateArrowFrom || arrowPositionProp || "inside"
   ), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
   react.useEffect(() => {
-    if (arrowPosition === arrowPositionProp)
-      return;
+    if (arrowPosition === arrowPositionProp) return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
   }, [arrowPosition, arrowPositionProp]), react.useEffect(() => {
@@ -2880,7 +2872,7 @@ const ElementQuery = react.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 react.Component {
   constructor() {
     super(...arguments), __publicField(this, "state", { error: null });
@@ -2991,8 +2983,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");
 }
@@ -3120,20 +3111,17 @@ const emptySubscribe$1 = () => () => {
 `, VirtualList = react.forwardRef(function(props, ref) {
   const { as = "div", gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps } = props, { space } = useTheme_v2(), forwardedRef = useForwardedRef(ref), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1);
   react.useEffect(() => {
-    if (!wrapperRef.current)
-      return;
+    if (!wrapperRef.current) return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
   }, [renderItem]), react.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);
       };
@@ -3355,8 +3343,7 @@ const Popover = react.memo(
     const referenceWidthRef = react.useRef();
     react.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]);
@@ -4228,8 +4215,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];
@@ -4442,8 +4428,7 @@ const Root$a = styledComponents.styled(Layer)`
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   react.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)));
     }
@@ -4455,8 +4440,7 @@ const Root$a = styledComponents.styled(Layer)`
   }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
   }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]), react.useEffect(() => {
-    if (!showTooltip)
-      return;
+    if (!showTooltip) return;
     function handleWindowKeyDown(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
     }
@@ -4497,10 +4481,8 @@ const Root$a = styledComponents.styled(Layer)`
     handleMouseLeave,
     setReference
   ]);
-  if (!child)
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  if (disabled)
-    return child;
+  if (!child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  if (disabled) return child;
   const tooltip = /* @__PURE__ */ jsxRuntime.jsx(
     Root$a,
     {
@@ -4688,15 +4670,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;
@@ -4743,8 +4723,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     !focused && valueRef.current && dispatch({ type: "root/setActiveValue", value: valueRef.current });
   }, [focused]), react.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];
@@ -5120,8 +5099,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
   }, [autoFocus, forwardedRef]), useGlobalKeyDown(
     react.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());
       },
@@ -5130,8 +5108,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
   ), useClickOutside(
     react.useCallback(
       (event) => {
-        if (!isTopLayer || !onClickOutside)
-          return;
+        if (!isTopLayer || !onClickOutside) return;
         const target = event.target;
         target && !isTargetWithinScope(boundaryElement, portalElement, target) || onClickOutside();
       },
@@ -5302,8 +5279,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;
@@ -5313,8 +5289,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));
@@ -5334,9 +5309,8 @@ function useMenuController(props) {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
   }, []), mount = react.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);
@@ -5356,8 +5330,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;
@@ -5365,8 +5338,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;
@@ -5374,8 +5346,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;
@@ -5386,8 +5357,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;
@@ -5408,8 +5378,7 @@ function useMenuController(props) {
     setActiveIndex(-2), rootElement == null || rootElement.focus();
   }, [setActiveIndex, rootElement]);
   return react.useEffect(() => {
-    if (!mounted)
-      return;
+    if (!mounted) return;
     const rafId = window.requestAnimationFrame(() => {
       const _activeIndex = activeIndexRef.current;
       if (_activeIndex === -1) {
@@ -5630,13 +5599,13 @@ const Root$5 = styledComponents.styled(Box)`
       registerElement,
       shouldFocus
     ]
-  ), menu = ReactIs.isElement(menuProp) ? react.cloneElement(menuProp, menuProps) : null, setButtonRef = react.useCallback(
+  ), menu = menuProp && react.cloneElement(menuProp, menuProps), setButtonRef = react.useCallback(
     (el) => {
       typeof ref == "function" ? ref(el) : ref && (ref.current = el), setButtonElement(el);
     },
     [ref]
   ), button = react.useMemo(
-    () => ReactIs.isElement(buttonProp) ? react.cloneElement(buttonProp, {
+    () => buttonProp && react.cloneElement(buttonProp, {
       "data-ui": "MenuButton",
       id,
       onClick: handleButtonClick,
@@ -5646,7 +5615,7 @@ const Root$5 = styledComponents.styled(Box)`
       "aria-expanded": open,
       ref: setButtonRef,
       selected: open
-    }) : null,
+    }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef]
   ), popoverProps = react.useMemo(
     () => ({
@@ -6446,11 +6415,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];
@@ -6467,8 +6434,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;
@@ -6485,8 +6451,7 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
       [onFocus]
     );
     return react.useEffect(() => {
-      if (!forwardedRef.current)
-        return;
+      if (!forwardedRef.current) return;
       const _itemElements = Array.from(
         forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]')
       );