@sanity/ui 2.6.2 → 2.6.4-canary.0

package/dist/index.d.mts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
 import {Component} from 'react'
 import {Context} from 'react'
@@ -89,7 +87,7 @@ export declare const Arrow: ForwardRefExoticComponent<
     {
       width: number
       height: number
-      radius?: number | undefined
+      radius?: number
     } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
     'ref'
   > &

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-
 import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
 import {Component} from 'react'
 import {Context} from 'react'
@@ -89,7 +87,7 @@ export declare const Arrow: ForwardRefExoticComponent<
     {
       width: number
       height: number
-      radius?: number | undefined
+      radius?: number
     } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
     'ref'
   > &

package/dist/index.esm.js

@@ -5,7 +5,7 @@ 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";
 import Refractor from "react-refractor";
-import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
 import { getTheme_v2 as getTheme_v2$1 } from "./_legacy/getTheme_v2.esm.js";
@@ -3071,7 +3071,7 @@ function _isEqual(objA, objB) {
 }
 function PortalProvider(props) {
   const { boundaryElement, children, element, __unstable_elements: elementsProp } = props, elements = useUnique(elementsProp), fallbackElement = useSyncExternalStore(
-    emptySubscribe$1,
+    emptySubscribe,
     () => document.body,
     () => null
   ), value = useMemo(() => ({
@@ -3082,7 +3082,7 @@ function PortalProvider(props) {
   }), [boundaryElement, element, elements, fallbackElement]);
   return /* @__PURE__ */ jsx(PortalContext.Provider, { value, children });
 }
-const emptySubscribe$1 = () => () => {
+const emptySubscribe = () => () => {
 }, Root$i = styled.div`
   display: block;
   width: 0;
@@ -4338,7 +4338,6 @@ 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(), {
@@ -4360,20 +4359,21 @@ const Root$a = styled(Layer)`
     ...restProps
   } = 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, 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 portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, middleware = useMemo(() => {
     const ret = [];
     return ret.push(
+      size$2({
+        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(
       flip({
         boundary: boundaryElement || void 0,
         fallbackPlacements,
@@ -4387,7 +4387,7 @@ const Root$a = styled(Layer)`
         padding: DEFAULT_TOOLTIP_PADDING
       })
     ), arrowProp && ret.push(arrow({ element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), { floatingStyles, placement, middlewareData, refs, update } = useFloating({
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements, portalElement]), { floatingStyles, placement, middlewareData, refs, update } = useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate
@@ -4505,7 +4505,6 @@ const Root$a = styled(Layer)`
       ref: setFloating,
       style: floatingStyles,
       zOffset,
-      $maxWidth: tooltipWidth,
       children: /* @__PURE__ */ jsx(
         TooltipCard,
         {
@@ -4546,8 +4545,7 @@ const Root$a = styled(Layer)`
     ),
     child
   ] });
-}), emptySubscribe = () => () => {
-}, Root$9 = styled.div`
+}), Root$9 = styled.div`
   line-height: 0;
 `, ListBox = styled(Box)`
   & > ul {
@@ -6156,7 +6154,7 @@ const CustomInline = styled(Inline)`
   }
   100% {
     width: 100%;
-  } 
+  }
 `, LOADING_BAR_HEIGHT = 2;
 function rootStyles(props) {
   const { color } = getTheme_v2$1(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;