@sanity/ui 0.37.5 → 0.37.6-next.18

package/lib/sanity-ui.module.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';
@@ -2861,7 +2861,10 @@ function useMediaIndex() {
  */
 
 function usePrefersDark() {
-  var _useState = useState(false),
+  var _useState = useState(function () {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }),
       dark = _useState[0],
       setDark = _useState[1];
 
@@ -3602,7 +3605,7 @@ function responsiveInputPaddingIconRightStyle(props) {
 }
 
 var _templateObject$D, _templateObject2$n, _templateObject3$e;
-var ROOT_STYLE = css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n"])));
+var ROOT_STYLE = css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
@@ -5239,7 +5242,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
     var error = this.state.error;
 
     if (error) {
-      return /*#__PURE__*/React.createElement(Code, null, error.message);
+      var message = typeof (error == null ? void 0 : error.message) === 'string' ? error.message : 'Error';
+      return /*#__PURE__*/React.createElement(Code, null, message);
     }
 
     return this.props.children;
@@ -6596,11 +6600,17 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef)
 
   var clearButtonBoxPadding = useMemo(function () {
     return padding.map(function (v) {
+      if (v === 0) return 0;
+      if (v === 1) return 1;
+      if (v === 2) return 1;
       return v - 2;
     });
   }, [padding]);
   var clearButtonPadding = useMemo(function () {
     return padding.map(function (v) {
+      if (v === 0) return 0;
+      if (v === 1) return 0;
+      if (v === 2) return 1;
       return v - 1;
     });
   }, [padding]);
@@ -6619,9 +6629,7 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef)
       icon: CloseIcon,
       mode: "bleed",
       padding: clearButtonPadding,
-      radius: radius.map(function (r) {
-        return r - 1;
-      })
+      radius: radius
     }, clearButtonProps, {
       onClick: handleClearClick,
       onMouseDown: handleClearMouseDown
@@ -6836,7 +6844,7 @@ var _templateObject$b, _templateObject2$8, _templateObject3$3, _templateObject4$
  * @internal
  */
 
-var Root$9 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  /* position: relative; */\n"])));
+var Root$9 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  /* position: relative; */\n  line-height: 0;\n"])));
 /**
  * @internal
  */
@@ -6979,7 +6987,7 @@ var AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
 
 var AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
 
-var _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"];
+var _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"];
 
 var defaultRenderValue = function defaultRenderValue(value, option) {
   return option ? option.value : value;
@@ -7022,6 +7030,7 @@ var InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(props
       renderPopover = props.renderPopover,
       _props$renderValue = props.renderValue,
       renderValue = _props$renderValue === void 0 ? defaultRenderValue : _props$renderValue,
+      suffix = props.suffix,
       valueProp = props.value,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$f);
 
@@ -7319,11 +7328,17 @@ var InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(props
   }, [disabled, handleClearButtonFocus, loading, value]);
   var openButtonBoxPadding = useMemo(function () {
     return padding.map(function (v) {
+      if (v === 0) return 0;
+      if (v === 1) return 1;
+      if (v === 2) return 1;
       return v - 2;
     });
   }, [padding]);
   var openButtonPadding = useMemo(function () {
     return padding.map(function (v) {
+      if (v === 0) return 0;
+      if (v === 1) return 0;
+      if (v === 2) return 1;
       return v - 1;
     });
   }, [padding]);
@@ -7396,7 +7411,7 @@ var InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(props
     ref: setRef,
     role: "combobox",
     spellCheck: false,
-    suffix: openButtonNode,
+    suffix: suffix || openButtonNode,
     value: inputValue
   }));
   var handleListBoxKeyDown = useCallback(function (event) {
@@ -7971,8 +7986,8 @@ function useMenuController(props) {
       activeIndex = _useState2[0],
       _setActiveIndex = _useState2[1];
 
-  var activeElement = elementsRef.current[activeIndex] || null;
   var activeIndexRef = useRef(activeIndex);
+  var activeElement = elementsRef.current[activeIndex] || null;
   var mounted = Boolean(rootElement);
   var setActiveIndex = useCallback(function (nextActiveIndex) {
     _setActiveIndex(nextActiveIndex);
@@ -8051,7 +8066,7 @@ function useMenuController(props) {
 
       var focusableLen = _focusableElements2.length;
       if (focusableLen === 0) return;
-      var focusedElement = elementsRef.current[activeIndex];
+      var focusedElement = elementsRef.current[activeIndexRef.current];
 
       var focusedIndex = _focusableElements2.indexOf(focusedElement);
 
@@ -8072,7 +8087,7 @@ function useMenuController(props) {
 
       var _focusableLen = _focusableElements3.length;
       if (_focusableLen === 0) return;
-      var _focusedElement = elementsRef.current[activeIndex];
+      var _focusedElement = elementsRef.current[activeIndexRef.current];
 
       var _focusedIndex = _focusableElements3.indexOf(_focusedElement);
 
@@ -8088,7 +8103,7 @@ function useMenuController(props) {
     if (onKeyDown) {
       onKeyDown(event);
     }
-  }, [activeIndex, onKeyDown, originElement, setActiveIndex]);
+  }, [onKeyDown, originElement, setActiveIndex]);
   var handleItemMouseEnter = useCallback(function (event) {
     var element = event.currentTarget;
     var currentIndex = elementsRef.current.indexOf(element);
@@ -9374,20 +9389,22 @@ var _excluded$2 = ["children", "space"];
  * @beta
  */
 
-function Tree(props) {
+var Tree = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Tree(props, ref) {
   var children = props.children,
       _props$space = props.space,
       space = _props$space === void 0 ? 1 : _props$space,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$2);
 
+  var forwardedRef = useForwardedRef(ref);
+
   var _useState = useState(null),
       focusedElement = _useState[0],
       setFocusedElement = _useState[1];
 
+  var focusedElementRef = useRef(focusedElement);
   var path = useMemo(function () {
     return [];
   }, []);
-  var rootRef = useRef(null);
 
   var _useState2 = useState([]),
       itemElements = _useState2[0],
@@ -9397,6 +9414,13 @@ function Tree(props) {
       state = _useState3[0],
       setState = _useState3[1];
 
+  var stateRef = useRef(state);
+  useEffect(function () {
+    focusedElementRef.current = focusedElement;
+  }, [focusedElement]);
+  useEffect(function () {
+    stateRef.current = state;
+  }, [state]);
   var registerItem = useCallback(function (element, path, expanded, selected) {
     setState(function (s) {
       var _extends2;
@@ -9445,12 +9469,12 @@ function Tree(props) {
     };
   }, [focusedElement, itemElements, path, registerItem, setExpanded, space, state]);
   var handleKeyDown = useCallback(function (event) {
-    if (!focusedElement) return;
+    if (!focusedElementRef.current) return;
 
     if (event.key === 'ArrowDown') {
       event.preventDefault();
 
-      var nextEl = _findNextItemElement(state, itemElements, focusedElement);
+      var nextEl = _findNextItemElement(stateRef.current, itemElements, focusedElementRef.current);
 
       if (nextEl) {
         _focusItemElement(nextEl);
@@ -9464,7 +9488,7 @@ function Tree(props) {
     if (event.key === 'ArrowUp') {
       event.preventDefault();
 
-      var prevEl = _findPrevItemElement(state, itemElements, focusedElement);
+      var prevEl = _findPrevItemElement(stateRef.current, itemElements, focusedElementRef.current);
 
       if (prevEl) {
         _focusItemElement(prevEl);
@@ -9477,9 +9501,9 @@ function Tree(props) {
 
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      var itemKey = focusedElement.getAttribute('data-tree-key');
+      var itemKey = focusedElementRef.current.getAttribute('data-tree-key');
       if (!itemKey) return;
-      var itemState = state[itemKey];
+      var itemState = stateRef.current[itemKey];
       if (!itemState) return;
 
       if (itemState.expanded) {
@@ -9496,7 +9520,7 @@ function Tree(props) {
         var itemPath = itemKey.split('/');
         itemPath.pop();
         var parentKey = itemPath.join('/');
-        var parentState = parentKey && state[parentKey];
+        var parentState = parentKey && stateRef.current[parentKey];
 
         if (parentState) {
           parentState.element.focus();
@@ -9508,13 +9532,13 @@ function Tree(props) {
     }
 
     if (event.key === 'ArrowRight') {
-      var _state$focusedKey;
+      var _stateRef$current$foc;
 
       event.preventDefault();
-      var focusedKey = focusedElement.getAttribute('data-tree-key');
+      var 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(function (s) {
           var _extends5;
 
@@ -9528,14 +9552,14 @@ function Tree(props) {
 
       return;
     }
-  }, [focusedElement, itemElements, state]);
+  }, [itemElements]);
   useEffect(function () {
-    if (!rootRef.current) return;
+    if (!forwardedRef.current) return;
 
-    var _itemElements = Array.from(rootRef.current.querySelectorAll('[data-ui="TreeItem"]'));
+    var _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({
@@ -9543,11 +9567,12 @@ function Tree(props) {
     "data-ui": "Tree"
   }, restProps, {
     onKeyDown: handleKeyDown,
-    ref: rootRef,
+    ref: forwardedRef,
     role: "tree",
     space: space
   }), children));
-}
+}));
+Tree.displayName = 'Tree';
 
 var _templateObject$1, _templateObject2, _templateObject3;
 function treeItemRootStyle() {
@@ -9586,7 +9611,7 @@ function useTree() {
 }
 
 var _excluded$1 = ["children", "expanded"];
-function TreeGroup(props) {
+var TreeGroup = /*#__PURE__*/memo(function TreeGroup(props) {
   var children = props.children,
       _props$expanded = props.expanded,
       expanded = _props$expanded === void 0 ? false : _props$expanded,
@@ -9602,12 +9627,12 @@ function TreeGroup(props) {
     role: "group",
     space: tree.space
   }), children);
-}
+});
 
 var _excluded = ["children", "expanded", "fontSize", "href", "icon", "id", "muted", "onClick", "padding", "selected", "space", "text", "weight"];
 
 var _templateObject;
-var Root = styled.li(treeItemRootStyle, treeItemRootColorStyle);
+var Root = /*#__PURE__*/memo(styled.li(treeItemRootStyle, treeItemRootColorStyle));
 var TreeItemBox = styled(Box).attrs({
   forwardedAs: 'a'
 })(treeItemBoxStyle);
@@ -9617,7 +9642,7 @@ var ToggleArrowText = styled(Text)(_templateObject || (_templateObject = _tagged
  * @beta
  */
 
-function TreeItem(props) {
+var TreeItem = /*#__PURE__*/memo(function TreeItem(props) {
   var children = props.children,
       _props$expanded = props.expanded,
       expandedProp = _props$expanded === void 0 ? false : _props$expanded,
@@ -9754,7 +9779,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.module.js.map