@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

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

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

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

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

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

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

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

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

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

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

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

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