@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/components/autocomplete/__workshop__/Async.tsx

@@ -1,162 +0,0 @@
-import {MarkerIcon, SearchIcon} from '@sanity/icons'
-import {
-  Autocomplete,
-  type BaseAutocompleteOption,
-  Box,
-  Code,
-  Flex,
-  LayerProvider,
-  Selectable,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {startTransition, useCallback, useEffect, useRef, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-import {countriesStore} from './mock/apiStore'
-
-export default function AsyncStory(): React.JSX.Element {
-  const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
-  const [loading, setLoading] = useState(false)
-  const searchRef = useRef<{cancel: () => void} | null>(null)
-  const fetchRef = useRef<{cancel: () => void} | null>(null)
-  const [query, setQuery] = useState<string | null>(null)
-  const [value, setValue] = useState('')
-  const [optionTitle, setOptionTitle] = useState<string | null>(null)
-  const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
-
-  const doSearch = useCallback((query: string | null) => {
-    if (searchRef.current) searchRef.current.cancel()
-    searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
-  }, [])
-
-  const filterOption = useCallback(() => true, [])
-
-  const handleQueryChange = useCallback(
-    (query: string | null) => {
-      setQuery(query)
-
-      if (query !== null) {
-        doSearch(query)
-      }
-    },
-    [doSearch],
-  )
-
-  const handleOpenButtonClick = useCallback(() => {
-    if (!value) {
-      doSearch('')
-    }
-  }, [doSearch, value])
-
-  const renderValue = useCallback(() => {
-    if (loadingCurrentRef) {
-      return 'Loading…'
-    }
-
-    return optionTitle || ''
-  }, [loadingCurrentRef, optionTitle])
-
-  const renderOption = useCallback((option: BaseAutocompleteOption) => {
-    return <AsyncOption documentId={option.value} />
-  }, [])
-
-  useEffect(() => {
-    if (fetchRef.current) fetchRef.current.cancel()
-
-    if (value) {
-      fetchRef.current = countriesStore.fetchDocument(
-        value,
-        (data) => setOptionTitle(data?.title || null),
-        setLoadingCurrentRef,
-      )
-    } else {
-      startTransition(() => {
-        setOptionTitle(null)
-        setLoadingCurrentRef(false)
-      })
-    }
-  }, [value])
-
-  useEffect(() => {
-    if (optionTitle) doSearch(optionTitle)
-  }, [doSearch, optionTitle])
-
-  return (
-    <CardWrapper alignItems="flex-start" pattern="halftone">
-      <Stack gap={5}>
-        <Stack gap={3}>
-          <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
-            Country
-          </Text>
-          <LayerProvider zOffset={100}>
-            <Autocomplete
-              disabled={loadingCurrentRef}
-              filterOption={filterOption}
-              icon={value ? MarkerIcon : SearchIcon}
-              id="async"
-              loading={loading}
-              openButton={{onClick: handleOpenButtonClick}}
-              options={options}
-              placeholder="Search"
-              renderOption={renderOption}
-              renderValue={renderValue}
-              value={value}
-              onChange={setValue}
-              onQueryChange={handleQueryChange}
-            />
-          </LayerProvider>
-        </Stack>
-        <Box muted overflow="auto" padding={3} radius={3}>
-          <Code language="json" size={1}>
-            {JSON.stringify({loading, options, query, value}, null, 2)}
-          </Code>
-        </Box>
-      </Stack>
-    </CardWrapper>
-  )
-}
-
-function AsyncOption(props: {
-  documentId: string
-  disabled?: boolean
-  selected?: boolean
-  tabIndex?: number
-}) {
-  const {documentId, disabled, selected, tabIndex} = props
-  const [data, setData] = useState<{title: string} | null>(null)
-  const [loading, setLoading] = useState(false)
-  const ref = useRef<{cancel: () => void} | null>(null)
-
-  useEffect(() => {
-    if (ref.current) ref.current.cancel()
-    ref.current = countriesStore.fetchDocument(documentId, setData, setLoading)
-  }, [documentId])
-
-  return (
-    <Selectable
-      as="button"
-      disabled={disabled}
-      padding={3}
-      radius={2}
-      selected={selected}
-      tabIndex={tabIndex}
-      width="fill"
-    >
-      <Flex gap={3}>
-        <Text>
-          <MarkerIcon />
-        </Text>
-
-        {loading && (
-          <Text muted>
-            <>Loading…</>
-          </Text>
-        )}
-
-        {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
-      </Flex>
-    </Selectable>
-  )
-}

package/src/components/autocomplete/__workshop__/ConstrainedHeight.tsx

@@ -1,121 +0,0 @@
-import {
-  Autocomplete,
-  type AutocompleteProps,
-  Card,
-  Dialog,
-  LayerProvider,
-  Popover,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-import {countries} from './mock/countries'
-import type {ExampleOption} from './types'
-
-export default function ConstrainedHeightStory(): React.JSX.Element {
-  return (
-    <CardWrapper pattern="halftone">
-      <Dialog id="constrained-height-dialog" tone="default">
-        <Stack gap={5} padding={4}>
-          <ConstrainedHeightExampleField id="example-1" label="Example 1" />
-          <ConstrainedHeightExampleField id="example-2" label="Example 2" />
-          <ConstrainedHeightExampleField id="example-3" label="Example 3" />
-          <ConstrainedHeightExampleField id="example-4" label="Example 4" />
-          <ConstrainedHeightExampleField id="example-5" label="Example 5" />
-          <ConstrainedHeightExampleField id="example-6" label="Example 6" />
-          <ConstrainedHeightExampleField id="example-7" label="Example 7" />
-          <ConstrainedHeightExampleField id="example-8" label="Example 8" />
-          <ConstrainedHeightExampleField id="example-9" label="Example 9" />
-        </Stack>
-      </Dialog>
-    </CardWrapper>
-  )
-}
-
-function ConstrainedHeightExampleField({id, label}: {id: string; label: string}) {
-  const [value, setValue] = useState('')
-
-  const renderOption = useCallback((option: ExampleOption) => {
-    return (
-      <Card
-        key={option.value}
-        as="a"
-        data-qa={`option-${option.value}`}
-        href="#"
-        padding={3}
-        radius={2}
-        onClick={(event) => event.preventDefault()}
-      >
-        <Text textOverflow="ellipsis">{option.title}</Text>
-      </Card>
-    )
-  }, [])
-
-  const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
-    return option ? option.title : currentValue
-  }, [])
-
-  const filterOption = useCallback((query: string, option: ExampleOption) => {
-    return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
-  }, [])
-
-  const options = countries.map((item) => ({value: item.code, title: item.name}))
-
-  const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
-    (
-      popoverProps: {
-        content: React.JSX.Element | null
-        hidden: boolean
-        inputElement: HTMLInputElement | null
-        onMouseEnter: () => void
-        onMouseLeave: () => void
-      },
-      popoverRef: React.Ref<HTMLDivElement>,
-    ) => {
-      const {hidden, inputElement, ...rest} = popoverProps
-
-      if (hidden) return null
-
-      return (
-        <Popover
-          {...rest}
-          ref={popoverRef}
-          constrainSize
-          matchReferenceWidth
-          open
-          overflow="auto"
-          placement="bottom-start"
-          portal
-          radius={3}
-          referenceElement={inputElement}
-        />
-      )
-    },
-    [],
-  )
-
-  return (
-    <Stack gap={3}>
-      <Text size={1} weight="medium">
-        {label}
-      </Text>
-      <LayerProvider zOffset={100}>
-        <Autocomplete
-          filterOption={filterOption}
-          id={id}
-          openButton
-          options={options}
-          placeholder="Search"
-          renderOption={renderOption}
-          renderPopover={renderPopover}
-          renderValue={renderValue}
-          value={value}
-          onChange={setValue}
-        />
-      </LayerProvider>
-    </Stack>
-  )
-}

package/src/components/autocomplete/__workshop__/Custom.tsx

@@ -1,91 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Autocomplete, Box, Button, Code, Selectable, Stack, Text} from '@sanity/ui'
-import {FONT_TEXT_SIZE, RADIUS, type Radius, SPACE} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-import {countries} from './mock/countries'
-import type {ExampleOption} from './types'
-
-export default function CustomStory(): React.JSX.Element {
-  const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
-  const [value, setValue] = useState('')
-
-  const border = useBoolean('Border', true)
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', FONT_TEXT_SIZE, 2)
-  const openButton = useBoolean('Open button', true)
-  const padding = useSelect('Padding', SPACE, 3)
-  const radius = useSelect('Radius', RADIUS, 3)
-  const readOnly = useBoolean('Read only', false)
-
-  const renderOption = useCallback(
-    (option: ExampleOption) => (
-      <Selectable
-        key={option.value}
-        as="a"
-        data-qa={`option-${option.value}`}
-        href="#"
-        padding={padding}
-        radius={typeof radius === 'number' ? (Math.max((radius ?? 0) - 1, 0) as Radius) : radius}
-        onClick={(event) => event.preventDefault()}
-      >
-        <Text size={fontSize}>{option.title}</Text>
-      </Selectable>
-    ),
-    [fontSize, padding, radius],
-  )
-
-  const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
-    return option ? option.title : currentValue
-  }, [])
-
-  const filterOption = useCallback((query: string, option: ExampleOption) => {
-    return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
-  }, [])
-
-  const options = data.map((item) => ({value: item.value, title: item.title}))
-
-  return (
-    <CardWrapper alignItems="flex-start" pattern="halftone">
-      <Stack gap={5}>
-        <Stack gap={3}>
-          <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
-            Country
-          </Text>
-          <Autocomplete
-            aria-describedby="custom-label"
-            border={border}
-            disabled={disabled}
-            filterOption={filterOption}
-            fontSize={fontSize}
-            icon={SearchIcon}
-            id="custom"
-            openButton={openButton}
-            options={options}
-            padding={padding}
-            placeholder="Search"
-            radius={radius}
-            readOnly={readOnly}
-            renderOption={renderOption}
-            renderValue={renderValue}
-            value={value}
-            onChange={setValue}
-          />
-        </Stack>
-
-        <Box muted padding={4} radius={3}>
-          <Code language="json" size={1}>
-            {JSON.stringify(value)}
-          </Code>
-        </Box>
-
-        <Box>
-          <Button id="set-value-btn" text="Set to NO" onClick={() => setValue('NO')} />
-        </Box>
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/components/autocomplete/__workshop__/Example.tsx

@@ -1,70 +0,0 @@
-import {SearchIcon} from '@sanity/icons'
-import {Autocomplete, FONT_TEXT_SIZE, RADIUS, SPACE, Text} 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, useMemo, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-import {countries} from './mock/countries'
-
-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 ExampleStory(): React.JSX.Element {
-  const {ref, Wrapper} = usePerfTest(typingPerfTest)
-
-  const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
-  const border = useBoolean('Border', true)
-  const customValidity = useText('Custom validity')
-  const disabled = useBoolean('Disabled', false)
-  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
-  const openButton = useBoolean('Open button', false)
-  const padding = useSelect('Padding', SPACE)
-  const radius = useSelect('Radius', RADIUS)
-  const readOnly = useBoolean('Read only', false)
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback((value: string) => setValue(value), [])
-
-  return (
-    <CardWrapper alignItems="flex-start" pattern="halftone">
-      <Text as="label" htmlFor="default" marginBottom={3} size={1} weight="medium">
-        Country code
-      </Text>
-      <Wrapper>
-        <Autocomplete
-          ref={ref}
-          border={border}
-          customValidity={customValidity}
-          disabled={disabled}
-          fontSize={fontSize}
-          icon={SearchIcon}
-          id="default"
-          openButton={openButton}
-          options={options}
-          padding={padding}
-          placeholder="Search"
-          radius={radius}
-          readOnly={readOnly}
-          value={value}
-          onChange={handleChange}
-        />
-      </Wrapper>
-    </CardWrapper>
-  )
-}

package/src/components/autocomplete/__workshop__/FocusAndBlur.tsx

@@ -1,39 +0,0 @@
-import {Autocomplete, Box, Button, Code, Stack} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-import {CardWrapper} from '$workshop'
-
-export default function FocusAndBlurStory(): React.JSX.Element {
-  const [value, setValue] = useState('')
-  const [log, setLog] = useState<string[]>([])
-  const handleBlur = useCallback(() => setLog((v) => v.concat(['blur'])), [])
-  const handleFocus = useCallback(() => setLog((v) => v.concat(['focus'])), [])
-  const handleClear = useCallback(() => setLog([]), [])
-
-  return (
-    <CardWrapper alignItems="flex-start" pattern="halftone">
-      <Stack gap={5}>
-        <Autocomplete
-          id="focus-and-blur"
-          openButton
-          options={[{value: 'foo'}, {value: 'bar'}]}
-          placeholder="Search"
-          value={value}
-          onBlur={handleBlur}
-          onChange={setValue}
-          onFocus={handleFocus}
-        />
-
-        <Stack gap={3}>
-          <Box muted overflow="auto" padding={3} radius={3}>
-            <Code id="focus-and-blur-log" language="json" size={1}>
-              {JSON.stringify(log)}
-            </Code>
-          </Box>
-
-          <Button id="focus-and-blur-clear-btn" mode="ghost" text="Clear" onClick={handleClear} />
-        </Stack>
-      </Stack>
-    </CardWrapper>
-  )
-}