@sanity/ui 2.6.6 → 2.6.7

package/dist/index.d.mts

@@ -2069,7 +2069,7 @@ export declare interface TabPanelProps extends BoxProps {
    * The `id` of the correlating `Tab` component.
    */
   'aria-labelledby': string
-  'id': string
+  id: string
 }
 
 /**
@@ -2080,14 +2080,14 @@ export declare interface TabProps {
    * The `id` of the correlating `TabPanel` component.
    */
   'aria-controls': string
-  'id': string
-  'icon'?: React.ElementType | React.ReactNode
-  'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
-  'selected'?: boolean
-  'tone'?: ButtonTone
+  id: string
+  icon?: React.ElementType | React.ReactNode
+  focused?: boolean
+  fontSize?: number | number[]
+  label?: React.ReactNode
+  padding?: number | number[]
+  selected?: boolean
+  tone?: ButtonTone
 }
 
 /**

package/dist/index.d.ts

@@ -2069,7 +2069,7 @@ export declare interface TabPanelProps extends BoxProps {
    * The `id` of the correlating `Tab` component.
    */
   'aria-labelledby': string
-  'id': string
+  id: string
 }
 
 /**
@@ -2080,14 +2080,14 @@ export declare interface TabProps {
    * The `id` of the correlating `TabPanel` component.
    */
   'aria-controls': string
-  'id': string
-  'icon'?: React.ElementType | React.ReactNode
-  'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
-  'selected'?: boolean
-  'tone'?: ButtonTone
+  id: string
+  icon?: React.ElementType | React.ReactNode
+  focused?: boolean
+  fontSize?: number | number[]
+  label?: React.ReactNode
+  padding?: number | number[]
+  selected?: boolean
+  tone?: ButtonTone
 }
 
 /**

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, useCallback, Children, isValidElement, cloneElement, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
@@ -8,7 +8,6 @@ import Refractor from "react-refractor";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
-import { useEffectEvent } from "use-effect-event";
 import { getTheme_v2 as getTheme_v2$1 } from "./_legacy/getTheme_v2.esm.js";
 const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1, studioTheme = buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
   initial: {
@@ -3070,25 +3069,21 @@ function _isEqual(objA, objB) {
   const keysA = Object.keys(objA), keysB = Object.keys(objB);
   return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
 }
-function useMounted() {
-  return useSyncExternalStore(
-    subscribe,
-    () => !0,
-    () => !1
-  );
-}
-const subscribe = () => () => {
-};
 function PortalProvider(props) {
-  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), mounted = useMounted(), value = useMemo(() => ({
+  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(
+    emptySubscribe$1,
+    () => document.body,
+    () => null
+  ), value = useMemo(() => ({
     version: 0,
     boundaryElement: boundaryElement || null,
-    element: element || mounted ? document.body : null,
+    element: element || fallbackElement,
     elements
-  }), [boundaryElement, element, elements, mounted]);
+  }), [boundaryElement, element, elements, fallbackElement]);
   return /* @__PURE__ */ jsx(PortalContext.Provider, { value, children });
 }
-const Root$i = styled.div`
+const emptySubscribe$1 = () => () => {
+}, Root$i = styled.div`
   display: block;
   width: 0;
   height: 0;
@@ -4343,6 +4338,7 @@ function TooltipDelayGroupProvider(props) {
 }
 const Root$a = styled(Layer)`
   pointer-events: none;
+  max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = forwardRef(function(props, forwardedRef) {
   var _a, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
@@ -4362,9 +4358,20 @@ const Root$a = styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport";
   useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, middleware = useMemo(() => {
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body.offsetWidth,
+    // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
+    () => 800
+  ), tooltipWidth = useMemo(() => {
+    const availableWidths = [
+      ...boundaryElement ? [boundaryElement.offsetWidth] : [],
+      (portalElement == null ? void 0 : portalElement.offsetWidth) || documentBodyOffsetWidth
+    ];
+    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
+  }, [boundaryElement, documentBodyOffsetWidth, portalElement == null ? void 0 : portalElement.offsetWidth]), middleware = useMemo(() => {
     const ret = [];
     return ret.push(
       flip({
@@ -4435,7 +4442,15 @@ const Root$a = styled(Layer)`
     },
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
-  useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip }), useEffect(() => {
+  useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowMouseMove(event) {
+      referenceElement && (referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target) || (handleIsOpenChange(!1), window.removeEventListener("mousemove", handleWindowMouseMove)));
+    }
+    return window.addEventListener("mousemove", handleWindowMouseMove), () => {
+      window.removeEventListener("mousemove", handleWindowMouseMove);
+    };
+  }, [showTooltip, referenceElement, handleIsOpenChange]), useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
   }, [disabled, handleIsOpenChange, showTooltip]), useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
@@ -4447,13 +4462,7 @@ const Root$a = styled(Layer)`
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
-    const availableWidths = [
-      ...boundaryElement ? [boundaryElement.offsetWidth] : [],
-      (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth
-    ];
-    setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
+  }, [handleIsOpenChange, showTooltip]);
   const setArrow = useCallback(
     (arrowEl) => {
       arrowRef.current = arrowEl, update();
@@ -4494,11 +4503,9 @@ const Root$a = styled(Layer)`
       "data-ui": "Tooltip",
       ...restProps,
       ref: setFloating,
-      style: {
-        ...floatingStyles,
-        maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-      },
+      style: floatingStyles,
       zOffset,
+      $maxWidth: tooltipWidth,
       children: /* @__PURE__ */ jsx(
         TooltipCard,
         {
@@ -4539,24 +4546,8 @@ const Root$a = styled(Layer)`
     ),
     child
   ] });
-});
-function useCloseOnMouseLeave({
-  handleIsOpenChange,
-  referenceElement,
-  showTooltip
-}) {
-  const onMouseMove = useEffectEvent((target, teardown) => {
-    referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
-  });
-  useEffect(() => {
-    if (!showTooltip) return;
-    const handleMouseMove = (event) => {
-      onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
-    };
-    return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
-  }, [onMouseMove, showTooltip]);
-}
-const Root$9 = styled.div`
+}), emptySubscribe = () => () => {
+}, Root$9 = styled.div`
   line-height: 0;
 `, ListBox = styled(Box)`
   & > ul {
@@ -6251,7 +6242,15 @@ function Toast(props) {
     }
   );
 }
-const key$1 = Symbol.for("@sanity/ui/context/toast"), ToastContext = createGlobalScopedContext(key$1, null), Root$1 = styled(Layer)`
+function useMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => !0,
+    () => !1
+  );
+}
+const subscribe = () => () => {
+}, key$1 = Symbol.for("@sanity/ui/context/toast"), ToastContext = createGlobalScopedContext(key$1, null), Root$1 = styled(Layer)`
   position: fixed;
   top: 0;
   left: 0;