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

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[]
@@ -2744,7 +2746,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
     }
   },
@@ -5004,7 +5004,7 @@ function avatarBgStrokeStyle() {
 }
 function avatarStrokeStyle() {
   return {
-    strokeWidth: "3px",
+    strokeWidth: "2px",
     '[data-status="editing"] &': {
       strokeDasharray: "2 4",
       strokeLinecap: "round"
@@ -5026,6 +5026,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
+    hideInnerStroke,
     status = "online",
     size: sizeProp = 0,
     ...restProps
@@ -5100,7 +5101,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 +5120,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 +5155,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 +5172,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
     })
   });
 });
@@ -7981,19 +7980,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 +8023,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();