@sanity/ui 3.3.2 → 3.3.3

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

@@ -1,173 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {rem, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
-
-/* Root */
-export function switchBaseStyles(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-/* Input */
-export function switchInputStyles(): ReturnType<typeof css> {
-  // Visually hide the input element while keeping it interactive
-  return css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    height: 100%;
-    width: 100%;
-    outline: none;
-    padding: 0;
-    margin: 0;
-
-    /* Place the input element above the representation element */
-    z-index: 1;
-  `
-}
-
-/* Representation */
-export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input} = getTheme_v2(props.theme)
-
-  return css`
-    --switch-bg-color: ${color.input.default.enabled.border};
-    --switch-fg-color: ${color.input.default.enabled.bg};
-    --switch-box-shadow: none;
-
-    &:not([hidden]) {
-      display: block;
-    }
-    position: relative;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-
-    /* Make sure it’s not possible to interact with the wrapper element */
-    pointer-events: none;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-      box-shadow: var(--switch-box-shadow);
-      border-radius: inherit;
-    }
-
-    /* Focus styles */
-    input:focus + && {
-      --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-    }
-
-    input:focus:not(:focus-visible) + && {
-      --switch-box-shadow: none;
-    }
-
-    input:checked + && {
-      --switch-bg-color: ${color.input.default.enabled.fg};
-      --switch-fg-color: ${color.input.default.enabled.bg};
-    }
-
-    @media (hover: hover) {
-      input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.input.default.hovered.border};
-        --switch-fg-color: ${color.input.default.hovered.bg};
-      }
-
-      input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.input.default.enabled.fg};
-        --switch-fg-color: ${color.input.default.enabled.bg};
-      }
-    }
-
-    input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.input.default.disabled.border};
-      --switch-fg-color: ${color.input.default.disabled.bg};
-    }
-
-    input[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.border};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-
-    input:checked[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.fg};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-  `
-}
-
-/* Track */
-export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {input} = getTheme_v2(props.theme)
-
-  return css`
-    &:not([hidden]) {
-      display: block;
-    }
-    background-color: var(--switch-bg-color);
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-  `
-}
-
-/* Thumb */
-export function switchThumbStyles(
-  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$indeterminate} = props
-  const {input} = getTheme_v2(props.theme)
-  const trackWidth = input.switch.width
-  const trackHeight = input.switch.height
-  const trackPadding = input.switch.padding
-  const size = trackHeight - input.switch.padding * 2
-  const checkedOffset = trackWidth - trackPadding * 2 - size
-  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-  const checked = $indeterminate !== true && props.$checked === true
-
-  return css`
-    &:not([hidden]) {
-      display: block;
-    }
-    position: absolute;
-    left: ${rem(trackPadding)};
-    top: ${rem(trackPadding)};
-    height: ${rem(size)};
-    width: ${rem(size)};
-    border-radius: ${rem(size / 2)};
-    transition-property: transform;
-    transition-duration: ${input.switch.transitionDurationMs}ms;
-    transition-timing-function: ${input.switch.transitionTimingFunction};
-    background: var(--switch-fg-color);
-    transform: translate3d(0, 0, 0);
-    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-
-    ${checked &&
-    css`
-      transform: translate3d(${checkedOffset}px, 0, 0);
-    `}
-
-    ${$indeterminate &&
-    css`
-      transform: translate3d(${indeterminateOffset}px, 0, 0);
-    `}
-  `
-}

package/src/core/primitives/switch/switch.tsx

@@ -1,68 +0,0 @@
-import {forwardRef, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {
-  switchBaseStyles,
-  switchInputStyles,
-  switchRepresentationStyles,
-  switchThumbStyles,
-  switchTrackStyles,
-} from './styles'
-
-/**
- * @public
- */
-export interface SwitchProps {
-  indeterminate?: boolean
-}
-
-const StyledSwitch = styled.span(switchBaseStyles)
-const Input = styled.input(switchInputStyles)
-const Representation = styled.span(switchRepresentationStyles)
-const Track = styled.span(switchTrackStyles)
-const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
-
-/**
- * The `Switch` component allows the user to toggle a setting on and off.
- *
- * Extends all properties of an `<input type="checkbox" />` element, except type.
- *
- * @public
- */
-export const Switch = forwardRef(function Switch(
-  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
-  const {checked, className, disabled, indeterminate, readOnly, style, ...restProps} = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useEffect(() => {
-    if (ref.current) {
-      // Set the indeterminate state
-      ref.current.indeterminate = indeterminate || false
-    }
-  }, [indeterminate])
-
-  return (
-    <StyledSwitch className={className} data-ui="Switch" style={style}>
-      <Input
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        {...restProps}
-        checked={indeterminate !== true && checked}
-        disabled={disabled || readOnly}
-        type="checkbox"
-        ref={ref}
-      />
-      <Representation aria-hidden data-name="representation">
-        <Track />
-        <Thumb $checked={checked} $indeterminate={indeterminate} />
-      </Representation>
-    </StyledSwitch>
-  )
-})
-Switch.displayName = 'ForwardRef(Switch)'

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

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

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

@@ -1,74 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-
-export function textBaseStyle(
-  props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    color: var(--card-fg-color);
-
-    ${$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;
-      background-color: var(--card-code-bg-color);
-      color: var(--card-code-fg-color);
-    }
-
-    & 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.text.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;
-      color: var(--card-icon-color);
-
-      & path {
-        vector-effect: non-scaling-stroke !important;
-      }
-    }
-  `
-}

package/src/core/primitives/text/text.tsx

@@ -1,90 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  ResponsiveFontStyleProps,
-  responsiveTextAlignStyle,
-  responsiveTextFont,
-} from '../../styles/internal'
-import {ElementType, Props, TextAlign} from '../../types'
-import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
-import {textBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface TextOwnProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  /** When `true` the text color will be muted. */
-  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 TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>
-
-const StyledText = styled.div<ResponsiveFontStyleProps>(
-  responsiveTextFont,
-  responsiveTextAlignStyle,
-  textBaseStyle,
-)
-
-const TextComponent = forwardRef(function Text(
-  props: TextOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  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 (
-    <StyledText
-      data-ui="Text"
-      {...restProps}
-      $accent={accent}
-      $align={_getArrayProp(align)}
-      $muted={muted}
-      ref={ref}
-      $size={_getArrayProp(size)}
-      $weight={weight}
-    >
-      <span>{children}</span>
-    </StyledText>
-  )
-})
-TextComponent.displayName = 'ForwardRef(Text)'
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-// oxlint-disable-next-line no-unsafe-type-assertion
-export const Text = TextComponent as unknown as <E extends ElementType = 'div'>(
-  props: TextProps<E>,
-) => React.JSX.Element

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

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

package/src/core/primitives/textArea/textArea.tsx

@@ -1,120 +0,0 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
-import {
-  responsiveInputPaddingStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-  TextInputInputStyleProps,
-  textInputRepresentationStyle,
-  TextInputRepresentationStyleProps,
-  TextInputResponsivePaddingStyleProps,
-  textInputRootStyle,
-} from '../../styles/internal'
-import {useRootTheme} from '../../theme'
-import {ResponsiveRadiusProps} from '../types'
-
-/**
- * @public
- */
-export interface TextAreaProps extends ResponsiveRadiusProps {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  border?: boolean
-  customValidity?: string
-  fontSize?: number | number[]
-  padding?: number | number[]
-  weight?: ThemeFontWeightKey
-}
-
-const StyledTextArea = styled.span(textInputRootStyle)
-
-const InputRoot = styled.span`
-  flex: 1;
-  min-width: 0;
-  display: block;
-  position: relative;
-`
-
-const Input = styled.textarea<TextInputResponsivePaddingStyleProps & TextInputInputStyleProps>(
-  responsiveInputPaddingStyle,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-)
-
-const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle,
-)
-
-/**
- * A multiline text input.
- *
-
- * @public
- */
-export const TextArea = forwardRef(function TextArea(
-  props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
-) {
-  const {
-    border = true,
-    customValidity,
-    disabled = false,
-    fontSize = 2,
-    padding = 3,
-    radius = 2,
-    weight,
-    __unstable_disableFocusRing,
-    ...restProps
-  } = props
-
-  const ref = useRef<HTMLTextAreaElement | null>(null)
-
-  const rootTheme = useRootTheme()
-
-  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <StyledTextArea data-ui="TextArea">
-      <InputRoot>
-        <Input
-          data-as="textarea"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-          {...restProps}
-          $fontSize={_getArrayProp(fontSize)}
-          $padding={_getArrayProp(padding)}
-          $scheme={rootTheme.scheme}
-          $space={_getArrayProp(0)}
-          $tone={rootTheme.tone}
-          $weight={weight}
-          disabled={disabled}
-          ref={ref}
-        />
-        <Presentation
-          $radius={_getArrayProp(radius)}
-          $unstableDisableFocusRing={__unstable_disableFocusRing}
-          $scheme={rootTheme.scheme}
-          $tone={rootTheme.tone}
-          data-border={border ? '' : undefined}
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-        />
-      </InputRoot>
-    </StyledTextArea>
-  )
-})
-TextArea.displayName = 'ForwardRef(TextArea)'

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

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

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

@@ -1,52 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {responsiveInputPaddingStyle} from '../../styles/internal'
-import {TextInput} from './textInput'
-
-vi.mock('../../styles/internal', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../styles/internal')>()
-
-  return {
-    ...actual,
-    responsiveInputPaddingStyle: vi.fn(actual.responsiveInputPaddingStyle),
-  }
-})
-
-describe('primitives/textInput', () => {
-  const mockedResponsiveInputPaddingStyle = vi.mocked(responsiveInputPaddingStyle)
-
-  beforeEach(() => {
-    mockedResponsiveInputPaddingStyle.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    // oxlint-disable-next-line no-deprecated
-    render(<TextInput icon={() => null} space={2} />)
-
-    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$space: [2]}),
-    )
-
-    mockedResponsiveInputPaddingStyle.mockClear()
-    render(<TextInput gap={2} icon={() => null} />)
-
-    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$space: [2]}),
-    )
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    // oxlint-disable-next-line no-deprecated
-    render(<TextInput gap={3} icon={() => null} space={1} />)
-
-    expect(mockedResponsiveInputPaddingStyle).toHaveBeenCalledWith(
-      expect.objectContaining({$space: [3]}),
-    )
-    expect(mockedResponsiveInputPaddingStyle).not.toHaveBeenCalledWith(
-      expect.objectContaining({$space: [1]}),
-    )
-  })
-})