@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

package/src/ui/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() {
-  const invalid = useBoolean('Invalid', false, 'Props')
-  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}>
-            <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 space={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 space={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>
-  )
-}

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

@@ -1,277 +0,0 @@
-import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function TonesStory() {
-  const transparentTone = useBoolean('Transparent', true)
-  const neutralTone = useBoolean('Neutral', true)
-  const primaryTone = useBoolean('Primary', true)
-  const suggestTone = useBoolean('Suggest', true)
-  const positiveTone = useBoolean('Positive', true)
-  const cautionTone = useBoolean('Caution', true)
-  const criticalTone = useBoolean('Critical', true)
-
-  return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" justify="center">
-        <Container width={1}>
-          <Flex>
-            <Card flex={1} scheme="light">
-              <Stack padding={[3, 4, 5]} space={4}>
-                <Card padding={3}>
-                  <TextInput
-                    placeholder="default"
-                    prefix={
-                      <Box padding={3}>
-                        <Text>prefix</Text>
-                      </Box>
-                    }
-                    suffix={
-                      <Box padding={3}>
-                        <Text>suffix</Text>
-                      </Box>
-                    }
-                  />
-                </Card>
-
-                {transparentTone && (
-                  <Card padding={3} tone="transparent">
-                    <TextInput
-                      placeholder="transparent"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {neutralTone && (
-                  <Card padding={3} tone="neutral">
-                    <TextInput
-                      placeholder="neutral"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {primaryTone && (
-                  <Card padding={3} tone="primary">
-                    <TextInput
-                      placeholder="primary"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {suggestTone && (
-                  <Card padding={3} tone="suggest">
-                    <TextInput
-                      placeholder="suggest"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {positiveTone && (
-                  <Card padding={3} tone="positive">
-                    <TextInput
-                      placeholder="positive"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {cautionTone && (
-                  <Card padding={3} tone="caution">
-                    <TextInput
-                      placeholder="caution"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {criticalTone && (
-                  <Card padding={3} tone="critical">
-                    <TextInput
-                      placeholder="critical"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-              </Stack>
-            </Card>
-            <Card flex={1} scheme="dark">
-              <Stack padding={[3, 4, 5]} space={4}>
-                <Card padding={3}>
-                  <TextInput
-                    placeholder="default"
-                    prefix={
-                      <Box padding={3}>
-                        <Text>prefix</Text>
-                      </Box>
-                    }
-                    suffix={
-                      <Box padding={3}>
-                        <Text>suffix</Text>
-                      </Box>
-                    }
-                  />
-                </Card>
-
-                {transparentTone && (
-                  <Card padding={3} tone="transparent">
-                    <TextInput
-                      placeholder="transparent"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {primaryTone && (
-                  <Card padding={3} tone="primary">
-                    <TextInput
-                      placeholder="primary"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {positiveTone && (
-                  <Card padding={3} tone="positive">
-                    <TextInput
-                      placeholder="positive"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {cautionTone && (
-                  <Card padding={3} tone="caution">
-                    <TextInput
-                      placeholder="caution"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-
-                {criticalTone && (
-                  <Card padding={3} tone="critical">
-                    <TextInput
-                      placeholder="critical"
-                      prefix={
-                        <Box padding={3}>
-                          <Text>prefix</Text>
-                        </Box>
-                      }
-                      suffix={
-                        <Box padding={3}>
-                          <Text>suffix</Text>
-                        </Box>
-                      }
-                    />
-                  </Card>
-                )}
-              </Stack>
-            </Card>
-          </Flex>
-        </Container>
-      </Flex>
-    </Card>
-  )
-}

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

@@ -1,23 +0,0 @@
-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'
-
-export default function TypedStory() {
-  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text', 'Props')
-
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.currentTarget.value)
-  }, [])
-
-  return (
-    <Box padding={4}>
-      <Container width={1}>
-        <TextInput onChange={handleChange} type={type} value={value} />
-      </Container>
-    </Box>
-  )
-}

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

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

package/src/ui/primitives/textInput/textInput.tsx

@@ -1,286 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {
-  _inputElement,
-  _inputPresentation,
-  composeClassNames,
-  InputStyleProps,
-  ResponsiveProp,
-  textInput,
-} from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
-import {
-  CSSProperties,
-  ElementType,
-  ForwardedRef,
-  forwardRef,
-  isValidElement,
-  MouseEvent,
-  ReactNode,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
-import {isRecord} from '../../lib/isRecord'
-import {Props} from '../../types'
-import {Box} from '../box'
-import {Button, ButtonProps} from '../button'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export type TextInputClearButtonProps = Omit<
-  Props<ButtonProps, 'button'>,
-  'as' | 'onClick' | 'onMouseDown'
->
-
-/**
- * @public
- */
-export type TextInputType =
-  | 'search'
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'url'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'tel'
-  | 'time'
-  | 'text'
-  | 'week'
-  | 'color'
-
-/**
- * @public
- */
-export interface TextInputProps extends InputStyleProps {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  /**
-   * @beta
-   */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
-  /**
-   * @beta
-   */
-  onClear?: () => void
-  prefix?: ReactNode
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  suffix?: ReactNode
-  type?: TextInputType
-  weight?: ThemeFontWeightKey
-}
-
-const CLEAR_BUTTON_BOX_STYLE: CSSProperties = {
-  backgroundColor: 'transparent',
-  top: 0,
-  right: 0,
-  zIndex: 2,
-}
-
-/**
- * Single line text input.
- *
- * @public
- */
-export const TextInput = forwardRef(function TextInput(
-  props: Props<TextInputProps, 'input'>,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
-) {
-  const {
-    __unstable_disableFocusRing,
-    border = true,
-    className,
-    clearButton,
-    disabled = false,
-    fontSize = 1,
-    gap,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClear,
-    padding = 3,
-    prefix,
-    radius = 2,
-    readOnly,
-    space = 3,
-    suffix,
-    customValidity,
-    type = 'text',
-    weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
-    width,
-    ...restProps
-  } = props
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  const paddingArray = useArrayProp(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(
-    () =>
-      paddingArray.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
-
-        return typeof v === 'number' ? v - 2 : 0
-      }) as Space[],
-    [paddingArray],
-  )
-
-  const clearButtonPadding = useMemo(
-    () =>
-      paddingArray.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 0
-        if (v === 2) return 1
-
-        return typeof v === 'number' ? v - 1 : 0
-      }) as Space[],
-    [paddingArray],
-  )
-
-  const clearButtonProps: TextInputClearButtonProps = useMemo(
-    () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
-    [clearButton],
-  )
-
-  return (
-    <Box
-      align="center"
-      as="span"
-      className={composeClassNames(
-        className,
-        textInput({
-          border,
-          fontSize,
-          padding,
-          radius,
-          gap: gap ?? space,
-          width,
-        }),
-      )}
-      data-icon-left={IconComponent ? '' : undefined}
-      data-icon-right={IconRightComponent ? '' : undefined}
-      data-prefix={prefix ? '' : undefined}
-      data-suffix={suffix ? '' : undefined}
-      data-ui="TextInput"
-      display="flex"
-    >
-      {prefix && (
-        <Box as="span" className="text-input-prefix" sizing="border">
-          <span>{prefix}</span>
-        </Box>
-      )}
-
-      <Box as="span" flex={1} position="relative">
-        <input
-          // data-as="input"
-          {...restProps}
-          className={_inputElement()}
-          disabled={disabled}
-          readOnly={readOnly}
-          ref={ref}
-          type={type}
-        />
-
-        <Box
-          as="span"
-          // $unstableDisableFocusRing={__unstable_disableFocusRing}
-          className={_inputPresentation()}
-          data-disable-focus-ring={__unstable_disableFocusRing ? '' : undefined}
-          position="absolute"
-        >
-          {IconComponent && (
-            <Box as="span" padding={padding} position="absolute" style={{top: 0, left: 0}}>
-              <Text size={fontSize}>
-                {isValidElement(IconComponent) && IconComponent}
-                {isValidElementType(IconComponent) && <IconComponent />}
-              </Text>
-            </Box>
-          )}
-
-          {!withClearButton && IconRightComponent && (
-            <Box as="span" padding={padding} position="absolute" style={{top: 0, right: 0}}>
-              <Text size={fontSize}>
-                {isValidElement(IconRightComponent) && IconRightComponent}
-                {isValidElementType(IconRightComponent) && <IconRightComponent />}
-              </Text>
-            </Box>
-          )}
-        </Box>
-
-        {!disabled && !readOnly && clearButton && (
-          <Box
-            as="span"
-            padding={clearButtonBoxPadding}
-            position="absolute"
-            style={CLEAR_BUTTON_BOX_STYLE}
-            // tone={customValidity ? 'critical' : 'inherit'}
-          >
-            <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 as="span" className="text-input-suffix" sizing="border">
-          <span>{suffix}</span>
-        </Box>
-      )}
-    </Box>
-  )
-})
-
-TextInput.displayName = 'ForwardRef(TextInput)'