@sanity/ui 3.1.14 → 3.2.0

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

@@ -26,6 +26,10 @@ export interface TreeItemProps {
    */
   linkAs?: BoxProps['as']
   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 +64,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 +139,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/box/box.test.tsx

@@ -0,0 +1,134 @@
+/** @jest-environment jsdom */
+
+import {type ComponentProps} from 'react'
+
+import {render} from '../../../../test'
+import {responsiveGridItemStyle} from '../../styles/internal'
+import {Box} from './box'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveGridItemStyle: jest.fn(actual.responsiveGridItemStyle),
+  }
+})
+
+describe('<Box />', () => {
+  const mockedResponsiveGridItemStyle = jest.mocked(responsiveGridItemStyle)
+
+  beforeEach(() => {
+    mockedResponsiveGridItemStyle.mockClear()
+  })
+
+  it('uses column when gridColumn is not provided', () => {
+    render(<Box column={3} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$column: [3]}))
+  })
+
+  it('uses gridColumn when provided', () => {
+    render(<Box gridColumn={4} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$column: [4]}))
+  })
+
+  it('prefers gridColumn over column when both are provided', () => {
+    render(<Box column={3} gridColumn={5} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$column: [5]}))
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(expect.objectContaining({$column: [3]}))
+  })
+
+  it('supports responsive arrays with gridColumn', () => {
+    const gridColumn: ComponentProps<typeof Box>['gridColumn'] = [2, 'full']
+
+    render(<Box gridColumn={gridColumn} />)
+
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$column: [2, 'full']}),
+    )
+  })
+
+  it('uses columnStart when gridColumnStart is not provided', () => {
+    render(<Box columnStart={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [2]}),
+    )
+  })
+
+  it('prefers gridColumnStart over columnStart when both are provided', () => {
+    render(<Box columnStart={2} gridColumnStart={4} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [4]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columnStart: [2]}),
+    )
+  })
+
+  it('uses columnEnd when gridColumnEnd is not provided', () => {
+    render(<Box columnEnd={3} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [3]}),
+    )
+  })
+
+  it('prefers gridColumnEnd over columnEnd when both are provided', () => {
+    render(<Box columnEnd={3} gridColumnEnd={5} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columnEnd: [3]}),
+    )
+  })
+
+  it('uses row when gridRow is not provided', () => {
+    render(<Box row={1} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [1]}))
+  })
+
+  it('prefers gridRow over row when both are provided', () => {
+    render(<Box row={1} gridRow={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [2]}))
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$row: [1]}),
+    )
+  })
+
+  it('uses rowStart when gridRowStart is not provided', () => {
+    render(<Box rowStart={2} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [2]}),
+    )
+  })
+
+  it('prefers gridRowStart over rowStart when both are provided', () => {
+    render(<Box rowStart={2} gridRowStart={4} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [4]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rowStart: [2]}),
+    )
+  })
+
+  it('uses rowEnd when gridRowEnd is not provided', () => {
+    render(<Box rowEnd={3} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [3]}),
+    )
+  })
+
+  it('prefers gridRowEnd over rowEnd when both are provided', () => {
+    render(<Box rowEnd={3} gridRowEnd={5} />)
+    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [5]}),
+    )
+    expect(mockedResponsiveGridItemStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rowEnd: [3]}),
+    )
+  })
+})

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

@@ -63,9 +63,12 @@ export const Box = forwardRef(function Box(
 ) {
   const {
     as: asProp = 'div',
-    column,
-    columnStart,
-    columnEnd,
+    gridColumn,
+    column: deprecated_column,
+    gridColumnStart,
+    columnStart: deprecated_columnStart,
+    gridColumnEnd,
+    columnEnd: deprecated_columnEnd,
     display = 'block',
     flex,
     height,
@@ -84,12 +87,21 @@ export const Box = forwardRef(function Box(
     paddingRight,
     paddingBottom,
     paddingLeft,
-    row,
-    rowStart,
-    rowEnd,
+    gridRow,
+    row: deprecated_row,
+    gridRowStart,
+    rowStart: deprecated_rowStart,
+    gridRowEnd,
+    rowEnd: deprecated_rowEnd,
     sizing,
     ...restProps
   } = props
+  const column = gridColumn === undefined ? deprecated_column : gridColumn
+  const columnStart = gridColumnStart === undefined ? deprecated_columnStart : gridColumnStart
+  const columnEnd = gridColumnEnd === undefined ? deprecated_columnEnd : gridColumnEnd
+  const row = gridRow === undefined ? deprecated_row : gridRow
+  const rowStart = gridRowStart === undefined ? deprecated_rowStart : gridRowStart
+  const rowEnd = gridRowEnd === undefined ? deprecated_rowEnd : gridRowEnd
 
   return (
     <StyledBox

package/src/core/primitives/button/button.test.tsx

@@ -5,9 +5,25 @@ import {screen} from '@testing-library/react'
 import {axe} from 'jest-axe'
 
 import {render} from '../../../../test'
+import {Flex} from '../flex'
 import {Button, ButtonProps} from './button'
 
+jest.mock('../flex', () => {
+  const actual = jest.requireActual('../flex')
+
+  return {
+    ...actual,
+    Flex: jest.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
+  }
+})
+
 describe('atoms/button', () => {
+  const mockedFlex = jest.mocked(Flex)
+
+  beforeEach(() => {
+    mockedFlex.mockClear()
+  })
+
   it('Axe: should have no violations', async () => {
     const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
       scheme: 'light',
@@ -41,4 +57,26 @@ describe('atoms/button', () => {
 
     expect(screen.getByText('Button text')).toBeInTheDocument()
   })
+
+  it('should support `space`', () => {
+    render(<Button icon={AddIcon} space={17} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [17]}))
+  })
+
+  it('should support `gap`', () => {
+    render(<Button gap={18} icon={AddIcon} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [18]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(<Button gap={19} icon={AddIcon} space={20} text="Button text" />)
+
+    const propsList = mockedFlex.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({gap: [19]}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({gap: [20]}))
+  })
 })

package/src/core/primitives/button/button.tsx

@@ -29,7 +29,11 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
    */
   loading?: boolean
   selected?: boolean
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  gap?: number | number[]
   muted?: boolean
   text?: React.ReactNode
   textAlign?: ButtonTextAlign
@@ -84,7 +88,8 @@ export const Button = forwardRef(function Button(
     paddingRight: paddingRightProp,
     radius: radiusProp = 2,
     selected,
-    space: spaceProp = 3,
+    gap,
+    space: deprecated_space = 3,
     text,
     textAlign,
     textWeight,
@@ -105,7 +110,7 @@ export const Button = forwardRef(function Button(
   const paddingLeft = _getArrayProp(paddingLeftProp)
   const paddingRight = _getArrayProp(paddingRightProp)
   const radius = _getArrayProp(radiusProp)
-  const space = _getArrayProp(spaceProp)
+  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
 
   const boxProps = useMemo(
     () => ({
@@ -143,7 +148,7 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify} gap={space}>
+          <Flex as="span" justify={justify} gap={spacing}>
             {IconComponent && (
               <Text size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}

package/src/core/primitives/grid/grid.test.tsx

@@ -0,0 +1,78 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {responsiveGridStyle} from '../../styles/internal'
+import {Grid} from './grid'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveGridStyle: jest.fn(actual.responsiveGridStyle),
+  }
+})
+
+describe('primitives/grid', () => {
+  const mockedResponsiveGridStyle = jest.mocked(responsiveGridStyle)
+
+  beforeEach(() => {
+    mockedResponsiveGridStyle.mockClear()
+  })
+
+  it('should support `columns` and `gridTemplateColumns` with the same behavior', () => {
+    render(
+      <Grid columns={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [2]}))
+
+    mockedResponsiveGridStyle.mockClear()
+    render(
+      <Grid gridTemplateColumns={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [2]}))
+  })
+
+  it('should prefer `gridTemplateColumns` over `columns` when both are provided', () => {
+    render(
+      <Grid columns={1} gridTemplateColumns={3}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [3]}))
+    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columns: [1]}),
+    )
+  })
+
+  it('should support `rows` and `gridTemplateRows` with the same behavior', () => {
+    render(
+      <Grid rows={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [2]}))
+
+    mockedResponsiveGridStyle.mockClear()
+    render(
+      <Grid gridTemplateRows={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [2]}))
+  })
+
+  it('should prefer `gridTemplateRows` over `rows` when both are provided', () => {
+    render(
+      <Grid gridTemplateRows={3} rows={1}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [3]}))
+    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(expect.objectContaining({$rows: [1]}))
+  })
+})

package/src/core/primitives/grid/grid.tsx

@@ -22,8 +22,21 @@ export const Grid = forwardRef(function Grid(
   props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
-    props
+  const {
+    as,
+    autoRows,
+    autoCols,
+    autoFlow,
+    columns,
+    gridTemplateColumns,
+    gap,
+    gapX,
+    gapY,
+    rows,
+    gridTemplateRows,
+    children,
+    ...restProps
+  } = props
 
   return (
     <StyledGrid
@@ -33,11 +46,11 @@ export const Grid = forwardRef(function Grid(
       $autoRows={_getArrayProp(autoRows)}
       $autoCols={_getArrayProp(autoCols)}
       $autoFlow={_getArrayProp(autoFlow)}
-      $columns={_getArrayProp(columns)}
+      $columns={_getArrayProp(gridTemplateColumns === undefined ? columns : gridTemplateColumns)}
       $gap={_getArrayProp(gap)}
       $gapX={_getArrayProp(gapX)}
       $gapY={_getArrayProp(gapY)}
-      $rows={_getArrayProp(rows)}
+      $rows={_getArrayProp(gridTemplateRows === undefined ? rows : gridTemplateRows)}
       forwardedAs={as}
       ref={ref}
     >

package/src/core/primitives/inline/inline.test.tsx

@@ -0,0 +1,51 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Inline} from './inline'
+import {inlineSpaceStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    inlineSpaceStyle: jest.fn(actual.inlineSpaceStyle),
+  }
+})
+
+describe('primitives/inline', () => {
+  const mockedInlineSpaceStyle = jest.mocked(inlineSpaceStyle)
+
+  beforeEach(() => {
+    mockedInlineSpaceStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Inline space={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedInlineSpaceStyle.mockClear()
+    render(
+      <Inline gap={2}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Inline gap={3} space={1}>
+        <span>One</span>
+        <span>Two</span>
+      </Inline>,
+    )
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+  })
+})

package/src/core/primitives/inline/inline.tsx

@@ -10,8 +10,13 @@ import {ResponsiveInlineSpaceStyleProps} from './types'
  * @public
  */
 export interface InlineProps extends Omit<BoxProps, 'display'> {
-  /** The spacing between children. */
+  /**
+   * The spacing between children.
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
   space?: number | number[]
+  /** The spacing between children. */
+  gap?: number | number[]
 }
 
 const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
@@ -25,7 +30,8 @@ export const Inline = forwardRef(function Inline(
   props: InlineProps & React.HTMLProps<HTMLDivElement>,
   ref,
 ) {
-  const {as, children: childrenProp, space, ...restProps} = props
+  const {as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props
+  const spacing = gap === undefined ? deprecated_space : gap
 
   const children = useMemo(
     () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
@@ -36,7 +42,7 @@ export const Inline = forwardRef(function Inline(
     <StyledInline
       data-ui="Inline"
       {...restProps}
-      $space={_getArrayProp(space)}
+      $space={_getArrayProp(spacing)}
       forwardedAs={as}
       ref={ref as any}
     >

package/src/core/primitives/select/select.test.tsx

@@ -0,0 +1,52 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Select} from './select'
+import {selectStyle} from './styles'
+
+jest.mock('./styles', () => {
+  const actual = jest.requireActual('./styles')
+
+  return {
+    ...actual,
+    selectStyle: {
+      ...actual.selectStyle,
+      input: jest.fn(actual.selectStyle.input),
+    },
+  }
+})
+
+describe('primitives/select spacing', () => {
+  const mockedSelectInputStyle = jest.mocked(selectStyle.input)
+
+  beforeEach(() => {
+    mockedSelectInputStyle.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    render(
+      <Select space={2}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedSelectInputStyle.mockClear()
+    render(
+      <Select gap={2}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    render(
+      <Select gap={3} space={1}>
+        <option>Option A</option>
+      </Select>,
+    )
+    expect(mockedSelectInputStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+    expect(mockedSelectInputStyle).not.toHaveBeenCalledWith(expect.objectContaining({$space: [1]}))
+  })
+})

package/src/core/primitives/select/select.tsx

@@ -14,8 +14,12 @@ import {selectStyle} from './styles'
  */
 export interface SelectProps {
   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[]
   customValidity?: string
 }
@@ -45,12 +49,14 @@ export const Select = forwardRef(function Select(
     customValidity,
     disabled,
     fontSize = 2,
+    gap,
     padding = 3,
     radius = 2,
     readOnly,
-    space = 3,
+    space: deprecated_space = 3,
     ...restProps
   } = props
+  const spacing = gap === undefined ? deprecated_space : gap
 
   const ref = useRef<HTMLSelectElement | null>(null)
 
@@ -70,7 +76,7 @@ export const Select = forwardRef(function Select(
         $fontSize={_getArrayProp(fontSize)}
         $padding={_getArrayProp(padding)}
         $radius={_getArrayProp(radius)}
-        $space={_getArrayProp(space)}
+        $space={_getArrayProp(spacing)}
         disabled={disabled || readOnly}
         ref={ref}
       >