@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/src/core/components/autocomplete/autocompleteOption.tsx

@@ -1,45 +0,0 @@
-import {type KeyboardEvent, type ReactNode, useCallback} from 'react'
-
-import {_isEnterToClickElement} from '../../helpers/element'
-
-export interface AutocompleteOptionProps {
-  children: ReactNode
-  id: string
-  onSelect: (v: string) => void
-  selected: boolean
-  value: string
-}
-
-export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {
-  const {children, id, onSelect, selected, value} = props
-
-  const handleClick = useCallback(() => {
-    // Calling the `onSelect` in a timeout is a fix to
-    // allow the `click` event to propagate in some cases
-    setTimeout(() => {
-      onSelect(value)
-    }, 0)
-  }, [onSelect, value])
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLLIElement>) => {
-      if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {
-        handleClick()
-      }
-    },
-    [handleClick],
-  )
-
-  return (
-    <li
-      aria-selected={selected}
-      data-ui="AutocompleteOption"
-      id={id}
-      role="option"
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-    >
-      {children}
-    </li>
-  )
-}

package/src/core/components/autocomplete/autocompleteReducer.ts

@@ -1,47 +0,0 @@
-import type {AutocompleteMsg, AutocompleteState} from './types'
-
-/**
- * @internal
- */
-export function autocompleteReducer(
-  state: AutocompleteState,
-  msg: AutocompleteMsg,
-): AutocompleteState {
-  if (msg.type === 'input/change') {
-    return {...state, activeValue: null, focused: true, query: msg.query}
-  }
-
-  if (msg.type === 'input/focus') {
-    return {...state, focused: true}
-  }
-
-  if (msg.type === 'root/blur') {
-    return {...state, focused: false, query: null}
-  }
-
-  if (msg.type === 'root/clear') {
-    return {...state, activeValue: null, query: null, value: null}
-  }
-
-  if (msg.type === 'root/escape') {
-    return {...state, focused: false, query: null}
-  }
-
-  if (msg.type === 'root/open') {
-    return {...state, query: state.query || msg.query}
-  }
-
-  if (msg.type === 'root/setActiveValue') {
-    return {...state, activeValue: msg.value, listFocused: msg.listFocused || state.listFocused}
-  }
-
-  if (msg.type === 'root/setListFocused') {
-    return {...state, listFocused: msg.listFocused}
-  }
-
-  if (msg.type === 'value/change') {
-    return {...state, activeValue: msg.value, query: null, value: msg.value}
-  }
-
-  return state
-}

package/src/core/components/autocomplete/constants.ts

@@ -1,28 +0,0 @@
-import type {Placement} from '../../types'
-
-/**
- * @internal
- */
-export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS: string[] = [
-  'Control',
-  'Shift',
-  'Alt',
-  'Enter',
-  'Home',
-  'End',
-  'PageUp',
-  'PageDown',
-  'Meta',
-  'Tab',
-  'CapsLock',
-]
-
-/**
- * @internal
- */
-export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'
-
-/**
- * @internal
- */
-export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']

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

@@ -1,103 +0,0 @@
-import type {ButtonProps} from '../../primitives/button/button'
-
-/** @public */
-export type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
-
-/** @public */
-export interface BaseAutocompleteOption {
-  value: string
-}
-
-/**
- * @internal
- */
-export interface AutocompleteState {
-  activeValue: string | null
-  focused: boolean
-  listFocused: boolean
-  query: string | null
-  value: string | null
-}
-
-/**
- * @internal
- */
-export interface AutocompleteRootBlurMsg {
-  type: 'root/blur'
-}
-
-/**
- * @internal
- */
-export interface AutocompleteRootClearMsg {
-  type: 'root/clear'
-}
-
-/**
- * @internal
- */
-export interface AutocompleteRootEscapeMsg {
-  type: 'root/escape'
-}
-
-/**
- * @internal
- */
-export interface AutocompleteRootOpenMsg {
-  type: 'root/open'
-  query: string | null
-}
-
-/**
- * @internal
- */
-export interface AutocompleteRootSetActiveValueMsg {
-  type: 'root/setActiveValue'
-  value: string
-  listFocused?: boolean
-}
-
-/**
- * @internal
- */
-export interface AutocompleteRootSetListFocusedMsg {
-  type: 'root/setListFocused'
-  listFocused: boolean
-}
-
-/**
- * @internal
- */
-export interface AutocompleteInputChangeMsg {
-  type: 'input/change'
-  query: string | null
-}
-
-/**
- * @internal
- */
-export interface AutocompleteInputFoocusMsg {
-  type: 'input/focus'
-}
-
-/**
- * @internal
- */
-export interface AutocompleteValueChangeMsg {
-  type: 'value/change'
-  value: string | null
-}
-
-/**
- * @internal
- */
-export type AutocompleteMsg =
-  | AutocompleteRootBlurMsg
-  | AutocompleteRootClearMsg
-  | AutocompleteRootEscapeMsg
-  | AutocompleteRootOpenMsg
-  | AutocompleteRootSetActiveValueMsg
-  | AutocompleteRootSetListFocusedMsg
-  | AutocompleteInputChangeMsg
-  | AutocompleteInputFoocusMsg
-  | AutocompleteValueChangeMsg

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

@@ -1,61 +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 ExampleStory(): React.JSX.Element {
-  const maxLength = useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Breadcrumbs
-        gap={2}
-        maxLength={maxLength}
-        separator={
-          <Text muted size={1}>
-            /
-          </Text>
-        }
-      >
-        <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,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'components/breadcrumbs',
-  title: 'Breadcrumbs',
-  stories: [
-    {
-      name: 'example',
-      title: 'Example',
-      component: lazy(() => import('./example')),
-    },
-  ],
-}
-
-export default scope

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

@@ -1,131 +0,0 @@
-import {breadcrumbs, type GapStyleProps} from '@sanity/ui/css'
-import {
-  Children,
-  Fragment,
-  isValidElement,
-  type ReactNode,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
-import {Box} from '../../primitives/box/box'
-import {Button, type ButtonProps} from '../../primitives/button/button'
-import {Flex} from '../../primitives/flex/flex'
-import {Popover} from '../../primitives/popover/popover'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
-import type {ComponentType, Props} from '../../types'
-
-/** @beta */
-export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
-
-/** @beta */
-export type BreadcrumbsOwnProps = GapStyleProps & {
-  expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
-  maxLength?: number
-  separator?: ReactNode
-}
-
-/** @beta */
-export type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
-
-/** @beta */
-export type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> = Props<
-  BreadcrumbsOwnProps,
-  E
->
-
-/** @beta */
-export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT>(
-  props: BreadcrumbsProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_BREADCRUMBS_ELEMENT,
-    children,
-    className,
-    expandButton: expandButtonProps,
-    gap = 2,
-    gapX,
-    gapY,
-    maxLength,
-    separator,
-    ...rest
-  } = props as BreadcrumbsProps<typeof DEFAULT_BREADCRUMBS_ELEMENT>
-
-  const [open, setOpen] = useState(false)
-  const expandElementRef = useRef<HTMLButtonElement | null>(null)
-  const popoverElementRef = useRef<HTMLDivElement | null>(null)
-
-  const collapse = useCallback(() => setOpen(false), [])
-  const expand = useCallback(() => setOpen(true), [])
-
-  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])
-
-  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
-
-  const items = useMemo(() => {
-    const len = rawItems.length
-
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2)
-      const afterLength = Math.floor(maxLength / 2)
-
-      return [
-        ...rawItems.slice(0, beforeLength - 1),
-        <Popover
-          constrainSize
-          content={
-            <Stack as="ol" gap={gapY} overflow="auto">
-              {rawItems.slice(beforeLength - 1, len - afterLength)}
-            </Stack>
-          }
-          key="button"
-          open={open}
-          padding={2}
-          placement="top"
-          portal
-          ref={popoverElementRef}
-        >
-          <Button
-            mode="bleed"
-            padding={0}
-            text="…"
-            {...expandButtonProps}
-            onClick={open ? collapse : expand}
-            ref={expandElementRef}
-            selected={open}
-          />
-        </Popover>,
-        ...rawItems.slice(len - afterLength),
-      ]
-    }
-
-    return rawItems
-  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
-
-  return (
-    <Flex
-      as={as}
-      data-ui="Breadcrumbs"
-      {...rest}
-      className={breadcrumbs({className})}
-      gap={gap}
-      gapX={gapX}
-      gapY={gapY}
-    >
-      {items.map((item, itemIndex) => (
-        <Fragment key={itemIndex}>
-          {itemIndex > 0 && (
-            <Box aria-hidden as="li">
-              {separator || <Text muted>/</Text>}
-            </Box>
-          )}
-          <Box as="li">{item}</Box>
-        </Fragment>
-      ))}
-    </Flex>
-  )
-}

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

@@ -1,141 +0,0 @@
-import {
-  Button,
-  Dialog,
-  Flex,
-  Layer,
-  LayerProvider,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useState} from 'react'
-
-export default function LayeringFocusStory(): React.JSX.Element {
-  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 gap={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 gap={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 gap={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 gap={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(): React.JSX.Element {
-  const autoFocus = useBoolean('Auto-focus', true)
-  const open = useBoolean('Open', false)
-  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,21 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  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'))},
-  ],
-}
-
-export default scope

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(): React.JSX.Element {
-  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>
-  )
-}