@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

package/src/theme/v2/color/kbd.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorKBD {
   bg: string
   fg: string

package/src/theme/v2/color/selectable.ts

@@ -1,12 +1,8 @@
 import {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
 import {ThemeColorState_v2} from './state'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>

package/src/theme/v2/color/state.ts

@@ -3,9 +3,7 @@ import {ThemeColorAvatar_v2} from './avatar'
 import {ThemeColorBadge_v2} from './badge'
 import {ThemeColorKBD} from './kbd'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorState_v2 {
   /** @internal */
   _blend?: ThemeColorBlendModeKey

package/src/theme/v2/color/syntax.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorSyntax {
   atrule: string
   attrName: string

package/src/theme/v2/input.ts

@@ -1,8 +1,6 @@
 import {ThemeFocusRing} from '../v0/focusRing'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeInput_v2 {
   checkbox: {
     size: number

package/src/theme/v2/theme.ts

@@ -7,9 +7,7 @@ import {ThemeAvatar_v2} from './avatar'
 import {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
 import {ThemeInput_v2} from './input'
 
-/**
- * @public
- */
+/** @public */
 export interface RootTheme_v2 {
   _version: 2
   avatar: ThemeAvatar_v2
@@ -35,9 +33,7 @@ export interface RootTheme_v2 {
   /** @internal */
   style?: ThemeStyles
 }
-/**
- * @public
- */
+/** @public */
 export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   color: ThemeColorCard_v2
   /**

package/src/theme/v3/buildTheme_v3.ts

@@ -5,6 +5,7 @@ import {defaultTokens} from './defaultTokens'
 import {resolveTokens} from './resolveTokens'
 import {Theme_v3, ThemeOptions} from './types'
 
+/** @public */
 export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
   const {v2} = options ?? {}
 

package/src/theme/v3/color/color.ts

@@ -6,8 +6,7 @@ import {
   ThemeColorStateToneKey,
 } from '../../v2'
 
-// export interface ThemeColorAvatarHue_v2 {}
-
+/** @public */
 export interface ThemeColorElement {
   _hue: Hue
   bg: {
@@ -24,12 +23,13 @@ export interface ThemeColorElement {
   }
 }
 
+/** @public */
 export type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
 
+/** @public */
 export type ThemeColorVariantKey = 'tinted' | 'solid'
 
-// export type ThemeColorCard_v3 = Record<ThemeColorVariantKey, ThemeColorVariant>
-
+/** @public */
 export interface ThemeColorCard_v3 {
   _hue: Hue
   avatar: ThemeColorAvatar_v2
@@ -90,9 +90,11 @@ export interface ThemeColorCard_v3 {
   variant: Record<ThemeColorVariantKey, ThemeColorVariant>
 }
 
+/** @public */
 export interface ThemeColorScheme_v3 {
   card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
 }
 
+/** @public */
 // color[scheme].card[cardTone][colorVariant][elementTone][property][level]
 export type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>

package/src/theme/v3/color/renderColor.ts

@@ -3,14 +3,17 @@ import {ThemeColorSchemeKey} from '../../v2'
 import {parseColor} from './parseColor'
 import {ColorToken} from './token'
 
-type CSSVariableKey = `--${string}`
+/** @public */
+export type CSSVariableKey = `--${string}`
 
+/** @public */
 export interface RenderColorContext {
   bgVar: CSSVariableKey
   hue: Hue
   scheme: ThemeColorSchemeKey
 }
 
+/** @public */
 export function renderColor(token: [ColorToken, ColorToken], context: RenderColorContext): string {
   const {bgVar, hue, scheme} = context
 

package/src/theme/v3/defaultTokens.ts

@@ -1,5 +1,6 @@
 import {PartialTokens, Tokens} from './tokens'
 
+/** @internal */
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {

package/src/theme/v3/resolveTokens.ts

@@ -53,47 +53,47 @@ function resolveCardColorTokens(
       gray: {
         _hue: tokens?.avatar?.gray?._hue ?? 'gray',
         bg: tokens?.avatar?.gray?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.gray?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.gray?.fg ?? ['900', 'white'],
       },
       blue: {
         _hue: tokens?.avatar?.blue?._hue ?? 'blue',
         bg: tokens?.avatar?.blue?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.blue?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.blue?.fg ?? ['900', 'white'],
       },
       purple: {
         _hue: tokens?.avatar?.purple?._hue ?? 'purple',
         bg: tokens?.avatar?.purple?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.purple?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.purple?.fg ?? ['900', 'white'],
       },
       magenta: {
         _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
         bg: tokens?.avatar?.magenta?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.magenta?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.magenta?.fg ?? ['900', 'white'],
       },
       red: {
         _hue: tokens?.avatar?.red?._hue ?? 'red',
         bg: tokens?.avatar?.red?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.red?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.red?.fg ?? ['900', 'white'],
       },
       orange: {
         _hue: tokens?.avatar?.orange?._hue ?? 'orange',
         bg: tokens?.avatar?.orange?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.orange?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.orange?.fg ?? ['900', 'white'],
       },
       yellow: {
         _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
         bg: tokens?.avatar?.yellow?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.yellow?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.yellow?.fg ?? ['900', 'white'],
       },
       green: {
         _hue: tokens?.avatar?.green?._hue ?? 'green',
         bg: tokens?.avatar?.green?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.green?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.green?.fg ?? ['900', 'white'],
       },
       cyan: {
         _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
         bg: tokens?.avatar?.cyan?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.cyan?.fg ?? ['900', '900'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['900', 'white'],
       },
     },
     backdrop: tokens?.backdrop ?? ['900', '100'],

package/src/ui/RootClassNames.tsx

@@ -4,6 +4,7 @@ import {useEffect} from 'react'
 import {_raf2} from './helpers'
 import {useCard} from './primitives'
 
+/** @internal */
 export function RootClassNames(props: {element: HTMLElement}) {
   const {element} = props
   const {scheme, tone} = useCard() ?? {}
@@ -39,3 +40,5 @@ export function RootClassNames(props: {element: HTMLElement}) {
 
   return null
 }
+
+RootClassNames.displayName = 'RootClassNames'

package/src/ui/StyleTags.tsx

@@ -2,7 +2,7 @@ import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
 import {buildTheme_v3, RootTheme, Theme_v3} from '@sanity/ui/theme'
 import {ReactNode} from 'react'
 
-/* @beta */
+/** @beta */
 export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
   const {theme: themeProp} = props
 
@@ -22,3 +22,5 @@ export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
     </>
   )
 }
+
+StyleTags.displayName = 'StyleTags'

package/src/ui/_compat/theme/themeColorProvider.tsx

@@ -4,18 +4,14 @@ import {ReactElement, ReactNode} from 'react'
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorProviderProps {
   children?: ReactNode
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey
 }
 
-/**
- * @public
- */
+/** @public */
 export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement {
   const {children, scheme, tone} = props
   const root = useRootTheme()

package/src/ui/_compat/theme/themeProvider.tsx

@@ -13,9 +13,7 @@ import {ThemeColorProvider} from './themeColorProvider'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeProviderProps {
   children?: ReactNode
   scheme?: ThemeColorSchemeKey
@@ -23,9 +21,7 @@ export interface ThemeProviderProps {
   tone?: ThemeColorCardToneKey
 }
 
-/**
- * @public
- */
+/** @public */
 export function ThemeProvider(props: ThemeProviderProps): ReactElement {
   const parentTheme = useContext(ThemeContext)
   const {children} = props

package/src/ui/_compat/theme/types.ts

@@ -1,8 +1,6 @@
 import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeContextValue {
   /** @deprecated No longer used */
   version: 0.0

package/src/ui/_compat/theme/useRootTheme.ts

@@ -3,9 +3,7 @@ import {useContext} from 'react'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function useRootTheme(): ThemeContextValue {
   const value = useContext(ThemeContext)
 

package/src/ui/_compat/theme/useTheme.ts

@@ -1,16 +1,12 @@
 import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
 import {useTheme as useStyledTheme} from 'styled-components'
 
-/**
- * @public
- */
+/** @public */
 export function useTheme(): Theme {
   return useStyledTheme() as Theme
 }
 
-/**
- * @public
- */
+/** @public */
 export function useTheme_v2(): Theme_v2 {
   return getTheme_v2(useStyledTheme() as Theme)
 }

package/src/ui/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -83,13 +83,13 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
       },
       popoverRef: React.Ref<HTMLDivElement>,
     ) => {
-      const {hidden, inputElement, ...restProps} = popoverProps
+      const {hidden, inputElement, ...rest} = popoverProps
 
       if (hidden) return null
 
       return (
         <Popover
-          {...restProps}
+          {...rest}
           arrow={false}
           constrainSize
           matchReferenceWidth

package/src/ui/components/autocomplete/autocomplete.tsx

@@ -1,17 +1,15 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import {Space} from '@sanity/ui/theme'
 import {
-  ChangeEvent,
+  type ChangeEvent,
   cloneElement,
-  ElementType,
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
+  type ElementType,
+  type FocusEvent,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -29,14 +27,14 @@ import {
   Button,
   Card,
   Popover,
-  PopoverProps,
+  type PopoverProps,
   Stack,
   Text,
   TextInput,
+  TextInputOwnProps,
 } from '../../primitives'
-// import {Selectable} from '../../primitives/_selectable'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
-import {Props, Radius} from '../../types'
+import type {ComponentType, Props, Radius} from '../../types'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -44,58 +42,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
-  disabled?: boolean
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  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?: ResponsiveProp<Space>
-  // padding?: number | number[]
-  popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
-  prefix?: ReactNode
-  radius?: Radius | Radius[]
-  readOnly?: boolean
-  ref?: ForwardedRef<HTMLInputElement>
-  /** @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: ForwardedRef<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?: 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?: 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
@@ -103,27 +105,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: Omit<
-    Props<AutocompleteProps<Option>, 'div'>,
-    | 'aria-activedescendant'
-    | 'aria-autocomplete'
-    | 'aria-expanded'
-    | 'aria-owns'
-    | 'as'
-    | 'autoCapitalize'
-    | 'autoComplete'
-    | 'autoCorrect'
-    | 'inputMode'
-    | 'role'
-    | 'spellCheck'
-    | 'type'
-  >,
-  forwardedRef: 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>) {
   const {
+    as = DEFAULT_AUTOCOMPLETE_ELEMENT,
     border = true,
     customValidity,
     disabled,
@@ -146,14 +139,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,
@@ -186,7 +180,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)
@@ -535,7 +529,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const input = (
     <TextInput
-      {...restProps}
+      {...rest}
       aria-activedescendant={activeItemId}
       aria-autocomplete="list"
       aria-expanded={expanded}
@@ -543,6 +537,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       autoCapitalize="off"
       autoComplete="off"
       autoCorrect="off"
+      as={as}
       border={border}
       clearButton={clearButton}
       customValidity={customValidity}
@@ -694,29 +689,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       {results}
     </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: Omit<
-    Props<AutocompleteProps<Option>, 'input'>,
-    | 'aria-activedescendant'
-    | 'aria-autocomplete'
-    | 'aria-expanded'
-    | 'aria-owns'
-    | 'autoCapitalize'
-    | 'autoComplete'
-    | 'autoCorrect'
-    | 'inputMode'
-    | 'role'
-    | 'spellCheck'
-    | 'type'
-  >,
-) => ReactElement
+Autocomplete.displayName = 'Autocomplete'

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

@@ -43,3 +43,5 @@ export function AutocompleteOption(props: AutocompleteOptionProps): ReactElement
     </li>
   )
 }
+
+AutocompleteOption.displayName = 'AutocompleteOption'

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

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