@sanity/ui 1.7.7 → 1.7.9

package/dist/index.d.ts

@@ -33,7 +33,6 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
       HTMLProps<HTMLInputElement>,
       | 'value'
       | 'ref'
-      | 'type'
       | 'id'
       | 'spellCheck'
       | 'role'
@@ -49,6 +48,7 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
       | 'onSelect'
       | 'as'
       | 'autoComplete'
+      | 'type'
     > & {
       ref?: Ref<HTMLInputElement> | undefined
     },
@@ -372,7 +372,7 @@ export declare interface BoundaryElementProviderProps {
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -419,7 +419,7 @@ export declare type BoxSizing = 'content' | 'border'
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
   BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'ref' | 'type' | 'as'> &
+    Omit<HTMLProps<HTMLOListElement>, 'ref' | 'as' | 'type'> &
     RefAttributes<HTMLOListElement>
 >
 
@@ -481,7 +481,7 @@ export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution'
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -526,7 +526,7 @@ export declare type CardTone = ThemeColorToneKey | 'inherit'
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -566,7 +566,7 @@ export declare interface CodeProps {
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
   Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -584,7 +584,7 @@ export declare interface CodeSkeletonProps extends SkeletonProps {
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
+  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -847,7 +847,7 @@ export declare function _getResponsiveSpace(
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -938,7 +938,7 @@ export declare interface HeadingProps {
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
   Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1097,7 +1097,7 @@ export declare interface LabelProps {
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
   Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1172,7 +1172,7 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'tabIndex' | 'role' | 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1257,7 +1257,7 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'ref' | 'height' | 'tabIndex' | 'as'> &
+    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'ref' | 'tabIndex' | 'as' | 'height'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1442,7 +1442,7 @@ export declare interface PortalProviderProps {
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -1820,7 +1820,7 @@ export declare interface Styles {
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -1836,7 +1836,7 @@ export declare interface SwitchProps {
  */
 export declare const Tab: ForwardRefExoticComponent<
   Omit<
-    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'label' | 'type' | 'id' | 'aria-controls' | 'as'>,
+    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'label' | 'id' | 'aria-controls' | 'as' | 'type'>,
     'ref'
   > &
     RefAttributes<HTMLButtonElement>
@@ -1846,7 +1846,7 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<unknown>
 >
 
@@ -1934,7 +1934,7 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'as' | 'type'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2011,7 +2011,7 @@ export declare interface TextProps {
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
   Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2679,7 +2679,7 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
 export declare const Tree: MemoExoticComponent<
   ForwardRefExoticComponent<
     TreeProps &
-      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'wrap' | 'height' | 'role' | 'as' | 'align'> &
+      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'wrap' | 'role' | 'as' | 'height' | 'align'> &
       RefAttributes<HTMLDivElement>
   >
 >

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css,
 import { 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 } from '@floating-ui/react-dom';
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 const EMPTY_ARRAY = [];
@@ -6870,11 +6870,28 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       boundary: boundaryElement || void 0,
       fallbackPlacements,
       padding: 4,
-      rootBoundary
+      rootBoundary,
+      mainAxis: false
     }));
     ret.push(offset({
       mainAxis: 3
     }));
+    ret.push(size$2({
+      apply(_ref22) {
+        let {
+          availableWidth,
+          availableHeight,
+          elements
+        } = _ref22;
+        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,
@@ -6887,23 +6904,16 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     return ret;
   }, [boundaryElement, fallbackPlacements]);
   const {
-    x,
-    y,
+    floatingStyles,
     placement,
     middlewareData,
     refs,
-    update,
-    strategy
+    update
   } = useFloating({
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate
   });
-  const rootStyle = useMemo(() => ({
-    position: strategy,
-    top: y != null ? y : 0,
-    left: x != null ? x : 0
-  }), [strategy, x, y]);
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
   const arrowX = (_b = middlewareData.arrow) == null ? void 0 : _b.x;
   const arrowY = (_c = middlewareData.arrow) == null ? void 0 : _c.y;
@@ -6977,7 +6987,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     "data-ui": "Tooltip",
     ...restProps,
     ref: setFloating,
-    style: rootStyle,
+    style: floatingStyles,
     zOffset,
     children: /* @__PURE__ */jsxs(Card, {
       "data-ui": "Tooltip__card",
@@ -7155,10 +7165,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref22 => {
+  const defaultRenderOption = useCallback(_ref23 => {
     let {
       value: value2
-    } = _ref22;
+    } = _ref23;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7611,10 +7621,10 @@ const Breadcrumbs = 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])": {
@@ -8676,15 +8686,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = 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 = 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 = 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 : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -8715,12 +8725,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref26 => {
+const Root$3 = styled(Skeleton)(_ref27 => {
   let {
     $size,
     $style,
     theme
-  } = _ref26;
+  } = _ref27;
   const {
     media
   } = theme.sanity;
@@ -9067,12 +9077,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref27 => {
+            children: state.map(_ref28 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref27;
+              } = _ref28;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,