@sanity/ui 3.0.2 → 4.0.0-static.2

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

@@ -1,15 +1,15 @@
 import {ChevronDownIcon} from '@sanity/icons'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Radius, Space} from '@sanity/ui/theme'
 import {
-  ChangeEvent,
+  type ChangeEvent,
   cloneElement,
-  ElementType,
-  FocusEvent,
-  forwardRef,
-  HTMLProps,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-  Ref,
+  type ElementType,
+  type FocusEvent,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -19,21 +19,18 @@ import {
 } from 'react'
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
-import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
-import {
-  Box,
-  BoxProps,
-  Button,
-  Card,
-  Popover,
-  PopoverProps,
-  Stack,
-  Text,
-  TextInput,
-} from '../../primitives'
-import {Radius} from '../../types'
-import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
+import {_raf} from '../../helpers/animation'
+import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {Box, type BoxOwnProps} from '../../primitives/box/box'
+import {Button} from '../../primitives/button/button'
+import {Popover, type PopoverProps} from '../../primitives/popover/popover'
+import {Selectable} from '../../primitives/selectable/selectable'
+import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
+import {Stack} from '../../primitives/stack/stack'
+import {Text} from '../../primitives/text/text'
+import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/textInput'
+import type {ComponentType, Props} from '../../types'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -41,55 +38,62 @@ import {
   AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
   AUTOCOMPLETE_POPOVER_PLACEMENT,
 } from './constants'
-import {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
-
-/**
- * @public
- */
-export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
-  border?: boolean
-  customValidity?: string
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
-  icon?: ElementType | ReactNode
-  id: string
-  /** @beta */
-  listBox?: BoxProps
-  loading?: boolean
-  onChange?: (value: string) => void
-  onQueryChange?: (query: string | null) => void
-  onSelect?: (value: string) => void
-  /** @beta */
-  openButton?: boolean | AutocompleteOpenButtonProps
-  /** @beta */
-  openOnFocus?: boolean
-  /** The options to render. */
-  options?: Option[]
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
-  prefix?: ReactNode
-  radius?: Radius | Radius[]
-  /** @beta */
-  relatedElements?: HTMLElement[]
-  /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => React.JSX.Element
-  /** @beta */
-  renderPopover?: (
-    props: {
-      content: React.JSX.Element | null
-      hidden: boolean
-      inputElement: HTMLInputElement | null
-      onMouseEnter: () => void
-      onMouseLeave: () => void
-    },
-    ref: Ref<HTMLDivElement>,
-  ) => ReactNode
-  renderValue?: (value: string, option?: Option) => string
-  suffix?: ReactNode
-  /** The current value. */
-  value?: string
-}
+import type {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
+
+/** @public */
+export const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
+
+/** @public */
+export type AutocompleteOwnProps<O extends BaseAutocompleteOption = BaseAutocompleteOption> =
+  TextInputOwnProps & {
+    border?: boolean
+    customValidity?: string
+    filterOption?: (query: string, option: O) => boolean
+    icon?: ElementType | ReactNode
+    /** @beta */
+    listBox?: BoxOwnProps
+    loading?: boolean
+    onChange?: (value: string) => void
+    onQueryChange?: (query: string | null) => void
+    onSelect?: (value: string) => void
+    /** @beta */
+    openButton?: boolean | AutocompleteOpenButtonProps
+    /** @beta */
+    openOnFocus?: boolean
+    /** The options to render. */
+    options?: O[]
+    padding?: ResponsiveProp<Space>
+    popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
+    prefix?: ReactNode
+    radius?: Radius | Radius[]
+    /** @beta */
+    relatedElements?: HTMLElement[]
+    /** The callback function for rendering each option. */
+    renderOption?: (option: O) => React.JSX.Element
+    /** @beta */
+    renderPopover?: (
+      props: {
+        content: React.JSX.Element | null
+        hidden: boolean
+        inputElement: HTMLInputElement | null
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      },
+      ref: ForwardedRef<HTMLDivElement>,
+    ) => ReactNode
+    renderValue?: (value: string, option?: O) => string
+    suffix?: ReactNode
+    value?: string
+  }
+
+/** @public */
+export type AutocompleteElementType = 'input' | ComponentType
+
+/** @public */
+export type AutocompleteProps<
+  E extends AutocompleteElementType = AutocompleteElementType,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+> = Props<AutocompleteOwnProps<O>, E>
 
 const DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>
   option ? option.value : value
@@ -97,35 +101,18 @@ const DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>
 const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
   option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
 
-const InnerAutocomplete = forwardRef(function InnerAutocomplete<
-  Option extends BaseAutocompleteOption,
->(
-  props: AutocompleteProps<Option> &
-    Omit<
-      HTMLProps<HTMLInputElement>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'popover'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    >,
-  forwardedRef: React.ForwardedRef<HTMLInputElement>,
-) {
+/**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
+ * @public
+ */
+export function Autocomplete<
+  E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+>(props: AutocompleteProps<E, O>): React.JSX.Element {
   const {
+    as = DEFAULT_AUTOCOMPLETE_ELEMENT,
     border = true,
     customValidity,
     disabled,
@@ -148,14 +135,15 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     prefix,
     radius = 2,
     readOnly,
+    ref: forwardedRef,
     relatedElements,
     renderOption: renderOptionProp,
     renderPopover,
     renderValue = DEFAULT_RENDER_VALUE,
     suffix,
     value: valueProp,
-    ...restProps
-  } = props
+    ...rest
+  } = props as AutocompleteProps<typeof DEFAULT_AUTOCOMPLETE_ELEMENT, O>
 
   const [state, dispatch] = useReducer(autocompleteReducer, {
     activeValue: valueProp || null,
@@ -169,11 +157,11 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card data-as="button" padding={paddingProp} radius={2} tone="inherit">
+      <Selectable as="button" padding={paddingProp} radius={2}>
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
-      </Card>
+      </Selectable>
     ),
     [fontSize, paddingProp],
   )
@@ -188,7 +176,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const rootElementRef = useRef<HTMLDivElement | null>(null)
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
-  const listBoxElementRef = useRef<HTMLDivElement | null>(null)
+  const listBoxElementRef = useRef<HTMLUListElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
@@ -204,7 +192,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useArrayProp(paddingProp)
+  const padding = useResponsiveProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value],
@@ -460,18 +448,25 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     return undefined
   }, [disabled, handleClearButtonFocus, loading, value])
 
-  const openButtonBoxPadding = useMemo(
-    () =>
-      padding.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
+  const openButtonBoxPadding = useMemo(() => {
+    const result = Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
 
-        return v - 2
+        return [key, (value as Space) - 2]
       }),
+    ) as ResponsiveProp<Space>
+
+    return result
+  }, [padding])
+
+  const openButtonPadding = useMemo(
+    () => Object.values(padding).map((v) => Math.max((v as Space) - 1, 0)) as ResponsiveProp<Space>,
     [padding],
   )
-  const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])
+
   const openButtonProps: AutocompleteOpenButtonProps = useMemo(
     () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
     [openButton],
@@ -495,6 +490,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
           <Button
             aria-label="Open"
             disabled={expanded}
+            display="block"
             fontSize={fontSize}
             icon={ChevronDownIcon}
             mode="bleed"
@@ -531,7 +527,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const input = (
     <TextInput
-      {...restProps}
+      {...rest}
       aria-activedescendant={activeItemId}
       aria-autocomplete="list"
       aria-expanded={expanded}
@@ -539,6 +535,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       autoCapitalize="off"
       autoComplete="off"
       autoCorrect="off"
+      as={as}
       border={border}
       clearButton={clearButton}
       customValidity={customValidity}
@@ -577,7 +574,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     if (filteredOptions.length === 0) return null
 
     return (
-      <ListBox
+      <Box
         data-ui="AutoComplete__results"
         onKeyDown={handleListBoxKeyDown}
         padding={1}
@@ -588,10 +585,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
           as="ul"
           aria-multiselectable={false}
           data-ui="AutoComplete__resultsList"
+          gap={1}
           id={listBoxId}
           ref={listBoxElementRef}
           role="listbox"
-          space={1}
         >
           {filteredOptions.map((option) => {
             const active =
@@ -614,7 +611,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
             )
           })}
         </Stack>
-      </ListBox>
+      </Box>
     )
   }, [
     activeValue,
@@ -661,7 +658,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         overflow="auto"
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
-        radius={radius}
+        radius={3}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}
@@ -674,12 +671,12 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
     popover,
-    radius,
     renderPopover,
   ])
 
   return (
-    <StyledAutocomplete
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
       data-ui="Autocomplete"
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
@@ -688,42 +685,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     >
       {input}
       {results}
-    </StyledAutocomplete>
+    </div>
   )
-})
-
-InnerAutocomplete.displayName = 'ForwardRef(Autocomplete)'
-
-/**
- * The Autocomplete component is typically used for search components.
- * It consists of a text input for writing a query, and properties for rendering suggestions.
- *
- * @public
- */
-export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(
-  props: AutocompleteProps<Option> &
-    Omit<
-      HTMLProps<HTMLInputElement>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'popover'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    > & {
-      ref?: Ref<HTMLInputElement>
-    },
-) => React.JSX.Element
+}

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

@@ -1,9 +1,9 @@
-import {useCallback} from 'react'
+import {type KeyboardEvent, type ReactNode, useCallback} from 'react'
 
-import {_isEnterToClickElement} from '../../helpers'
+import {_isEnterToClickElement} from '../../helpers/element'
 
 export interface AutocompleteOptionProps {
-  children: React.ReactNode
+  children: ReactNode
   id: string
   onSelect: (v: string) => void
   selected: boolean
@@ -22,7 +22,7 @@ export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.El
   }, [onSelect, value])
 
   const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLLIElement>) => {
+    (event: KeyboardEvent<HTMLLIElement>) => {
       if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {
         handleClick()
       }

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

@@ -1,4 +1,4 @@
-import {AutocompleteMsg, AutocompleteState} from './types'
+import type {AutocompleteMsg, AutocompleteState} from './types'
 
 /**
  * @internal

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

@@ -1,9 +1,9 @@
-import {Placement} from '../../types'
+import type {Placement} from '../../types'
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
+export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS: string[] = [
   'Control',
   'Shift',
   'Alt',

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

@@ -1,14 +1,9 @@
-import {ButtonProps} from '../../primitives'
+import type {ButtonProps} from '../../primitives/button/button'
 
-/**
- * @public
- */
-export type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
+/** @public */
+export type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
 
-/**
- * @public
- */
+/** @public */
 export interface BaseAutocompleteOption {
   value: string
 }

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

@@ -12,20 +12,19 @@ const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
   '7': 7,
 }
 
-export default function Example() {
-  const maxLength =
-    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
+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>
         }
-        space={2}
       >
         <Text size={1}>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'components/breadcrumbs',
   title: 'Breadcrumbs',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./example')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,36 +1,60 @@
+import {breadcrumbs, type GapStyleProps} from '@sanity/ui/css'
 import {
   Children,
-  forwardRef,
   Fragment,
   isValidElement,
+  type ReactNode,
   useCallback,
   useMemo,
   useRef,
   useState,
 } from 'react'
 
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
-import {Box, Popover, Stack, Text} from '../../primitives'
-import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
+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 interface BreadcrumbsProps {
+/** @beta */
+export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
+
+/** @beta */
+export type BreadcrumbsOwnProps = GapStyleProps & {
+  expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
   maxLength?: number
-  separator?: React.ReactNode
-  space?: number | number[]
+  separator?: ReactNode
 }
 
-/**
- * @beta
- */
-export const Breadcrumbs = forwardRef(function Breadcrumbs(
-  props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
-  ref: React.ForwardedRef<HTMLOListElement>,
-) {
-  const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = useArrayProp(spaceRaw)
+/** @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)
@@ -54,24 +78,25 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
         <Popover
           constrainSize
           content={
-            <Stack as="ol" overflow="auto" padding={space} space={space}>
+            <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}
         >
-          <ExpandButton
-            fontSize={1}
+          <Button
             mode="bleed"
+            padding={0}
+            text="…"
+            {...expandButtonProps}
             onClick={open ? collapse : expand}
-            padding={1}
             ref={expandElementRef}
             selected={open}
-            text="…"
           />
         </Popover>,
         ...rawItems.slice(len - afterLength),
@@ -79,21 +104,28 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
     }
 
     return rawItems
-  }, [collapse, expand, maxLength, open, rawItems, space])
+  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems])
 
   return (
-    <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
+    <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" paddingX={space}>
+            <Box aria-hidden as="li">
               {separator || <Text muted>/</Text>}
             </Box>
           )}
           <Box as="li">{item}</Box>
         </Fragment>
       ))}
-    </StyledBreadcrumbs>
+    </Flex>
   )
-})
-Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'
+}