@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/core/_compat.ts

@@ -0,0 +1,264 @@
+// This file re-exports API members which existed in the `@sanity/ui` export in v1.
+
+import {
+  type BaseTheme as _BaseTheme,
+  type ThemeBoxShadow,
+  type HSL as _HSL,
+  type PartialThemeColorBuilderOpts,
+  type RGB as _RGB,
+  type RootTheme as _RootTheme,
+  type ThemeStyles,
+  type Theme as _Theme,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  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 ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorSyntax as _ThemeColorSyntax,
+  type ThemeColorToneKey,
+  type ThemeFont as _ThemeFont,
+  type ThemeFontKey as _ThemeFontKey,
+  type ThemeFontSize as _ThemeFontSize,
+  type ThemeFontWeight as _ThemeFontWeight,
+  type ThemeFontWeightKey as _ThemeFontWeightKey,
+  type ThemeFonts as _ThemeFonts,
+  type ThemeInput,
+  type ThemeLayer as _ThemeLayer,
+  type ThemeShadow as _ThemeShadow,
+  type ThemeColorButtonState,
+  type ThemeColorCardState,
+  type ThemeColorSelectableState,
+  buildTheme,
+} 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 ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorToneKey,
+  type ThemeInput,
+  type ThemeColorButtonState,
+  type ThemeColorCardState,
+  type ThemeColorSelectableState,
+}
+
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  rgba as _rgba,
+  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 = buildTheme()

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

@@ -0,0 +1,155 @@
+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
+      data-as="button"
+      disabled={disabled}
+      padding={3}
+      radius={1}
+      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/core/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -0,0 +1,136 @@
+import {
+  Autocomplete,
+  BoundaryElementProvider,
+  Box,
+  Card,
+  Container,
+  LayerProvider,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import {useCallback, useState} from 'react'
+import {Popover} from '../../../primitives'
+import countries from '../__fixtures__/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={3}
+          shadow={3}
+          style={{position: 'relative'}}
+          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
+        >
+          <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
+            <Stack space={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.ReactElement | 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"
+          radius={1}
+          ref={popoverRef}
+          referenceElement={inputElement}
+        />
+      )
+    },
+    [],
+  )
+
+  return (
+    <Stack space={3}>
+      <Text size={1} weight="medium">
+        {label}
+      </Text>
+      <LayerProvider zOffset={100}>
+        <Autocomplete
+          filterOption={filterOption}
+          id={id}
+          onChange={setValue}
+          openButton
+          options={options}
+          placeholder="Search"
+          radius={1}
+          renderOption={renderOption}
+          renderPopover={renderPopover}
+          renderValue={renderValue}
+          value={value}
+        />
+      </LayerProvider>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,88 @@
+import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
+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 '../__fixtures__/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}
+      >
+        <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}
+              id="custom"
+              onChange={setValue}
+              openButton={openButton}
+              options={options}
+              padding={padding}
+              placeholder="Search"
+              radius={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>
+  )
+}