@sanity/ui 3.3.0 → 3.3.2

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

@@ -1,294 +0,0 @@
-import {CloseIcon, SearchIcon} from '@sanity/icons'
-import {
-  Autocomplete,
-  BaseAutocompleteOption,
-  Box,
-  Button,
-  Card,
-  Flex,
-  Heading,
-  Label,
-  Layer,
-  Portal,
-  PortalProvider,
-  Skeleton,
-  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}
-      data-as="a"
-      disabled={disabled}
-      padding={2}
-      radius={2}
-      selected={selected}
-      style={{lineHeight: 0}}
-      tabIndex={tabIndex}
-    >
-      <Flex align="center">
-        <Skeleton radius={2} style={{width: 35, height: 35}} />
-        <Box flex={1} marginLeft={3}>
-          <Stack space={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>
-  )
-}

package/src/core/components/autocomplete/__workshop__/index.ts

@@ -1,39 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/autocomplete',
-  title: 'Autocomplete',
-  stories: [
-    {
-      name: 'example',
-      title: 'Example',
-      component: lazy(() => import('./example')),
-    },
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./custom')),
-    },
-    {
-      name: 'async',
-      title: 'Async',
-      component: lazy(() => import('./async')),
-    },
-    {
-      name: 'constrained-height',
-      title: 'Constrained height',
-      component: lazy(() => import('./constrainedHeight')),
-    },
-    {
-      name: 'focus-and-blur',
-      title: 'Focus and blur',
-      component: lazy(() => import('./focusAndBlur')),
-    },
-    {
-      name: 'fullscreen',
-      title: 'Fullscreen',
-      component: lazy(() => import('./fullscreen')),
-    },
-  ],
-})

package/src/core/components/autocomplete/__workshop__/types.ts

@@ -1,4 +0,0 @@
-export interface ExampleOption {
-  value: string
-  title: string
-}

package/src/core/components/breadcrumbs/__workshop__/example.tsx

@@ -1,62 +0,0 @@
-import {Breadcrumbs, Flex, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
-  '(none)': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  '6': 6,
-  '7': 7,
-}
-
-export default function Example() {
-  const maxLength =
-    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Breadcrumbs
-        maxLength={maxLength}
-        separator={
-          <Text muted size={1}>
-            /
-          </Text>
-        }
-        space={2}
-      >
-        <Text size={1}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#">Root</a>
-        </Text>
-        <Text size={1}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#">Category A</a>
-        </Text>
-        <Text size={1}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#">Category B</a>
-        </Text>
-        <Text size={1}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#">Category C</a>
-        </Text>
-        <Text size={1}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#">Category D</a>
-        </Text>
-        <Text size={1}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#">Category E</a>
-        </Text>
-        <Text size={1}>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a href="#">Category F</a>
-        </Text>
-        <Text size={1}>Item</Text>
-      </Breadcrumbs>
-    </Flex>
-  )
-}

package/src/core/components/breadcrumbs/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/breadcrumbs',
-  title: 'Breadcrumbs',
-  stories: [
-    {
-      name: 'example',
-      title: 'Example',
-      component: lazy(() => import('./example')),
-    },
-  ],
-})

package/src/core/components/dialog/__workshop__/activate.tsx

@@ -1,134 +0,0 @@
-import {useState} from 'react'
-
-import {Button, Flex, Stack, Text} from '../../../primitives'
-import {Layer, LayerProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
-import {Dialog} from '../dialog'
-
-export default function LayeringFocusStory() {
-  const [firstDialogOpen, setFirstDialogOpen] = useState<boolean>(false)
-  const [secondDialogOpen, setSecondDialogOpen] = useState<boolean>(false)
-  const [thirdDialogOpen, setThirdDialogOpen] = useState<boolean>(false)
-  const [fourthDialogOpen, setFourthDialogOpen] = useState<boolean>(false)
-
-  return (
-    <LayerProvider>
-      <Flex align="center" height="fill" justify="center">
-        <Layer onActivate={({activeElement}) => activeElement?.focus()}>
-          <Button
-            text="Open dialog 1"
-            onClick={() => setFirstDialogOpen(true)}
-            id="open-dialog-1-button"
-          />
-
-          {firstDialogOpen && (
-            <Dialog
-              header="Dialog 1"
-              id="1"
-              onActivate={({activeElement}) => activeElement?.focus()}
-              onClose={() => setFirstDialogOpen(false)}
-            >
-              <Stack space={2} padding={3}>
-                <Button
-                  mode="ghost"
-                  text="Open dialog 2"
-                  onClick={() => setSecondDialogOpen(true)}
-                  id="open-dialog-2-button-1"
-                />
-                <Button
-                  mode="ghost"
-                  text="Open dialog 2"
-                  onClick={() => setSecondDialogOpen(true)}
-                  id="open-dialog-2-button-2"
-                />
-                <Button
-                  mode="ghost"
-                  text="Open dialog 2"
-                  onClick={() => setSecondDialogOpen(true)}
-                  id="open-dialog-2-button-3"
-                />
-              </Stack>
-
-              {secondDialogOpen && (
-                <Dialog
-                  header="Dialog 2"
-                  id="2"
-                  onActivate={({activeElement}) => activeElement?.focus()}
-                  onClose={() => setSecondDialogOpen(false)}
-                >
-                  <Stack space={2} padding={3}>
-                    <Button
-                      mode="ghost"
-                      text="Open dialog 3"
-                      onClick={() => setThirdDialogOpen(true)}
-                      id="open-dialog-3-button-1"
-                    />
-                    <Button
-                      mode="ghost"
-                      text="Open dialog 3"
-                      onClick={() => setThirdDialogOpen(true)}
-                      id="open-dialog-3-button-2"
-                    />
-                    <Button
-                      mode="ghost"
-                      text="Open dialog 3"
-                      onClick={() => setThirdDialogOpen(true)}
-                      id="open-dialog-3-button-3"
-                    />
-                  </Stack>
-
-                  {thirdDialogOpen && (
-                    <Dialog
-                      header="Dialog 3"
-                      id="3"
-                      onActivate={({activeElement}) => activeElement?.focus()}
-                      onClose={() => setThirdDialogOpen(false)}
-                    >
-                      <Stack space={2} padding={3}>
-                        <MenuButton
-                          id="menu"
-                          button={
-                            <Button mode="ghost" text="Open menu" id="open-dialog-4-menu-button" />
-                          }
-                          menu={
-                            <Menu>
-                              <MenuItem
-                                text="Open dialog 4"
-                                onClick={() => setFourthDialogOpen(true)}
-                              />
-                              <MenuItem
-                                text="Open dialog 4"
-                                onClick={() => setFourthDialogOpen(true)}
-                              />
-                              <MenuItem
-                                text="Open dialog 4"
-                                onClick={() => setFourthDialogOpen(true)}
-                              />
-                            </Menu>
-                          }
-                        />
-                      </Stack>
-
-                      {fourthDialogOpen && (
-                        <Dialog
-                          header="Dialog 4"
-                          id="4"
-                          onActivate={({activeElement}) => activeElement?.focus()}
-                          onClose={() => setFourthDialogOpen(false)}
-                        >
-                          <Stack space={2} padding={3}>
-                            <Text>👋</Text>
-                          </Stack>
-                        </Dialog>
-                      )}
-                    </Dialog>
-                  )}
-                </Dialog>
-              )}
-            </Dialog>
-          )}
-        </Layer>
-      </Flex>
-    </LayerProvider>
-  )
-}

package/src/core/components/dialog/__workshop__/autoFocus.tsx

@@ -1,29 +0,0 @@
-import {Box, Button, Dialog, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function AutoFocusStory() {
-  const autoFocus = useBoolean('Auto-focus', true, 'Props')
-  const open = useBoolean('Open', false, 'Props')
-  const handleClose = useAction('onClose')
-
-  if (!open) {
-    return (
-      <Box padding={4}>
-        <Text muted>Use knobs to open the dialog</Text>
-      </Box>
-    )
-  }
-
-  return (
-    <Dialog
-      __unstable_autoFocus={autoFocus}
-      header="Auto-focus example"
-      id="auto-focus-example"
-      onClose={handleClose}
-    >
-      <Box padding={4}>
-        <Button text="Focusable button" />
-      </Box>
-    </Dialog>
-  )
-}

package/src/core/components/dialog/__workshop__/index.ts

@@ -1,19 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/dialog',
-  title: 'Dialog',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
-    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
-    {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
-    {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
-    {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
-    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
-    {name: 'panes', title: 'Panes', component: lazy(() => import('./panes'))},
-    {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
-    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
-  ],
-})

package/src/core/components/dialog/__workshop__/layering.tsx

@@ -1,41 +0,0 @@
-import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
-
-export default function LayeringStory() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <LayerProvider>
-        <Layer zOffset={10} id="a">
-          <Card padding={2} shadow={2}>
-            <DebugLayer />
-          </Card>
-        </Layer>
-        <Layer zOffset={10} id="b">
-          <Card padding={2} shadow={2}>
-            <DebugLayer />
-          </Card>
-        </Layer>
-        <Dialog
-          header="Layering example"
-          id="layering-example"
-          onClose={useAction('onEscape')}
-          zOffset={100}
-        >
-          <Box padding={4}>
-            <DebugLayer />
-          </Box>
-        </Dialog>
-      </LayerProvider>
-    </Box>
-  )
-}
-
-function DebugLayer() {
-  const layer = useLayer()
-
-  return (
-    <Code language="json" size={1}>
-      {JSON.stringify(layer, null, 2)}
-    </Code>
-  )
-}