@sanity/ui 1.9.1 → 1.9.3

package/dist/index.js

@@ -6944,9 +6944,14 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
   value: __freeze$e(raw || cooked.slice())
 }));
 var _a$e;
-const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n  // Note that 100vw doesn't exclude system scrollbars.\n  // This should be sufficiently small enough to not trigger overflow-x scrollbars when portalled.\n  max-width: calc(100vw - ", "px);\n"])), DEFAULT_TOOLTIP_PADDING * 10);
+const Root$a = styled__default.default(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref22 => {
+  let {
+    $maxWidth
+  } = _ref22;
+  return $maxWidth;
+});
 const Tooltip = react.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 {
@@ -6957,7 +6962,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
     padding,
     placement: placementProp = "bottom",
-    portal,
+    portal: portalProp,
     scheme,
     shadow = 2,
     zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
@@ -6969,10 +6974,16 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   const [referenceElement, setReferenceElement] = react.useState(null);
   const arrowRef = react.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 = react.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 = react.useMemo(() => {
     const ret = [];
     ret.push(reactDom$1.flip({
-      boundary: portal ? void 0 : boundaryElement || void 0,
+      boundary: boundaryElement || void 0,
       fallbackPlacements,
       padding: DEFAULT_TOOLTIP_PADDING,
       rootBoundary
@@ -6981,7 +6992,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       mainAxis: 3
     }));
     ret.push(reactDom$1.shift({
-      boundary: portal ? void 0 : boundaryElement || void 0,
+      boundary: boundaryElement || void 0,
       rootBoundary,
       padding: DEFAULT_TOOLTIP_PADDING
     }));
@@ -6990,7 +7001,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       padding: 2
     }));
     return ret;
-  }, [boundaryElement, fallbackPlacements, portal]);
+  }, [boundaryElement, fallbackPlacements]);
   const {
     floatingStyles,
     placement,
@@ -7003,8 +7014,8 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     whileElementsMounted: reactDom$1.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 = react.useMemo(() => {
     const style = {
       left: arrowX !== null ? arrowX : void 0,
@@ -7041,10 +7052,36 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
       setIsOpen(open, standaloneDelay);
     }
   }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
-  const handleBlur = react.useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
-  const handleFocus = react.useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
-  const handleMouseEnter = react.useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
-  const handleMouseLeave = react.useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
+  const handleBlur = react.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 = react.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 = react.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 = react.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 = react.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 = react.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]);
   react.useEffect(() => {
     if (!isOpen) return;
     function handleWindowMouseMove(event) {
@@ -7103,9 +7140,11 @@ const Tooltip = react.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__ */jsxRuntime.jsx(jsxRuntime.Fragment, {});
   if (disabled) return child;
   const root = /* @__PURE__ */jsxRuntime.jsx(Root$a, {
@@ -7114,6 +7153,7 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
     ref: setFloating,
     style: floatingStyles,
     zOffset,
+    $maxWidth: tooltipWidth,
     children: /* @__PURE__ */jsxRuntime.jsxs(Card, {
       "data-ui": "Tooltip__card",
       "data-placement": placement,
@@ -7129,8 +7169,8 @@ const Tooltip = react.forwardRef(function Tooltip2(props, ref) {
   });
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [child, showTooltip && /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: portal ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
-        __unstable_name: typeof portal === "string" ? portal : void 0,
+      children: portalProp ? /* @__PURE__ */jsxRuntime.jsx(Portal, {
+        __unstable_name: typeof portalProp === "string" ? portalProp : void 0,
         children: root
       }) : root
     })]
@@ -7290,10 +7330,10 @@ const InnerAutocomplete = react.forwardRef(function InnerAutocomplete2(props, re
     query,
     value
   } = state;
-  const defaultRenderOption = react.useCallback(_ref22 => {
+  const defaultRenderOption = react.useCallback(_ref23 => {
     let {
       value: value2
-    } = _ref22;
+    } = _ref23;
     return /* @__PURE__ */jsxRuntime.jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7746,10 +7786,10 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
-function dialogStyle(_ref23) {
+function dialogStyle(_ref24) {
   let {
     theme
-  } = _ref23;
+  } = _ref24;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -8811,15 +8851,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = styled.keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = styled.css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = styled.css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref24 => {
+const skeletonStyle = styled.css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref25 => {
   let {
     $visible
-  } = _ref24;
+  } = _ref25;
   return $visible ? 1 : 0;
-}, _ref25 => {
+}, _ref26 => {
   let {
     $animated
-  } = _ref25;
+  } = _ref26;
   return $animated ? animation : styled.css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled__default.default(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -8850,12 +8890,12 @@ const Skeleton = react.forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled__default.default(Skeleton)(_ref26 => {
+const Root$3 = styled__default.default(Skeleton)(_ref27 => {
   let {
     $size,
     $style,
     theme
-  } = _ref26;
+  } = _ref27;
   const {
     media
   } = theme.sanity;
@@ -9202,12 +9242,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsxRuntime.jsx(framerMotion.AnimatePresence, {
             initial: false,
-            children: state.map(_ref27 => {
+            children: state.map(_ref28 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref27;
+              } = _ref28;
               return /* @__PURE__ */jsxRuntime.jsx(framerMotion.motion.div, {
                 animate: {
                   opacity: 1,