@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/components/autocomplete/constants.ts

@@ -0,0 +1,28 @@
+import type {Placement} from '../../core/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/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/components/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,163 @@
+import {type GapStyleProps} from '@sanity/ui-css'
+import {
+  Children,
+  Fragment,
+  isValidElement,
+  type ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import type {ComponentType, Props} from '../../core/types'
+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, type PopoverProps} from '../../primitives/popover/Popover'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
+
+/** @beta */
+export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
+
+/** @beta */
+export type BreadcrumbsOwnProps = GapStyleProps & {
+  expandButton?: Omit<ButtonProps, 'as' | 'onClick' | 'selected'>
+  maxLength?: number
+  popover?: PopoverProps
+  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,
+    expandButton: expandButtonProps,
+    gap = 2,
+    gapX = gap,
+    gapY = gap,
+    maxLength,
+    popover: popoverProps,
+    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 = useItems({
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    popoverProps,
+    rawItems,
+    gapY,
+    expandButtonProps,
+  })
+
+  return (
+    <Flex as={as} data-ui="Breadcrumbs" {...rest} gap={gap} gapX={gapX} gapY={gapY} wrap="wrap">
+      {items.map((item, itemIndex) => (
+        <Fragment key={itemIndex}>
+          {itemIndex > 0 && (
+            <Box aria-hidden as="li" flex="none">
+              {separator || <Text muted>/</Text>}
+            </Box>
+          )}
+          <Box as="li" flex="none">
+            {item}
+          </Box>
+        </Fragment>
+      ))}
+    </Flex>
+  )
+}
+
+function useItems({
+  collapse,
+  expand,
+  expandElementRef,
+  maxLength,
+  open,
+  popoverElementRef,
+  popoverProps,
+  rawItems,
+  gapY,
+  expandButtonProps,
+}: {
+  collapse: () => void
+  expand: () => void
+  expandElementRef: React.RefObject<HTMLButtonElement | null>
+  maxLength: number | undefined
+  open: boolean
+  popoverElementRef: React.RefObject<HTMLDivElement | null>
+  popoverProps?: PopoverProps
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]
+  gapY: NonNullable<GapStyleProps['gapY']>
+  expandButtonProps: BreadcrumbsOwnProps['expandButton']
+}): React.JSX.Element[] {
+  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
+        key="button"
+        constrainSize
+        open={open}
+        padding={2}
+        placement="top"
+        portal
+        {...popoverProps}
+        ref={popoverElementRef}
+        content={
+          <Stack as="ol" gap={gapY} overflow="auto">
+            {rawItems.slice(beforeLength - 1, len - afterLength)}
+          </Stack>
+        }
+      >
+        <Button
+          mode="bleed"
+          padding={0}
+          text="…"
+          {...expandButtonProps}
+          ref={expandElementRef}
+          selected={open}
+          onClick={open ? collapse : expand}
+        />
+      </Popover>,
+      ...rawItems.slice(len - afterLength),
+    ]
+  }
+
+  return rawItems
+}

package/src/components/breadcrumbs/__workshop__/Example.tsx

@@ -0,0 +1,49 @@
+import {EllipsisHorizontalIcon} from '@sanity/icons'
+import {Box, Breadcrumbs, Button, Flex, Text} from '@sanity/ui'
+import {SPACE} from '@sanity/ui/tokens'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+const items = ['List 1', 'List 2', 'List 3', 'List 4', 'List 5', 'List 6', 'List 7']
+
+const MAX_LENGTH_OPTIONS = [undefined, ...items.map((_, index) => index + 1)]
+
+export default function ExampleStory(): React.JSX.Element {
+  const maxLength = useSelect('Max. length', MAX_LENGTH_OPTIONS)
+  const gap = useSelect('Gap', [undefined, ...SPACE])
+
+  return (
+    <CardWrapper>
+      <Flex align="center" height="fill" justify="center">
+        <Breadcrumbs
+          expandButton={{
+            icon: EllipsisHorizontalIcon,
+            padding: 2,
+            text: undefined,
+          }}
+          gap={gap}
+          maxLength={maxLength}
+          popover={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1,
+            padding: 1,
+            placement: 'bottom',
+          }}
+          separator={
+            <Box paddingY={2}>
+              <Text muted size={1} style={{opacity: 0.5}}>
+                /
+              </Text>
+            </Box>
+          }
+        >
+          {items.map((item) => (
+            <Button key={item} mode="bleed" padding={2} text={item} />
+          ))}
+        </Breadcrumbs>
+      </Flex>
+    </CardWrapper>
+  )
+}

package/src/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/components/dialog/Dialog.tsx

@@ -0,0 +1,230 @@
+import {
+  type ContainerStyleProps,
+  dialog,
+  dialog_container,
+  type ResponsiveProp,
+} from '@sanity/ui-css'
+import type {Radius, Shadow} from '@sanity/ui-tokens'
+import {type FocusEvent, type ForwardedRef, type ReactNode, use, useCallback, useRef} from 'react'
+
+import {Z_OFFSETS} from '../../core/constants'
+import {isHTMLElement} from '../../core/helpers/element'
+import {focusFirstDescendant, focusLastDescendant} from '../../core/helpers/focus'
+import type {ComponentType, Props} from '../../core/types'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {Container} from '../../primitives/container/Container'
+import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/Layer'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
+import {Portal} from '../../utils/portal/Portal'
+import {usePortal} from '../../utils/portal/usePortal'
+import {DialogCard} from './DialogCard'
+import {isTargetWithinScope} from './isTargetWithinScope'
+import type {DialogPosition} from './types'
+import {useDialog} from './useDialog'
+
+/** @public */
+export const DEFAULT_DIALOG_ELEMENT = 'div'
+
+/** @public */
+export interface DialogOwnProps
+  extends
+    Omit<ContainerStyleProps, 'id' | 'position' | 'radius' | 'shadow'>,
+    Omit<LayerOwnProps, 'id' | 'position' | 'radius' | 'shadow' | 'width'> {
+  /**
+   * @beta
+   */
+  __unstable_autoFocus?: boolean
+  /**
+   * @beta
+   */
+  __unstable_hideCloseButton?: boolean
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
+  cardRadius?: ResponsiveProp<Radius>
+  contentRef?: ForwardedRef<HTMLDivElement>
+  footer?: ReactNode
+  header?: ReactNode
+  id: string
+  /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
+  onActivate?: LayerProps['onActivate']
+  onClickOutside?: () => void
+  onClose?: () => void
+  open?: boolean
+  portal?: string
+  position?: ResponsiveProp<DialogPosition>
+  /**
+   * @deprecated Not in use – will be removed in the next major version.
+   */
+  shadow?: ResponsiveProp<Shadow>
+}
+
+/** @public */
+export type DialogElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export type DialogProps<E extends DialogElementType = DialogElementType> = Props<DialogOwnProps, E>
+
+/**
+ * The Dialog component.
+ *
+ * @public
+ */
+export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
+  props: DialogProps<E>,
+): React.JSX.Element {
+  const context = useDialog()
+  const {
+    __unstable_autoFocus: autoFocus = true,
+    __unstable_hideCloseButton: hideCloseButton = false,
+    animate: _animate = true,
+    cardRadius = 5,
+    children,
+    className,
+    contentRef,
+    footer,
+    header,
+    id,
+    onActivate,
+    onClickOutside,
+    onClose,
+    onFocus,
+    padding = 3,
+    portal: portalProp,
+    position: _positionProp,
+    // Remove `shadow` prop in next major version
+    shadow: _shadow,
+    width = 0,
+    zOffset: _zOffsetProp,
+    ...rest
+  } = props as DialogProps<typeof DEFAULT_DIALOG_ELEMENT>
+
+  const position = _positionProp ?? context.position ?? 'fixed'
+  const zOffset = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const animate = prefersReducedMotion ? false : _animate
+  const portal = usePortal()
+  const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
+  const boundaryElement = use(BoundaryElementContext)
+
+  const preDivRef = useRef<HTMLDivElement | null>(null)
+  const postDivRef = useRef<HTMLDivElement | null>(null)
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const focusedElementRef = useRef<HTMLElement | null>(null)
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      onFocus?.(event)
+
+      const target = event.target
+      const cardElement = cardRef.current
+
+      if (cardElement && target === preDivRef.current) {
+        focusLastDescendant(cardElement)
+
+        return
+      }
+
+      if (cardElement && target === postDivRef.current) {
+        focusFirstDescendant(cardElement)
+
+        return
+      }
+
+      if (isHTMLElement(event.target)) {
+        focusedElementRef.current = event.target
+      }
+    },
+    [onFocus],
+  )
+
+  const labelId = `${id}_label`
+
+  const rootClickTimeoutRef = useRef<NodeJS.Timeout>(undefined)
+
+  // If the resulting active element (a.k.a. focused element) is not withing scope when clicking
+  // within the dialog, then we want to focus the previously interactive element in the dialog instead.
+  // This is to allow the user to tab or close the dialog by pressing escape.
+  const handleRootClick = useCallback(() => {
+    if (rootClickTimeoutRef.current) {
+      clearTimeout(rootClickTimeoutRef.current)
+    }
+
+    rootClickTimeoutRef.current = setTimeout(() => {
+      const activeElement = document.activeElement
+
+      if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
+        const target = focusedElementRef.current
+
+        if (!target || !document.body.contains(target)) {
+          // No previously focused element, or it's not in the document anymore
+          const cardElement = cardRef.current
+          if (cardElement) focusFirstDescendant(cardElement)
+
+          return
+        }
+
+        target.focus()
+      }
+    }, 0)
+  }, [boundaryElement, portalElement])
+
+  return (
+    <Portal __unstable_name={portalProp}>
+      <Layer
+        data-ui="Dialog"
+        {...rest}
+        aria-labelledby={labelId}
+        aria-modal
+        className={dialog({className})}
+        data-animate={animate ? '' : undefined}
+        display="flex"
+        id={id}
+        inset={0}
+        padding={padding}
+        position={position}
+        role="dialog"
+        zOffset={zOffset}
+        onActivate={onActivate}
+        onClick={handleRootClick}
+        onFocus={handleFocus}
+      >
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+        <div ref={preDivRef} tabIndex={0} />
+        <Container
+          alignItems="center"
+          className={dialog_container()}
+          data-ui="DialogCard"
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          width={width}
+        >
+          <DialogCard
+            ref={cardRef}
+            __unstable_autoFocus={autoFocus}
+            __unstable_hideCloseButton={hideCloseButton}
+            contentRef={contentRef}
+            footer={footer}
+            header={header}
+            id={id}
+            portal={portalProp}
+            radius={cardRadius}
+            shadow={4}
+            width={width}
+            onClickOutside={onClickOutside}
+            onClose={onClose}
+          >
+            {children}
+          </DialogCard>
+        </Container>
+        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
+        <div ref={postDivRef} tabIndex={0} />
+      </Layer>
+    </Portal>
+  )
+}