@sanity/ui 3.1.13 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.1.13",
+  "version": "3.2.0",
   "keywords": [
     "sanity",
     "ui",

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

@@ -0,0 +1,51 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Box} from '../../primitives'
+import {Breadcrumbs} from './breadcrumbs'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Box: jest.fn((props: Record<string, unknown>) => (actual.Box as any).render(props, null)),
+  }
+})
+
+function renderBreadcrumbs(props: Partial<React.ComponentProps<typeof Breadcrumbs>> = {}) {
+  return render(
+    <Breadcrumbs {...props}>
+      <span>Root</span>
+      <span>Section</span>
+    </Breadcrumbs>,
+  )
+}
+
+describe('components/breadcrumbs spacing', () => {
+  const mockedBox = jest.mocked(Box)
+
+  beforeEach(() => {
+    mockedBox.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderBreadcrumbs({space: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({paddingX: [2]}),
+    )
+
+    mockedBox.mockClear()
+    renderBreadcrumbs({gap: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({paddingX: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderBreadcrumbs({gap: 3, space: 1})
+    const propsList = mockedBox.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({paddingX: [3]}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({paddingX: [1]}))
+  })
+})

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -20,6 +20,10 @@ import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 export interface BreadcrumbsProps {
   maxLength?: number
   separator?: React.ReactNode
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
 }
 
@@ -30,8 +34,8 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
-  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = _getArrayProp(spaceRaw)
+  const {children, gap, maxLength, separator, space: deprecated_space = 2, ...restProps} = props
+  const space = _getArrayProp(gap === undefined ? deprecated_space : gap)
   const [open, setOpen] = useState(false)
   const expandElementRef = useRef<HTMLButtonElement | null>(null)
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
@@ -101,7 +105,7 @@ function useItems({
       <Popover
         constrainSize
         content={
-          <Stack as="ol" overflow="auto" padding={space} space={space}>
+          <Stack as="ol" overflow="auto" padding={space} gap={space}>
             {rawItems.slice(beforeLength - 1, len - afterLength)}
           </Stack>
         }

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

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

package/src/core/components/hotkeys/hotkeys.tsx

@@ -10,8 +10,12 @@ import {Radius} from '../../types'
  */
 export interface HotkeysProps {
   fontSize?: number | number[]
+  gap?: number | number[]
   padding?: number | number[]
   radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   keys?: string[]
 }
@@ -40,8 +44,8 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.Ref<HTMLElement>,
 ) {
-  const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = _getArrayProp(spaceProp)
+  const {fontSize, gap, keys, padding, radius, space: deprecated_space = 0.5, ...restProps} = props
+  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
 
   if (!keys || keys.length === 0) {
     return <></>
@@ -49,7 +53,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
 
   return (
     <StyledHotkeys data-ui="Hotkeys" {...restProps} ref={ref}>
-      <Inline as="span" space={space}>
+      <Inline as="span" gap={spacing}>
         {keys.map((key, i) => (
           <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
             {key}

package/src/core/components/menu/menu.spacing.test.tsx

@@ -0,0 +1,63 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Stack} from '../../primitives'
+import {Menu} from './menu'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Stack: jest.fn((props: Record<string, unknown>) => (actual.Stack as any).render(props, null)),
+  }
+})
+
+jest.mock('../../utils', () => {
+  const actual = jest.requireActual('../../utils')
+
+  return {
+    ...actual,
+    useLayer: () => ({isTopLayer: true}),
+  }
+})
+
+describe('components/menu spacing', () => {
+  const mockedStack = jest.mocked(Stack)
+
+  beforeEach(() => {
+    mockedStack.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Menu space={2}>
+        <div>Item</div>
+      </Menu>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedStack.mockClear()
+    render(
+      <Menu gap={2}>
+        <div>Item</div>
+      </Menu>,
+    )
+    expect(mockedStack.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Menu gap={3} space={1}>
+        <div>Item</div>
+      </Menu>,
+    )
+    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/menu/menu.tsx

@@ -27,6 +27,10 @@ export interface MenuProps extends ResponsivePaddingProps {
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
   'shouldFocus'?: 'first' | 'last' | null
+  'gap'?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   'space'?: number | number[]
   'aria-labelledby'?: string
   'onBlurCapture'?: (event: FocusEvent) => void
@@ -61,9 +65,11 @@ export const Menu = forwardRef(function Menu(
     padding = 1,
     registerElement,
     shouldFocus: _shouldFocus,
-    space = 1,
+    gap,
+    space: deprecated_space = 1,
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const shouldFocus =
     _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
@@ -164,7 +170,7 @@ export const Menu = forwardRef(function Menu(
         role="menu"
         tabIndex={-1}
       >
-        <Stack space={space}>{children}</Stack>
+        <Stack gap={spacing}>{children}</Stack>
       </StyledMenu>
     </MenuContext.Provider>
   )

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

@@ -0,0 +1,69 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Flex} from '../../primitives'
+import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuGroup} from './menuGroup'
+import {MenuItem} from './menuItem'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+    Popover: jest.fn(
+      ({
+        children,
+      }: {
+        children?: React.ReactNode
+      }) => children,
+    ),
+  }
+})
+
+const menuContextValue: MenuContextValue = {
+  version: 2,
+  activeElement: null,
+  mount: () => () => undefined,
+  onItemMouseEnter: () => undefined,
+  onItemMouseLeave: () => undefined,
+}
+
+function renderMenuGroup(props: Partial<React.ComponentProps<typeof MenuGroup>> = {}) {
+  return render(
+    <MenuContext.Provider value={menuContextValue}>
+      <MenuGroup id="menu-group" text="Menu group" {...props}>
+        <MenuItem id="submenu-item" text="Submenu item" />
+      </MenuGroup>
+    </MenuContext.Provider>,
+  )
+}
+
+describe('components/menuGroup spacing', () => {
+  const mockedFlex = jest.mocked(Flex)
+
+  beforeEach(() => {
+    mockedFlex.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderMenuGroup({space: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedFlex.mockClear()
+    renderMenuGroup({gap: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderMenuGroup({gap: 3, space: 1})
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
+  })
+})

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

@@ -31,6 +31,10 @@ export interface MenuGroupProps {
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   text: React.ReactNode
   tone?: SelectableTone
@@ -53,11 +57,13 @@ export function MenuGroup(
     padding = 3,
     popover,
     radius = 2,
-    space = 3,
+    gap,
+    space: deprecated_space = 3,
     text,
     tone = 'default',
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const menu = useMenu()
   const {scheme} = useRootTheme()
   const {
@@ -193,7 +199,7 @@ export function MenuGroup(
         tabIndex={-1}
         type={as === 'button' ? 'button' : undefined}
       >
-        <Flex gap={space} padding={padding}>
+        <Flex gap={spacing} padding={padding}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}

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

@@ -0,0 +1,59 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Flex} from '../../primitives'
+import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuItem} from './menuItem'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+  }
+})
+
+const menuContextValue: MenuContextValue = {
+  version: 2,
+  activeElement: null,
+  mount: () => () => undefined,
+  onItemMouseEnter: () => undefined,
+  onItemMouseLeave: () => undefined,
+}
+
+function renderMenuItem(props: Partial<React.ComponentProps<typeof MenuItem>> = {}) {
+  return render(
+    <MenuContext.Provider value={menuContextValue}>
+      <MenuItem id="menu-item" text="Menu item" {...props} />
+    </MenuContext.Provider>,
+  )
+}
+
+describe('components/menuItem spacing', () => {
+  const mockedFlex = jest.mocked(Flex)
+
+  beforeEach(() => {
+    mockedFlex.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderMenuItem({space: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+
+    mockedFlex.mockClear()
+    renderMenuItem({gap: 2})
+    expect(mockedFlex.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({gap: 2}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderMenuItem({gap: 3, space: 1})
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: 3}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: 1}))
+  })
+})

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

@@ -30,6 +30,10 @@ export interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusP
   iconRight?: React.ElementType | React.ReactNode
   pressed?: boolean
   selected?: boolean
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
   text?: React.ReactNode
   tone?: SelectableTone
@@ -62,11 +66,13 @@ export const MenuItem = forwardRef(function MenuItem(
     pressed,
     radius = 2,
     selected: selectedProp,
-    space = 3,
+    gap,
+    space: deprecated_space = 3,
     text,
     tone = 'default',
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const {scheme} = useRootTheme()
   const menu = useMenu()
   const {
@@ -137,7 +143,7 @@ export const MenuItem = forwardRef(function MenuItem(
       type={as === 'button' ? 'button' : undefined}
     >
       {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={space} align="center" {...paddingProps}>
+        <Flex as="span" gap={spacing} align="center" {...paddingProps}>
           {IconComponent && (
             <Text size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}

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/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[]
 }
 
@@ -30,7 +34,8 @@ export const Tree = forwardRef(function Tree(
     Omit<React.HTMLProps<HTMLDivElement>, 'align' | 'as' | 'height' | 'ref' | 'role' | 'wrap'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ): React.JSX.Element {
-  const {children, space = 1, onFocus, ...restProps} = props
+  const {children, gap, space: deprecated_space = 1, onFocus, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
   const ref = useRef<HTMLDivElement | null>(null)
   const [focusedElement, setFocusedElement] = useState<HTMLElement | null>(null)
   const focusedElementRef = useRef(focusedElement)
@@ -89,10 +94,11 @@ 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(
@@ -221,7 +227,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

@@ -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>