@sanity/ui 3.0.0-static.3 → 3.0.0-static.31

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

@@ -1,17 +0,0 @@
-import {useContext} from 'react'
-
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @public
- */
-export function useRootTheme(): ThemeContextValue {
-  const value = useContext(ThemeContext)
-
-  if (!value) {
-    throw new Error('useRootTheme(): missing context value')
-  }
-
-  return value as unknown as ThemeContextValue
-}

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

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

package/src/ui/_compat/types.ts

@@ -1,274 +0,0 @@
-// This file re-exports API members which existed in the `@sanity/ui` export in v1.
-
-import {
-  type BaseTheme as _BaseTheme,
-  buildTheme,
-  type HSL as _HSL,
-  type PartialThemeColorBuilderOpts,
-  type RGB as _RGB,
-  type RootTheme as _RootTheme,
-  type Theme as _Theme,
-  type ThemeAvatar,
-  type ThemeBoxShadow,
-  type ThemeColor,
-  type ThemeColorBase,
-  type ThemeColorBuilderOpts,
-  type ThemeColorButton,
-  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
-  type ThemeColorButtonState,
-  type ThemeColorButtonStates,
-  type ThemeColorButtonTones,
-  type ThemeColorCard,
-  type ThemeColorCardState,
-  type ThemeColorGenericState,
-  type ThemeColorInput,
-  type ThemeColorInputState,
-  type ThemeColorInputStates,
-  type ThemeColorMuted,
-  type ThemeColorMutedTone,
-  type ThemeColorName,
-  type ThemeColorScheme,
-  type ThemeColorSchemeKey as _ThemeColorSchemeKey,
-  type ThemeColorSchemes,
-  type ThemeColorSelectable,
-  type ThemeColorSelectableState,
-  type ThemeColorSelectableStates,
-  type ThemeColorSolid,
-  type ThemeColorSolidTone,
-  type ThemeColorSpot,
-  type ThemeColorSpotKey,
-  type ThemeColorSyntax as _ThemeColorSyntax,
-  type ThemeColorToneKey,
-  type ThemeFont as _ThemeFont,
-  type ThemeFontKey as _ThemeFontKey,
-  type ThemeFonts as _ThemeFonts,
-  type ThemeFontSize as _ThemeFontSize,
-  type ThemeFontWeight as _ThemeFontWeight,
-  type ThemeFontWeightKey as _ThemeFontWeightKey,
-  type ThemeInput,
-  type ThemeLayer as _ThemeLayer,
-  type ThemeShadow as _ThemeShadow,
-  type ThemeStyles,
-} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
- */
-export type BaseTheme = _BaseTheme
-
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
- */
-export type BoxShadow = ThemeBoxShadow
-
-/**
- * @public
- * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
- */
-export type HSL = _HSL
-
-/**
- * @public
- * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
- */
-export type RGB = _RGB
-
-/**
- * @public
- * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
- */
-export type RootTheme = _RootTheme
-
-/**
- * @public
- * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
- */
-export type Styles = ThemeStyles
-
-/**
- * @public
- * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
- */
-export type Theme = _Theme
-
-/**
- * @public
- * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeColorButtonModeKey = _ThemeColorButtonModeKey
-
-/**
- * @public
- * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeColorSchemeKey = _ThemeColorSchemeKey
-
-/**
- * @public
- * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
- */
-export type ThemeColorSyntax = _ThemeColorSyntax
-
-/**
- * @public
- * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
- */
-export type ThemeFont = _ThemeFont
-
-/**
- * @public
- * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontKey = _ThemeFontKey
-
-/**
- * @public
- * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontSize = _ThemeFontSize
-
-/**
- * @public
- * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontWeight = _ThemeFontWeight
-
-/**
- * @public
- * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
- */
-export type ThemeFontWeightKey = _ThemeFontWeightKey
-
-/**
- * @public
- * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
- */
-export type ThemeFonts = _ThemeFonts
-
-/**
- * @public
- * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
- */
-export type ThemeLayer = _ThemeLayer
-
-/**
- * @public
- * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
- */
-export type ThemeShadow = _ThemeShadow
-
-export {
-  type PartialThemeColorBuilderOpts,
-  type ThemeAvatar,
-  type ThemeColor,
-  type ThemeColorBase,
-  type ThemeColorBuilderOpts,
-  type ThemeColorButton,
-  type ThemeColorButtonState,
-  type ThemeColorButtonStates,
-  type ThemeColorButtonTones,
-  type ThemeColorCard,
-  type ThemeColorCardState,
-  type ThemeColorGenericState,
-  type ThemeColorInput,
-  type ThemeColorInputState,
-  type ThemeColorInputStates,
-  type ThemeColorMuted,
-  type ThemeColorMutedTone,
-  type ThemeColorName,
-  type ThemeColorScheme,
-  type ThemeColorSchemes,
-  type ThemeColorSelectable,
-  type ThemeColorSelectableState,
-  type ThemeColorSelectableStates,
-  type ThemeColorSolid,
-  type ThemeColorSolidTone,
-  type ThemeColorSpot,
-  type ThemeColorSpotKey,
-  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__/async.tsx

@@ -1,157 +0,0 @@
-import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
-import {
-  Autocomplete,
-  BaseAutocompleteOption,
-  Box,
-  Card,
-  Code,
-  Flex,
-  LayerProvider,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useCallback, useEffect, useRef, useState} from 'react'
-
-import {countriesStore} from '../__mocks__/apiStore'
-
-export default function AsyncStory() {
-  const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
-  const [loading, setLoading] = useState(false)
-  const searchRef = useRef<{cancel: () => void} | null>(null)
-  const fetchRef = useRef<{cancel: () => void} | null>(null)
-  const [query, setQuery] = useState<string | null>(null)
-  const [value, setValue] = useState('')
-  const [optionTitle, setOptionTitle] = useState<string | null>(null)
-  const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
-
-  const doSearch = useCallback((query: string | null) => {
-    if (searchRef.current) searchRef.current.cancel()
-    searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
-  }, [])
-
-  const filterOption = useCallback(() => true, [])
-
-  const handleQueryChange = useCallback(
-    (query: string | null) => {
-      setQuery(query)
-
-      if (query !== null) {
-        doSearch(query)
-      }
-    },
-    [doSearch],
-  )
-
-  const handleOpenButtonClick = useCallback(() => {
-    if (!value) {
-      doSearch('')
-    }
-  }, [doSearch, value])
-
-  const renderValue = useCallback(() => {
-    if (loadingCurrentRef) {
-      return 'Loading…'
-    }
-
-    return optionTitle || ''
-  }, [loadingCurrentRef, optionTitle])
-
-  const renderOption = useCallback((option: BaseAutocompleteOption) => {
-    return <AsyncOption documentId={option.value} />
-  }, [])
-
-  useEffect(() => {
-    if (fetchRef.current) fetchRef.current.cancel()
-
-    if (value) {
-      fetchRef.current = countriesStore.fetchDocument(
-        value,
-        (data) => setOptionTitle(data?.title || null),
-        setLoadingCurrentRef,
-      )
-    } else {
-      setOptionTitle(null)
-      setLoadingCurrentRef(false)
-    }
-  }, [value])
-
-  useEffect(() => {
-    if (optionTitle) doSearch(optionTitle)
-  }, [doSearch, optionTitle])
-
-  return (
-    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-      <Stack space={[3, 3, 4]}>
-        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
-          Country
-        </Text>
-        <LayerProvider zOffset={100}>
-          <Autocomplete
-            disabled={loadingCurrentRef}
-            filterOption={filterOption}
-            icon={value ? EarthAmericasIcon : SearchIcon}
-            id="async"
-            loading={loading}
-            onChange={setValue}
-            onQueryChange={handleQueryChange}
-            openButton={{onClick: handleOpenButtonClick}}
-            options={options}
-            placeholder="Search"
-            renderOption={renderOption}
-            renderValue={renderValue}
-            value={value}
-          />
-        </LayerProvider>
-
-        <Card overflow="auto" padding={3} radius={2} tone="transparent">
-          <Code language="json" size={1}>
-            {JSON.stringify({loading, options, query, value}, null, 2)}
-          </Code>
-        </Card>
-      </Stack>
-    </Box>
-  )
-}
-
-function AsyncOption(props: {
-  documentId: string
-  disabled?: boolean
-  selected?: boolean
-  tabIndex?: number
-}) {
-  const {documentId, disabled, selected, tabIndex} = props
-  const [data, setData] = useState<{title: string} | null>(null)
-  const [loading, setLoading] = useState(false)
-  const ref = useRef<{cancel: () => void} | null>(null)
-
-  useEffect(() => {
-    if (ref.current) ref.current.cancel()
-    ref.current = countriesStore.fetchDocument(documentId, setData, setLoading)
-  }, [documentId])
-
-  return (
-    <Card
-      as="button"
-      disabled={disabled}
-      padding={3}
-      radius={1}
-      selectable
-      selected={selected}
-      tabIndex={tabIndex}
-    >
-      <Flex gap={3}>
-        <Text>
-          <EarthAmericasIcon />
-        </Text>
-
-        {loading && (
-          <Text muted>
-            <>Loading…</>
-          </Text>
-        )}
-
-        {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
-      </Flex>
-    </Card>
-  )
-}

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

@@ -1,131 +0,0 @@
-import {
-  Autocomplete,
-  BoundaryElementProvider,
-  Box,
-  Card,
-  Container,
-  LayerProvider,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-import {Popover} from '../../../primitives'
-import countries from '../__mocks__/countries'
-import {AutocompleteProps} from '../autocomplete'
-import {ExampleOption} from './types'
-
-export default function ConstrainedHeightStory() {
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Card height="fill" tone="transparent">
-      <Container height="fill" padding={3} sizing="border" width={1}>
-        <Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
-          <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
-            <Stack gap={5}>
-              <BoundaryElementProvider element={boundaryElement}>
-                <ConstrainedHeightExampleField id="example-1" label="Example 1" />
-                <ConstrainedHeightExampleField id="example-2" label="Example 2" />
-                <ConstrainedHeightExampleField id="example-3" label="Example 3" />
-                <ConstrainedHeightExampleField id="example-4" label="Example 4" />
-                <ConstrainedHeightExampleField id="example-5" label="Example 5" />
-                <ConstrainedHeightExampleField id="example-6" label="Example 6" />
-                <ConstrainedHeightExampleField id="example-7" label="Example 7" />
-                <ConstrainedHeightExampleField id="example-8" label="Example 8" />
-                <ConstrainedHeightExampleField id="example-9" label="Example 9" />
-              </BoundaryElementProvider>
-            </Stack>
-          </Box>
-        </Card>
-      </Container>
-    </Card>
-  )
-}
-
-function ConstrainedHeightExampleField({id, label}: {id: string; label: string}) {
-  const [value, setValue] = useState('')
-
-  const renderOption = useCallback((option: ExampleOption) => {
-    return (
-      <Card
-        as="a"
-        data-qa={`option-${option.value}`}
-        href="#"
-        key={option.value}
-        onClick={(event) => event.preventDefault()}
-        padding={3}
-        radius={2}
-      >
-        <Text textOverflow="ellipsis">{option.title}</Text>
-      </Card>
-    )
-  }, [])
-
-  const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
-    return option ? option.title : currentValue
-  }, [])
-
-  const filterOption = useCallback((query: string, option: ExampleOption) => {
-    return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
-  }, [])
-
-  const options = countries.map((item) => ({value: item.code, title: item.name}))
-
-  const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
-    (
-      popoverProps: {
-        content: React.JSX.Element | null
-        hidden: boolean
-        inputElement: HTMLInputElement | null
-        onMouseEnter: () => void
-        onMouseLeave: () => void
-      },
-      popoverRef: React.Ref<HTMLDivElement>,
-    ) => {
-      const {hidden, inputElement, ...restProps} = popoverProps
-
-      if (hidden) return null
-
-      return (
-        <Popover
-          {...restProps}
-          arrow={false}
-          constrainSize
-          matchReferenceWidth
-          open
-          overflow="auto"
-          placement="bottom-start"
-          portal
-          radius={3}
-          ref={popoverRef}
-          referenceElement={inputElement}
-        />
-      )
-    },
-    [],
-  )
-
-  return (
-    <Stack gap={3}>
-      <Text size={1} weight="medium">
-        {label}
-      </Text>
-      <LayerProvider zOffset={100}>
-        <Autocomplete
-          filterOption={filterOption}
-          id={id}
-          onChange={setValue}
-          openButton
-          options={options}
-          placeholder="Search"
-          radius={2}
-          renderOption={renderOption}
-          renderPopover={renderPopover}
-          renderValue={renderValue}
-          value={value}
-        />
-      </LayerProvider>
-    </Stack>
-  )
-}

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

@@ -1,90 +0,0 @@
-import {Autocomplete, Box, Button, Card, Code, Container, Radius, Stack, Text} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-import {
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
-import countries from '../__mocks__/countries'
-import {ExampleOption} from './types'
-
-export default function CustomStory() {
-  const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
-  const border = useBoolean('Border', true, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
-  const openButton = useBoolean('Open button', true, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const [value, setValue] = useState('')
-
-  const renderOption = useCallback(
-    (option: ExampleOption) => (
-      <Card
-        as="a"
-        data-qa={`option-${option.value}`}
-        href="#"
-        key={option.value}
-        onClick={(event) => event.preventDefault()}
-        padding={padding}
-        radius={(radius - 1) as Radius}
-      >
-        <Text size={fontSize}>{option.title}</Text>
-      </Card>
-    ),
-    [fontSize, padding, radius],
-  )
-
-  const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
-    return option ? option.title : currentValue
-  }, [])
-
-  const filterOption = useCallback((query: string, option: ExampleOption) => {
-    return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
-  }, [])
-
-  const options = data.map((item) => ({value: item.value, title: item.title}))
-
-  return (
-    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-      <Container width={0}>
-        <Stack space={5}>
-          <Stack space={3}>
-            <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
-              Country
-            </Text>
-            <Autocomplete
-              aria-describedby="custom-label"
-              border={border}
-              disabled={disabled}
-              filterOption={filterOption}
-              fontSize={fontSize as FontTextSize}
-              id="custom"
-              onChange={setValue}
-              openButton={openButton}
-              options={options}
-              padding={padding}
-              placeholder="Search"
-              radius={radius as Radius}
-              readOnly={readOnly}
-              renderOption={renderOption}
-              renderValue={renderValue}
-              value={value}
-            />
-          </Stack>
-
-          <Card padding={3} radius={2} tone="transparent">
-            <Code size={1}>{JSON.stringify(value)}</Code>
-          </Card>
-          <Box>
-            <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
-          </Box>
-        </Stack>
-      </Container>
-    </Box>
-  )
-}