@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,6 +1,15 @@
+import type {
+  GapStyleProps,
+  PaddingStyleProps,
+  RadiusStyleProps,
+  ResponsiveProp,
+} from '@sanity/ui/css'
+import type {ElementTone, FontTextSize} from '@sanity/ui/theme'
 import {
-  forwardRef,
+  type ElementType,
   isValidElement,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -10,44 +19,53 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-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 {SelectableTone} from '../../types/selectable'
-import {Hotkeys} from '../hotkeys'
+import {Box} from '../../primitives/box/box'
+import {Flex} from '../../primitives/flex/flex'
+import {Selectable} from '../../primitives/selectable/selectable'
+import {Text} from '../../primitives/text/text'
+import type {ComponentType, Props} from '../../types'
+import {Hotkeys} from '../hotkeys/hotkeys'
 import {useMenu} from './useMenu'
 
-/**
- * @public
- */
-export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  pressed?: boolean
-  selected?: boolean
-  space?: number | number[]
-  text?: React.ReactNode
-  tone?: SelectableTone
-}
+/** @public */
+export const DEFAULT_MENU_ITEM_ELEMENT = 'button'
+
+/** @public */
+export type MenuItemOwnProps = GapStyleProps &
+  PaddingStyleProps &
+  RadiusStyleProps & {
+    disabled?: boolean
+    fontSize?: ResponsiveProp<FontTextSize>
+    hotkeys?: string[]
+    icon?: ElementType | ReactNode
+    iconRight?: ElementType | ReactNode
+    pressed?: boolean
+    selected?: boolean
+    text?: ReactNode
+    tone?: ElementTone
+  }
+
+/** @public */
+export type MenuItemElementType = 'button' | 'a' | ComponentType
 
-/**
- * @public
- */
-export const MenuItem = forwardRef(function MenuItem(
-  props: MenuItemProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'selected' | 'tabIndex'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
+/** @public */
+export type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Props<
+  MenuItemOwnProps,
+  E
+>
+
+/** @public */
+export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
+  props: MenuItemProps<E>,
+): React.JSX.Element {
   const {
-    as = 'button',
+    as = DEFAULT_MENU_ITEM_ELEMENT,
     children,
     disabled,
     fontSize = 1,
+    gap = 3,
+    gapX,
+    gapY,
     hotkeys,
     icon: IconComponent,
     iconRight: IconRightComponent,
@@ -61,33 +79,29 @@ export const MenuItem = forwardRef(function MenuItem(
     paddingLeft,
     pressed,
     radius = 2,
+    ref: forwardedRef,
+    role = 'menuitem',
     selected: selectedProp,
-    space = 3,
     text,
     tone = 'default',
-    ...restProps
-  } = props
-  const {scheme} = useRootTheme()
+    ...rest
+  } = props as MenuItemProps<typeof DEFAULT_MENU_ITEM_ELEMENT>
+
   const menu = useMenu()
-  const {
-    activeElement,
-    mount,
-    onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
-    onItemMouseLeave: _onItemMouseLeave,
-  } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const {activeElement, mount, onItemClick, onItemMouseEnter, onItemMouseLeave} = menu
+  const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
-  const ref = useRef<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLButtonElement | null>(null)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp])
 
   const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
+    (event: MouseEvent<HTMLButtonElement>) => {
       if (disabled) return
       if (onClick) onClick(event)
       if (onItemClick) onItemClick()
@@ -108,9 +122,7 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
-
-  const setRef = useCallback((el: HTMLDivElement | null) => {
+  const setRef = useCallback((el: HTMLButtonElement | null) => {
     ref.current = el
     setRootElement(el)
   }, [])
@@ -118,28 +130,26 @@ export const MenuItem = forwardRef(function MenuItem(
   return (
     <Selectable
       data-ui="MenuItem"
-      role="menuitem"
-      {...restProps}
-      data-pressed={as !== 'button' && pressed ? '' : undefined}
+      {...rest}
+      as={as}
+      data-pressed={pressed ? '' : undefined}
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
-      $tone={disabled ? 'default' : tone}
-      $scheme={scheme}
+      radius={radius}
       disabled={disabled}
       onClick={handleClick}
       onMouseEnter={onItemMouseEnter}
       onMouseLeave={onItemMouseLeave}
       ref={setRef}
+      role={role}
       tabIndex={-1}
+      tone={tone}
       type={as === 'button' ? 'button' : undefined}
     >
       {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={space} align="center" {...paddingProps}>
+        <Flex as="span" gap={gap} gapX={gapX} gapY={gapY} align="center" {...paddingProps}>
           {IconComponent && (
-            <Text size={fontSize}>
+            <Text muted size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}
               {isValidElementType(IconComponent) && <IconComponent />}
             </Text>
@@ -153,22 +163,17 @@ export const MenuItem = forwardRef(function MenuItem(
             </Box>
           )}
 
-          {hotkeys && (
-            <Hotkeys
-              fontSize={hotkeysFontSize}
-              keys={hotkeys}
-              style={{marginTop: -4, marginBottom: -4}}
-            />
-          )}
+          {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
 
           {IconRightComponent && (
-            <Text size={fontSize}>
+            <Text muted size={fontSize}>
               {isValidElement(IconRightComponent) && IconRightComponent}
               {isValidElementType(IconRightComponent) && <IconRightComponent />}
             </Text>
           )}
         </Flex>
       )}
+
       {children && (
         <Box as="span" {...paddingProps}>
           {children}
@@ -176,5 +181,4 @@ export const MenuItem = forwardRef(function MenuItem(
       )}
     </Selectable>
   )
-})
-MenuItem.displayName = 'ForwardRef(MenuItem)'
+}

package/src/core/components/menu/useMenu.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './menuContext'
 
 export function useMenu(): MenuContextValue {
   const value = useContext(MenuContext)

package/src/core/components/menu/useMenuController.ts

@@ -1,4 +1,14 @@
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {
+  type KeyboardEvent,
+  type KeyboardEventHandler,
+  type MouseEvent,
+  type MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
 import {_getFocusableElements, _sortElements} from './helpers'
 
@@ -8,9 +18,9 @@ import {_getFocusableElements, _sortElements} from './helpers'
 export interface MenuController {
   activeElement: HTMLElement | null
   activeIndex: number
-  handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  handleItemMouseEnter: (event: MouseEvent<HTMLElement>) => void
   handleItemMouseLeave: () => void
-  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
+  handleKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
 }
 
@@ -20,10 +30,10 @@ export interface MenuController {
  * @internal
  */
 export function useMenuController(props: {
-  onKeyDown?: React.KeyboardEventHandler
+  onKeyDown?: KeyboardEventHandler
   originElement?: HTMLElement | null
   shouldFocus: 'first' | 'last' | null
-  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
+  rootElementRef: MutableRefObject<HTMLDivElement | null>
 }): MenuController {
   const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
   const elementsRef = useRef<HTMLElement[]>([])
@@ -64,7 +74,7 @@ export function useMenuController(props: {
   )
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       // Move focus to the element that opened the menu before handling the `Tab` press
       if (event.key === 'Tab') {
         if (originElement) {
@@ -162,7 +172,7 @@ export function useMenuController(props: {
   )
 
   const handleItemMouseEnter = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
+    (event: MouseEvent<HTMLElement>) => {
       const element = event.currentTarget
       const currentIndex = elementsRef.current.indexOf(element)
 

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

@@ -3,16 +3,16 @@ import {Box, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
-export default function ExampleStory() {
+export default function ExampleStory(): React.JSX.Element {
   const [tab, setTab] = useState('foo')
-  const useLongTitle = useBoolean('Use long title', false, 'Props') || false
+  const useLongTitle = useBoolean('Use long title', false)
 
   const longTitle =
     "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
 
   return (
     <Box padding={[4, 5, 6]}>
-      <TabList space={[1, 2, 3]}>
+      <TabList gap={[1, 2, 3]}>
         <Tab
           aria-controls="example-panel-foo"
           icon={SunIcon}

package/src/core/components/tab/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'components/tab',
   title: 'Tab',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./example')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,43 +1,49 @@
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {ElementTone, FontTextSize, Space} from '@sanity/ui/theme'
+import {
+  type ElementType,
+  type FocusEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 
-import {Button} from '../../primitives'
-import {ButtonTone} from '../../types'
+import {Button} from '../../primitives/button/button'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface TabProps {
+/** @public */
+export const DEFAULT_TAB_ELEMENT = 'button'
+
+/** @public */
+export type TabOwnProps = {
   /**
-   * The `id` of the correlating `TabPanel` component.
+   * The `id` of the corresponding `TabPanel` component.
    */
   'aria-controls': string
   'id': string
-  'icon'?: React.ElementType | React.ReactNode
+  'icon'?: ElementType | ReactNode
   'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  'label'?: ReactNode
+  'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
-  'tone'?: ButtonTone
+  'tone'?: ElementTone
 }
 
-const CustomButton = styled(Button)`
-  max-width: 100%;
-`
+/** @public */
+export type TabElementType = 'button' | ComponentType
+
+/** @public */
+export type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
 
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: TabProps &
-    Omit<
-      React.HTMLProps<HTMLButtonElement>,
-      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
-) {
+/** @public */
+export function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
+  props: TabProps<E>,
+): React.JSX.Element {
   const {
+    as = DEFAULT_TAB_ELEMENT,
     icon,
     id,
     focused,
@@ -46,9 +52,11 @@ export const Tab = forwardRef(function Tab(
     onClick,
     onFocus,
     padding = 2,
+    ref: forwardedRef,
     selected,
-    ...restProps
-  } = props
+    ...rest
+  } = props as TabProps<typeof DEFAULT_TAB_ELEMENT>
+
   const ref = useRef<HTMLButtonElement | null>(null)
   const focusedRef = useRef(false)
 
@@ -62,7 +70,7 @@ export const Tab = forwardRef(function Tab(
   }, [])
 
   const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLButtonElement>) => {
+    (event: FocusEvent<HTMLButtonElement>) => {
       focusedRef.current = true
       if (onFocus) onFocus(event)
     },
@@ -77,10 +85,11 @@ export const Tab = forwardRef(function Tab(
   }, [focused])
 
   return (
-    <CustomButton
+    <Button
       data-ui="Tab"
-      {...restProps}
+      {...rest}
       aria-selected={selected ? 'true' : 'false'}
+      as={as}
       fontSize={fontSize}
       icon={icon}
       id={id}
@@ -97,5 +106,4 @@ export const Tab = forwardRef(function Tab(
       type="button"
     />
   )
-})
-Tab.displayName = 'ForwardRef(Tab)'
+}

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

@@ -1,36 +1,51 @@
-import {Children, cloneElement, forwardRef, isValidElement, useCallback, useState} from 'react'
-import {styled} from 'styled-components'
+import {
+  Children,
+  cloneElement,
+  type KeyboardEvent,
+  type ReactElement,
+  useCallback,
+  useState,
+} from 'react'
 
-import {Inline, InlineProps} from '../../primitives'
+import {Flex, type FlexOwnProps} from '../../primitives/flex/flex'
+import type {ComponentType, Props} from '../../types'
+import type {TabProps} from './tab'
 
-/**
- * @public
- */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.JSX.Element | null | undefined | false>
+/** @public */
+export const DEFAULT_TAB_LIST_ELEMENT = 'div'
+
+/** @public */
+export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
+
+/** @public */
+export type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
+  children: TabListChild[]
 }
 
-//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 type TabListElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TabListProps<E extends TabListElementType = TabListElementType> = Props<
+  TabListOwnProps,
+  E
+>
+
+/** @public */
+export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
+  props: TabListProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_TAB_LIST_ELEMENT,
+    children: childrenProp,
+    gap = 1,
+    wrap = 'nowrap',
+    ...rest
+  } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
 
-/**
- * @public
- */
-export const TabList = forwardRef(function TabList(
-  props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref,
-) {
-  const {children: childrenProp, ...restProps} = props
   const [focusedIndex, setFocusedIndex] = useState(-1)
 
-  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children = Children.toArray(childrenProp).filter(_isReactElement)
 
   const tabs = children.map((child, childIndex) =>
     cloneElement(child, {
@@ -43,7 +58,7 @@ export const TabList = forwardRef(function TabList(
   const numTabs = tabs.length
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: KeyboardEvent<HTMLDivElement>) => {
       if (event.key === 'ArrowLeft') {
         setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
       }
@@ -56,15 +71,20 @@ export const TabList = forwardRef(function TabList(
   )
 
   return (
-    <CustomInline
+    <Flex
       data-ui="TabList"
-      {...restProps}
+      {...rest}
+      as={as}
+      gap={gap}
       onKeyDown={handleKeyDown}
-      ref={ref}
       role="tablist"
+      wrap={wrap}
     >
       {tabs}
-    </CustomInline>
+    </Flex>
   )
-})
-TabList.displayName = 'ForwardRef(TabList)'
+}
+
+function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
+  return Boolean(node)
+}

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

@@ -1,11 +1,11 @@
-import {forwardRef} from 'react'
+import {Box, type BoxOwnProps} from '../../primitives/box/box'
+import type {ComponentType, Props} from '../../types'
 
-import {Box, BoxProps} from '../../primitives'
+/** @public */
+export const DEFAULT_TAB_PANEL_ELEMENT = 'div'
 
-/**
- * @public
- */
-export interface TabPanelProps extends BoxProps {
+/** @public */
+export type TabPanelOwnProps = BoxOwnProps & {
   /**
    * The `id` of the correlating `Tab` component.
    */
@@ -13,27 +13,35 @@ export interface TabPanelProps extends BoxProps {
   'id': string
 }
 
-/**
- * @public
- */
-export const TabPanel = forwardRef(function TabPanel(
-  props: TabPanelProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {flex, ...restProps} = props
+/** @public */
+export type TabPanelElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
+  TabPanelOwnProps,
+  E
+>
+
+/** @public */
+export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
+  props: TabPanelProps<E>,
+): React.JSX.Element {
+  const {
+    as = DEFAULT_TAB_PANEL_ELEMENT,
+    children,
+    tabIndex,
+    ...rest
+  } = props as TabPanelProps<typeof DEFAULT_TAB_PANEL_ELEMENT>
 
   return (
     <Box
       data-ui="TabPanel"
-      {...restProps}
-      flex={flex}
-      ref={ref}
+      {...rest}
+      as={as}
       role="tabpanel"
-      tabIndex={props.tabIndex === undefined ? 0 : props.tabIndex}
+      tabIndex={tabIndex === undefined ? 0 : tabIndex}
     >
-      {props.children}
+      {children}
     </Box>
   )
-})
-TabPanel.displayName = 'ForwardRef(TabPanel)'
+}

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

@@ -1,12 +1,12 @@
 import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
 
-export default function HookStory() {
+export default function HookStory(): React.JSX.Element {
   const toast = useToast()
 
   return (
     <ToastProvider>
       <Box padding={[4, 5, 6]}>
-        <Inline space={2}>
+        <Inline gap={2}>
           <Button
             onClick={() =>
               toast.push({

package/src/core/components/toast/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'components/toast',
   title: 'Toast',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./hook')),
     },
   ],
-})
+}
+
+export default scope