@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,84 +1,55 @@
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
+import {_inputElement, _inputPresentation, textArea, type TextAreaStyleProps} from '@sanity/ui/css'
+import {useImperativeHandle, useRef} from 'react'
 
-import {useArrayProp, useCustomValidity} from '../../hooks'
-import {
-  responsiveInputPaddingStyle,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  textInputBaseStyle,
-  textInputFontSizeStyle,
-  TextInputInputStyleProps,
-  textInputRepresentationStyle,
-  TextInputRepresentationStyleProps,
-  TextInputResponsivePaddingStyleProps,
-  textInputRootStyle,
-} from '../../styles/internal'
-import {useRootTheme} from '../../theme'
-import {ResponsiveRadiusProps} from '../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface TextAreaProps extends ResponsiveRadiusProps {
+/** @public */
+export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
+
+/** @public */
+export type TextAreaOwnProps = TextAreaStyleProps & {
   /**
    * @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,
-)
+/** @public */
+export type TextAreaElementType = 'textarea' | ComponentType
 
-const Presentation = styled.div<ResponsiveRadiusStyleProps & TextInputRepresentationStyleProps>(
-  responsiveRadiusStyle,
-  textInputRepresentationStyle,
-)
+/** @public */
+export type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
+  TextAreaOwnProps,
+  E
+>
 
 /**
  * A multiline text input.
  *
-
  * @public
  */
-export const TextArea = forwardRef(function TextArea(
-  props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>,
-  forwardedRef: React.ForwardedRef<HTMLTextAreaElement>,
-) {
+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,
-    weight,
-    __unstable_disableFocusRing,
-    ...restProps
-  } = props
+    readOnly,
+    ref: forwardedRef,
+    ...rest
+  } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
   const ref = useRef<HTMLTextAreaElement | null>(null)
 
-  const rootTheme = useRootTheme()
-
   useImperativeHandle<HTMLTextAreaElement | null, HTMLTextAreaElement | null>(
     forwardedRef,
     () => ref.current,
@@ -87,33 +58,27 @@ export const TextArea = forwardRef(function TextArea(
   useCustomValidity(ref, customValidity)
 
   return (
-    <StyledTextArea data-ui="TextArea">
-      <InputRoot>
-        <Input
-          data-as="textarea"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-          {...restProps}
-          $fontSize={useArrayProp(fontSize)}
-          $padding={useArrayProp(padding)}
-          $scheme={rootTheme.scheme}
-          $space={useArrayProp(0)}
-          $tone={rootTheme.tone}
-          $weight={weight}
-          disabled={disabled}
-          ref={ref}
-        />
-        <Presentation
-          $radius={useArrayProp(radius)}
-          $unstableDisableFocusRing={__unstable_disableFocusRing}
-          $scheme={rootTheme.scheme}
-          $tone={rootTheme.tone}
-          data-border={border ? '' : undefined}
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
-        />
-      </InputRoot>
-    </StyledTextArea>
+    <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>
   )
-})
-TextArea.displayName = 'ForwardRef(TextArea)'
+}

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

@@ -2,7 +2,7 @@ import {Box, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-export default function ClearButtonStory() {
+export default function ClearButtonStory(): React.JSX.Element {
   const customValidity = useText('Custom validitiy')
 
   const [value, setValue] = useState('')

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

@@ -1,13 +1,13 @@
 import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
 
-export default function CustomValidityStory() {
-  const customValidity = useText('Custom validity', 'Invalid value', 'Props') || undefined
+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 space={4}>
+        <Stack gap={4}>
           <TextInput customValidity={customValidity} />
           <Button text="Submit" type="submit" />
         </Stack>

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/text-input',
   title: 'TextInput',
   stories: [
@@ -41,4 +41,6 @@ export default defineScope({
       component: lazy(() => import('./states')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,7 +1,7 @@
-import {icons, IconSymbol} from '@sanity/icons'
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {icons} from '@sanity/icons'
+import {Box, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
+import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useState} from 'react'
 
@@ -11,7 +11,7 @@ import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
+} from '$workshop'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',
@@ -29,13 +29,13 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   },
 }
 
-export default function PlainStory() {
+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 space={3}>
+        <Stack gap={3}>
           <Text as="label" htmlFor="text-input-example" size={1} weight="medium">
             TextInput
           </Text>
@@ -50,23 +50,20 @@ export default function PlainStory() {
 
 function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   const {inputRef: ref} = props
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search', 'Props') as IconSymbol
-  const iconRight = useSelect(
-    'Icon (right)',
-    WORKSHOP_ICON_SYMBOL_OPTIONS,
-    'cube',
-    'Props',
-  ) as IconSymbol
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'search')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placeholder = useText('Placeholder')
+  const prefix = useBoolean('Prefix', false)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
+  const suffix = useBoolean('Suffix', false)
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   const [value, setValue] = useState('')
 
@@ -81,16 +78,31 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       customValidity={customValidity}
       disabled={disabled}
       fontSize={fontSize}
+      gap={gap}
       icon={icon && icons[icon]}
       iconRight={iconRight && icons[iconRight]}
       id="text-input-example"
+      name="test"
       onChange={handleChange}
       padding={padding}
       placeholder={placeholder}
+      prefix={
+        prefix && (
+          <Box padding={padding}>
+            <Text size={fontSize}>Prefix</Text>
+          </Box>
+        )
+      }
       radius={radius}
       readOnly={readOnly}
       ref={ref}
-      space={space}
+      suffix={
+        suffix && (
+          <Box padding={padding}>
+            <Text size={fontSize}>Suffix</Text>
+          </Box>
+        )
+      }
       value={value}
       weight={weight}
     />

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

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

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

@@ -1,15 +1,15 @@
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
-export default function StatesStory() {
-  const invalid = useBoolean('Invalid', false, 'Props')
+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 space={5}>
-          <Stack space={3}>
+        <Stack gap={5}>
+          <Stack gap={3}>
             <Text size={1} weight="medium">
               <label htmlFor="enabled-example">Enabled (default)</label>
             </Text>
@@ -21,7 +21,7 @@ export default function StatesStory() {
             />
           </Stack>
 
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text size={1} weight="medium">
               <label htmlFor="disabled-example">Disabled</label>
             </Text>
@@ -34,7 +34,7 @@ export default function StatesStory() {
             />
           </Stack>
 
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text size={1} weight="medium">
               <label htmlFor="read-only-example">Read-only</label>
             </Text>

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

@@ -1,7 +1,7 @@
 import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-export default function TonesStory() {
+export default function TonesStory(): React.JSX.Element {
   const transparentTone = useBoolean('Transparent', true)
   const neutralTone = useBoolean('Neutral', true)
   const primaryTone = useBoolean('Primary', true)
@@ -16,7 +16,7 @@ export default function TonesStory() {
         <Container width={1}>
           <Flex>
             <Card flex={1} scheme="light">
-              <Stack padding={[3, 4, 5]} space={4}>
+              <Stack gap={4} padding={[3, 4, 5]}>
                 <Card padding={3}>
                   <TextInput
                     placeholder="default"
@@ -161,7 +161,7 @@ export default function TonesStory() {
               </Stack>
             </Card>
             <Card flex={1} scheme="dark">
-              <Stack padding={[3, 4, 5]} space={4}>
+              <Stack gap={4} padding={[3, 4, 5]}>
                 <Card padding={3}>
                   <TextInput
                     placeholder="default"

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

@@ -2,10 +2,10 @@ 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__/constants'
+import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
-export default function TypedStory() {
-  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text', 'Props')
+export default function TypedStory(): React.JSX.Element {
+  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')