@sanity/ui 0.37.5 → 0.37.6-next.18

package/lib/sanity-ui.modern.js

@@ -1,5 +1,5 @@
 import { useId } from '@reach/auto-id';
-import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useLayoutEffect, forwardRef, useCallback, cloneElement, isValidElement, createElement, useReducer, Children, Fragment } from 'react';
+import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useLayoutEffect, forwardRef, useCallback, cloneElement, isValidElement, createElement, useReducer, Children, Fragment, memo } from 'react';
 import ReactIs, { isElement, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
 import { white as white$1, black as black$1, hues } from '@sanity/color';
@@ -2764,7 +2764,10 @@ function useMediaIndex() {
  */
 
 function usePrefersDark() {
-  const [dark, setDark] = useState(false);
+  const [dark, setDark] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
   useEffect(() => {
     const mq = window.matchMedia('(prefers-color-scheme: dark)');
     setDark(mq.matches);
@@ -3576,6 +3579,8 @@ const ROOT_STYLE = css(_t$D || (_t$D = _$C`
   &:not([hidden]) {
     display: flex;
   }
+
+  align-items: center;
 `));
 function textInputRootStyle() {
   return ROOT_STYLE;
@@ -5779,7 +5784,8 @@ class ErrorBoundary extends React.Component {
     } = this.state;
 
     if (error) {
-      return /*#__PURE__*/React.createElement(Code, null, error.message);
+      const message = typeof (error == null ? void 0 : error.message) === 'string' ? error.message : 'Error';
+      return /*#__PURE__*/React.createElement(Code, null, message);
     }
 
     return this.props.children;
@@ -7557,8 +7563,18 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     size: fontSize
   }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
 
-  const clearButtonBoxPadding = useMemo(() => padding.map(v => v - 2), [padding]);
-  const clearButtonPadding = useMemo(() => padding.map(v => v - 1), [padding]);
+  const clearButtonBoxPadding = useMemo(() => padding.map(v => {
+    if (v === 0) return 0;
+    if (v === 1) return 1;
+    if (v === 2) return 1;
+    return v - 2;
+  }), [padding]);
+  const clearButtonPadding = useMemo(() => padding.map(v => {
+    if (v === 0) return 0;
+    if (v === 1) return 0;
+    if (v === 2) return 1;
+    return v - 1;
+  }), [padding]);
   const clearButtonProps = useMemo(() => typeof clearButton === 'object' ? clearButton : EMPTY_RECORD$1, [clearButton]);
   const clearButtonNode = useMemo(() => !disabled && !readOnly && clearButton && /*#__PURE__*/React.createElement(RightCard, {
     forwardedAs: "span",
@@ -7571,7 +7587,7 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     icon: CloseIcon,
     mode: "bleed",
     padding: clearButtonPadding,
-    radius: radius.map(r => r - 1)
+    radius: radius
   }, clearButtonProps, {
     onClick: handleClearClick,
     onMouseDown: handleClearMouseDown
@@ -7823,6 +7839,7 @@ let _$b = t => t,
 
 const Root$9 = styled.div(_t$b || (_t$b = _$b`
   /* position: relative; */
+  line-height: 0;
 `));
 /**
  * @internal
@@ -7993,7 +8010,7 @@ const AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
 
 const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
 
-const _excluded$f = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "value"];
+const _excluded$f = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "suffix", "value"];
 
 const defaultRenderValue = (value, option) => option ? option.value : value;
 
@@ -8026,6 +8043,7 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
     renderOption: renderOptionProp,
     renderPopover,
     renderValue = defaultRenderValue,
+    suffix,
     value: valueProp
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$f);
@@ -8294,8 +8312,18 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
 
     return undefined;
   }, [disabled, handleClearButtonFocus, loading, value]);
-  const openButtonBoxPadding = useMemo(() => padding.map(v => v - 2), [padding]);
-  const openButtonPadding = useMemo(() => padding.map(v => v - 1), [padding]);
+  const openButtonBoxPadding = useMemo(() => padding.map(v => {
+    if (v === 0) return 0;
+    if (v === 1) return 1;
+    if (v === 2) return 1;
+    return v - 2;
+  }), [padding]);
+  const openButtonPadding = useMemo(() => padding.map(v => {
+    if (v === 0) return 0;
+    if (v === 1) return 0;
+    if (v === 2) return 1;
+    return v - 1;
+  }), [padding]);
   const openButtonProps = useMemo(() => typeof openButton === 'object' ? openButton : EMPTY_RECORD, [openButton]);
   const handleOpenClick = useCallback(event => {
     dispatch({
@@ -8361,7 +8389,7 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
     ref: setRef,
     role: "combobox",
     spellCheck: false,
-    suffix: openButtonNode,
+    suffix: suffix || openButtonNode,
     value: inputValue
   }));
   const handleListBoxKeyDown = useCallback(event => {
@@ -8983,8 +9011,8 @@ function useMenuController(props) {
   const elementsRef = useRef([]);
   const [rootElement, setRootElement] = useState(null);
   const [activeIndex, _setActiveIndex] = useState(-1);
-  const activeElement = elementsRef.current[activeIndex] || null;
   const activeIndexRef = useRef(activeIndex);
+  const activeElement = elementsRef.current[activeIndex] || null;
   const mounted = Boolean(rootElement);
   const setActiveIndex = useCallback(nextActiveIndex => {
     _setActiveIndex(nextActiveIndex);
@@ -9059,7 +9087,7 @@ function useMenuController(props) {
 
       const focusableLen = focusableElements.length;
       if (focusableLen === 0) return;
-      const focusedElement = elementsRef.current[activeIndex];
+      const focusedElement = elementsRef.current[activeIndexRef.current];
       let focusedIndex = focusableElements.indexOf(focusedElement);
       focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
       const el = focusableElements[focusedIndex];
@@ -9076,7 +9104,7 @@ function useMenuController(props) {
 
       const focusableLen = focusableElements.length;
       if (focusableLen === 0) return;
-      const focusedElement = elementsRef.current[activeIndex];
+      const focusedElement = elementsRef.current[activeIndexRef.current];
       let focusedIndex = focusableElements.indexOf(focusedElement);
       focusedIndex = (focusedIndex + 1) % focusableLen;
       const el = focusableElements[focusedIndex];
@@ -9088,7 +9116,7 @@ function useMenuController(props) {
     if (onKeyDown) {
       onKeyDown(event);
     }
-  }, [activeIndex, onKeyDown, originElement, setActiveIndex]);
+  }, [onKeyDown, originElement, setActiveIndex]);
   const handleItemMouseEnter = useCallback(event => {
     const element = event.currentTarget;
     const currentIndex = elementsRef.current.indexOf(element);
@@ -10459,18 +10487,26 @@ const _excluded$2 = ["children", "space"];
  * @beta
  */
 
-function Tree(props) {
+const Tree = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Tree(props, ref) {
   const {
     children,
     space = 1
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$2);
 
+  const forwardedRef = useForwardedRef(ref);
   const [focusedElement, setFocusedElement] = useState(null);
+  const focusedElementRef = useRef(focusedElement);
   const path = useMemo(() => [], []);
-  const rootRef = useRef(null);
   const [itemElements, setItemElements] = useState([]);
   const [state, setState] = useState({});
+  const stateRef = useRef(state);
+  useEffect(() => {
+    focusedElementRef.current = focusedElement;
+  }, [focusedElement]);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
   const registerItem = useCallback((element, path, expanded, selected) => {
     setState(s => _extends({}, s, {
       [path]: {
@@ -10515,12 +10551,12 @@ function Tree(props) {
     state
   }), [focusedElement, itemElements, path, registerItem, setExpanded, space, state]);
   const handleKeyDown = useCallback(event => {
-    if (!focusedElement) return;
+    if (!focusedElementRef.current) return;
 
     if (event.key === 'ArrowDown') {
       event.preventDefault();
 
-      const nextEl = _findNextItemElement(state, itemElements, focusedElement);
+      const nextEl = _findNextItemElement(stateRef.current, itemElements, focusedElementRef.current);
 
       if (nextEl) {
         _focusItemElement(nextEl);
@@ -10534,7 +10570,7 @@ function Tree(props) {
     if (event.key === 'ArrowUp') {
       event.preventDefault();
 
-      const prevEl = _findPrevItemElement(state, itemElements, focusedElement);
+      const prevEl = _findPrevItemElement(stateRef.current, itemElements, focusedElementRef.current);
 
       if (prevEl) {
         _focusItemElement(prevEl);
@@ -10547,9 +10583,9 @@ function Tree(props) {
 
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      const itemKey = focusedElement.getAttribute('data-tree-key');
+      const itemKey = focusedElementRef.current.getAttribute('data-tree-key');
       if (!itemKey) return;
-      const itemState = state[itemKey];
+      const itemState = stateRef.current[itemKey];
       if (!itemState) return;
 
       if (itemState.expanded) {
@@ -10566,7 +10602,7 @@ function Tree(props) {
         const itemPath = itemKey.split('/');
         itemPath.pop();
         const parentKey = itemPath.join('/');
-        const parentState = parentKey && state[parentKey];
+        const parentState = parentKey && stateRef.current[parentKey];
 
         if (parentState) {
           parentState.element.focus();
@@ -10578,13 +10614,13 @@ function Tree(props) {
     }
 
     if (event.key === 'ArrowRight') {
-      var _state$focusedKey;
+      var _stateRef$current$foc;
 
       event.preventDefault();
-      const focusedKey = focusedElement.getAttribute('data-tree-key');
+      const focusedKey = focusedElementRef.current.getAttribute('data-tree-key');
       if (!focusedKey) return;
 
-      if (!((_state$focusedKey = state[focusedKey]) != null && _state$focusedKey.expanded)) {
+      if (!((_stateRef$current$foc = stateRef.current[focusedKey]) != null && _stateRef$current$foc.expanded)) {
         setState(s => {
           const itemState = s[focusedKey];
           if (!itemState) return s;
@@ -10598,14 +10634,14 @@ function Tree(props) {
 
       return;
     }
-  }, [focusedElement, itemElements, state]);
+  }, [itemElements]);
   useEffect(() => {
-    if (!rootRef.current) return;
+    if (!forwardedRef.current) return;
 
-    const _itemElements = Array.from(rootRef.current.querySelectorAll('[data-ui="TreeItem"]'));
+    const _itemElements = Array.from(forwardedRef.current.querySelectorAll('[data-ui="TreeItem"]'));
 
     setItemElements(_itemElements);
-  }, [children]);
+  }, [children, forwardedRef]);
   return /*#__PURE__*/React.createElement(TreeContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Stack, _extends({
@@ -10613,11 +10649,12 @@ function Tree(props) {
     "data-ui": "Tree"
   }, restProps, {
     onKeyDown: handleKeyDown,
-    ref: rootRef,
+    ref: forwardedRef,
     role: "tree",
     space: space
   }), children));
-}
+}));
+Tree.displayName = 'Tree';
 
 let _$1 = t => t,
     _t$1,
@@ -10743,7 +10780,7 @@ function useTree() {
 }
 
 const _excluded$1 = ["children", "expanded"];
-function TreeGroup(props) {
+const TreeGroup = /*#__PURE__*/memo(function TreeGroup(props) {
   const {
     children,
     expanded = false
@@ -10760,13 +10797,13 @@ function TreeGroup(props) {
     role: "group",
     space: tree.space
   }), children);
-}
+});
 
 const _excluded = ["children", "expanded", "fontSize", "href", "icon", "id", "muted", "onClick", "padding", "selected", "space", "text", "weight"];
 
 let _ = t => t,
     _t;
-const Root = styled.li(treeItemRootStyle, treeItemRootColorStyle);
+const Root = /*#__PURE__*/memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
 const TreeItemBox = styled(Box).attrs({
   forwardedAs: 'a'
 })(treeItemBoxStyle);
@@ -10780,7 +10817,7 @@ const ToggleArrowText = styled(Text)(_t || (_t = _`
  * @beta
  */
 
-function TreeItem(props) {
+const TreeItem = /*#__PURE__*/memo(function TreeItem(props) {
   const {
     children,
     expanded: expandedProp = false,
@@ -10913,7 +10950,7 @@ function TreeItem(props) {
   }, children && /*#__PURE__*/React.createElement(TreeGroup, {
     expanded: expanded
   }, children)));
-}
+});
 
 export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, RO as ResizeObserver, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, attemptFocus, createColorTheme, fillCSSObject, focusFirstDescendant, focusLastDescendant, getResponsiveProp, getResponsiveSpace, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsive, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, useResponsiveProp, useRootTheme, useTheme, useToast, useTree };
 //# sourceMappingURL=sanity-ui.modern.js.map