@sanity/ui 3.1.13 → 4.0.0-beta.0

package/src/primitives/select/Select.tsx

@@ -0,0 +1,76 @@
+import {SelectIcon} from '@sanity/icons'
+import {_input_element, select, select_presentation, type SelectStyleProps} from '@sanity/ui-css'
+import {useImperativeHandle, useRef} from 'react'
+
+import type {ComponentType, Props} from '../../core/types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import {Text} from '../text/Text'
+
+/** @public */
+export const DEFAULT_SELECT_ELEMENT = 'select'
+
+/** @public */
+export type SelectOwnProps = SelectStyleProps & {
+  customValidity?: string
+  readOnly?: boolean
+}
+
+/** @public */
+export type SelectElementType = 'select' | ComponentType
+
+/** @public */
+export type SelectProps<E extends SelectElementType = SelectElementType> = Props<SelectOwnProps, E>
+
+/**
+ * The `Select` component provides control of options.
+ *
+ * @public
+ */
+export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
+  props: SelectProps<E>,
+): React.JSX.Element {
+  const {
+    as: Element = DEFAULT_SELECT_ELEMENT,
+    border = true,
+    children,
+    customValidity,
+    disabled,
+    flex,
+    fontSize = 2,
+    gap = 2,
+    padding = 3,
+    radius = 2,
+    readOnly,
+    ref: forwardedRef,
+    width = 'fill',
+    ...rest
+  } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
+
+  const ref = useRef<HTMLSelectElement | null>(null)
+
+  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <span
+      className={select({border, fontSize, flex, gap, padding, radius, width})}
+      data-icon-right=""
+      data-ui="Select"
+    >
+      <Element {...rest} ref={ref} className={_input_element()} disabled={disabled || readOnly}>
+        {children}
+      </Element>
+      <span className={select_presentation()}>
+        <span>
+          <Text size={fontSize}>
+            <SelectIcon />
+          </Text>
+        </span>
+      </span>
+    </span>
+  )
+}

package/src/primitives/select/__workshop__/Plain.tsx

@@ -0,0 +1,38 @@
+import {Select, Stack, Text} from '@sanity/ui'
+import {FONT_TEXT_SIZE, RADIUS} from '@sanity/ui/tokens'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {CardWrapper} from '$workshop'
+
+export default function PlainStory(): React.JSX.Element {
+  const border = useBoolean('Border', true)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', FONT_TEXT_SIZE)
+  const radius = useSelect('Radius', RADIUS)
+  const readOnly = useBoolean('Read only', false)
+
+  return (
+    <CardWrapper width={0}>
+      <Stack gap={3}>
+        <Text as="label" htmlFor="select" size={1} weight="medium">
+          Select
+        </Text>
+
+        <Select
+          border={border}
+          disabled={disabled}
+          fontSize={fontSize}
+          id="select-example"
+          radius={radius}
+          readOnly={readOnly}
+        >
+          <option value="a">Option A</option>
+          <option value="b">Option B</option>
+          <option value="c">Option C</option>
+          <option value="d">Option D</option>
+          <option value="e">Option E</option>
+        </Select>
+      </Stack>
+    </CardWrapper>
+  )
+}

package/src/primitives/select/__workshop__/ReadOnly.tsx

@@ -0,0 +1,23 @@
+import {Card, Container, Label, Select, Stack} from '@sanity/ui'
+
+export default function ReadOnlyStory(): React.JSX.Element {
+  return (
+    <Container width={0}>
+      <Card padding={4}>
+        <Stack gap={3}>
+          <Label as="label" htmlFor="select">
+            Select
+          </Label>
+
+          <Select id="select-example" readOnly>
+            <option value="a">Option A</option>
+            <option value="b">Option B</option>
+            <option value="c">Option C</option>
+            <option value="d">Option D</option>
+            <option value="e">Option E</option>
+          </Select>
+        </Stack>
+      </Card>
+    </Container>
+  )
+}

package/src/primitives/select/__workshop__/index.ts

@@ -0,0 +1,13 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/select',
+  title: 'Select',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
+  ],
+}
+
+export default scope

package/src/primitives/selectable/Selectable.tsx

@@ -0,0 +1,48 @@
+import {selectable, SELECTABLE_STYLE_PROP_KEYS, type SelectableStyleProps} from '@sanity/ui-css'
+
+import {_splitKeys} from '../../core/_keys'
+import type {ComponentType, Props} from '../../core/types'
+
+/** @public */
+export const DEFAULT_SELECTABLE_ELEMENT = 'button'
+
+/** @public */
+export interface SelectableOwnProps extends SelectableStyleProps {
+  selected?: boolean
+}
+
+/** @public */
+export type SelectableElementType = 'a' | 'button' | 'span' | ComponentType
+
+/** @public */
+export type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<
+  SelectableOwnProps,
+  E
+>
+
+/** @public */
+export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
+  props: SelectableProps<E>,
+): React.JSX.Element {
+  const [
+    styleProps,
+    {
+      as: Element = DEFAULT_SELECTABLE_ELEMENT,
+      selected,
+      // split DOM props
+      ...domProps
+    },
+  ] = _splitKeys(
+    props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>,
+    SELECTABLE_STYLE_PROP_KEYS,
+  )
+
+  return (
+    <Element
+      data-ui="Selectable"
+      {...domProps}
+      className={selectable(styleProps)}
+      data-pressed={selected ? '' : props['data-pressed']}
+    />
+  )
+}

package/src/primitives/selectable/__workshop__/DataProps.tsx

@@ -0,0 +1,24 @@
+import {Selectable, Stack, Text} from '@sanity/ui'
+
+import {CardWrapper} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  return (
+    <CardWrapper>
+      <Stack gap={4}>
+        <Selectable data-enabled="" padding={3}>
+          <Text size={1}>Selectable {`[data-enabled]`}</Text>
+        </Selectable>
+        <Selectable data-hovered="" padding={3}>
+          <Text size={1}>Selectable {`[data-hovered]`}</Text>
+        </Selectable>
+        <Selectable data-pressed="" padding={3}>
+          <Text size={1}>Selectable {`[data-pressed]`}</Text>
+        </Selectable>
+        <Selectable data-selected="" padding={3}>
+          <Text size={1}>Selectable {`[data-selected]`}</Text>
+        </Selectable>
+      </Stack>
+    </CardWrapper>
+  )
+}

package/src/primitives/selectable/__workshop__/as-link.tsx

@@ -0,0 +1,13 @@
+import {Selectable, Text} from '@sanity/ui'
+
+import {CardWrapper} from '$workshop'
+
+export default function AsLinkStory() {
+  return (
+    <CardWrapper>
+      <Selectable as="a" href="#" padding={4}>
+        <Text>Link</Text>
+      </Selectable>
+    </CardWrapper>
+  )
+}

package/src/primitives/selectable/__workshop__/index.ts

@@ -0,0 +1,19 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/selectable',
+  title: 'Selectable',
+  stories: [
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
+    },
+    {
+      name: 'as-link',
+      title: 'As link',
+      component: lazy(() => import('./as-link')),
+    },
+  ],
+})

package/src/primitives/skeleton/CodeSkeleton.tsx

@@ -0,0 +1,49 @@
+import {code_skeleton, type ResponsiveProp} from '@sanity/ui-css'
+import type {FontCodeSize} from '@sanity/ui-tokens'
+
+import type {Props} from '../../core/types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
+
+/** @beta */
+export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type CodeSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontCodeSize>
+}
+
+/** @beta */
+export type CodeSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> = Props<
+  CodeSkeletonOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function CodeSkeleton<
+  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
+>(props: CodeSkeletonProps<E>): React.JSX.Element {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as CodeSkeletonProps<typeof DEFAULT_CODE_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={code_skeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

package/src/primitives/skeleton/HeadingSkeleton.tsx

@@ -0,0 +1,48 @@
+import {heading_skeleton, type ResponsiveProp} from '@sanity/ui-css'
+import type {FontHeadingSize} from '@sanity/ui-tokens'
+
+import type {Props} from '../../core/types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
+
+/** @beta */
+export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type HeadingSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontHeadingSize>
+}
+
+/** @beta */
+export type HeadingSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type HeadingSkeletonProps<
+  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
+> = Props<HeadingSkeletonOwnProps, E>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function HeadingSkeleton<
+  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
+>(props: HeadingSkeletonProps<E>): React.JSX.Element {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as HeadingSkeletonProps<typeof DEFAULT_HEADING_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={heading_skeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

package/src/primitives/skeleton/LabelSkeleton.tsx

@@ -0,0 +1,47 @@
+import {label_skeleton, type ResponsiveProp} from '@sanity/ui-css'
+import type {FontLabelSize} from '@sanity/ui-tokens'
+
+import type {Props} from '../../core/types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
+
+/** @beta */
+export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type LabelSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontLabelSize>
+}
+
+/** @beta */
+export type LabelSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeletonElementType> =
+  Props<LabelSkeletonOwnProps, E>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function LabelSkeleton<
+  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
+>(props: LabelSkeletonProps<E>): React.JSX.Element {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as LabelSkeletonProps<typeof DEFAULT_LABEL_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={label_skeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

package/src/primitives/skeleton/Skeleton.tsx

@@ -0,0 +1,70 @@
+import {skeleton, type SkeletonStyleProps} from '@sanity/ui-css'
+import {useEffect, useState} from 'react'
+
+import type {ComponentType, Props} from '../../core/types'
+
+/** @beta */
+export const DEFAULT_SKELETON_ELEMENT = 'div'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type SkeletonOwnProps = SkeletonStyleProps & {
+  animated?: boolean
+  delay?: number
+}
+
+/** @beta */
+export type SkeletonElementType = 'div' | 'span' | ComponentType
+
+/** @beta */
+export type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
+  SkeletonOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
+  props: SkeletonProps<E>,
+): React.JSX.Element {
+  const {
+    as: As = DEFAULT_SKELETON_ELEMENT,
+    animated = false,
+    className,
+    delay,
+    ...rest
+  } = props as SkeletonProps<typeof DEFAULT_SKELETON_ELEMENT>
+
+  const [visible, setVisible] = useState<boolean>(delay ? false : true)
+
+  useEffect(() => {
+    if (!delay) {
+      return undefined
+    }
+
+    const timeout = setTimeout(() => {
+      setVisible(true)
+    }, delay)
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [delay])
+
+  return (
+    <As
+      data-ui="Skeleton"
+      {...rest}
+      className={skeleton({
+        className,
+        ...rest,
+      })}
+      data-animated={animated ? '' : undefined}
+      data-visible={(delay ? visible : true) ? '' : undefined}
+    />
+  )
+}

package/src/primitives/skeleton/TextSkeleton.tsx

@@ -0,0 +1,49 @@
+import {type ResponsiveProp, text_skeleton} from '@sanity/ui-css'
+import type {FontTextSize} from '@sanity/ui-tokens'
+
+import type {Props} from '../../core/types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
+
+/** @beta */
+export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
+
+/** @beta */
+export type TextSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontTextSize>
+}
+
+/** @beta */
+export type TextSkeletonElementType = SkeletonElementType
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> = Props<
+  TextSkeletonOwnProps,
+  E
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function TextSkeleton<
+  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
+>(props: TextSkeletonProps<E>): React.JSX.Element {
+  const {
+    className,
+    size = 2,
+    ...rest
+  } = props as TextSkeletonProps<typeof DEFAULT_TEXT_SKELETON_ELEMENT>
+
+  return (
+    <Skeleton
+      {...rest}
+      className={text_skeleton({
+        className,
+        size,
+      })}
+    />
+  )
+}

package/src/primitives/skeleton/__workshop__/Delay.tsx

@@ -0,0 +1,69 @@
+import {
+  Box,
+  Card,
+  CodeSkeleton,
+  Container,
+  Flex,
+  HeadingSkeleton,
+  LabelSkeleton,
+  Skeleton,
+  Stack,
+  Text,
+  TextSkeleton,
+} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/tokens'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+export default function SkeletonDelayStory(): React.JSX.Element {
+  const tone = useSelect('Tone', CARD_TONES)
+  const animated = useBoolean('Animated', true)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Container width={1}>
+        <Text muted>Delayed by 2000ms</Text>
+        <Card border marginTop={4} padding={2} radius={2} tone={tone}>
+          <Flex align="center">
+            <Skeleton
+              animated={animated}
+              delay={1000}
+              marginRight={3}
+              radius={2}
+              style={{width: 90, height: 90}}
+            />
+            <Stack flex={1} gap={2}>
+              <HeadingSkeleton
+                animated={animated}
+                delay={1000}
+                radius={1}
+                size={4}
+                style={{width: '100%'}}
+              />
+              <TextSkeleton
+                animated={animated}
+                delay={1000}
+                radius={1}
+                size={1}
+                style={{width: '100%'}}
+              />
+              <LabelSkeleton
+                animated={animated}
+                delay={1000}
+                radius={1}
+                size={1}
+                style={{width: '100%'}}
+              />
+              <CodeSkeleton
+                animated={animated}
+                delay={1000}
+                radius={1}
+                size={1}
+                style={{width: '100%'}}
+              />
+            </Stack>
+          </Flex>
+        </Card>
+      </Container>
+    </Box>
+  )
+}

package/src/primitives/skeleton/__workshop__/Skeleton.tsx

@@ -0,0 +1,63 @@
+import {
+  Box,
+  Card,
+  CodeSkeleton,
+  Container,
+  Flex,
+  Grid,
+  HeadingSkeleton,
+  LabelSkeleton,
+  Skeleton,
+  Stack,
+  TextSkeleton,
+} from '@sanity/ui'
+import {CARD_TONES} from '@sanity/ui/tokens'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+export default function SkeletonStory(): React.JSX.Element {
+  const tone = useSelect('Tone', CARD_TONES)
+  const animated = useBoolean('Animated', true)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Container width={1}>
+        <Stack gap={4}>
+          {[1, 2, 3].map((item) => (
+            <Card key={item} border padding={2} radius={2} tone={tone}>
+              <Flex align="center">
+                <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
+                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
+                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
+                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
+                  <Skeleton animated={animated} radius={2} style={{width: 40, height: 40}} />
+                </Grid>
+                <Stack flex={1} gap={2}>
+                  <HeadingSkeleton animated={animated} radius={1} style={{width: '100%'}} />
+                  <TextSkeleton animated={animated} radius={1} style={{width: '100%'}} />
+                  <LabelSkeleton animated={animated} radius={1} style={{width: '100%'}} />
+                  <CodeSkeleton animated={animated} radius={1} style={{width: '100%'}} />
+                </Stack>
+              </Flex>
+              <Flex marginTop={2}>
+                <Skeleton
+                  animated={animated}
+                  flex={1}
+                  marginRight={1}
+                  radius={2}
+                  style={{height: 50}}
+                />
+                <Skeleton
+                  animated={animated}
+                  flex={1}
+                  marginLeft={1}
+                  radius={2}
+                  style={{height: 50}}
+                />
+              </Flex>
+            </Card>
+          ))}
+        </Stack>
+      </Container>
+    </Box>
+  )
+}

package/src/primitives/skeleton/__workshop__/index.ts

@@ -0,0 +1,13 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/skeleton',
+  title: 'Skeleton',
+  stories: [
+    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./Skeleton'))},
+    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./Delay'))},
+  ],
+}
+
+export default scope