@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -0,0 +1,162 @@
+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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,91 @@
+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/tokens'
+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

@@ -0,0 +1,71 @@
+import {SearchIcon} from '@sanity/icons'
+import {Autocomplete, Text} 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 {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

@@ -0,0 +1,39 @@
+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>
+  )
+}