@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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

@@ -1,84 +0,0 @@
-import {_inputElement, _inputPresentation, textArea, type TextAreaStyleProps} from '@sanity/ui/css'
-import {useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
-export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
-
-/** @public */
-export type TextAreaOwnProps = TextAreaStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  customValidity?: string
-}
-
-/** @public */
-export type TextAreaElementType = 'textarea' | ComponentType
-
-/** @public */
-export type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
-  TextAreaOwnProps,
-  E
->
-
-/**
- * A multiline text input.
- *
- * @public
- */
-export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
-  props: TextAreaProps<E>,
-): React.JSX.Element {
-  const {
-    __unstable_disableFocusRing,
-    as: Element = DEFAULT_TEXT_AREA_ELEMENT,
-    border = true,
-    customValidity,
-    disabled = false,
-    fontSize = 2,
-    gap = 3,
-    padding = 3,
-    radius = 2,
-    readOnly,
-    ref: forwardedRef,
-    ...rest
-  } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
-
-  const ref = useRef<HTMLTextAreaElement | null>(null)
-
-  useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <span
-      className={textArea({
-        border,
-        fontSize,
-        padding,
-        radius,
-        gap,
-      })}
-      data-invalid={customValidity ? '' : undefined}
-      data-read-only={!disabled && readOnly ? '' : undefined}
-      data-ui="TextArea"
-    >
-      <Element
-        {...rest}
-        className={_inputElement()}
-        data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-        disabled={disabled}
-        readOnly={readOnly}
-        ref={ref}
-      />
-      <span className={_inputPresentation()} />
-    </span>
-  )
-}

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

@@ -1,69 +0,0 @@
-import {Card, Container, Stack, Text, TextArea} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-import {
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '$workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
-
-  const border = useBoolean('Border', true)
-  const customValidity = useText('Custom validity')
-  const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
-  const disabled = useBoolean('Disabled', false)
-  // @ts-expect-error - TODO: fix this
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
-  // @ts-expect-error - TODO: fix this
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const placeholder = useText('Placeholder', 'Placeholder')
-  // @ts-expect-error - TODO: fix this
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const readOnly = useBoolean('Read only', false)
-
-  const [value, setValue] = useState('')
-
-  return (
-    <Card
-      alignItems="center"
-      display="flex"
-      height="fill"
-      justifyContent="center"
-      padding={[4, 5, 6]}
-      sizing="border"
-      // @ts-expect-error - TODO: fix this
-      tone={tone}
-    >
-      <Container width={0}>
-        <Stack gap={3}>
-          <Text as="label" hidden htmlFor="text-area-example" size={1} weight="medium">
-            TextArea
-          </Text>
-          <TextArea
-            __unstable_disableFocusRing={disableFocusRing}
-            border={border}
-            customValidity={customValidity}
-            disabled={disabled}
-            // @ts-expect-error - TODO: fix this
-            fontSize={fontSize}
-            id="text-area-example"
-            onChange={(e) => setValue(e.target.value)}
-            // @ts-expect-error - TODO: fix this
-            padding={padding}
-            placeholder={placeholder}
-            // @ts-expect-error - TODO: fix this
-            radius={radius}
-            readOnly={readOnly}
-            rows={10}
-            value={value}
-          />
-        </Stack>
-      </Container>
-    </Card>
-  )
-}

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

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/text-area',
-  title: 'TextArea',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./Plain')),
-    },
-  ],
-}
-
-export default scope

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

@@ -1,258 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {
-  _inputElement,
-  _inputPresentation,
-  type InputStyleProps,
-  type ResponsiveProp,
-  textInput,
-  textInputElement,
-  textInputPrefix,
-  textInputSuffix,
-} from '@sanity/ui/css'
-import type {FontWeight, Space} from '@sanity/ui/theme'
-import {
-  type ElementType,
-  isValidElement,
-  type MouseEvent,
-  type ReactNode,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {isRecord} from '../../lib/isRecord'
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/Box'
-import {Button, type ButtonProps} from '../button/Button'
-import {Text} from '../text/Text'
-
-/** @public */
-export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
-
-/** @public */
-export type TextInputClearButtonProps = Omit<
-  ButtonProps<'button'>,
-  'as' | 'onClick' | 'onMouseDown'
->
-
-/** @public */
-export type TextInputOwnProps = InputStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  /**
-   * @beta
-   */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
-  /**
-   * @beta
-   */
-  onClear?: () => void
-  prefix?: ReactNode
-  suffix?: ReactNode
-  weight?: FontWeight
-}
-
-/** @public */
-export type TextInputElementType = 'input' | ComponentType
-
-/** @public */
-export type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
-  TextInputOwnProps,
-  E
->
-
-/**
- * Single line text input.
- *
- * @public
- */
-export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT>(
-  props: TextInputProps<E>,
-): React.JSX.Element {
-  const {
-    __unstable_disableFocusRing,
-    as: Element = DEFAULT_TEXT_INPUT_ELEMENT,
-    border = true,
-    className,
-    clearButton,
-    disabled = false,
-    fontSize = 2,
-    gap = 3,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClear,
-    padding = 3,
-    prefix,
-    radius = 2,
-    readOnly,
-    ref: forwardedRef,
-    suffix,
-    customValidity,
-    type = 'text',
-    weight: _width,
-    width,
-    ...rest
-  } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>
-
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  const responsivePadding = useResponsiveProp(padding)
-
-  const withClearButton = Boolean(clearButton)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  // Prevent the clear button from taking the focus away from the input
-  const handleClearMouseDown = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-  }, [])
-
-  const handleClearClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-
-      if (onClear) onClear()
-
-      // Focus the input, in case focus has been lost when clicking the clear button
-      ref.current?.focus()
-    },
-    [onClear, ref],
-  )
-
-  const clearButtonBoxPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 1]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 2 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonPadding = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(responsivePadding).map(([key, value]) => {
-        if (value === 0) return [key, 0]
-        if (value === 1) return [key, 0]
-        if (value === 2) return [key, 1]
-
-        return [key, typeof value === 'number' ? value - 1 : 0]
-      }),
-    ) as ResponsiveProp<Space>
-  }, [responsivePadding])
-
-  const clearButtonProps: TextInputClearButtonProps = useMemo(
-    () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
-    [clearButton],
-  )
-
-  return (
-    <Box
-      alignItems="center"
-      className={textInput({
-        className,
-        border,
-        fontSize,
-        padding,
-        radius,
-        gap: gap,
-        width,
-      })}
-      data-icon-left={IconComponent ? '' : undefined}
-      data-icon-right={IconRightComponent ? '' : undefined}
-      data-invalid={customValidity ? '' : undefined}
-      data-prefix={prefix ? '' : undefined}
-      data-read-only={!disabled && readOnly ? '' : undefined}
-      data-suffix={suffix ? '' : undefined}
-      data-ui="TextInput"
-      display="flex"
-    >
-      {prefix && (
-        <Box className={textInputPrefix()} sizing="border">
-          <span>{prefix}</span>
-        </Box>
-      )}
-
-      <Box className={textInputElement()} flex={1} position="relative">
-        <Element
-          {...rest}
-          className={_inputElement()}
-          data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-          disabled={disabled}
-          readOnly={readOnly}
-          ref={ref}
-          type={type}
-        />
-
-        <Box className={_inputPresentation()} position="absolute">
-          {IconComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
-              <Text size={fontSize}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            </Box>
-          )}
-
-          {!withClearButton && IconRightComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
-              <Text size={fontSize}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
-              </Text>
-            </Box>
-          )}
-        </Box>
-
-        {!disabled && !readOnly && clearButton && (
-          <Box
-            insetTop={0}
-            insetRight={0}
-            padding={clearButtonBoxPadding}
-            position="absolute"
-            style={{zIndex: 2}}
-          >
-            <Button
-              aria-label="Clear"
-              data-qa="clear-button"
-              display="block"
-              fontSize={fontSize}
-              icon={CloseIcon}
-              mode="bleed"
-              padding={clearButtonPadding}
-              radius={radius}
-              {...clearButtonProps}
-              onClick={handleClearClick}
-              onMouseDown={handleClearMouseDown}
-            />
-          </Box>
-        )}
-      </Box>
-
-      {suffix && (
-        <Box className={textInputSuffix()} sizing="border">
-          <span>{suffix}</span>
-        </Box>
-      )}
-    </Box>
-  )
-}

package/src/core/primitives/textInput/__workshop__/ClearButton.tsx

@@ -1,30 +0,0 @@
-import {Box, TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-export default function ClearButtonStory(): React.JSX.Element {
-  const customValidity = useText('Custom validitiy')
-
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.currentTarget.value)
-  }, [])
-
-  const handleClear = useCallback(() => {
-    setValue('')
-  }, [])
-
-  return (
-    <Box padding={4}>
-      <TextInput
-        clearButton
-        customValidity={customValidity}
-        onChange={handleChange}
-        onClear={handleClear}
-        placeholder="Enter text"
-        value={value}
-      />
-    </Box>
-  )
-}

package/src/core/primitives/textInput/__workshop__/CustomValidity.tsx

@@ -1,17 +0,0 @@
-import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
-import {useText} from '@sanity/ui-workshop'
-
-export default function CustomValidityStory(): React.JSX.Element {
-  const customValidity = useText('Custom validity', 'Invalid value') || undefined
-
-  return (
-    <Container as="form" onSubmit={(event) => event.preventDefault()} width={0}>
-      <Card padding={4}>
-        <Stack gap={4}>
-          <TextInput customValidity={customValidity} />
-          <Button text="Submit" type="submit" />
-        </Stack>
-      </Card>
-    </Container>
-  )
-}

package/src/core/primitives/textInput/__workshop__/Plain.tsx

@@ -1,140 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Box, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
-import {fireEvent} from '@testing-library/dom'
-import {useCallback, useState} from 'react'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_ICON_SYMBOL_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '$workshop'
-
-const typingPerfTest: PerfTestProps<HTMLInputElement> = {
-  name: 'typing',
-  title: 'Typing',
-  description: 'This test types one character at a time',
-  run({target}) {
-    const text = 'Hello, world & Hello, world & Hello, world'
-    const len = text.length
-
-    for (let i = 0; i < len; i += 1) {
-      const value = text.slice(0, i + 1)
-
-      fireEvent.change(target, {target: {value}})
-    }
-  },
-}
-
-export default function PlainStory(): React.JSX.Element {
-  const {ref, Wrapper} = usePerfTest(typingPerfTest)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Stack gap={3}>
-          <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
-            TextInput
-          </Text>
-          <Wrapper>
-            <TextInputTest inputRef={ref} />
-          </Wrapper>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}
-
-function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
-  const {inputRef: ref} = props
-  const border = useBoolean('Border', true)
-  const customValidity = useText('Custom validity')
-  const disabled = useBoolean('Disabled', false)
-  // @ts-expect-error - TODO: fix this
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
-  // @ts-expect-error - TODO: fix this
-  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
-  // @ts-expect-error - TODO: fix this
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search')
-  // @ts-expect-error - TODO: fix this
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
-  // @ts-expect-error - TODO: fix this
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
-  const placeholder = useText('Placeholder')
-  const prefix = useBoolean('Prefix', false)
-  // @ts-expect-error - TODO: fix this
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
-  const readOnly = useBoolean('Read only', false)
-  const suffix = useBoolean('Suffix', false)
-  // @ts-expect-error - TODO: fix this
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
-
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.currentTarget.value),
-    [],
-  )
-
-  return (
-    <TextInput
-      border={border}
-      customValidity={customValidity}
-      disabled={disabled}
-      // @ts-expect-error - TODO: fix this
-      fontSize={fontSize}
-      // @ts-expect-error - TODO: fix this
-      gap={gap}
-      // @ts-expect-error - TODO: fix this
-      icon={icon && icons[icon]}
-      // @ts-expect-error - TODO: fix this
-      iconRight={iconRight && icons[iconRight]}
-      id="text-input-example"
-      name="test"
-      onChange={handleChange}
-      // @ts-expect-error - TODO: fix this
-      padding={padding}
-      placeholder={placeholder}
-      prefix={
-        prefix && (
-          <Box
-            // @ts-expect-error - TODO: fix this
-            padding={padding}
-          >
-            <Text
-              // @ts-expect-error - TODO: fix this
-              size={fontSize}
-            >
-              Prefix
-            </Text>
-          </Box>
-        )
-      }
-      // @ts-expect-error - TODO: fix this
-      radius={radius}
-      readOnly={readOnly}
-      ref={ref}
-      suffix={
-        suffix && (
-          <Box
-            // @ts-expect-error - TODO: fix this
-            padding={padding}
-          >
-            <Text
-              // @ts-expect-error - TODO: fix this
-              size={fontSize}
-            >
-              Suffix
-            </Text>
-          </Box>
-        )
-      }
-      value={value}
-      // @ts-expect-error - TODO: fix this
-      weight={weight}
-    />
-  )
-}

package/src/core/primitives/textInput/__workshop__/ReadOnly.tsx

@@ -1,9 +0,0 @@
-import {Flex, TextInput} from '@sanity/ui'
-
-export default function ReadOnlyStory(): React.JSX.Element {
-  return (
-    <Flex padding={4}>
-      <TextInput id="text-input-example" readOnly />
-    </Flex>
-  )
-}

package/src/core/primitives/textInput/__workshop__/States.tsx

@@ -1,53 +0,0 @@
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function StatesStory(): React.JSX.Element {
-  const invalid = useBoolean('Invalid', false)
-  const onChange = useAction('onChange')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={1}>
-        <Stack gap={5}>
-          <Stack gap={3}>
-            <Text size={1} weight="medium">
-              <label htmlFor="enabled-example">Enabled (default)</label>
-            </Text>
-            <TextInput
-              customValidity={invalid ? 'invalid' : undefined}
-              id="enabled-example"
-              onChange={onChange}
-              value="This is some text"
-            />
-          </Stack>
-
-          <Stack gap={3}>
-            <Text size={1} weight="medium">
-              <label htmlFor="disabled-example">Disabled</label>
-            </Text>
-            <TextInput
-              customValidity={invalid ? 'invalid' : undefined}
-              disabled
-              id="disabled-example"
-              onChange={onChange}
-              value="This is some text"
-            />
-          </Stack>
-
-          <Stack gap={3}>
-            <Text size={1} weight="medium">
-              <label htmlFor="read-only-example">Read-only</label>
-            </Text>
-            <TextInput
-              customValidity={invalid ? 'invalid' : undefined}
-              id="read-only-example"
-              readOnly
-              onChange={onChange}
-              value="This is some text"
-            />
-          </Stack>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}