@sanity/ui 2.0.0-alpha.17 → 2.0.0-alpha.19

package/dist/index.js

@@ -3836,16 +3836,16 @@ const studioTheme = {
   avatar: {
     sizes: [{
       distance: -3,
-      size: 25
+      size: 23
     }, {
       distance: -6,
-      size: 35
+      size: 33
     }, {
       distance: -9,
-      size: 55
+      size: 53
     }],
     focusRing: {
-      offset: 1,
+      offset: 0,
       width: 1
     }
   },
@@ -4733,6 +4733,7 @@ function textInputRepresentationStyle(props) {
     $hasSuffix,
     $scheme,
     $tone,
+    $unstableDisableFocusRing,
     theme
   } = props;
   const {
@@ -4748,13 +4749,13 @@ function textInputRepresentationStyle(props) {
   }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
     color: color.invalid.enabled.border,
     width: input.border.width
-  }), focusRingStyle({
+  }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     border: {
       color: color.default.enabled.border,
       width: input.border.width
     },
     focusRing
-  }), focusRingStyle({
+  }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     focusRing
   }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
     color: color.default.disabled.border,
@@ -5017,7 +5018,7 @@ function avatarBgStrokeStyle() {
 }
 function avatarStrokeStyle() {
   return {
-    strokeWidth: "3px",
+    strokeWidth: "2px",
     '[data-status="editing"] &': {
       strokeDasharray: "2 4",
       strokeLinecap: "round"
@@ -5039,6 +5040,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
+    hideInnerStroke,
     status = "online",
     size: sizeProp = 0,
     ...restProps
@@ -5113,7 +5115,7 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
         cy: _radius,
         r: _radius,
         fill: "url(#".concat(imageId, ")")
-      }), /* @__PURE__ */jsxRuntime.jsx(BgStroke, {
+      }), !hideInnerStroke && /* @__PURE__ */jsxRuntime.jsx(BgStroke, {
         cx: _radius,
         cy: _radius,
         rx: _radius,
@@ -5132,9 +5134,8 @@ const Avatar = react.forwardRef(function Avatar2(props, ref) {
         children: /* @__PURE__ */jsxRuntime.jsx(Text, {
           as: "span",
           size: initialsSize,
-          children: /* @__PURE__ */jsxRuntime.jsx("strong", {
-            children: initials
-          })
+          weight: "medium",
+          children: initials
         })
       })
     })]
@@ -5168,7 +5169,7 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return styled.css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return styled.css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
 const Root$C = styled__default.default.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
@@ -5185,9 +5186,8 @@ const AvatarCounter = react.forwardRef(function AvatarCounter2(props, ref) {
     children: /* @__PURE__ */jsxRuntime.jsx(Text, {
       as: "span",
       size: counterSize,
-      children: /* @__PURE__ */jsxRuntime.jsx("strong", {
-        children: count
-      })
+      weight: "medium",
+      children: count
     })
   });
 });
@@ -7672,6 +7672,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     customValidity,
     type = "text",
     weight,
+    unstableDisableFocusRing,
     ...restProps
   } = props;
   const ref = useForwardedRef(forwardedRef);
@@ -7710,6 +7711,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
   }), [prefix, radius]);
   const presentationNode = react.useMemo(() => /* @__PURE__ */jsxRuntime.jsxs(Presentation, {
     $hasPrefix,
+    $unstableDisableFocusRing: unstableDisableFocusRing,
     $hasSuffix,
     $radius: radius,
     $scheme: rootTheme.scheme,
@@ -7730,7 +7732,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
         children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
       })
     })]
-  }), [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
+  }), [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix, unstableDisableFocusRing]);
   const clearButtonBoxPadding = react.useMemo(() => padding.map(v => {
     if (v === 0) return 0;
     if (v === 1) return 1;
@@ -7994,19 +7996,21 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   const closeDelayProp = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.close) || 0;
   const openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp;
   const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
-  const handleIsOpenChange = react.useCallback(open => {
+  const handleIsOpenChange = react.useCallback((open, immediate) => {
     if (isInsideGroup) {
       if (open) {
-        delayGroupContext.setIsGroupActive(open, openDelay);
-        delayGroupContext.setOpenTooltipId(tooltipId, openDelay);
+        const groupedOpenDelay = immediate ? 0 : openDelay;
+        delayGroupContext.setIsGroupActive(open, groupedOpenDelay);
+        delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay);
       } else {
         const minimumGroupDeactivateDelay = 200;
         const groupDeactivateDelay = closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay;
         delayGroupContext.setIsGroupActive(open, groupDeactivateDelay);
-        delayGroupContext.setOpenTooltipId(null, closeDelay);
+        delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay);
       }
     } else {
-      setIsOpen(open, open ? openDelay : closeDelay);
+      const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay;
+      setIsOpen(open, standaloneDelay);
     }
   }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
   const handleBlur = react.useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
@@ -8035,6 +8039,18 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     if (!content) handleIsOpenChange(false);
   }, [content, handleIsOpenChange]);
   react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
+  react.useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
+      if (event.key === "Escape") {
+        handleIsOpenChange(false, true);
+      }
+    }
+    window.addEventListener("keydown", handleWindowKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleWindowKeyDown);
+    };
+  }, [handleIsOpenChange, showTooltip]);
   const setArrow = react.useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();