@sanity/ui 2.6.4-canary.0 → 2.6.4-canary.1

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom"), getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event"), getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -3065,21 +3065,25 @@ 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 react.useSyncExternalStore(
+    subscribe,
+    () => !0,
+    () => !1
+  );
+}
+const subscribe = () => () => {
+};
 function PortalProvider(props) {
-  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(
-    emptySubscribe,
-    () => document.body,
-    () => null
-  ), value = react.useMemo(() => ({
+  const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), mounted = useMounted(), value = react.useMemo(() => ({
     version: 0,
     boundaryElement: boundaryElement || null,
-    element: element || fallbackElement,
+    element: element || mounted ? document.body : null,
     elements
-  }), [boundaryElement, element, elements, fallbackElement]);
+  }), [boundaryElement, element, elements, mounted]);
   return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
 }
-const emptySubscribe = () => () => {
-}, Root$i = styledComponents.styled.div`
+const Root$i = styledComponents.styled.div`
   display: block;
   width: 0;
   height: 0;
@@ -4334,6 +4338,7 @@ function TooltipDelayGroupProvider(props) {
 }
 const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
+  max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = react.forwardRef(function(props, forwardedRef) {
   var _a, _b, _c, _d, _e, _f, _g;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
@@ -4355,21 +4360,18 @@ const Root$a = styledComponents.styled(Layer)`
     ...restProps
   } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
   react.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, middleware = react.useMemo(() => {
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, mounted = useMounted(), tooltipWidth = react.useMemo(() => {
+    const availableWidths = [
+      ...boundaryElement ? [boundaryElement.offsetWidth] : [],
+      portalElement != null && portalElement.offsetWidth || mounted ? 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
+      )
+    ];
+    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
+  }, [boundaryElement, mounted, portalElement]), middleware = react.useMemo(() => {
     const ret = [];
     return ret.push(
-      reactDom$1.size({
-        apply({ elements }) {
-          const availableWidths = [
-            ...boundaryElement ? [boundaryElement.offsetWidth] : [],
-            (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth
-          ], tooltipWidth = Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
-          Object.assign(elements.floating.style, {
-            maxWidth: tooltipWidth > 0 ? `${tooltipWidth}px` : void 0
-          });
-        }
-      })
-    ), ret.push(
       reactDom$1.flip({
         boundary: boundaryElement || void 0,
         fallbackPlacements,
@@ -4383,7 +4385,7 @@ const Root$a = styledComponents.styled(Layer)`
         padding: DEFAULT_TOOLTIP_PADDING
       })
     ), arrowProp && ret.push(reactDom$1.arrow({ element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements, portalElement]), { floatingStyles, placement, middlewareData, refs, update } = reactDom$1.useFloating({
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), { floatingStyles, placement, middlewareData, refs, update } = reactDom$1.useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: reactDom$1.autoUpdate
@@ -4439,14 +4441,6 @@ const Root$a = styledComponents.styled(Layer)`
     [childProp == null ? void 0 : childProp.props, handleIsOpenChange]
   );
   react.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]), react.useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
   }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
@@ -4458,7 +4452,7 @@ const Root$a = styledComponents.styled(Layer)`
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]);
+  }, [handleIsOpenChange, showTooltip]), useCloseOnMouseLeave({ handleIsOpenChange, referenceElement, showTooltip });
   const setArrow = react.useCallback(
     (arrowEl) => {
       arrowRef.current = arrowEl, update();
@@ -4501,6 +4495,7 @@ const Root$a = styledComponents.styled(Layer)`
       ref: setFloating,
       style: floatingStyles,
       zOffset,
+      $maxWidth: tooltipWidth,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         TooltipCard,
         {
@@ -4541,7 +4536,21 @@ const Root$a = styledComponents.styled(Layer)`
     ),
     child
   ] });
-}), Root$9 = styledComponents.styled.div`
+});
+function useCloseOnMouseLeave({
+  handleIsOpenChange,
+  referenceElement,
+  showTooltip
+}) {
+  const handleWindowMouseMove = useEffectEvent.useEffectEvent((event) => {
+    referenceElement && (referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target) || handleIsOpenChange(!1));
+  });
+  react.useEffect(() => {
+    if (showTooltip)
+      return window.addEventListener("mousemove", handleWindowMouseMove), () => window.removeEventListener("mousemove", handleWindowMouseMove);
+  }, [handleWindowMouseMove, showTooltip]);
+}
+const Root$9 = styledComponents.styled.div`
   line-height: 0;
 `, ListBox = styledComponents.styled(Box)`
   & > ul {
@@ -6150,7 +6159,7 @@ const CustomInline = styledComponents.styled(Inline)`
   }
   100% {
     width: 100%;
-  }
+  } 
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2.getTheme_v2(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
@@ -6236,15 +6245,7 @@ function Toast(props) {
     }
   );
 }
-function useMounted() {
-  return react.useSyncExternalStore(
-    subscribe,
-    () => !0,
-    () => !1
-  );
-}
-const subscribe = () => () => {
-}, key$1 = Symbol.for("@sanity/ui/context/toast"), ToastContext = createGlobalScopedContext(key$1, null), Root$1 = styledComponents.styled(Layer)`
+const key$1 = Symbol.for("@sanity/ui/context/toast"), ToastContext = createGlobalScopedContext(key$1, null), Root$1 = styledComponents.styled(Layer)`
   position: fixed;
   top: 0;
   left: 0;