@sanity/ui 3.3.2 → 3.3.3

package/src/core/primitives/code/styles.ts

@@ -1,77 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css, ExecutionContext} from 'styled-components'
-
-function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
-  const {
-    color: {syntax: color},
-  } = getTheme_v2(theme)
-
-  return {
-    '&.atrule': {color: color.atrule},
-    '&.attr-name': {color: color.attrName},
-    '&.attr-value': {color: color.attrValue},
-    '&.attribute': {color: color.attribute},
-    '&.boolean': {color: color.boolean},
-    '&.builtin': {color: color.builtin},
-    '&.cdata': {color: color.cdata},
-    '&.char': {color: color.char},
-    '&.class': {color: color.class},
-    '&.class-name': {color: color.className},
-    '&.comment': {color: color.comment},
-    '&.constant': {color: color.constant},
-    '&.deleted': {color: color.deleted},
-    '&.doctype': {color: color.doctype},
-    '&.entity': {color: color.entity},
-    '&.function': {color: color.function},
-    '&.hexcode': {color: color.hexcode},
-    '&.id': {color: color.id},
-    '&.important': {color: color.important},
-    '&.inserted': {color: color.inserted},
-    '&.keyword': {color: color.keyword},
-    '&.number': {color: color.number},
-    '&.operator': {color: color.operator},
-    '&.prolog': {color: color.prolog},
-    '&.property': {color: color.property},
-    '&.pseudo-class': {color: color.pseudoClass},
-    '&.pseudo-element': {color: color.pseudoElement},
-    '&.punctuation': {color: color.punctuation},
-    '&.regex': {color: color.regex},
-    '&.selector': {color: color.selector},
-    '&.string': {color: color.string},
-    '&.symbol': {color: color.symbol},
-    '&.tag': {color: color.tag},
-    '&.unit': {color: color.unit},
-    '&.url': {color: color.url},
-    '&.variable': {color: color.variable},
-  }
-}
-
-export function codeBaseStyle(): ReturnType<typeof css> {
-  return css`
-    color: var(--card-code-fg-color);
-
-    & code {
-      font-family: inherit;
-
-      &.refractor .token {
-        ${codeSyntaxHighlightingStyle}
-      }
-    }
-
-    & a {
-      color: inherit;
-      text-decoration: underline;
-      border-radius: 1px;
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/core/primitives/container/container.tsx

@@ -1,55 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {ResponsiveWidthProps} from '../types'
-import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
-import {ResponsiveWidthStyleProps} from './types'
-
-/**
- * @public
- */
-export interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
-
-/**
- * @public
- */
-export type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>
-
-const StyledContainer = styled(Box)<ResponsiveWidthStyleProps>(
-  containerBaseStyle,
-  responsiveContainerWidthStyle,
-)
-
-const ContainerComponent = forwardRef(function Container(
-  props: ContainerOwnProps & {as?: ElementType} & Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'width'
-    >,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, width = 2, ...restProps} = props
-
-  return (
-    <StyledContainer
-      data-ui="Container"
-      {...restProps}
-      $width={_getArrayProp(width)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})
-ContainerComponent.displayName = 'ForwardRef(Container)'
-
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Container = ContainerComponent as unknown as <E extends ElementType = 'div'>(
-  props: ContainerProps<E>,
-) => React.JSX.Element

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

@@ -1,2 +0,0 @@
-export * from './container'
-export * from './types'

package/src/core/primitives/container/styles.ts

@@ -1,23 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {ResponsiveWidthStyleProps} from './types'
-
-const BASE_STYLE: CSSObject = {
-  width: '100%',
-  margin: '0 auto',
-}
-
-export function containerBaseStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-export function responsiveContainerWidthStyle(
-  props: ResponsiveWidthStyleProps & ThemeProps,
-): CSSObject[] {
-  const {container, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$width, (val) => ({
-    maxWidth: val === 'auto' ? 'none' : rem(container[val]),
-  }))
-}

package/src/core/primitives/container/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[]
-}

package/src/core/primitives/flex/flex.tsx

@@ -1,63 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveFlexStyle,
-  ResponsiveFlexStyleProps,
-} from '../../styles/internal'
-import {ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {ResponsiveFlexItemProps, ResponsiveFlexProps} from '../types'
-
-/**
- * @public
- */
-export interface FlexOwnProps
-  extends Omit<BoxOwnProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {
-  gap?: number | number[]
-}
-
-/**
- * @public
- */
-export type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>
-
-const StyledFlex = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
-  flexItemStyle,
-  responsiveFlexStyle,
-)
-
-const FlexComponent = forwardRef(function Flex(
-  props: FlexOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
-
-  return (
-    <StyledFlex
-      data-ui="Flex"
-      {...restProps}
-      $align={_getArrayProp(align)}
-      $direction={_getArrayProp(direction)}
-      $gap={_getArrayProp(gap)}
-      $justify={_getArrayProp(justify)}
-      $wrap={_getArrayProp(wrap)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})
-FlexComponent.displayName = 'ForwardRef(Flex)'
-
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Flex = FlexComponent as unknown as <E extends ElementType = 'div'>(
-  props: FlexProps<E>,
-) => React.JSX.Element

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

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

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

@@ -1,86 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {responsiveGridStyle} from '../../styles/internal'
-import {Grid} from './grid'
-
-vi.mock('../../styles/internal', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../styles/internal')>()
-
-  return {
-    ...actual,
-    responsiveGridStyle: vi.fn(actual.responsiveGridStyle),
-  }
-})
-
-describe('primitives/grid', () => {
-  const mockedResponsiveGridStyle = vi.mocked(responsiveGridStyle)
-
-  beforeEach(() => {
-    mockedResponsiveGridStyle.mockClear()
-  })
-
-  it('should support `columns` and `gridTemplateColumns` with the same behavior', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <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(
-      // oxlint-disable-next-line no-deprecated
-      <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(
-      // oxlint-disable-next-line no-deprecated
-      <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(
-      // oxlint-disable-next-line no-deprecated
-      <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

@@ -1,77 +0,0 @@
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
-import {ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {ResponsiveGridProps} from '../types'
-
-/**
- * @public
- */
-export interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
-
-/**
- * @public
- */
-export type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>
-
-const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
-
-const GridComponent = forwardRef(function Grid(
-  props: GridOwnProps & {as?: ElementType} & Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'rows'
-    >,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    as,
-    autoRows,
-    autoCols,
-    autoFlow,
-    // oxlint-disable-next-line no-deprecated
-    columns,
-    gridTemplateColumns,
-    gap,
-    gapX,
-    gapY,
-    // oxlint-disable-next-line no-deprecated
-    rows,
-    gridTemplateRows,
-    children,
-    ...restProps
-  } = props
-
-  return (
-    <StyledGrid
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Grid"
-      {...restProps}
-      $autoRows={_getArrayProp(autoRows)}
-      $autoCols={_getArrayProp(autoCols)}
-      $autoFlow={_getArrayProp(autoFlow)}
-      $columns={_getArrayProp(gridTemplateColumns === undefined ? columns : gridTemplateColumns)}
-      $gap={_getArrayProp(gap)}
-      $gapX={_getArrayProp(gapX)}
-      $gapY={_getArrayProp(gapY)}
-      $rows={_getArrayProp(gridTemplateRows === undefined ? rows : gridTemplateRows)}
-      forwardedAs={as}
-      ref={ref}
-    >
-      {children}
-    </StyledGrid>
-  )
-})
-GridComponent.displayName = 'ForwardRef(Grid)'
-
-/**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Grid = GridComponent as unknown as <E extends ElementType = 'div'>(
-  props: GridProps<E>,
-) => React.JSX.Element

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

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

package/src/core/primitives/heading/heading.tsx

@@ -1,89 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  ResponsiveFontStyleProps,
-  responsiveHeadingFont,
-  responsiveTextAlignStyle,
-  ResponsiveTextAlignStyleProps,
-} from '../../styles/internal'
-import {ElementType, Props, TextAlign} from '../../types'
-import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
-import {headingBaseStyle} from './styles'
-import {HeadingStyleProps} from './types'
-
-/**
- * @public
- */
-export interface HeadingOwnProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
-}
-
-/**
- * @public
- */
-export type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>
-
-const StyledHeading = styled.div<
-  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
->(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
-
-const HeadingComponent = forwardRef(function Heading(
-  props: HeadingOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
-  const {
-    accent = false,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  }
-
-  return (
-    <StyledHeading
-      data-ui="Heading"
-      {...restProps}
-      $accent={accent}
-      $align={_getArrayProp(align)}
-      $muted={muted}
-      $size={_getArrayProp(size)}
-      $weight={weight}
-      ref={ref}
-    >
-      <span>{children}</span>
-    </StyledHeading>
-  )
-})
-HeadingComponent.displayName = 'ForwardRef(Heading)'
-
-/**
- * Typographic headings.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Heading = HeadingComponent as unknown as <E extends ElementType = 'div'>(
-  props: HeadingProps<E>,
-) => React.JSX.Element

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

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

package/src/core/primitives/heading/styles.ts

@@ -1,64 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {HeadingStyleProps} from './types'
-
-export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-      color: var(--card-link-color);
-      outline: none;
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &:focus {
-        box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
-      }
-
-      &:focus:not(:focus-visible) {
-        box-shadow: none;
-      }
-    }
-
-    & strong {
-      font-weight: ${font.heading.weights.bold};
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/core/primitives/heading/types.ts

@@ -1,7 +0,0 @@
-/**
- * @internal
- */
-export interface HeadingStyleProps {
-  $accent: boolean
-  $muted: boolean
-}

package/src/core/primitives/index.ts

@@ -1,27 +0,0 @@
-export * from './avatar'
-export * from './badge'
-export * from './box'
-export * from './button'
-export * from './card'
-export * from './checkbox'
-export * from './code'
-export * from './container'
-export * from './flex'
-export * from './grid'
-export * from './heading'
-export * from './inline'
-export * from './kbd'
-export * from './label'
-export * from './popover'
-export * from './radio'
-export * from './select'
-export * from './spinner'
-export * from './stack'
-export * from './switch'
-export * from './text'
-export * from './textArea'
-export * from './textInput'
-export * from './tooltip'
-
-// Types
-export * from './types'

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

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

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

@@ -1,55 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {Inline} from './inline'
-import {inlineSpaceStyle} from './styles'
-
-vi.mock('./styles', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('./styles')>()
-
-  return {
-    ...actual,
-    inlineSpaceStyle: vi.fn(actual.inlineSpaceStyle),
-  }
-})
-
-describe('primitives/inline', () => {
-  const mockedInlineSpaceStyle = vi.mocked(inlineSpaceStyle)
-
-  beforeEach(() => {
-    mockedInlineSpaceStyle.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    render(
-      // oxlint-disable-next-line no-deprecated
-      <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(
-      // oxlint-disable-next-line no-deprecated
-      <Inline gap={3} space={1}>
-        <span>One</span>
-        <span>Two</span>
-      </Inline>,
-    )
-    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
-  })
-})