@sanity/ui 3.3.2 → 3.3.4

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

@@ -1,155 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {type ComponentProps} from 'react'
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {responsiveGridItemStyle} from '../../styles/internal'
-import {Box} from './box'
-
-vi.mock('../../styles/internal', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../styles/internal')>()
-
-  return {
-    ...actual,
-    responsiveGridItemStyle: vi.fn(actual.responsiveGridItemStyle),
-  }
-})
-
-describe('<Box />', () => {
-  const mockedResponsiveGridItemStyle = vi.mocked(responsiveGridItemStyle)
-
-  beforeEach(() => {
-    mockedResponsiveGridItemStyle.mockClear()
-  })
-
-  it('uses column when gridColumn is not provided', () => {
-    // oxlint-disable-next-line no-deprecated
-    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', () => {
-    // oxlint-disable-next-line no-deprecated
-    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', () => {
-    // oxlint-disable-next-line no-deprecated
-    render(<Box columnStart={2} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$columnStart: [2]}),
-    )
-  })
-
-  it('prefers gridColumnStart over columnStart when both are provided', () => {
-    // oxlint-disable-next-line no-deprecated
-    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', () => {
-    // oxlint-disable-next-line no-deprecated
-    render(<Box columnEnd={3} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$columnEnd: [3]}),
-    )
-  })
-
-  it('prefers gridColumnEnd over columnEnd when both are provided', () => {
-    // oxlint-disable-next-line no-deprecated
-    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', () => {
-    // oxlint-disable-next-line no-deprecated
-    render(<Box row={1} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(expect.objectContaining({$row: [1]}))
-  })
-
-  it('prefers gridRow over row when both are provided', () => {
-    // oxlint-disable-next-line no-deprecated
-    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', () => {
-    // oxlint-disable-next-line no-deprecated
-    render(<Box rowStart={2} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$rowStart: [2]}),
-    )
-  })
-
-  it('prefers gridRowStart over rowStart when both are provided', () => {
-    // oxlint-disable-next-line no-deprecated
-    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', () => {
-    // oxlint-disable-next-line no-deprecated
-    render(<Box rowEnd={3} />)
-    expect(mockedResponsiveGridItemStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$rowEnd: [3]}),
-    )
-  })
-
-  it('prefers gridRowEnd over rowEnd when both are provided', () => {
-    // oxlint-disable-next-line no-deprecated
-    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

@@ -1,162 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  boxStyle,
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveBoxStyle,
-  ResponsiveBoxStyleProps,
-  responsiveGridItemStyle,
-  ResponsiveGridItemStyleProps,
-  responsiveMarginStyle,
-  ResponsiveMarginStyleProps,
-  responsivePaddingStyle,
-  ResponsivePaddingStyleProps,
-} from '../../styles/internal'
-import {ElementType, Props} from '../../types'
-import {
-  ResponsiveBoxProps,
-  ResponsiveFlexItemProps,
-  ResponsiveGridItemProps,
-  ResponsiveMarginProps,
-  ResponsivePaddingProps,
-} from '../types'
-
-/**
- * The props that `Box` adds on top of the element it renders as.
- *
- * @public
- */
-export interface BoxOwnProps
-  extends
-    ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
-  forwardedAs?: ElementType
-}
-
-/**
- * @public
- */
-export type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
-
-const StyledBox = styled.div<
-  FlexItemStyleProps &
-    ResponsiveBoxStyleProps &
-    ResponsiveGridItemStyleProps &
-    ResponsiveMarginStyleProps &
-    ResponsivePaddingStyleProps
->(
-  boxStyle,
-  flexItemStyle,
-  responsiveBoxStyle,
-  responsiveGridItemStyle,
-  responsiveMarginStyle,
-  responsivePaddingStyle,
-)
-
-const BoxComponent = forwardRef(function Box(
-  props: BoxOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    as: asProp = 'div',
-    gridColumn,
-    // oxlint-disable-next-line no-deprecated
-    column: deprecated_column,
-    gridColumnStart,
-    // oxlint-disable-next-line no-deprecated
-    columnStart: deprecated_columnStart,
-    gridColumnEnd,
-    // oxlint-disable-next-line no-deprecated
-    columnEnd: deprecated_columnEnd,
-    display = 'block',
-    flex,
-    height,
-    margin = 0,
-    marginX,
-    marginY,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    overflow,
-    padding = 0,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    gridRow,
-    // oxlint-disable-next-line no-deprecated
-    row: deprecated_row,
-    gridRowStart,
-    // oxlint-disable-next-line no-deprecated
-    rowStart: deprecated_rowStart,
-    gridRowEnd,
-    // oxlint-disable-next-line no-deprecated
-    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
-      data-as={typeof asProp === 'string' ? asProp : undefined}
-      data-ui="Box"
-      {...restProps}
-      $column={_getArrayProp(column)}
-      $columnStart={_getArrayProp(columnStart)}
-      $columnEnd={_getArrayProp(columnEnd)}
-      $display={_getArrayProp(display)}
-      $flex={_getArrayProp(flex)}
-      $height={_getArrayProp(height)}
-      $margin={_getArrayProp(margin)}
-      $marginX={_getArrayProp(marginX)}
-      $marginY={_getArrayProp(marginY)}
-      $marginTop={_getArrayProp(marginTop)}
-      $marginRight={_getArrayProp(marginRight)}
-      $marginBottom={_getArrayProp(marginBottom)}
-      $marginLeft={_getArrayProp(marginLeft)}
-      $overflow={_getArrayProp(overflow)}
-      $padding={_getArrayProp(padding)}
-      $paddingX={_getArrayProp(paddingX)}
-      $paddingY={_getArrayProp(paddingY)}
-      $paddingTop={_getArrayProp(paddingTop)}
-      $paddingRight={_getArrayProp(paddingRight)}
-      $paddingBottom={_getArrayProp(paddingBottom)}
-      $paddingLeft={_getArrayProp(paddingLeft)}
-      $row={_getArrayProp(row)}
-      $rowStart={_getArrayProp(rowStart)}
-      $rowEnd={_getArrayProp(rowEnd)}
-      $sizing={_getArrayProp(sizing)}
-      as={asProp}
-      ref={ref}
-    >
-      {props.children}
-    </StyledBox>
-  )
-})
-BoxComponent.displayName = 'ForwardRef(Box)'
-
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Box = BoxComponent as unknown as <E extends ElementType = 'div'>(
-  props: BoxProps<E>,
-) => React.JSX.Element

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

@@ -1 +0,0 @@
-export * from './box'

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

@@ -1,86 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {AddIcon} from '@sanity/icons'
-import {screen} from '@testing-library/react'
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-import {axe} from 'vitest-axe'
-
-import {render} from '../../../../test'
-import {Flex} from '../flex'
-import {Button, ButtonOwnProps} from './button'
-
-vi.mock('../flex', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../flex')>()
-
-  return {
-    ...actual,
-    // oxlint-disable-next-line no-unsafe-type-assertion
-    Flex: vi.fn((props: Record<string, unknown>) => (actual.Flex as any).render(props, null)),
-  }
-})
-
-describe('atoms/button', () => {
-  const mockedFlex = vi.mocked(Flex)
-
-  beforeEach(() => {
-    mockedFlex.mockClear()
-  })
-
-  it('Axe: should have no violations', async () => {
-    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'light',
-    })
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-
-    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
-      scheme: 'dark',
-    })
-
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-
-  it('should render text', () => {
-    render(<Button text="Button text" />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-
-  it('should wrap button', () => {
-    function WrappedButton({button: buttonProps}: {button: ButtonOwnProps}) {
-      return <Button {...buttonProps} />
-    }
-
-    const buttonProps: ButtonOwnProps = {
-      text: 'Button text',
-    }
-
-    render(<WrappedButton button={buttonProps} />)
-
-    expect(screen.getByText('Button text')).toBeInTheDocument()
-  })
-
-  it('should support `space`', () => {
-    // oxlint-disable-next-line no-deprecated
-    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', () => {
-    // oxlint-disable-next-line no-deprecated
-    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

@@ -1,214 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, isValidElement, useMemo} from 'react'
-import {isValidElementType} from 'react-is'
-import {styled} from 'styled-components'
-
-import {_getArrayProp, ThemeProps} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {useTheme_v2} from '../../theme'
-import {
-  ButtonMode,
-  ButtonTextAlign,
-  ButtonTone,
-  ButtonWidth,
-  ElementType,
-  FlexJustify,
-  Props,
-} from '../../types'
-import {Box} from '../box'
-import {Flex} from '../flex'
-import {Spinner} from '../spinner'
-import {Text} from '../text'
-import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../types'
-import {buttonBaseStyles, buttonColorStyles} from './styles'
-
-/**
- * @public
- */
-export interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  mode?: ButtonMode
-  // oxlint-disable-next-line no-redundant-type-constituents
-  icon?: React.ElementType | React.ReactNode
-  // oxlint-disable-next-line no-redundant-type-constituents
-  iconRight?: React.ElementType | React.ReactNode
-  justify?: FlexJustify | FlexJustify[]
-  /**
-   * @beta Do not use in production, as this might change.
-   */
-  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
-  textWeight?: ThemeFontWeightKey
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
-}
-
-/**
- * @public
- */
-export type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
-
-const StyledButton = styled.button<
-  {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
-    ThemeProps
->(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
-
-const LoadingBox = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`
-
-const ButtonComponent = forwardRef(function Button(
-  props: ButtonOwnProps & {as?: ElementType} & Omit<
-      React.HTMLProps<HTMLButtonElement>,
-      'as' | 'width'
-    >,
-  ref: React.ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    children,
-    disabled,
-    fontSize = 1,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify: justifyProp = 'center',
-    loading,
-    mode = 'default',
-    padding: paddingProp = 3,
-    paddingX: paddingXProp,
-    paddingY: paddingYProp,
-    paddingTop: paddingTopProp,
-    paddingBottom: paddingBottomProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    radius: radiusProp = 2,
-    selected,
-    gap,
-    // oxlint-disable-next-line no-deprecated
-    space: deprecated_space = 3,
-    text,
-    textAlign,
-    textWeight,
-    tone = 'default',
-    type = 'button',
-    muted = false,
-    width,
-    ...restProps
-  } = props
-  const {button} = useTheme_v2()
-
-  const justify = _getArrayProp(justifyProp)
-  const padding = _getArrayProp(paddingProp)
-  const paddingX = _getArrayProp(paddingXProp)
-  const paddingY = _getArrayProp(paddingYProp)
-  const paddingTop = _getArrayProp(paddingTopProp)
-  const paddingBottom = _getArrayProp(paddingBottomProp)
-  const paddingLeft = _getArrayProp(paddingLeftProp)
-  const paddingRight = _getArrayProp(paddingRightProp)
-  const radius = _getArrayProp(radiusProp)
-  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
-
-  const boxProps = useMemo(
-    () => ({
-      // flex: 1,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight,
-    }),
-    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight],
-  )
-
-  return (
-    <StyledButton
-      data-ui="Button"
-      {...restProps}
-      $mode={mode}
-      $radius={radius}
-      $tone={tone}
-      data-disabled={Boolean(loading || disabled)}
-      data-selected={selected ? '' : undefined}
-      disabled={Boolean(loading || disabled)}
-      ref={ref}
-      type={type}
-      $width={width}
-    >
-      {Boolean(loading) && (
-        <LoadingBox>
-          <Spinner />
-        </LoadingBox>
-      )}
-
-      {(IconComponent || text || IconRightComponent) && (
-        <Box as="span" {...boxProps}>
-          <Flex as="span" justify={justify} gap={spacing}>
-            {IconComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            )}
-
-            {text && (
-              <Box>
-                <Text
-                  muted={muted}
-                  align={textAlign}
-                  size={fontSize}
-                  textOverflow="ellipsis"
-                  weight={textWeight ?? button.textWeight}
-                >
-                  {text}
-                </Text>
-              </Box>
-            )}
-
-            {IconRightComponent && (
-              <Text size={fontSize}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
-              </Text>
-            )}
-          </Flex>
-        </Box>
-      )}
-
-      {children && (
-        <Box as="span" {...boxProps}>
-          {children}
-        </Box>
-      )}
-    </StyledButton>
-  )
-})
-ButtonComponent.displayName = 'ForwardRef(Button)'
-
-/**
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Button = ButtonComponent as unknown as <E extends ElementType = 'button'>(
-  props: ButtonProps<E>,
-) => React.JSX.Element

package/src/core/primitives/button/index.ts

@@ -1 +0,0 @@
-export * from './button'