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

package/dist/index.d.ts

@@ -263,6 +263,8 @@ export declare interface AvatarProps {
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
   color?: ThemeColorSpotKey
+  /** @beta */
+  hideInnerStroke?: boolean
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: AvatarSize | AvatarSize[]
@@ -2672,6 +2674,10 @@ export declare interface TextInputProps {
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
+  /**
+   * @beta
+   */
+  unstableDisableFocusRing?: boolean
 }
 
 /**
@@ -2744,7 +2750,9 @@ export declare interface Theme {
  */
 export declare interface ThemeAvatar {
   sizes: {
+    /** Distance between avatars in an <AvatarStack> component (px) */
     distance: number
+    /** Diameter (px) */
     size: number
   }[]
   focusRing: FocusRing

package/dist/index.esm.js

@@ -3823,16 +3823,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
     }
   },
@@ -4720,6 +4720,7 @@ function textInputRepresentationStyle(props) {
     $hasSuffix,
     $scheme,
     $tone,
+    $unstableDisableFocusRing,
     theme
   } = props;
   const {
@@ -4735,13 +4736,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,
@@ -5004,7 +5005,7 @@ function avatarBgStrokeStyle() {
 }
 function avatarStrokeStyle() {
   return {
-    strokeWidth: "3px",
+    strokeWidth: "2px",
     '[data-status="editing"] &': {
       strokeDasharray: "2 4",
       strokeLinecap: "round"
@@ -5026,6 +5027,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
+    hideInnerStroke,
     status = "online",
     size: sizeProp = 0,
     ...restProps
@@ -5100,7 +5102,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         cy: _radius,
         r: _radius,
         fill: "url(#".concat(imageId, ")")
-      }), /* @__PURE__ */jsx(BgStroke, {
+      }), !hideInnerStroke && /* @__PURE__ */jsx(BgStroke, {
         cx: _radius,
         cy: _radius,
         rx: _radius,
@@ -5119,9 +5121,8 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         children: /* @__PURE__ */jsx(Text, {
           as: "span",
           size: initialsSize,
-          children: /* @__PURE__ */jsx("strong", {
-            children: initials
-          })
+          weight: "medium",
+          children: initials
         })
       })
     })]
@@ -5155,7 +5156,7 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return 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 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.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
@@ -5172,9 +5173,8 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
     children: /* @__PURE__ */jsx(Text, {
       as: "span",
       size: counterSize,
-      children: /* @__PURE__ */jsx("strong", {
-        children: count
-      })
+      weight: "medium",
+      children: count
     })
   });
 });
@@ -7659,6 +7659,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     customValidity,
     type = "text",
     weight,
+    unstableDisableFocusRing,
     ...restProps
   } = props;
   const ref = useForwardedRef(forwardedRef);
@@ -7697,6 +7698,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   }), [prefix, radius]);
   const presentationNode = useMemo(() => /* @__PURE__ */jsxs(Presentation, {
     $hasPrefix,
+    $unstableDisableFocusRing: unstableDisableFocusRing,
     $hasSuffix,
     $radius: radius,
     $scheme: rootTheme.scheme,
@@ -7717,7 +7719,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
         children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && 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 = useMemo(() => padding.map(v => {
     if (v === 0) return 0;
     if (v === 1) return 1;
@@ -7981,19 +7983,21 @@ const Tooltip = 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 = useCallback(open => {
+  const handleIsOpenChange = 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 = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
@@ -8022,6 +8026,18 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     if (!content) handleIsOpenChange(false);
   }, [content, handleIsOpenChange]);
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
+  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 = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();