@sanity/ui 3.0.0-static.14 → 3.0.0-static.15

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { 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, buildTheme_v3 } from "@sanity/ui/theme";
-import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, createGlobalScopedContext, usePrefersReducedMotion, Z_OFFSETS, Portal, Container, Layer, Grid, LayerProvider, isRecord, Selectable, useCard } from "./_chunks-es/_visual-editing.mjs";
+import { isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, isHTMLElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, containsOrEqualsElement, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, createGlobalScopedContext, usePrefersReducedMotion, Portal, Z_OFFSETS, Container, Layer, Grid, LayerProvider, isRecord, Selectable, useCard } from "./_chunks-es/_visual-editing.mjs";
 import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, CardProvider, Checkbox, DEFAULT_ARROW_ELEMENT, DEFAULT_AVATAR_COUNTER_ELEMENT, DEFAULT_AVATAR_ELEMENT, DEFAULT_AVATAR_STACK_ELEMENT, DEFAULT_BADGE_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_CHECKBOX_ELEMENT, DEFAULT_CODE_ELEMENT, DEFAULT_CONTAINER_ELEMENT, DEFAULT_ELEMENT_QUERY_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HEADING_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_INLINE_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LABEL_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_POPOVER_ELEMENT, DEFAULT_RADIO_ELEMENT, DEFAULT_SELECT_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_SR_ONLY_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_SWITCH_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TEXT_AREA_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, DEFAULT_VIRTUAL_LIST_ELEMENT, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _getArrayProp, _isScrollable, studioTheme, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.mjs";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { ChevronDownIcon, CloseIcon, ToggleArrowRightIcon } from "@sanity/icons";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.14",
+  "version": "3.0.0-static.15",
   "keywords": [
     "react",
     "ui",

package/src/css/aspects/margin/margin.style.ts

@@ -1,6 +1,3 @@
-// import {type Style, type StyleRules, vars} from '@sanity/css'
-// import {SPACE} from '@sanity/theme'
-
 import {SPACE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'

package/src/ui/primitives/popover/popoverLayer.tsx

@@ -4,9 +4,8 @@ import {motion} from 'framer-motion'
 import {CSSProperties, ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, PopoverMargins, Props} from '../../types'
-import {Arrow, Layer, LayerOwnProps} from '../../utils'
-import {CardElementType} from '../card'
+import {Placement, PopoverMargins} from '../../types'
+import {Arrow, Layer, LayerOwnProps, LayerProps} from '../../utils'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -37,20 +36,10 @@ export type PopoverLayerOwnProps = LayerOwnProps & {
 }
 
 /** @internal */
-export type PopoverLayerElementType = CardElementType
+export type PopoverLayerProps = PopoverLayerOwnProps & LayerProps<'div'>
 
 /** @internal */
-export type PopoverLayerProps<E extends PopoverLayerElementType = PopoverLayerElementType> = Props<
-  PopoverLayerOwnProps,
-  E
->
-
-const MotionLayer = motion.create(Layer)
-
-/** @internal */
-export function PopoverLayer<
-  E extends PopoverLayerElementType = typeof DEFAULT_POPOVER_LAYER_ELEMENT,
->(props: PopoverLayerProps<E>) {
+export function PopoverLayer(props: PopoverLayerProps) {
   const {
     __unstable_margins: marginsProp,
     animate,
@@ -58,7 +47,6 @@ export function PopoverLayer<
     arrowRef,
     arrowX,
     arrowY,
-    as = DEFAULT_POPOVER_LAYER_ELEMENT,
     children,
     maxWidth,
     padding,
@@ -75,7 +63,7 @@ export function PopoverLayer<
     x: xProp,
     y: yProp,
     ...rest
-  } = props as PopoverLayerProps<typeof DEFAULT_POPOVER_LAYER_ELEMENT>
+  } = props
 
   // Get margins: [top, right, bottom, left]
   const margins: PopoverMargins = useMemo(
@@ -111,11 +99,12 @@ export function PopoverLayer<
   )
 
   return (
-    <MotionLayer
+    // @ts-expect-error - TODO: fix this
+    <Layer
       className={popoverCard()}
       data-ui="Popover"
       {...rest}
-      as={as}
+      as={motion.div}
       data-context-tone={tone}
       data-placement={placement}
       direction="column"
@@ -153,7 +142,7 @@ export function PopoverLayer<
           radius={DEFAULT_POPOVER_ARROW_RADIUS}
         />
       )}
-    </MotionLayer>
+    </Layer>
   )
 }
 

package/src/ui/primitives/tooltip/tooltip.tsx

@@ -190,6 +190,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     placement: placementProp,
     whileElementsMounted: autoUpdate,
     elements: {reference: referenceElement},
+    transform: false,
   })
 
   const arrowX = middlewareData.arrow?.x

package/src/ui/primitives/tooltip/tooltipLayer.tsx

@@ -1,10 +1,10 @@
 import {tooltipCard} from '@sanity/ui/css'
-import {motion} from 'framer-motion'
+import {motion, MotionStyle} from 'framer-motion'
 import {type CSSProperties, ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement, Props} from '../../types'
-import {Arrow, Layer, LayerOwnProps} from '../../utils'
+import {Placement} from '../../types'
+import {Arrow, Layer, LayerOwnProps, LayerProps} from '../../utils'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,
@@ -27,27 +27,16 @@ export interface TooltipLayerOwnProps extends LayerOwnProps {
 }
 
 /** @internal */
-export type TooltipLayerElementType = 'div'
+export type TooltipLayerProps = TooltipLayerOwnProps & LayerProps<'div'>
 
 /** @internal */
-export type TooltipLayerProps<E extends TooltipLayerElementType = TooltipLayerElementType> = Props<
-  TooltipLayerOwnProps,
-  E
->
-
-const MotionLayer = motion.create(Layer)
-
-/** @internal */
-export function TooltipLayer<
-  E extends TooltipLayerElementType = typeof DEFAULT_TOOLTIP_LAYER_ELEMENT,
->(props: TooltipLayerProps<E>) {
+export function TooltipLayer(props: TooltipLayerProps) {
   const {
     animate,
     arrow,
     arrowRef,
     arrowX,
     arrowY,
-    as = DEFAULT_TOOLTIP_LAYER_ELEMENT,
     children,
     originX,
     originY,
@@ -59,9 +48,9 @@ export function TooltipLayer<
     style,
     tone = 'inherit',
     ...rest
-  } = props as TooltipLayerProps<typeof DEFAULT_TOOLTIP_LAYER_ELEMENT>
+  } = props
 
-  const rootStyle: CSSProperties = useMemo(
+  const rootStyle: MotionStyle = useMemo(
     () => ({
       originX,
       originY,
@@ -82,10 +71,11 @@ export function TooltipLayer<
   )
 
   return (
-    <MotionLayer
+    // @ts-expect-error - TODO: fix this
+    <Layer
       data-ui="Tooltip__card"
       {...rest}
-      as={as}
+      as={motion.div}
       className={tooltipCard()}
       data-animate={animate ? '' : undefined}
       data-placement={placement}
@@ -112,7 +102,7 @@ export function TooltipLayer<
           radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
         />
       )}
-    </MotionLayer>
+    </Layer>
   )
 }
 

package/src/css/aspects/height/rules.ts

@@ -1,7 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
-
-export const heightRules: Rules = {
-  ...responsiveRules('h-fill', {height: '100%'}),
-  ...responsiveRules('h-stretch', {height: 'stretch'}),
-}

package/src/css/aspects/width/rules.ts

@@ -1,8 +0,0 @@
-import {Rules} from '../../types'
-
-export const widthRules: Rules = {
-  'w-fill': {
-    // @ts-expect-error - TODO: fix this
-    width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-  },
-}

package/src/css/components/menu/rules.ts

@@ -1,15 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const menuRules: Rules = {
-  'menu': {
-    outline: 'none',
-  },
-
-  'menu-divider': {
-    height: `1px`,
-    border: 0,
-    backgroundColor: vars.color.border,
-    margin: 0,
-  },
-}

package/src/css/primitives/avatar/rules.ts

@@ -1,176 +0,0 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Properties, Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const avatarRules: Rules = {
-  'avatar': {
-    'backgroundColor': vars.color.avatar.bg,
-    'position': 'relative',
-    'boxSizing': 'border-box',
-    'userSelect': 'none',
-    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
-    'lineHeight': 0,
-
-    'width': vars.avatar.size,
-    'height': vars.avatar.size,
-    'borderRadius': vars.avatar.size,
-
-    '@nest': {
-      '&[data-status="inactive"]': {
-        opacity: 0.5,
-      },
-
-      // &:is(button)
-      '&:is(button)': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: 'inherit',
-        color: 'inherit',
-        outline: 'none',
-      },
-
-      '&:is(button):focus': {
-        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--avatar-focus-ring-offset)',
-      },
-
-      '&:is(button):focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-
-      ':disabled &, [data-disabled] &': {
-        [varNames.color.avatar.bg]: vars.color.border,
-        [varNames.color.avatar.fg]: vars.color.bg,
-      },
-
-      ...THEME_COLOR_AVATAR_COLORS.reduce(
-        (acc, color) => {
-          return {
-            ...acc,
-            [`&.${color}`]: {
-              [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-              [varNames.color.avatar.fg]: vars.color.avatar[color].fg,
-            },
-          }
-        },
-        {} as Record<string, Properties>,
-      ),
-    },
-  },
-
-  ...(AVATAR_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`avatar-${size}`, {
-        [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-        [varNames.avatar.size]: vars.avatar.sizes[size].size,
-      }),
-    }
-  }, {} as Rules) as Rules),
-
-  'avatar-arrow': {
-    'position': 'absolute',
-    'boxSizing': 'border-box',
-    'zIndex': 0,
-    'opacity': 0,
-    'transition': 'all 0.2s linear',
-    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
-    'left': 0,
-    'right': 0,
-    'top': 0,
-    'bottom': 0,
-
-    '@nest': {
-      '& > svg': {
-        display: 'block',
-        width: '11px',
-        height: '7px',
-        position: 'absolute',
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-6px)',
-      },
-
-      '[data-arrow-position="inside"] > &': {
-        transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
-        opacity: 0,
-      },
-
-      '[data-arrow-position="top"] > &': {
-        opacity: 1,
-        transform: 'rotate(0deg)',
-      },
-
-      '[data-arrow-position="bottom"] > &': {
-        opacity: 1,
-        transform: 'rotate(-180deg)',
-      },
-    },
-  },
-
-  'avatar-image': {
-    '@nest': {
-      '& > img': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-      },
-
-      '& > span': {
-        display: 'block',
-        position: 'absolute',
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-        boxShadow: [
-          `inset 0 0 0 1px ${vars.color.avatar.bg}`,
-          `inset 0 0 0 1.75px ${vars.color.bg}`,
-        ].join(', '),
-      },
-
-      '[data-image-error] &': {
-        display: 'none',
-      },
-    },
-  },
-
-  'avatar-initials': {
-    color: vars.color.avatar.fg,
-    borderRadius: vars.avatar.size,
-  },
-
-  'avatar-counter': {
-    'color': vars.color.fg,
-    'backgroundColor': vars.color.bg,
-    'boxShadow': [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
-    'userSelect': 'none',
-    'borderRadius': vars.avatar.size,
-    'height': vars.avatar.size,
-
-    '@nest': {
-      '&&': {
-        minWidth: vars.avatar.size,
-      },
-
-      '[data-hide-inner-stroke] &': {
-        boxShadow: `0 0 0 1px ${vars.color.bg}`,
-      },
-    },
-  },
-
-  'avatar-stack': {
-    '@nest': {
-      '& > div + div': {
-        marginLeft: vars.avatar.distance,
-      },
-    },
-  },
-}