@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

package/src/ui/RootClassNames.tsx

@@ -0,0 +1,44 @@
+import {card, scopeClassName as _} from '@sanity/ui/css'
+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() ?? {}
+
+  useEffect(() => {
+    const els = document.querySelectorAll(
+      [_('button'), _('card'), _('font')].map((n) => `.${n}`).join(', '),
+    )
+
+    // temporarily disable all transitions when the theme changes
+    for (const el of els) {
+      if (el instanceof HTMLElement) {
+        el.style.transition = 'none'
+      }
+    }
+
+    _raf2(() => {
+      document.documentElement.className = card({scheme, tone}) ?? ''
+
+      _raf2(() => {
+        for (const el of els) {
+          if (el instanceof HTMLElement) {
+            el.style.transition = ''
+          }
+        }
+      })
+    })
+
+    return () => {
+      document.documentElement.className = ''
+    }
+  }, [element, scheme, tone])
+
+  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/helpers.ts

@@ -0,0 +1,72 @@
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgba as _rgba,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  screen as _screen,
+} from '@sanity/ui/theme'
+
+export {
+  /** @deprecated use `px` from `@sanity/ui/css` */
+  px,
+  /** @deprecated use `rem` from `@sanity/ui/css` */
+  rem,
+} from '@sanity/ui/css'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+export const screen = _screen

package/src/ui/_compat/index.ts

@@ -1,9 +1,5 @@
+export * from './helpers'
+export * from './studioTheme'
 export * from './styles'
 export * from './theme'
 export * from './types'
-export {
-  /** @deprecated use `px` from `@sanity/ui/css` */
-  px,
-  /** @deprecated use `rem` from `@sanity/ui/css` */
-  rem,
-} from '@sanity/ui/css'

package/src/ui/_compat/studioTheme.ts

@@ -0,0 +1,7 @@
+import {buildTheme} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+export const studioTheme = buildTheme()

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/_compat/types.ts

@@ -2,7 +2,6 @@
 
 import {
   type BaseTheme as _BaseTheme,
-  buildTheme,
   type HSL as _HSL,
   type PartialThemeColorBuilderOpts,
   type RGB as _RGB,
@@ -190,85 +189,3 @@ export {
   type ThemeColorToneKey,
   type ThemeInput,
 }
-
-import {
-  createColorTheme as _createColorTheme,
-  hexToRgb as _hexToRgb,
-  hslToRgb as _hslToRgb,
-  multiply as _multiply,
-  parseColor as _parseColor,
-  rgba as _rgba,
-  rgbToHex as _rgbToHex,
-  rgbToHsl as _rgbToHsl,
-  screen as _screen,
-} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
- */
-export const createColorTheme = _createColorTheme
-
-/**
- * @public
- * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
- */
-export const hexToRgb = _hexToRgb
-
-/**
- * @public
- * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
- */
-export const hslToRgb = _hslToRgb
-
-/**
- * @public
- * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
- */
-export const multiply = _multiply
-
-/**
- * @public
- * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
- */
-export const parseColor = _parseColor
-
-/**
- * @public
- * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
- */
-export const rgbToHex = _rgbToHex
-
-/**
- * @public
- * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
- */
-export const rgbToHsl = _rgbToHsl
-
-/**
- * @public
- * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
- */
-export const rgba = _rgba
-
-/**
- * @public
- * @deprecated Use `screen` from `@sanity/ui/theme` instead.
- */
-export const screen = _screen
-
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export const studioTheme = (() => {
-  let theme: ReturnType<typeof buildTheme> | undefined
-  return {
-    get value() {
-      if (!theme) {
-        theme = buildTheme()
-      }
-      return 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
 }