@sanity/ui 3.0.0-static.9 → 3.0.1

package/src/ui/primitives/textArea/__workshop__/plain.tsx

@@ -1,50 +0,0 @@
-import {Card, Container, Flex, Radius, Stack, Text, TextArea} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
-
-export default function PlainStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
-
-  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 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 weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width={0}>
-        <Card padding={3} tone={tone}>
-          <Stack space={3}>
-            <Text as="label" htmlFor="text-area-example" size={1} weight="medium">
-              TextArea
-            </Text>
-            <TextArea
-              border={border}
-              customValidity={customValidity}
-              disabled={disabled}
-              fontSize={fontSize}
-              id="text-area-example"
-              padding={padding}
-              placeholder={placeholder}
-              radius={radius as Radius}
-              readOnly={readOnly}
-              weight={weight}
-            />
-          </Stack>
-        </Card>
-      </Container>
-    </Flex>
-  )
-}

package/src/ui/primitives/textArea/textArea.tsx

@@ -1,71 +0,0 @@
-import {
-  _inputElement,
-  _inputPresentation,
-  ResponsiveProp,
-  textArea,
-  TextAreaStyleProps,
-} from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
-
-import {useCustomValidity} from '../../hooks'
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface TextAreaProps extends TextAreaStyleProps {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  customValidity?: string
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  weight?: ThemeFontWeightKey
-}
-
-/**
- * A multiline text input.
- *
- * @public
- */
-export const TextArea = forwardRef(function TextArea(
-  props: Props<TextAreaProps, 'textarea'>,
-  forwardedRef: ForwardedRef<HTMLTextAreaElement>,
-) {
-  const {
-    border = true,
-    customValidity,
-    disabled = false,
-    fontSize = 2,
-    gap,
-    padding = 3,
-    radius = 2,
-    space = 3,
-    // weight,
-    // __unstable_disableFocusRing,
-    ...restProps
-  } = props
-
-  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: gap ?? space})}
-      data-ui="TextArea"
-    >
-      <textarea {...restProps} className={_inputElement()} disabled={disabled} ref={ref} />
-      <span className={_inputPresentation()} />
-    </span>
-  )
-})
-
-TextArea.displayName = 'ForwardRef(TextArea)'

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

@@ -1,104 +0,0 @@
-import {icons, IconSymbol} from '@sanity/icons'
-import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {FontTextSize, Radius} from '@sanity/ui/theme'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {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/constants'
-
-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() {
-  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}>
-          <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, '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 prefix = useBoolean('Prefix', false, 'Props')
-  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 suffix = useBoolean('Suffix', false, 'Props')
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.currentTarget.value),
-    [],
-  )
-
-  return (
-    <TextInput
-      border={border}
-      customValidity={customValidity}
-      disabled={disabled}
-      fontSize={fontSize as FontTextSize}
-      icon={icon && icons[icon]}
-      iconRight={iconRight && icons[iconRight]}
-      id="text-input-example"
-      name="test"
-      onChange={handleChange}
-      padding={padding}
-      placeholder={placeholder}
-      prefix={prefix && <Text>Prefix</Text>}
-      radius={radius as Radius}
-      readOnly={readOnly}
-      ref={ref}
-      space={space}
-      suffix={suffix && <Text>Suffix</Text>}
-      value={value}
-      weight={weight}
-    />
-  )
-}

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/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 = 2,
-    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)'

package/src/ui/primitives/tooltip/__workshop__/customPortal.tsx

@@ -1,102 +0,0 @@
-import {
-  BoundaryElementProvider,
-  Button,
-  Card,
-  Flex,
-  Portal,
-  PortalProvider,
-  Stack,
-  Text,
-  Tooltip,
-} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useMemo, useState} from 'react'
-
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
-
-const PORTAL_OPTIONS = {
-  '(true)': true,
-  '(false)': false,
-  'portal1': 'portal1',
-}
-
-export default function CustomPortalStory() {
-  const content = useText(
-    'Content',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
-  )
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useSelect('Portal', PORTAL_OPTIONS, undefined, 'Props')
-  const useBoundaryElement = useBoolean('Use boundary element', true)
-
-  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-  const __unstable_elements = useMemo(
-    () => ({
-      portal1: portal1Element,
-    }),
-    [portal1Element],
-  )
-
-  return (
-    <PortalProvider __unstable_elements={__unstable_elements}>
-      <Flex align="center" height="fill" justify="center">
-        <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
-          <Card
-            border
-            padding={4}
-            ref={setBoundaryElement}
-            style={{
-              height: 'calc(100vh - 100px)',
-              position: 'relative',
-              width: '500px',
-            }}
-          >
-            <Text>Boundary element</Text>
-            <Flex align="center" height="fill" justify="center">
-              <Flex justify="center">
-                <Stack space={2}>
-                  <Tooltip
-                    boundaryElement={useBoundaryElement ? boundaryElement : null}
-                    content={<Text size={1}>{content}</Text>}
-                    padding={2}
-                    placement={placement}
-                    portal={portal}
-                  >
-                    <Button mode="bleed" text="Tooltip" />
-                  </Tooltip>
-                </Stack>
-              </Flex>
-            </Flex>
-          </Card>
-        </BoundaryElementProvider>
-      </Flex>
-
-      <Card
-        border
-        margin={4}
-        padding={4}
-        ref={setPortal1Element}
-        style={{
-          left: 0,
-          position: 'absolute',
-          top: 0,
-          width: '175px',
-        }}
-        tone="critical"
-      />
-
-      <Portal __unstable_name="portal1">
-        <Stack space={4}>
-          <Text size={1} weight="medium">
-            Portal 1 content
-          </Text>
-          <Text size={1}>
-            The tooltip's max-width should not exceed this container's width (minus padding) if it's
-            set to use this portal
-          </Text>
-        </Stack>
-      </Portal>
-    </PortalProvider>
-  )
-}