@sanity/ui 3.3.1 → 3.3.3

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

@@ -1,166 +0,0 @@
-import {CSSObject, getTheme_v2, ThemeFontSize} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {
-  focusRingBorderStyle,
-  focusRingStyle,
-  responsiveInputPaddingIconRightStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-} from '../../styles/internal'
-
-function rootStyle(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    width: -moz-available;
-    width: -webkit-fill-available;
-    width: stretch;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-function inputBaseStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    -webkit-font-smoothing: antialiased;
-    appearance: none;
-    border: 0;
-    font-family: ${font.text.family};
-    color: inherit;
-    width: 100%;
-    outline: none;
-    margin: 0;
-
-    &:disabled {
-      opacity: 1;
-    }
-  `
-}
-
-function inputColorStyle(props: ThemeProps) {
-  const {color, input} = getTheme_v2(props.theme)
-
-  return css`
-    /* enabled */
-    background-color: ${color.input.default.enabled.bg};
-    color: ${color.input.default.enabled.fg};
-    box-shadow: ${focusRingBorderStyle({
-      color: color.input.default.enabled.border,
-      width: input.border.width,
-    })};
-
-    /* hovered */
-    @media (hover: hover) {
-      &:not(:disabled):hover {
-        background-color: ${color.input.default.hovered.bg};
-        color: ${color.input.default.hovered.fg};
-        box-shadow: ${focusRingBorderStyle({
-          color: color.input.default.hovered.border,
-          width: input.border.width,
-        })};
-      }
-    }
-
-    /* focused */
-    &:not(:disabled):focus {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.input.default.enabled.border},
-        focusRing: input.select.focusRing,
-      })};
-    }
-
-    /* read-only */
-    &[data-read-only] {
-      background-color: ${color.input.default.readOnly.bg};
-      color: ${color.input.default.readOnly.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.readOnly.border,
-        width: input.border.width,
-      })};
-    }
-
-    /* disabled */
-    &:not([data-read-only]):disabled {
-      background-color: ${color.input.default.disabled.bg};
-      color: ${color.input.default.disabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.disabled.border,
-        width: input.border.width,
-      })};
-    }
-  `
-}
-
-function textSize(size: ThemeFontSize) {
-  return {fontSize: rem(size.fontSize), lineHeight: `${rem(size.lineHeight)}`}
-}
-
-function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
-  const {$fontSize} = props
-  const {font, media} = getTheme_v2(props.theme)
-
-  return _responsive(media, $fontSize, (sizeIndex) =>
-    textSize(font.text.sizes[sizeIndex] || font.text.sizes[2]),
-  )
-}
-
-function inputStyle(): Array<
-  | ((
-      props: ResponsiveRadiusStyleProps & {
-        $fontSize: number[]
-        $padding: number[]
-        $space: number[]
-      } & ThemeProps,
-    ) => CSSObject[])
-  | ((props: ThemeProps) => ReturnType<typeof css>)
-> {
-  return [
-    responsiveRadiusStyle,
-    inputBaseStyle,
-    inputColorStyle,
-    inputTextSizeStyle,
-    responsiveInputPaddingIconRightStyle,
-  ]
-}
-
-function iconBoxStyle(props: ThemeProps): ReturnType<typeof css> {
-  const {color} = getTheme_v2(props.theme)
-
-  return css`
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    /* enabled */
-    --card-fg-color: ${color.input.default.enabled.fg};
-
-    /* hover */
-    @media (hover: hover) {
-      select:not(disabled):not(:read-only):hover + && {
-        --card-fg-color: ${color.input.default.hovered.fg};
-      }
-    }
-
-    /* disabled */
-    select:disabled + && {
-      --card-fg-color: ${color.input.default.disabled.fg};
-    }
-
-    /* read-only */
-    select[data-read-only] + && {
-      --card-fg-color: ${color.input.default.readOnly.fg};
-    }
-  `
-}
-
-export const selectStyle = {
-  root: rootStyle,
-  input: inputStyle,
-  iconBox: iconBoxStyle,
-}

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -1,15 +0,0 @@
-import {Flex, Spinner} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function Props() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
-    </Flex>
-  )
-}

package/src/core/primitives/spinner/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/spinner',
-  title: 'Spinner',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-  ],
-})

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

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

package/src/core/primitives/spinner/spinner.tsx

@@ -1,46 +0,0 @@
-import {SpinnerIcon} from '@sanity/icons'
-import {forwardRef} from 'react'
-import {keyframes, styled} from 'styled-components'
-
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface SpinnerProps {
-  muted?: boolean
-  size?: number | number[]
-}
-
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-const StyledSpinner = styled(Text)`
-  & > span > svg {
-    animation: ${rotate} 500ms linear infinite;
-  }
-`
-
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export const Spinner = forwardRef(function Spinner(
-  props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <StyledSpinner data-ui="Spinner" {...props} ref={ref}>
-      <SpinnerIcon />
-    </StyledSpinner>
-  )
-})
-Spinner.displayName = 'ForwardRef(Spinner)'

package/src/core/primitives/stack/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/stack',
-  title: 'Stack',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
-    },
-  ],
-})

package/src/core/primitives/stack/__workshop__/plain.tsx

@@ -1,32 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-
-          <Card padding={[2, 3, 4]} shadow={1}>
-            <Text align="center" muted>
-              Stack item
-            </Text>
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

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

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

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

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

package/src/core/primitives/stack/stack.tsx

@@ -1,57 +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 {responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps, stackBaseStyle} from './styles'
-
-/**
- * @public
- */
-export interface StackOwnProps extends BoxOwnProps {
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-}
-
-/**
- * @public
- */
-export type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
-
-const StyledStack = styled(Box)<ResponsiveStackSpaceStyleProps>(
-  stackBaseStyle,
-  responsiveStackSpaceStyle,
-)
-
-const StackComponent = forwardRef(function Stack(
-  props: StackOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {as, gap, space: deprecated_space, ...restProps} = props
-  const spacing = gap === undefined ? deprecated_space : gap
-
-  return (
-    <StyledStack
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Stack"
-      {...restProps}
-      $space={_getArrayProp(spacing)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
-})
-StackComponent.displayName = 'ForwardRef(Stack)'
-
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export const Stack = StackComponent as unknown as <E extends ElementType = 'div'>(
-  props: StackProps<E>,
-) => React.JSX.Element

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

@@ -1,32 +0,0 @@
-import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-
-export interface ResponsiveStackSpaceStyleProps {
-  $space: number[]
-}
-
-const BASE_STYLE: CSSObject = {
-  '&&:not([hidden])': {
-    display: 'grid',
-  },
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: 'none',
-  },
-  'gridTemplateColumns': 'minmax(0, 1fr)',
-  'gridAutoRows': 'min-content',
-}
-
-export function stackBaseStyle(): CSSObject {
-  return BASE_STYLE
-}
-
-export function responsiveStackSpaceStyle(
-  props: ResponsiveStackSpaceStyleProps & ThemeProps,
-): CSSObject[] {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$space, (spaceIndex) => ({
-    gridGap: rem(space[spaceIndex]),
-  }))
-}

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

@@ -1,23 +0,0 @@
-import {Box, Flex, Switch, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const indeterminate = checked === undefined
-  const handleChange = useCallback((event: React.FormEvent<HTMLInputElement>) => {
-    setChecked(event.currentTarget.checked)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Switch checked={checked || false} indeterminate={indeterminate} onChange={handleChange} />
-        <Box marginLeft={3}>
-          <Text size={1} weight="medium">
-            Label
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/core/primitives/switch/__workshop__/index.ts

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/switch',
-  title: 'Switch',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  ],
-})

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

@@ -1,21 +0,0 @@
-import {Flex, Switch} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback} from 'react'
-
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const readOnly = useBoolean('Read only', false)
-  const handleChange = useCallback(() => undefined, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Switch
-        checked={checked}
-        indeterminate={indeterminate}
-        onChange={handleChange}
-        readOnly={readOnly}
-      />
-    </Flex>
-  )
-}

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

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

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);
-    `}
-  `
-}