@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/src/core/components/menu/menuGroup.tsx

@@ -1,10 +1,10 @@
 import {ChevronRightIcon} from '@sanity/icons'
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {isValidElement, useCallback, useEffect, useState} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
 import {useMenu} from './useMenu'
@@ -19,7 +19,7 @@ export interface MenuGroupProps {
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   text: React.ReactNode
   tone?: SelectableTone
 }
@@ -28,7 +28,10 @@ export interface MenuGroupProps {
  * @public
  */
 export function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
+  props: Omit<
+    React.HTMLProps<HTMLDivElement>,
+    'as' | 'height' | 'popover' | 'ref' | 'rows' | 'tabIndex' | 'width' | 'wrap'
+  > &
     MenuGroupProps,
 ): React.ReactElement {
   const {
@@ -46,7 +49,7 @@ export function MenuGroup(
     ...restProps
   } = props
   const menu = useMenu()
-  const {scheme} = useRootTheme()
+
   const {
     activeElement,
     mount,
@@ -166,14 +169,13 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={useArrayProp(radius)}
-        $tone={tone}
-        $scheme={scheme}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onMouseEnter={handleMouseEnter}
+        radius={radius}
         ref={setRootElement}
         tabIndex={-1}
+        tone={tone}
         type={as === 'button' ? 'button' : undefined}
       >
         <Flex gap={space} padding={padding}>

package/src/core/components/menu/menuItem.tsx

@@ -1,3 +1,5 @@
+import {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {
   forwardRef,
   isValidElement,
@@ -9,11 +11,10 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
+// import {useArrayProp} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
-import {useRootTheme} from '../../theme'
+// import {useRootTheme} from '../../theme'
 import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
@@ -21,7 +22,7 @@ import {useMenu} from './useMenu'
 /**
  * @public
  */
-export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+export interface MenuItemProps extends PaddingStyleProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   hotkeys?: string[]
@@ -29,7 +30,8 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
   iconRight?: React.ElementType | React.ReactNode
   pressed?: boolean
   selected?: boolean
-  space?: number | number[]
+  // space?: number | number[]
+  space?: ResponsiveProp<Space>
   text?: React.ReactNode
   tone?: SelectableTone
 }
@@ -39,7 +41,10 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
  */
 export const MenuItem = forwardRef(function MenuItem(
   props: MenuItemProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'rows' | 'selected' | 'tabIndex' | 'width' | 'wrap'
+    >,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -66,7 +71,7 @@ export const MenuItem = forwardRef(function MenuItem(
     tone = 'default',
     ...restProps
   } = props
-  const {scheme} = useRootTheme()
+  // const {scheme} = useRootTheme()
   const menu = useMenu()
   const {
     activeElement,
@@ -105,7 +110,7 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
+  // const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
 
   const setRef = useCallback((el: HTMLDivElement | null) => {
     ref.current = el
@@ -117,14 +122,16 @@ export const MenuItem = forwardRef(function MenuItem(
       data-ui="MenuItem"
       {...restProps}
       aria-pressed={as === 'button' && pressed}
+      as={as}
       data-pressed={as !== 'button' && pressed ? '' : undefined}
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
-      $tone={disabled ? 'default' : tone}
-      $scheme={scheme}
+      // forwardedAs={as}
+      radius={radius}
+      // $radius={useArrayProp(radius)}
+      // $padding={useArrayProp(0)}
+      // $tone={disabled ? 'default' : tone}
+      // $scheme={scheme}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
@@ -132,6 +139,7 @@ export const MenuItem = forwardRef(function MenuItem(
       ref={setRef}
       role="menuitem"
       tabIndex={-1}
+      tone={tone}
       type={as === 'button' ? 'button' : undefined}
     >
       {(IconComponent || text || IconRightComponent) && (
@@ -153,7 +161,7 @@ export const MenuItem = forwardRef(function MenuItem(
 
           {hotkeys && (
             <Hotkeys
-              fontSize={hotkeysFontSize}
+              // fontSize={hotkeysFontSize}
               keys={hotkeys}
               style={{marginTop: -4, marginBottom: -4}}
             />
@@ -175,4 +183,5 @@ export const MenuItem = forwardRef(function MenuItem(
     </Selectable>
   )
 })
+
 MenuItem.displayName = 'ForwardRef(MenuItem)'

package/src/core/components/skeleton/skeleton.tsx

@@ -1,21 +1,12 @@
-import {forwardRef, useEffect, useState} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {Box} from '../../primitives'
-import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {skeletonStyle} from './styles'
-
-const Root = styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  skeletonStyle,
-)
+import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, HTMLProps, useEffect, useState} from 'react'
+import {Box, BoxProps} from '../../primitives'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
   animated?: boolean
   delay?: number
 }
@@ -25,10 +16,11 @@ export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'ch
  * @beta
  */
 export const Skeleton = forwardRef(function Skeleton(
-  props: SkeletonProps & React.HTMLProps<HTMLDivElement>,
-  ref: React.Ref<HTMLDivElement>,
+  props: SkeletonProps &
+    Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {animated = false, delay, radius, ...restProps} = props
+  const {animated = false, className, delay, radius, ...restProps} = props
   const [visible, setVisible] = useState<boolean>(delay ? false : true)
 
   useEffect(() => {
@@ -46,13 +38,15 @@ export const Skeleton = forwardRef(function Skeleton(
   }, [delay])
 
   return (
-    <Root
+    <Box
+      data-ui="Skeleton"
       {...restProps}
-      $animated={animated}
-      $radius={useArrayProp(radius)}
-      $visible={visible}
+      className={composeClassNames(className, skeleton({radius}))}
+      data-animated={animated ? '' : undefined}
+      data-visible={visible ? '' : undefined}
       ref={ref}
     />
   )
 })
+
 Skeleton.displayName = 'ForwardRef(Skeleton)'

package/src/core/components/skeleton/textSkeleton.tsx

@@ -1,36 +1,21 @@
-import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
+import {
+  codeSkeleton,
+  composeClassNames,
+  headingSkeleton,
+  labelSkeleton,
+  ResponsiveProp,
+  textSkeleton,
+} from '@sanity/ui/css'
+import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
-  props: {
-    $size: number[]
-    $style: ThemeFontKey
-  } & ThemeProps,
-) => {
-  const {$size, $style} = props
-  const {font, media} = getTheme_v2(props.theme)
-  const fontStyle = font[$style]
-
-  const styles = _responsive(media, $size, (sizeIndex) => {
-    const fontSize = fontStyle.sizes[sizeIndex]
-    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
-
-    return {height: capHeight}
-  })
-
-  return styles
-})
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontTextSize>
 }
 
 /**
@@ -38,7 +23,7 @@ export interface TextSkeletonProps extends SkeletonProps {
  * @beta
  */
 export interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontLabelSize>
 }
 
 /**
@@ -46,7 +31,7 @@ export interface LabelSkeletonProps extends SkeletonProps {
  * @beta
  */
 export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontHeadingSize>
 }
 
 /**
@@ -54,7 +39,7 @@ export interface HeadingSkeletonProps extends SkeletonProps {
  * @beta
  */
 export interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontCodeSize>
 }
 
 /**
@@ -63,14 +48,24 @@ export interface CodeSkeletonProps extends SkeletonProps {
  */
 export const TextSkeleton = forwardRef(function TextSkeleton(
   props: TextSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="text" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      data-ui="TextSkeleton"
+      {...restProps}
+      className={composeClassNames(className, textSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
 
 /**
@@ -79,14 +74,24 @@ TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
  */
 export const LabelSkeleton = forwardRef(function TextSkeleton(
   props: LabelSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="label" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      data-ui="LabelSkeleton"
+      {...restProps}
+      className={composeClassNames(className, labelSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
 
 /**
@@ -95,14 +100,23 @@ LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
  */
 export const HeadingSkeleton = forwardRef(function TextSkeleton(
   props: HeadingSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      {...restProps}
+      className={composeClassNames(className, headingSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
 
 /**
@@ -111,12 +125,22 @@ HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
  */
 export const CodeSkeleton = forwardRef(function TextSkeleton(
   props: CodeSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'children' | 'height' | 'rows' | 'size' | 'width' | 'wrap'
+    >,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
-
-  return <Root {...restProps} $size={$size} ref={ref} $style="code" />
+  const {className, size = 2, ...restProps} = props
+
+  return (
+    <Skeleton
+      // root
+      {...restProps}
+      className={composeClassNames(className, codeSkeleton({size}))}
+      ref={ref}
+    />
+  )
 })
+
 CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

package/src/core/components/tab/tab.tsx

@@ -1,5 +1,6 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
 import {Button} from '../../primitives'
 import {ButtonTone} from '../../types'
 
@@ -14,17 +15,13 @@ export interface TabProps {
   'id': string
   'icon'?: React.ElementType | React.ReactNode
   'focused'?: boolean
-  'fontSize'?: number | number[]
+  'fontSize'?: ResponsiveProp<FontTextSize>
   'label'?: React.ReactNode
   'padding'?: number | number[]
   'selected'?: boolean
   'tone'?: ButtonTone
 }
 
-const CustomButton = styled(Button)`
-  max-width: 100%;
-`
-
 /**
  * @public
  */
@@ -76,7 +73,7 @@ export const Tab = forwardRef(function Tab(
   }, [focused])
 
   return (
-    <CustomButton
+    <Button
       data-ui="Tab"
       {...restProps}
       aria-selected={selected ? 'true' : 'false'}
@@ -97,4 +94,5 @@ export const Tab = forwardRef(function Tab(
     />
   )
 })
+
 Tab.displayName = 'ForwardRef(Tab)'

package/src/core/components/tab/tabList.tsx

@@ -1,5 +1,4 @@
-import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
-import {styled} from 'styled-components'
+import {cloneElement, ForwardedRef, forwardRef, useCallback, useMemo, useState} from 'react'
 import {Inline, InlineProps} from '../../primitives'
 
 /**
@@ -13,22 +12,12 @@ function _isReactElement(node: unknown): node is React.ReactElement {
   return Boolean(node)
 }
 
-//Limits the width of tabs in tablist
-const CustomInline = styled(Inline)`
-  & > div {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-`
-
 /**
  * @public
  */
 export const TabList = forwardRef(function TabList(
   props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
@@ -63,15 +52,10 @@ export const TabList = forwardRef(function TabList(
   )
 
   return (
-    <CustomInline
-      data-ui="TabList"
-      {...restProps}
-      onKeyDown={handleKeyDown}
-      ref={ref}
-      role="tablist"
-    >
+    <Inline data-ui="TabList" {...restProps} onKeyDown={handleKeyDown} ref={ref} role="tablist">
       {tabs}
-    </CustomInline>
+    </Inline>
   )
 })
+
 TabList.displayName = 'ForwardRef(TabList)'

package/src/core/components/tab/tabPanel.tsx

@@ -35,4 +35,5 @@ export const TabPanel = forwardRef(function TabPanel(
     </Box>
   )
 })
+
 TabPanel.displayName = 'ForwardRef(TabPanel)'

package/src/core/components/toast/toast.tsx

@@ -1,19 +1,16 @@
 import {CloseIcon} from '@sanity/icons'
+import {RadiusStyleProps} from '@sanity/ui/css'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
 import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
-import {ThemeProps} from '../../styles'
 import type {ButtonTone} from '../../types'
-import {rootStyles, TextBox} from './styles'
 
 /**
  * @public
  */
-export interface ToastProps {
+export interface ToastProps extends RadiusStyleProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
-  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
@@ -40,10 +37,6 @@ const ROLES = {
   info: 'alert',
 } as const
 
-const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
-  rootStyles,
-)
-
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
@@ -52,26 +45,48 @@ const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & T
  * @public
  */
 export function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'rows' | 'title' | 'width' | 'wrap'
+    >,
 ): React.ReactElement {
-  const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
+  const {
+    closable,
+    description,
+    duration, // eslint-disable-line @typescript-eslint/no-unused-vars
+    onClose,
+    radius = 3,
+    title,
+    status,
+    ...restProps
+  } = props
+
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
 
   return (
-    <Root
+    <Card
+      // root
       data-ui="Toast"
       role={role}
       {...restProps}
       marginTop={3}
+      pointerEvents="auto"
       radius={radius}
       shadow={2}
       tone={cardTone}
-      $duration={duration}
+      // todo
+      // $duration={duration}
     >
       <Flex align="flex-start">
-        <TextBox flex={1} padding={3}>
+        <Box
+          // text-box
+          flex={1}
+          overflowX="auto"
+          padding={3}
+        >
           <Stack space={3}>
             {title && (
               <Text size={1} weight="medium">
@@ -84,7 +99,7 @@ export function Toast(
               </Text>
             )}
           </Stack>
-        </TextBox>
+        </Box>
 
         {closable && (
           <Box padding={1}>
@@ -100,7 +115,7 @@ export function Toast(
           </Box>
         )}
       </Flex>
-    </Root>
+    </Card>
   )
 }