@sanity/ui 3.3.2 → 3.3.3

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

@@ -1,46 +0,0 @@
-import {useCallback} from 'react'
-
-import {_isEnterToClickElement} from '../../helpers'
-
-export interface AutocompleteOptionProps {
-  children: React.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: React.KeyboardEvent<HTMLLIElement>) => {
-      if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {
-        handleClick()
-      }
-    },
-    [handleClick],
-  )
-
-  return (
-    <li
-      aria-selected={selected}
-      data-ui="AutocompleteOption"
-      id={id}
-      // oxlint-disable-next-line no-noninteractive-element-to-interactive-role, prefer-tag-over-role
-      role="option"
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-    >
-      {children}
-    </li>
-  )
-}

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

@@ -1,47 +0,0 @@
-import {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 {Placement} from '../../types'
-
-/**
- * @internal
- */
-export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
-  '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/index.ts

@@ -1,2 +0,0 @@
-export * from './autocomplete'
-export * from './types'

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

@@ -1,108 +0,0 @@
-import {ButtonOwnProps} from '../../primitives'
-
-/**
- * @public
- */
-export type AutocompleteOpenButtonProps = ButtonOwnProps &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
-
-/**
- * @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/breadcrumbs.styles.ts

@@ -1,18 +0,0 @@
-import {styled} from 'styled-components'
-
-import {Button} from '../../primitives'
-
-export const StyledBreadcrumbs = styled.ol`
-  margin: 0;
-  padding: 0;
-  display: flex;
-  list-style: none;
-  align-items: center;
-  white-space: nowrap;
-  line-height: 0;
-`
-
-export const ExpandButton = styled(Button)`
-  appearance: none;
-  margin: -4px;
-`

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

@@ -1,54 +0,0 @@
-/** @vitest-environment jsdom */
-
-import {beforeEach, describe, expect, it, vi} from 'vitest'
-
-import {render} from '../../../../test'
-import {Box} from '../../primitives'
-import {Breadcrumbs} from './breadcrumbs'
-
-vi.mock('../../primitives', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('../../primitives')>()
-
-  return {
-    ...actual,
-    // oxlint-disable-next-line no-unsafe-type-assertion
-    Box: vi.fn((props: Record<string, unknown>) => (actual.Box as any).render(props, null)),
-  }
-})
-
-function renderBreadcrumbs(props: Partial<React.ComponentProps<typeof Breadcrumbs>> = {}) {
-  return render(
-    <Breadcrumbs {...props}>
-      <span>Root</span>
-      <span>Section</span>
-    </Breadcrumbs>,
-  )
-}
-
-describe('components/breadcrumbs spacing', () => {
-  const mockedBox = vi.mocked(Box)
-
-  beforeEach(() => {
-    mockedBox.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    renderBreadcrumbs({space: 2})
-    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({paddingX: [2]}),
-    )
-
-    mockedBox.mockClear()
-    renderBreadcrumbs({gap: 2})
-    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
-      expect.objectContaining({paddingX: [2]}),
-    )
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    renderBreadcrumbs({gap: 3, space: 1})
-    const propsList = mockedBox.mock.calls.map(([props]) => props)
-    expect(propsList).toContainEqual(expect.objectContaining({paddingX: [3]}))
-    expect(propsList).not.toContainEqual(expect.objectContaining({paddingX: [1]}))
-  })
-})

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

@@ -1,136 +0,0 @@
-import {
-  Children,
-  forwardRef,
-  Fragment,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import {useClickOutsideEvent} from '../../hooks'
-import {Box, Popover, Stack, Text} from '../../primitives'
-import {_getArrayProp} from '../../styles'
-import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
-
-/**
- * @beta
- */
-export interface BreadcrumbsProps {
-  maxLength?: number
-  separator?: React.ReactNode
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-}
-
-/**
- * @beta
- */
-export const Breadcrumbs = forwardRef(function Breadcrumbs(
-  props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
-  ref: React.ForwardedRef<HTMLOListElement>,
-) {
-  // oxlint-disable-next-line no-deprecated
-  const {children, gap, maxLength, separator, space: deprecated_space = 2, ...restProps} = props
-  const space = _getArrayProp(gap === undefined ? deprecated_space : gap)
-  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,
-    rawItems,
-    space,
-  })
-
-  return (
-    <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
-      {items.map((item, itemIndex) => (
-        // oxlint-disable-next-line no-array-index-key
-        <Fragment key={itemIndex}>
-          {itemIndex > 0 && (
-            <Box aria-hidden as="li" paddingX={space}>
-              {separator || <Text muted>/</Text>}
-            </Box>
-          )}
-          <Box as="li">{item}</Box>
-        </Fragment>
-      ))}
-    </StyledBreadcrumbs>
-  )
-})
-Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'
-
-function useItems({
-  collapse,
-  expand,
-  expandElementRef,
-  maxLength,
-  open,
-  popoverElementRef,
-  rawItems,
-  space,
-}: {
-  collapse: () => void
-  expand: () => void
-  expandElementRef: React.RefObject<HTMLButtonElement | null>
-  maxLength: number | undefined
-  open: boolean
-  popoverElementRef: React.RefObject<HTMLDivElement | null>
-  // oxlint-disable-next-line no-unnecessary-type-arguments
-  rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]
-  space: number[]
-}) {
-  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" overflow="auto" padding={space} gap={space}>
-            {rawItems.slice(beforeLength - 1, len - afterLength)}
-          </Stack>
-        }
-        key="button"
-        open={open}
-        placement="top"
-        portal
-        ref={popoverElementRef}
-      >
-        <ExpandButton
-          fontSize={1}
-          mode="bleed"
-          onClick={open ? collapse : expand}
-          padding={1}
-          ref={expandElementRef}
-          selected={open}
-          text="…"
-        />
-      </Popover>,
-      ...rawItems.slice(len - afterLength),
-    ]
-  }
-
-  return rawItems
-}

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

@@ -1 +0,0 @@
-export * from './breadcrumbs'