@sanity/ui 2.0.0-alpha.20 → 2.0.0-alpha.22

package/dist/index.d.ts

@@ -3426,6 +3426,7 @@ export declare interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
+  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
@@ -3541,6 +3542,7 @@ export declare interface TooltipDelayGroupProviderProps {
 export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
+  arrow?: boolean
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
   content?: React.ReactNode

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css,
 import { color as color$1, white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
-import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 const EMPTY_ARRAY = [];
@@ -5320,7 +5320,8 @@ function badgeStyle(props) {
   const palette = theme.sanity.color[$mode === "outline" ? "muted" : "solid"];
   const color = palette[$tone] || palette.default;
   return {
-    backgroundColor: color.enabled.bg,
+    "--card-fg-color": color.enabled.fg,
+    backgroundColor: color.enabled.bg2,
     color: color.enabled.fg,
     boxShadow: "inset 0 0 0 1px ".concat(color.enabled.border),
     cursor: "default",
@@ -7803,6 +7804,8 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
+const DEFAULT_TOOLTIP_DISTANCE = 4;
+const DEFAULT_TOOLTIP_PADDING = 4;
 const DEFAULT_FALLBACK_PLACEMENTS = {
   top: ["bottom", "left", "right"],
   "top-start": ["bottom-start", "left-start", "right-start"],
@@ -7886,12 +7889,18 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
   value: __freeze$e(raw || cooked.slice())
 }));
 var _a$e;
-const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n"])));
+const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref27 => {
+  let {
+    $maxWidth
+  } = _ref27;
+  return $maxWidth;
+});
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e, _f;
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
+    arrow: arrowProp = true,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
     children: childProp,
     content,
@@ -7899,7 +7908,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
     padding = 3,
     placement: placementProp = "bottom",
-    portal,
+    portal: portalProp,
     scheme,
     shadow = 2,
     zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
@@ -7911,45 +7920,36 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const [referenceElement, setReferenceElement] = useState(null);
   const arrowRef = useRef(null);
   const rootBoundary = "viewport";
+  const portal = usePortal();
+  const portalElement = typeof portalProp === "string" ? ((_d = portal.elements) == null ? void 0 : _d[portalProp]) || null : portal.element;
+  const tooltipWidth = useMemo(() => {
+    const availableWidths = [...(boundaryElement ? [boundaryElement.offsetWidth] : []), (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth];
+    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
+  }, [boundaryElement, portalElement == null ? void 0 : portalElement.offsetWidth]);
   const middleware = useMemo(() => {
     const ret = [];
     ret.push(flip({
       boundary: boundaryElement || void 0,
       fallbackPlacements,
-      padding: 4,
-      rootBoundary,
-      mainAxis: false
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
     }));
     ret.push(offset({
-      mainAxis: 3
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
     }));
-    ret.push(size$2({
-      apply(_ref27) {
-        let {
-          availableWidth,
-          availableHeight,
-          elements
-        } = _ref27;
-        Object.assign(elements.floating.style, {
-          maxWidth: "".concat(availableWidth - 4 * 2, "px"),
-          // the padding is `4px`
-          maxHeight: "".concat(availableHeight - 4 * 2, "px")
-          // the padding is `4px`
-        });
-      }
-    }));
-
     ret.push(shift({
       boundary: boundaryElement || void 0,
       rootBoundary,
-      padding: 4
-    }));
-    ret.push(arrow({
-      element: arrowRef,
-      padding: 2
+      padding: DEFAULT_TOOLTIP_PADDING
     }));
+    if (arrowProp) {
+      ret.push(arrow({
+        element: arrowRef,
+        padding: 2
+      }));
+    }
     return ret;
-  }, [boundaryElement, fallbackPlacements]);
+  }, [arrowProp, boundaryElement, fallbackPlacements]);
   const {
     floatingStyles,
     placement,
@@ -7962,8 +7962,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     whileElementsMounted: autoUpdate
   });
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
-  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
-  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
+  const arrowX = (_e = middlewareData.arrow) == null ? void 0 : _e.x;
+  const arrowY = (_f = middlewareData.arrow) == null ? void 0 : _f.y;
   const arrowStyle = useMemo(() => {
     const style = {
       left: arrowX !== null ? arrowX : void 0,
@@ -8000,10 +8000,36 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       setIsOpen(open, standaloneDelay);
     }
   }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
-  const handleBlur = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
-  const handleFocus = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
-  const handleMouseEnter = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
-  const handleMouseLeave = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
+  const handleBlur = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onBlur) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleClick = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false, true);
+    (_b2 = childProp == null ? void 0 : (_a3 = childProp.props).onClick) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleContextMenu = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false, true);
+    (_b2 = childProp == null ? void 0 : (_a3 = childProp.props).onContextMenu) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleFocus = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(true);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onFocus) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleMouseEnter = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(true);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onMouseEnter) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleMouseLeave = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onMouseLeave) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
   useEffect(() => {
     if (!isOpen) return;
     function handleWindowMouseMove(event) {
@@ -8062,9 +8088,11 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
       ref: setReference
     });
-  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
+  }, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
   if (!child) return /* @__PURE__ */jsx(Fragment, {});
   if (disabled) return child;
   const root = /* @__PURE__ */jsx(Root$a, {
@@ -8073,6 +8101,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     ref: setFloating,
     style: floatingStyles,
     zOffset,
+    $maxWidth: tooltipWidth,
     children: /* @__PURE__ */jsxs(Card, {
       "data-ui": "Tooltip__card",
       "data-placement": placement,
@@ -8080,7 +8109,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       radius: 3,
       scheme,
       shadow,
-      children: [content, /* @__PURE__ */jsx(TooltipArrow, {
+      children: [content, arrowProp && /* @__PURE__ */jsx(TooltipArrow, {
         ref: setArrow,
         style: arrowStyle
       })]
@@ -8088,8 +8117,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   });
   return /* @__PURE__ */jsxs(Fragment, {
     children: [child, showTooltip && /* @__PURE__ */jsx(Fragment, {
-      children: portal ? /* @__PURE__ */jsx(Portal, {
-        __unstable_name: typeof portal === "string" ? portal : void 0,
+      children: portalProp ? /* @__PURE__ */jsx(Portal, {
+        __unstable_name: typeof portalProp === "string" ? portalProp : void 0,
         children: root
       }) : root
     })]
@@ -8225,7 +8254,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     padding: paddingProp = 3,
     popover = EMPTY_RECORD,
     prefix,
-    radius = 3,
+    radius = 2,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
@@ -10050,6 +10079,7 @@ function Toast(props) {
     closable,
     description,
     onClose,
+    radius = 3,
     title,
     status,
     ...restProps
@@ -10061,7 +10091,7 @@ function Toast(props) {
     role,
     ...restProps,
     marginTop: 3,
-    radius: 2,
+    radius,
     shadow: 2,
     tone: cardTone,
     children: /* @__PURE__ */jsxs(Flex, {
@@ -10072,7 +10102,8 @@ function Toast(props) {
         children: /* @__PURE__ */jsxs(Stack, {
           space: 3,
           children: [title && /* @__PURE__ */jsx(Text, {
-            weight: "semibold",
+            size: 1,
+            weight: "medium",
             children: title
           }), description && /* @__PURE__ */jsx(Text, {
             muted: true,