@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/ui/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -0,0 +1,131 @@
+import {
+  Autocomplete,
+  BoundaryElementProvider,
+  Box,
+  Card,
+  Container,
+  LayerProvider,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+
+import {Popover} from '../../../primitives'
+import countries from '../__mocks__/countries'
+import {AutocompleteProps} from '../autocomplete'
+import {ExampleOption} from './types'
+
+export default function ConstrainedHeightStory() {
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Card height="fill" tone="transparent">
+      <Container height="fill" padding={3} sizing="border" width={1}>
+        <Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
+          <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
+            <Stack gap={5}>
+              <BoundaryElementProvider element={boundaryElement}>
+                <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" />
+              </BoundaryElementProvider>
+            </Stack>
+          </Box>
+        </Card>
+      </Container>
+    </Card>
+  )
+}
+
+function ConstrainedHeightExampleField({id, label}: {id: string; label: string}) {
+  const [value, setValue] = useState('')
+
+  const renderOption = useCallback((option: ExampleOption) => {
+    return (
+      <Card
+        as="a"
+        data-qa={`option-${option.value}`}
+        href="#"
+        key={option.value}
+        onClick={(event) => event.preventDefault()}
+        padding={3}
+        radius={2}
+      >
+        <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, ...restProps} = popoverProps
+
+      if (hidden) return null
+
+      return (
+        <Popover
+          {...restProps}
+          arrow={false}
+          constrainSize
+          matchReferenceWidth
+          open
+          overflow="auto"
+          placement="bottom-start"
+          portal
+          radius={3}
+          ref={popoverRef}
+          referenceElement={inputElement}
+        />
+      )
+    },
+    [],
+  )
+
+  return (
+    <Stack gap={3}>
+      <Text size={1} weight="medium">
+        {label}
+      </Text>
+      <LayerProvider zOffset={100}>
+        <Autocomplete
+          filterOption={filterOption}
+          id={id}
+          onChange={setValue}
+          openButton
+          options={options}
+          placeholder="Search"
+          radius={2}
+          renderOption={renderOption}
+          renderPopover={renderPopover}
+          renderValue={renderValue}
+          value={value}
+        />
+      </LayerProvider>
+    </Stack>
+  )
+}

package/src/ui/components/autocomplete/__workshop__/custom.tsx

@@ -0,0 +1,90 @@
+import {Autocomplete, Box, Button, Card, Code, Container, Radius, Stack, Text} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+
+import {
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+} from '../../../../../workshop/constants'
+import countries from '../__mocks__/countries'
+import {ExampleOption} from './types'
+
+export default function CustomStory() {
+  const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
+  const border = useBoolean('Border', true, 'Props')
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
+  const openButton = useBoolean('Open button', true, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
+  const readOnly = useBoolean('Read only', false, 'Props')
+  const [value, setValue] = useState('')
+
+  const renderOption = useCallback(
+    (option: ExampleOption) => (
+      <Card
+        as="a"
+        data-qa={`option-${option.value}`}
+        href="#"
+        key={option.value}
+        onClick={(event) => event.preventDefault()}
+        padding={padding}
+        radius={(radius - 1) as Radius}
+      >
+        <Text size={fontSize}>{option.title}</Text>
+      </Card>
+    ),
+    [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 (
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
+      <Container width={0}>
+        <Stack space={5}>
+          <Stack space={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 as FontTextSize}
+              id="custom"
+              onChange={setValue}
+              openButton={openButton}
+              options={options}
+              padding={padding}
+              placeholder="Search"
+              radius={radius as Radius}
+              readOnly={readOnly}
+              renderOption={renderOption}
+              renderValue={renderValue}
+              value={value}
+            />
+          </Stack>
+
+          <Card padding={3} radius={2} tone="transparent">
+            <Code size={1}>{JSON.stringify(value)}</Code>
+          </Card>
+          <Box>
+            <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
+          </Box>
+        </Stack>
+      </Container>
+    </Box>
+  )
+}

package/src/ui/components/autocomplete/__workshop__/example.tsx

@@ -0,0 +1,80 @@
+import {Autocomplete, Box, Card, Container, Stack, Text} 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, useMemo, useState} from 'react'
+
+import {
+  WORKSHOP_CARD_TONE_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_SIZE_OPTIONS,
+} from '../../../../../workshop/constants'
+import countries from '../__mocks__/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() {
+  const {ref, Wrapper} = usePerfTest(typingPerfTest)
+
+  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Layout')
+  const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
+  const border = useBoolean('Border', true, 'Props')
+  const customValidity = useText('Custom validity', '', 'Props') || undefined
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
+  const openButton = useBoolean('Open button', false, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
+  const readOnly = useBoolean('Read only', false, 'Props')
+  const [value, setValue] = useState('')
+
+  const handleChange = useCallback((value: string) => setValue(value), [])
+
+  return (
+    <Card height="fill" tone={layoutTone}>
+      <Container width={1}>
+        <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="default" size={1} weight="medium">
+              Country code
+            </Text>
+            <Wrapper>
+              <Autocomplete
+                border={border}
+                customValidity={customValidity}
+                disabled={disabled}
+                fontSize={fontSize as FontTextSize}
+                onChange={handleChange}
+                id="default"
+                openButton={openButton}
+                options={options}
+                padding={padding}
+                placeholder="Search"
+                radius={radius as Radius}
+                readOnly={readOnly}
+                ref={ref}
+                value={value}
+              />
+            </Wrapper>
+          </Stack>
+        </Box>
+      </Container>
+    </Card>
+  )
+}

package/src/ui/components/autocomplete/__workshop__/fullscreen.tsx

@@ -0,0 +1,293 @@
+import {CloseIcon, SearchIcon} from '@sanity/icons'
+import {
+  Autocomplete,
+  BaseAutocompleteOption,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Heading,
+  Label,
+  Layer,
+  Portal,
+  PortalProvider,
+  Stack,
+  Text,
+  TextSkeleton,
+  useToast,
+} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
+import {countriesStore} from '../__mocks__/apiStore'
+
+export default function Fullscreen() {
+  const error = useBoolean('Error', false, 'Props')
+
+  const {push: pushToast} = useToast()
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [closeSearchButtonElement, setCloseSearchButtonElement] =
+    useState<HTMLButtonElement | null>(null)
+  const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
+  const searchRef = useRef<{cancel: () => void} | null>(null)
+  const fetchRef = useRef<{cancel: () => void} | null>(null)
+  const openSearchButtonElementRef = useRef<HTMLButtonElement | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [optionTitle, setOptionTitle] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [query, setQuery] = useState<string | null>(null)
+  const [value, setValue] = useState<string>('')
+
+  const relatedElements = useMemo(
+    () => [closeSearchButtonElement].filter(Boolean) as HTMLElement[],
+    [closeSearchButtonElement],
+  )
+
+  const search = useCallback((query: string | null) => {
+    if (searchRef.current) searchRef.current.cancel()
+    searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
+  }, [])
+
+  const filterOption = useCallback(() => true, [])
+
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  const handleQueryChange = useCallback(
+    (query: string | null) => {
+      if (query !== null) search(query)
+      setQuery(query)
+    },
+    [search],
+  )
+
+  const handleOpen = useCallback(() => {
+    setValue('')
+    setOpen(true)
+  }, [])
+
+  const handleSelect = useCallback(
+    (v: string) => {
+      setOpen(false)
+      setValue(v)
+      pushToast({status: 'info', title: `Selected “${v}”`})
+    },
+    [pushToast],
+  )
+
+  const renderOption = useCallback((option: BaseAutocompleteOption) => {
+    return <AsyncOption documentId={option.value} />
+  }, [])
+
+  const renderPopover = useCallback(
+    (
+      props: {
+        content: React.ReactNode
+        hidden: boolean
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      },
+      ref: React.Ref<HTMLDivElement>,
+    ) => {
+      if (!props.hidden && error) {
+        return (
+          <Portal>
+            <Card
+              onMouseEnter={props.onMouseEnter}
+              onMouseLeave={props.onMouseLeave}
+              padding={4}
+              style={{position: 'absolute', inset: '0 0 0 0'}}
+              tone="critical"
+            >
+              <Flex align="center" height="fill" justify="center">
+                <Text align="center" muted>
+                  Something went wrong while searching
+                </Text>
+              </Flex>
+            </Card>
+          </Portal>
+        )
+      }
+
+      if (!props.hidden && query && !loading && options.length === 0) {
+        return (
+          <Portal>
+            <Card
+              onMouseEnter={props.onMouseEnter}
+              onMouseLeave={props.onMouseLeave}
+              padding={4}
+              style={{position: 'absolute', inset: '0 0 0 0'}}
+            >
+              <Flex align="center" height="fill" justify="center">
+                <Text align="center" muted>
+                  No results for <strong>‘{query}’</strong>
+                </Text>
+              </Flex>
+            </Card>
+          </Portal>
+        )
+      }
+
+      return (
+        <Portal>
+          <Card
+            hidden={props.hidden}
+            onMouseEnter={props.onMouseEnter}
+            onMouseLeave={props.onMouseLeave}
+            ref={ref}
+          >
+            {props.content}
+          </Card>
+        </Portal>
+      )
+    },
+    [error, loading, options, query],
+  )
+
+  const renderValue = useCallback(() => {
+    if (loadingCurrentRef) {
+      return 'Loading…'
+    }
+
+    return optionTitle || ''
+  }, [loadingCurrentRef, optionTitle])
+
+  useEffect(() => {
+    if (open) inputRef.current?.focus()
+    if (!open) openSearchButtonElementRef.current?.focus()
+  }, [open])
+
+  useEffect(() => {
+    if (fetchRef.current) fetchRef.current.cancel()
+
+    if (value) {
+      fetchRef.current = countriesStore.fetchDocument(
+        value,
+        (data) => setOptionTitle(data?.title || null),
+        setLoadingCurrentRef,
+      )
+    } else {
+      setOptionTitle(null)
+      setLoadingCurrentRef(false)
+    }
+  }, [value])
+
+  return (
+    <Card style={{display: 'flex', flexDirection: 'column', minHeight: '100%'}} tone="transparent">
+      <PortalProvider element={portalElement}>
+        <Flex direction="column" flex={1} height="fill">
+          <Card hidden={open} padding={2}>
+            <Flex align="center">
+              <Box flex={1} />
+              <Button
+                aria-label="Open search"
+                icon={SearchIcon}
+                mode="ghost"
+                onClick={handleOpen}
+                ref={openSearchButtonElementRef}
+              />
+            </Flex>
+          </Card>
+          <Layer hidden={!open} style={{position: 'sticky', top: 0}}>
+            <Card padding={2} shadow={1}>
+              <Autocomplete
+                filterOption={filterOption}
+                icon={SearchIcon}
+                id="fullsceen-example"
+                listBox={{padding: 2}}
+                loading={loading}
+                onQueryChange={handleQueryChange}
+                onSelect={handleSelect}
+                options={options}
+                placeholder="Search"
+                radius={2}
+                ref={inputRef}
+                relatedElements={relatedElements}
+                renderOption={renderOption}
+                renderPopover={renderPopover}
+                renderValue={renderValue}
+                suffix={
+                  <Box padding={1}>
+                    <Button
+                      aria-label="Close search"
+                      icon={CloseIcon}
+                      onClick={handleClose}
+                      padding={2}
+                      mode="bleed"
+                      ref={setCloseSearchButtonElement}
+                    />
+                  </Box>
+                }
+                value={value}
+              />
+            </Card>
+          </Layer>
+          <Card flex={1} hidden={!open} ref={setPortalElement} style={{position: 'relative'}} />
+          <Box flex={1} hidden={open} padding={4}>
+            <Heading>Welcome to this app</Heading>
+          </Box>
+        </Flex>
+      </PortalProvider>
+    </Card>
+  )
+}
+
+function AsyncOption(props: {
+  documentId: string
+  disabled?: boolean
+  selected?: boolean
+  tabIndex?: number
+}) {
+  const {documentId, disabled, selected, tabIndex} = props
+  const [data, setData] = useState<{code: string; 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 (
+    <Card
+      aria-label={data?.title}
+      as="button"
+      disabled={disabled}
+      padding={2}
+      radius={2}
+      selected={selected}
+      style={{lineHeight: 0}}
+      tabIndex={tabIndex}
+    >
+      <Flex align="center">
+        <Box muted radius={2} style={{width: 35, height: 35}} />
+        <Box flex={1} marginLeft={3}>
+          <Stack gap={2}>
+            {loading && (
+              <>
+                <TextSkeleton style={{maxWidth: 200}} />
+                <TextSkeleton size={1} style={{maxWidth: 120}} />
+              </>
+            )}
+            {!loading && (
+              <>
+                <Text muted={!data} textOverflow="ellipsis">
+                  {data ? data.title : <>Untitled</>}
+                </Text>
+                <Text muted size={1}>
+                  {data?.code}
+                </Text>
+              </>
+            )}
+          </Stack>
+        </Box>
+        <Box paddingX={2}>
+          <Label muted size={0}>
+            Country
+          </Label>
+        </Box>
+      </Flex>
+    </Card>
+  )
+}