@sanity/ui 3.1.14 → 3.3.0

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

@@ -1,7 +1,7 @@
 import {forwardRef, useEffect, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
+import {Box, BoxOwnProps, ResponsiveRadiusProps} from '../../primitives'
 import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
@@ -14,7 +14,7 @@ const StyledSkeleton = styled(Box)<
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxOwnProps, 'children'> {
   animated?: boolean
   delay?: number
 }

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

@@ -0,0 +1,48 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {inlineSpaceStyle} from '../../primitives/inline/styles'
+import {Tab} from './tab'
+import {TabList} from './tabList'
+
+jest.mock('../../primitives/inline/styles', () => {
+  const actual = jest.requireActual('../../primitives/inline/styles')
+
+  return {
+    ...actual,
+    inlineSpaceStyle: jest.fn(actual.inlineSpaceStyle),
+  }
+})
+
+describe('components/tabList', () => {
+  const mockedInlineSpaceStyle = jest.mocked(inlineSpaceStyle)
+
+  beforeEach(() => {
+    mockedInlineSpaceStyle.mockClear()
+  })
+
+  function renderTabList(
+    props: Partial<React.ComponentProps<typeof TabList>> = {},
+  ): ReturnType<typeof render> {
+    return render(
+      <TabList {...props}>
+        <Tab aria-controls="tab-panel-a" id="tab-a" label="Tab A" />
+        <Tab aria-controls="tab-panel-b" id="tab-b" label="Tab B" />
+      </TabList>,
+    )
+  }
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderTabList({space: 2})
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedInlineSpaceStyle.mockClear()
+    renderTabList({gap: 2})
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderTabList({gap: 3, space: 1})
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+  })
+})

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

@@ -1,12 +1,12 @@
 import {Children, cloneElement, forwardRef, isValidElement, useCallback, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Inline, InlineProps} from '../../primitives'
+import {Inline, InlineOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+export interface TabListProps extends Omit<InlineOwnProps, 'height'> {
   children: Array<React.JSX.Element | null | undefined | false>
 }
 

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

@@ -1,11 +1,11 @@
 import {forwardRef} from 'react'
 
-import {Box, BoxProps} from '../../primitives'
+import {Box, BoxOwnProps} from '../../primitives'
 
 /**
  * @public
  */
-export interface TabPanelProps extends BoxProps {
+export interface TabPanelProps extends BoxOwnProps {
   /**
    * The `id` of the correlating `Tab` component.
    */

package/src/core/components/toast/styles.ts

@@ -1,7 +1,7 @@
 import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {styled} from 'styled-components'
 
-import {Card, Flex} from '../../primitives'
+import {Card, type CardProps, Flex} from '../../primitives'
 import type {ButtonTone} from '../../types'
 
 const LOADING_BAR_HEIGHT = 2
@@ -61,7 +61,7 @@ export const LoadingBarMask = styled(Card)`
   z-index: 1;
 `
 
-type LoadingBarProgressProps = Omit<React.ComponentProps<typeof Card>, 'tone'> & {
+type LoadingBarProgressProps = Omit<CardProps, 'tone'> & {
   tone: ThemeColorStateToneKey
 }
 export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -9,7 +9,7 @@ function test<ElementType = unknown>(
 }
 
 export const perfTests = [
-  test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
+  test('Toggle tree groups', async ({target}: {target: HTMLUListElement}) => {
     const apples = await findByTestId(target, 'apples')
     const oranges = await findByTestId(target, 'oranges')
 

package/src/core/components/tree/__workshop__/tabFromElement.tsx

@@ -19,7 +19,7 @@ export default function BasicStory() {
     if (testid) setId(testid)
   }, [])
 
-  const handleFocus = useCallback((event: React.FocusEvent<HTMLDivElement>) => {
+  const handleFocus = useCallback((event: React.FocusEvent<HTMLElement>) => {
     const elementFocus = event.target.getAttribute('data-testid')
     if (elementFocus) setFocus(elementFocus)
   }, [])

package/src/core/components/tree/tree.test.tsx

@@ -0,0 +1,55 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Stack} from '../../primitives'
+import {Tree} from './tree'
+import {TreeItem} from './treeItem'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Stack: jest.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
+  }
+})
+
+describe('components/tree spacing', () => {
+  const mockedStack = jest.mocked(Stack)
+
+  beforeEach(() => {
+    mockedStack.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Tree space={2}>
+        <TreeItem text="Item 1" />
+      </Tree>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedStack.mockClear()
+    render(
+      <Tree gap={2}>
+        <TreeItem text="Item 1" />
+      </Tree>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Tree gap={3} space={1}>
+        <TreeItem text="Item 1" />
+      </Tree>,
+    )
+    const propsList = mockedStack.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
+  })
+})

package/src/core/components/tree/tree.tsx

@@ -18,6 +18,10 @@ import {TreeContextValue, TreeState} from './types'
  * @beta
  */
 export interface TreeProps {
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
 }
 
@@ -27,11 +31,12 @@ export interface TreeProps {
  */
 export const Tree = forwardRef(function Tree(
   props: TreeProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+    Omit<React.HTMLProps<HTMLUListElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+  forwardedRef: React.ForwardedRef<HTMLUListElement>,
 ): React.JSX.Element {
-  const {children, space = 1, onFocus, ...restProps} = props
-  const ref = useRef<HTMLDivElement | null>(null)
+  const {children, gap, space: deprecated_space = 1, onFocus, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
+  const ref = useRef<HTMLUListElement | null>(null)
   const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
   const focusedElementRef = useRef(focusedElement)
   const path: string[] = useMemo(() => [], [])
@@ -39,7 +44,10 @@ export const Tree = forwardRef(function Tree(
   const [state, setState] = useState<TreeState>({})
   const stateRef = useRef(state)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+  useImperativeHandle<HTMLUListElement | null, HTMLUListElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
 
   useEffect(() => {
     focusedElementRef.current = focusedElement
@@ -89,14 +97,15 @@ export const Tree = forwardRef(function Tree(
       registerItem,
       setExpanded,
       setFocusedElement,
-      space,
+      gap: spacing,
+      space: spacing,
       state,
     }),
-    [focusedElement, itemElements, path, registerItem, setExpanded, space, state],
+    [focusedElement, itemElements, path, registerItem, setExpanded, spacing, state],
   )
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: React.KeyboardEvent<HTMLUListElement>) => {
       if (!focusedElementRef.current) return
 
       if (event.key === 'ArrowDown') {
@@ -193,7 +202,7 @@ export const Tree = forwardRef(function Tree(
   )
 
   const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLDivElement>) => {
+    (event: React.FocusEvent<HTMLUListElement>) => {
       setFocusedElement(event.target)
 
       // Call the element's `focus` handler
@@ -221,7 +230,7 @@ export const Tree = forwardRef(function Tree(
         onKeyDown={handleKeyDown}
         ref={ref}
         role="tree"
-        space={space}
+        gap={spacing}
       >
         {children}
       </Stack>

package/src/core/components/tree/treeGroup.tsx

@@ -7,7 +7,7 @@ export interface TreeGroupProps {
 
 export function TreeGroup(
   props: TreeGroupProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
+    Omit<React.HTMLProps<HTMLUListElement>, 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
 ): React.JSX.Element {
   const {children, expanded = false, ...restProps} = props
   const tree = useTree()
@@ -18,9 +18,9 @@ export function TreeGroup(
       data-ui="TreeGroup"
       {...restProps}
       hidden={!expanded}
-      marginTop={tree.space}
+      marginTop={tree.gap}
       role="group"
-      space={tree.space}
+      gap={tree.gap}
     >
       {children}
     </Stack>

package/src/core/components/tree/treeItem.test.tsx

@@ -0,0 +1,65 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Box} from '../../primitives'
+import {TreeContext} from './treeContext'
+import {TreeItem} from './treeItem'
+import {TreeContextValue, TreeState} from './types'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Box: jest.fn((props: Record<string, unknown>) => (actual.Box as any).render(props, null)),
+  }
+})
+
+const treeContextValue: TreeContextValue = {
+  version: 0.0,
+  focusedElement: null,
+  gap: 1,
+  level: 0,
+  path: [],
+  registerItem: () => () => undefined,
+  setExpanded: () => undefined,
+  setFocusedElement: () => undefined,
+  space: 1,
+  state: {} as TreeState,
+}
+
+function renderTreeItem(props: Partial<React.ComponentProps<typeof TreeItem>> = {}) {
+  return render(
+    <TreeContext.Provider value={treeContextValue}>
+      <TreeItem text="Item" {...props} />
+    </TreeContext.Provider>,
+  )
+}
+
+describe('components/treeItem spacing', () => {
+  const mockedBox = jest.mocked(Box)
+
+  beforeEach(() => {
+    mockedBox.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderTreeItem({space: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({marginRight: 2}),
+    )
+
+    mockedBox.mockClear()
+    renderTreeItem({gap: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({marginRight: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderTreeItem({gap: 3, space: 1})
+    const propsList = mockedBox.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({marginRight: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({marginRight: 1}))
+  })
+})

package/src/core/components/tree/treeItem.tsx

@@ -3,7 +3,8 @@ import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {startTransition, useCallback, useEffect, useId, useMemo, useRef, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, BoxProps, Flex, Text} from '../../primitives'
+import {Box, Flex, Text} from '../../primitives'
+import {ElementType} from '../../types'
 import {
   treeItemBoxStyle,
   TreeItemBoxStyleProps,
@@ -24,8 +25,12 @@ export interface TreeItemProps {
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: BoxProps['as']
+  linkAs?: ElementType
   padding?: number | number[]
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   text?: React.ReactNode
   weight?: ThemeFontWeightKey
@@ -60,11 +65,13 @@ export function TreeItem(
     onClick,
     padding = 2,
     selected = false,
-    space = 2,
+    gap,
+    space: deprecated_space = 2,
     text,
     weight,
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const [rootElement, _setRootElement] = useState<HTMLLIElement | null>(null)
   /**
    * The startTransition wrapper here is to avoid an issue when on React 18 where this error can happen:
@@ -133,7 +140,7 @@ export function TreeItem(
   const content = (
     <Flex padding={padding}>
       <Box
-        marginRight={space}
+        marginRight={spacing}
         style={{
           visibility: IconComponent || children ? 'visible' : 'hidden',
           pointerEvents: 'none',

package/src/core/components/tree/types.ts

@@ -16,6 +16,10 @@ export interface TreeContextValue {
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
+  gap: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space: number | number[]
   state: TreeState
 }

package/src/core/primitives/avatar/avatar.tsx

@@ -5,19 +5,18 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
-import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
+import {AvatarPosition, AvatarSize, AvatarStatus, ElementType, Props} from '../../types'
 import {Label} from '../label'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
 
 /**
  * @public
  */
-export interface AvatarProps {
+export interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
@@ -31,6 +30,11 @@ export interface AvatarProps {
   title?: string
 }
 
+/**
+ * @public
+ */
+export type AvatarProps<E extends ElementType = 'div'> = Props<AvatarOwnProps, E>
+
 const StyledAvatar = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
   avatarStyle.root,
@@ -50,13 +54,8 @@ const InitialsLabel = styled(Label)({
 
 const AvatarImage = styled.svg(avatarStyle.image)
 
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export const Avatar = forwardRef(function Avatar(
-  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+const AvatarComponent = forwardRef(function Avatar(
+  props: AvatarOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -189,4 +188,13 @@ export const Avatar = forwardRef(function Avatar(
     </StyledAvatar>
   )
 })
-Avatar.displayName = 'ForwardRef(Avatar)'
+AvatarComponent.displayName = 'ForwardRef(Avatar)'
+
+/**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
+ * @public
+ */
+export const Avatar = AvatarComponent as unknown as <E extends ElementType = 'div'>(
+  props: AvatarProps<E>,
+) => React.JSX.Element

package/src/core/primitives/badge/badge.tsx

@@ -3,8 +3,8 @@ import {styled} from 'styled-components'
 
 import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {BadgeMode, BadgeTone} from '../../types'
-import {Box, BoxProps} from '../box'
+import {BadgeMode, BadgeTone, ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
 import {Text} from '../text'
 import {ResponsiveRadiusProps} from '../types'
 import {badgeStyle} from './styles'
@@ -13,26 +13,25 @@ import {BadgeStyleProps} from './types'
 /**
  * @public
  */
-export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   /** @deprecated No longer used. */
   mode?: BadgeMode
   tone?: BadgeTone
 }
 
+/**
+ * @public
+ */
+export type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>
+
 const StyledBadge = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
   responsiveRadiusStyle,
   badgeStyle,
 )
 
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export const Badge = forwardRef(function Badge(
-  props: BadgeProps & React.HTMLProps<HTMLDivElement>,
+const BadgeComponent = forwardRef(function Badge(
+  props: BadgeOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
   ref,
 ) {
   const {
@@ -59,4 +58,13 @@ export const Badge = forwardRef(function Badge(
     </StyledBadge>
   )
 })
-Badge.displayName = 'ForwardRef(Badge)'
+BadgeComponent.displayName = 'ForwardRef(Badge)'
+
+/**
+ * Badges are used to tag resources.
+ *
+ * @public
+ */
+export const Badge = BadgeComponent as unknown as <E extends ElementType = 'div'>(
+  props: BadgeProps<E>,
+) => React.JSX.Element

package/src/core/primitives/box/__workshop__/asComponent.tsx

@@ -0,0 +1,31 @@
+import {Box, Flex, Text} from '@sanity/ui'
+import {forwardRef} from 'react'
+
+// A custom component with its own props. When passed to `Box`'s `as` prop, these props are
+// inferred on `Box` itself: `href` is required and `target` is optional, and unknown props
+// are rejected by the type checker.
+const Link = forwardRef(function Link(
+  props: {href: string; target?: string} & Omit<
+    React.HTMLProps<HTMLAnchorElement>,
+    'as' | 'href' | 'target'
+  >,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+): React.JSX.Element {
+  const {children, ...restProps} = props
+
+  return (
+    <a {...restProps} ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Box as={Link} href="/" padding={4} target="_new">
+        <Text size={1}>As component</Text>
+      </Box>
+    </Flex>
+  )
+}

package/src/core/primitives/box/__workshop__/index.ts

@@ -15,5 +15,10 @@ export default defineScope({
       title: 'Responsive',
       component: lazy(() => import('./responsive')),
     },
+    {
+      name: 'as-component',
+      title: 'As component',
+      component: lazy(() => import('./asComponent')),
+    },
   ],
 })