@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -0,0 +1,47 @@
+import {Stack, Text, TextArea} from '@sanity/ui'
+import {FONT_TEXT_SIZE, RADIUS, SPACE} from '@sanity/ui/tokens'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
+
+import {CardWrapper, WORKSHOP_FONT_WEIGHT_OPTIONS} from '$workshop'
+
+export default function PropsStory(): React.JSX.Element {
+  const border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
+  const fontWeight = useSelect('Font weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
+  const padding = useSelect('Padding', SPACE)
+  const placeholder = useText('Placeholder', 'Placeholder')
+  const radius = useSelect('Radius', RADIUS)
+  const readOnly = useBoolean('Read only', false)
+
+  const [value, setValue] = useState('')
+
+  return (
+    <CardWrapper pattern="halftone">
+      <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}
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+          id="text-area-example"
+          padding={padding}
+          placeholder={placeholder}
+          radius={radius}
+          readOnly={readOnly}
+          rows={10}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </Stack>
+    </CardWrapper>
+  )
+}

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

@@ -0,0 +1,16 @@
+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/primitives/textInput/TextInput.tsx

@@ -0,0 +1,279 @@
+import {CloseIcon} from '@sanity/icons'
+import {
+  _input_element,
+  _input_presentation,
+  type InputStyleProps,
+  type ResponsiveProp,
+  textInput,
+  textInput_element,
+  textInput_prefix,
+  textInput_suffix,
+} from '@sanity/ui-css'
+import type {FontWeight, Space} from '@sanity/ui-tokens'
+import {
+  type ElementType,
+  isValidElement,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {EMPTY_RECORD} from '../../core/constants'
+import {_getResponsiveProp} from '../../core/helpers/props'
+import {isRecord} from '../../core/lib/isRecord'
+import type {ComponentType, Props} from '../../core/types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+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
+  /**
+   * @deprecated Use `fontWeight` instead
+   */
+  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,
+    className,
+    clearButton,
+    disabled = false,
+    flex,
+    fontSize = 2,
+    fontWeight: _fontWeight,
+    gap = 3,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    onClear,
+    padding: paddingProp = 3,
+    prefix,
+    radius,
+    readOnly,
+    ref: forwardedRef,
+    suffix,
+    customValidity,
+    type = 'text',
+    weight: _weight,
+    width,
+    ...rest
+  } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>
+
+  const ref = useRef<HTMLInputElement | null>(null)
+
+  const fontWeight = _fontWeight ?? _weight
+  const padding = _getResponsiveProp(paddingProp)
+
+  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],
+  )
+
+  return (
+    <span
+      className={textInput({
+        className,
+        border,
+        flex,
+        fontSize,
+        fontWeight,
+        padding,
+        radius,
+        gap,
+        width,
+      })}
+      data-icon-left={IconComponent ? '' : undefined}
+      data-icon-right={IconRightComponent ? '' : undefined}
+      data-prefix={prefix ? '' : undefined}
+      data-suffix={suffix ? '' : undefined}
+      data-ui="TextInput"
+    >
+      {prefix && (
+        <span className={textInput_prefix()}>
+          <span>{prefix}</span>
+        </span>
+      )}
+
+      <span className={textInput_element()}>
+        <Element
+          {...rest}
+          ref={ref}
+          className={_input_element()}
+          data-invalid={customValidity ? '' : undefined}
+          data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
+          data-read-only={!disabled && readOnly ? '' : undefined}
+          disabled={disabled}
+          readOnly={readOnly}
+          type={type}
+        />
+
+        <span className={_input_presentation()}>
+          {IconComponent && (
+            <Box as="span" insetLeft={0} insetTop={0} padding={paddingProp} position="absolute">
+              <Text as="span" size={fontSize}>
+                {isValidElement(IconComponent) && IconComponent}
+                {isValidElementType(IconComponent) && <IconComponent />}
+              </Text>
+            </Box>
+          )}
+
+          {!withClearButton && IconRightComponent && (
+            <Box as="span" insetRight={0} insetTop={0} padding={paddingProp} position="absolute">
+              <Text as="span" size={fontSize}>
+                {isValidElement(IconRightComponent) && IconRightComponent}
+                {isValidElementType(IconRightComponent) && <IconRightComponent />}
+              </Text>
+            </Box>
+          )}
+        </span>
+
+        {!disabled && !readOnly && clearButton && (
+          <ClearButton
+            clearButtonProps={isRecord(clearButton) ? clearButton : EMPTY_RECORD}
+            fontSize={fontSize}
+            handleClearClick={handleClearClick}
+            handleClearMouseDown={handleClearMouseDown}
+            padding={padding}
+            radius={radius}
+          />
+        )}
+      </span>
+
+      {suffix && (
+        <span className={textInput_suffix()}>
+          <span>{suffix}</span>
+        </span>
+      )}
+    </span>
+  )
+}
+
+function ClearButton({
+  fontSize,
+  radius,
+  clearButtonProps,
+  handleClearClick,
+  handleClearMouseDown,
+  padding: paddingProp,
+}: {
+  clearButtonProps: TextInputClearButtonProps
+  handleClearClick: (event: MouseEvent<HTMLButtonElement>) => void
+  handleClearMouseDown: (event: MouseEvent<HTMLButtonElement>) => void
+  padding: ResponsiveProp<Space>
+} & Pick<TextInputOwnProps, 'fontSize' | 'radius'>) {
+  const padding = _getResponsiveProp(paddingProp)
+
+  const boxPadding = padding.map((p): Space => {
+    if (p === 0) return 0
+    if (p === 1) return 1
+    if (p === 2) return 1
+    if (p === 3) return 1
+
+    return typeof p === 'number' ? ((p - 2) as Space) : 0
+  }) as ResponsiveProp<Space>
+
+  const buttonPadding = padding.map((p): Space => {
+    if (p === 0) return 0
+    if (p === 1) return 0
+    if (p === 2) return 1
+    if (p === 3) return 2
+
+    return typeof p === 'number' ? ((p - 1) as Space) : 0
+  }) as ResponsiveProp<Space>
+
+  return (
+    <Box
+      as="span"
+      insetRight={0}
+      insetTop={0}
+      padding={boxPadding}
+      position="absolute"
+      style={{zIndex: 2}}
+    >
+      <Button
+        aria-label="Clear"
+        data-qa="clear-button"
+        fontSize={fontSize}
+        icon={CloseIcon}
+        mode="bleed"
+        padding={buttonPadding}
+        radius={radius}
+        {...clearButtonProps}
+        onClick={handleClearClick}
+        onMouseDown={handleClearMouseDown}
+      />
+    </Box>
+  )
+}

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

@@ -0,0 +1,32 @@
+import {TextInput} from '@sanity/ui'
+import {useText} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+
+import {CardWrapper} from '$workshop'
+
+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 (
+    <CardWrapper>
+      <TextInput
+        clearButton
+        customValidity={customValidity}
+        placeholder="Enter text"
+        value={value}
+        onChange={handleChange}
+        onClear={handleClear}
+      />
+    </CardWrapper>
+  )
+}

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

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

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

@@ -0,0 +1,103 @@
+import {icons} from '@sanity/icons'
+import {Box, Stack, Text, TextInput} from '@sanity/ui'
+import {FONT_TEXT_SIZE, RADIUS, SPACE} from '@sanity/ui/tokens'
+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 {CardWrapper, WORKSHOP_FONT_WEIGHT_OPTIONS, WORKSHOP_ICON_SYMBOL_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 (
+    <CardWrapper pattern="halftone">
+      <Stack gap={3}>
+        <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
+          TextInput
+        </Text>
+        <Wrapper>
+          <TextInputTest inputRef={ref} />
+        </Wrapper>
+      </Stack>
+    </CardWrapper>
+  )
+}
+
+function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
+  const {inputRef: ref} = props
+
+  const border = useBoolean('Border', true)
+  const clearButton = useBoolean('Clear button', false)
+  const customValidity = useText('Custom validity')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
+  const gap = useSelect('Gap', SPACE)
+  const fontWeight = useSelect('Font weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const padding = useSelect('Padding', SPACE, 3)
+  const placeholder = useText('Placeholder')
+  const prefix = useBoolean('Prefix', false)
+  const radius = useSelect('Radius', RADIUS)
+  const readOnly = useBoolean('Read only', false)
+  const suffix = useBoolean('Suffix', false)
+  const value = useText('Value')
+
+  return (
+    <TextInput
+      ref={ref}
+      border={border}
+      clearButton={clearButton}
+      customValidity={customValidity}
+      disabled={disabled}
+      fontSize={fontSize}
+      fontWeight={fontWeight}
+      gap={gap}
+      icon={icon && icons[icon]}
+      iconRight={iconRight && icons[iconRight]}
+      id="text-input-example"
+      name="test"
+      padding={padding}
+      placeholder={placeholder}
+      prefix={
+        prefix && (
+          <Box padding={padding}>
+            <Text muted size={fontSize}>
+              Prefix
+            </Text>
+          </Box>
+        )
+      }
+      radius={radius}
+      readOnly={readOnly}
+      suffix={
+        suffix && (
+          <Box padding={padding}>
+            <Text muted size={fontSize}>
+              Suffix
+            </Text>
+          </Box>
+        )
+      }
+      value={value}
+      onChange={() => undefined}
+    />
+  )
+}

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

@@ -0,0 +1,14 @@
+import {TextInput} from '@sanity/ui'
+import {useText} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function ReadOnlyStory(): React.JSX.Element {
+  const value = useText('Value', 'This is some text')
+
+  return (
+    <CardWrapper>
+      <TextInput id="text-input-example" readOnly value={value} />
+    </CardWrapper>
+  )
+}

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

@@ -0,0 +1,53 @@
+import {Stack, Text, TextInput} from '@sanity/ui'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function StatesStory(): React.JSX.Element {
+  const invalid = useBoolean('Invalid', false)
+  const onChange = useAction('onChange')
+
+  return (
+    <CardWrapper>
+      <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"
+            value="This is some text"
+            onChange={onChange}
+          />
+        </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"
+            value="This is some text"
+            onChange={onChange}
+          />
+        </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
+            value="This is some text"
+            onChange={onChange}
+          />
+        </Stack>
+      </Stack>
+    </CardWrapper>
+  )
+}

package/src/primitives/textInput/__workshop__/Tones.tsx

@@ -0,0 +1,41 @@
+import {Box, Card, Text, TextInput} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/tokens'
+import {useBoolean} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function TonesStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled', false)
+
+  return (
+    <CardWrapper>
+      <Box
+        alignItems="center"
+        display="flex"
+        flexDirection="column"
+        gap={2}
+        height="fill"
+        justifyContent="center"
+      >
+        {CARD_TONES.map((tone) => (
+          <Card key={tone} padding={3} radius={5} tone={tone}>
+            <TextInput
+              disabled={disabled}
+              placeholder="default"
+              prefix={
+                <Box padding={3}>
+                  <Text>prefix</Text>
+                </Box>
+              }
+              suffix={
+                <Box padding={3}>
+                  <Text>suffix</Text>
+                </Box>
+              }
+            />
+          </Card>
+        ))}
+      </Box>
+    </CardWrapper>
+  )
+}

package/src/primitives/textInput/__workshop__/Typed.tsx

@@ -0,0 +1,23 @@
+import {Box, Container, TextInput} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+
+import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
+
+export default function TypedStory(): React.JSX.Element {
+  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
+
+  const [value, setValue] = useState('')
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.currentTarget.value)
+  }, [])
+
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <TextInput type={type} value={value} onChange={handleChange} />
+      </Container>
+    </Box>
+  )
+}

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

@@ -0,0 +1,46 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/text-input',
+  title: 'TextInput',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./Plain')),
+    },
+    {
+      name: 'custom-validity',
+      title: 'Custom validity',
+      component: lazy(() => import('./CustomValidity')),
+    },
+    {
+      name: 'typed',
+      title: 'Typed',
+      component: lazy(() => import('./Typed')),
+    },
+    {
+      name: 'tones',
+      title: 'Tones',
+      component: lazy(() => import('./Tones')),
+    },
+    {
+      name: 'clear-button',
+      title: 'Clear button',
+      component: lazy(() => import('./ClearButton')),
+    },
+    {
+      name: 'read-only',
+      title: 'Read only',
+      component: lazy(() => import('./ReadOnly')),
+    },
+    {
+      name: 'states',
+      title: 'States',
+      component: lazy(() => import('./States')),
+    },
+  ],
+}
+
+export default scope