@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/components/autocomplete/constants.ts

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

@@ -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/components/breadcrumbs/Breadcrumbs.tsx

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

@@ -1,48 +0,0 @@
-import {EllipsisHorizontalIcon} from '@sanity/icons'
-import {Box, Breadcrumbs, Button, Flex, SPACE, Text} from '@sanity/ui'
-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

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

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