@sanity/ui 0.37.14 → 0.37.17

package/lib/sanity-ui.modern.mjs

@@ -1884,18 +1884,20 @@ const color = createColorTheme({
     name
   }) => {
     if (name === 'default') {
-      const _skeletonFrom = dark ? hues.gray[900].hex : hues.gray[100].hex;
+      const _tints = hues.gray;
+
+      const _skeletonFrom = dark ? _tints[900].hex : _tints[100].hex;
 
       return {
         fg: dark ? white$1.hex : black$1.hex,
         bg: dark ? black$1.hex : white$1.hex,
-        border: hues.gray[dark ? 800 : 200].hex,
+        border: _tints[dark ? 800 : 200].hex,
         focusRing: hues.blue[dark ? 500 : 500].hex,
         shadow: {
-          outline: rgba(hues.gray[500].hex, 0.4),
-          umbra: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.2),
-          penumbra: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.14),
-          ambient: rgba(dark ? black$1.hex : hues.gray[500].hex, 0.12)
+          outline: rgba(_tints[500].hex, 0.4),
+          umbra: dark ? rgba(_tints[950].hex, 0.4) : rgba(_tints[500].hex, 0.2),
+          penumbra: dark ? rgba(_tints[950].hex, 0.28) : rgba(_tints[500].hex, 0.14),
+          ambient: dark ? rgba(_tints[950].hex, 0.24) : rgba(_tints[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom,
@@ -1905,18 +1907,18 @@ const color = createColorTheme({
     }
 
     if (name === 'transparent') {
-      const _tints = tones.default;
-      const _skeletonFrom2 = _tints[dark ? 800 : 200].hex;
+      const _tints2 = tones.default;
+      const _skeletonFrom2 = _tints2[dark ? 800 : 200].hex;
       return {
-        fg: _tints[dark ? 100 : 900].hex,
-        bg: _tints[dark ? 950 : 50].hex,
-        border: _tints[dark ? 800 : 300].hex,
+        fg: _tints2[dark ? 100 : 900].hex,
+        bg: _tints2[dark ? 950 : 50].hex,
+        border: _tints2[dark ? 800 : 300].hex,
         focusRing: hues.blue[500].hex,
         shadow: {
-          outline: rgba(_tints[500].hex, dark ? 0.2 : 0.4),
-          umbra: rgba(dark ? black$1.hex : _tints[500].hex, 0.2),
-          penumbra: rgba(dark ? black$1.hex : _tints[500].hex, 0.14),
-          ambient: rgba(dark ? black$1.hex : _tints[500].hex, 0.12)
+          outline: rgba(_tints2[500].hex, 0.4),
+          umbra: dark ? rgba(_tints2[900].hex, 0.4) : rgba(_tints2[500].hex, 0.2),
+          penumbra: dark ? rgba(_tints2[900].hex, 0.28) : rgba(_tints2[500].hex, 0.14),
+          ambient: dark ? rgba(_tints2[900].hex, 0.24) : rgba(_tints2[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom2,
@@ -1933,10 +1935,10 @@ const color = createColorTheme({
       border: tints[dark ? 800 : 200].hex,
       focusRing: tints[500].hex,
       shadow: {
-        outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
-        umbra: rgba(dark ? black$1.hex : tints[500].hex, 0.2),
-        penumbra: rgba(dark ? black$1.hex : tints[500].hex, 0.14),
-        ambient: rgba(dark ? black$1.hex : tints[500].hex, 0.12)
+        outline: rgba(tints[500].hex, 0.4),
+        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
+        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
+        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12)
       },
       skeleton: {
         from: skeletonFrom,
@@ -3668,6 +3670,7 @@ function textInputRootStyle() {
 function textInputBaseStyle(props) {
   const {
     theme,
+    $scheme,
     $tone,
     $weight
   } = props;
@@ -3709,7 +3712,7 @@ function textInputBaseStyle(props) {
       color: var(--input-placeholder-color);
     }
 
-    &[data-tone='${0}'] {
+    &[data-scheme='${0}'][data-tone='${0}'] {
       --input-fg-color: ${0};
       --input-placeholder-color: ${0};
 
@@ -3737,7 +3740,7 @@ function textInputBaseStyle(props) {
         --input-placeholder-color: ${0};
       }
     }
-  `), font.family, $weight && font.weights[$weight] || font.weights.regular, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  `), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -3760,6 +3763,7 @@ function textInputRepresentationStyle(props) {
     $border,
     $hasPrefix,
     $hasSuffix,
+    $scheme,
     $tone,
     theme
   } = props;
@@ -3788,7 +3792,7 @@ function textInputRepresentationStyle(props) {
     border-top-right-radius: ${0};
     border-bottom-right-radius: ${0};
 
-    &[data-tone='${0}'] {
+    &[data-scheme='${0}'][data-tone='${0}'] {
       --card-bg-color: ${0};
       --card-fg-color: ${0};
 
@@ -3834,7 +3838,7 @@ function textInputRepresentationStyle(props) {
         }
       }
     }
-  `), $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $tone, color.default.enabled.bg, color.default.enabled.fg, $border ? focusRingBorderStyle({
+  `), $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, $border ? focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }) : undefined, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
@@ -6774,7 +6778,7 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const popperReferenceElement = referenceElementProp || referenceElement;
-  const width = useArrayProp(widthProp);
+  const width = useArrayProp(matchReferenceWidth ? 'auto' : widthProp);
   const modifiers = usePopoverModifiers({
     allowedAutoPlacements,
     arrow,
@@ -6815,13 +6819,21 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
     forwardedRef.current = el;
   }, [forwardedRef]);
   const popoverStyle = useMemo(() => _extends({}, style, styles.popper), [style, styles]);
+  const updateTimeoutRef = useRef(null);
   useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate();
-      } catch (_) {// ignore caught error
-      }
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current);
+      updateTimeoutRef.current = null;
     }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate();
+        } catch (_) {// ignore caught error
+        }
+      }
+    }, 0);
   }, [content, forceUpdate, open, popperReferenceElement]);
 
   if (disabled) {
@@ -7518,6 +7530,7 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef)
   }, restProps, {
     "$fontSize": useArrayProp(fontSize),
     "$padding": useArrayProp(padding),
+    "$scheme": rootTheme.scheme,
     "$space": useArrayProp(0),
     "$tone": rootTheme.tone,
     "$weight": weight,
@@ -7526,6 +7539,7 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef)
   })), /*#__PURE__*/React.createElement(Presentation$1, {
     "$border": border,
     "$radius": useArrayProp(radius),
+    "$scheme": rootTheme.scheme,
     "$tone": rootTheme.tone,
     "data-tone": rootTheme.tone
   })));
@@ -7659,7 +7673,9 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     "$hasPrefix": $hasPrefix,
     "$hasSuffix": $hasSuffix,
     "$radius": radius,
+    "$scheme": rootTheme.scheme,
     "$tone": rootTheme.tone,
+    "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone
   }, icon && /*#__PURE__*/React.createElement(LeftBox, {
     padding: padding
@@ -7669,7 +7685,7 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     padding: padding
   }, /*#__PURE__*/React.createElement(Text, {
     size: fontSize
-  }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), [border, fontSize, icon, iconRight, padding, radius, rootTheme.tone, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
+  }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
 
   const clearButtonBoxPadding = useMemo(() => padding.map(v => {
     if (v === 0) return 0;
@@ -7714,12 +7730,14 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     tone: rootTheme.tone
   }, prefixNode, /*#__PURE__*/React.createElement(InputRoot, null, /*#__PURE__*/React.createElement(Input, _extends({
     "data-as": "input",
+    "data-scheme": rootTheme.scheme,
     "data-tone": rootTheme.tone
   }, restProps, {
     "$fontSize": fontSize,
     "$iconLeft": $hasIcon,
     "$iconRight": $hasIconRight || $hasClearButton,
     "$padding": padding,
+    "$scheme": rootTheme.scheme,
     "$space": space,
     "$tone": rootTheme.tone,
     "$weight": weight,
@@ -7894,13 +7912,21 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
       window.removeEventListener('mousemove', handleWindowMouseMove);
     };
   }, [isOpen, referenceElement]);
+  const updateTimeoutRef = useRef(null);
   useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate();
-      } catch (_) {// ignore caught error
-      }
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current);
+      updateTimeoutRef.current = null;
     }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate();
+        } catch (_) {// ignore caught error
+        }
+      }
+    }, 0);
   }, [forceUpdate, content]); // Close when `disabled` changes to `true`
 
   useEffect(() => {
@@ -8694,7 +8720,7 @@ function dialogStyle({
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: color.shadow.penumbra
+    background: color.shadow.umbra
   };
 }
 function responsiveDialogPositionStyle(props) {