@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

package/src/core/primitives/textInput/__workshop__/typed.tsx

@@ -0,0 +1,23 @@
+import {Box, Container, TextInput} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+
+import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
+
+export default function TypedStory(): React.JSX.Element {
+  const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
+
+  const [value, setValue] = useState('')
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.currentTarget.value)
+  }, [])
+
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <TextInput onChange={handleChange} type={type} value={value} />
+      </Container>
+    </Box>
+  )
+}

package/src/core/primitives/textInput/textInput.tsx

@@ -0,0 +1,258 @@
+import {CloseIcon} from '@sanity/icons'
+import {
+  _inputElement,
+  _inputPresentation,
+  type InputStyleProps,
+  type ResponsiveProp,
+  textInput,
+  textInputElement,
+  textInputPrefix,
+  textInputSuffix,
+} from '@sanity/ui/css'
+import type {FontWeight, Space} from '@sanity/ui/theme'
+import {
+  type ElementType,
+  isValidElement,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
+import {isValidElementType} from 'react-is'
+
+import {EMPTY_RECORD} from '../../constants'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {isRecord} from '../../lib/isRecord'
+import type {ComponentType, Props} from '../../types'
+import {Box} from '../box/box'
+import {Button, type ButtonProps} from '../button/button'
+import {Text} from '../text/text'
+
+/** @public */
+export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
+
+/** @public */
+export type TextInputClearButtonProps = Omit<
+  ButtonProps<'button'>,
+  'as' | 'onClick' | 'onMouseDown'
+>
+
+/** @public */
+export type TextInputOwnProps = InputStyleProps & {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
+  /**
+   * @beta
+   */
+  clearButton?: boolean | TextInputClearButtonProps
+  customValidity?: string
+  icon?: ElementType | ReactNode
+  iconRight?: ElementType | ReactNode
+  /**
+   * @beta
+   */
+  onClear?: () => void
+  prefix?: ReactNode
+  suffix?: ReactNode
+  weight?: FontWeight
+}
+
+/** @public */
+export type TextInputElementType = 'input' | ComponentType
+
+/** @public */
+export type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
+  TextInputOwnProps,
+  E
+>
+
+/**
+ * Single line text input.
+ *
+ * @public
+ */
+export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT>(
+  props: TextInputProps<E>,
+): React.JSX.Element {
+  const {
+    __unstable_disableFocusRing,
+    as: Element = DEFAULT_TEXT_INPUT_ELEMENT,
+    border = true,
+    className,
+    clearButton,
+    disabled = false,
+    fontSize = 2,
+    gap = 3,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    onClear,
+    padding = 3,
+    prefix,
+    radius = 2,
+    readOnly,
+    ref: forwardedRef,
+    suffix,
+    customValidity,
+    type = 'text',
+    weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
+    width,
+    ...rest
+  } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>
+
+  const ref = useRef<HTMLInputElement | null>(null)
+
+  const responsivePadding = useResponsiveProp(padding)
+
+  const withClearButton = Boolean(clearButton)
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  // Prevent the clear button from taking the focus away from the input
+  const handleClearMouseDown = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }, [])
+
+  const handleClearClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (onClear) onClear()
+
+      // Focus the input, in case focus has been lost when clicking the clear button
+      ref.current?.focus()
+    },
+    [onClear, ref],
+  )
+
+  const clearButtonBoxPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(responsivePadding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 2 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [responsivePadding])
+
+  const clearButtonPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(responsivePadding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 0]
+        if (value === 2) return [key, 1]
+
+        return [key, typeof value === 'number' ? value - 1 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [responsivePadding])
+
+  const clearButtonProps: TextInputClearButtonProps = useMemo(
+    () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
+    [clearButton],
+  )
+
+  return (
+    <Box
+      alignItems="center"
+      className={textInput({
+        className,
+        border,
+        fontSize,
+        padding,
+        radius,
+        gap: gap,
+        width,
+      })}
+      data-icon-left={IconComponent ? '' : undefined}
+      data-icon-right={IconRightComponent ? '' : undefined}
+      data-invalid={customValidity ? '' : undefined}
+      data-prefix={prefix ? '' : undefined}
+      data-read-only={!disabled && readOnly ? '' : undefined}
+      data-suffix={suffix ? '' : undefined}
+      data-ui="TextInput"
+      display="flex"
+    >
+      {prefix && (
+        <Box className={textInputPrefix()} sizing="border">
+          <span>{prefix}</span>
+        </Box>
+      )}
+
+      <Box className={textInputElement()} flex={1} position="relative">
+        <Element
+          {...rest}
+          className={_inputElement()}
+          data-no-focus-ring={__unstable_disableFocusRing ? '' : undefined}
+          disabled={disabled}
+          readOnly={readOnly}
+          ref={ref}
+          type={type}
+        />
+
+        <Box className={_inputPresentation()} position="absolute">
+          {IconComponent && (
+            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
+              <Text size={fontSize}>
+                {isValidElement(IconComponent) && IconComponent}
+                {isValidElementType(IconComponent) && <IconComponent />}
+              </Text>
+            </Box>
+          )}
+
+          {!withClearButton && IconRightComponent && (
+            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
+              <Text size={fontSize}>
+                {isValidElement(IconRightComponent) && IconRightComponent}
+                {isValidElementType(IconRightComponent) && <IconRightComponent />}
+              </Text>
+            </Box>
+          )}
+        </Box>
+
+        {!disabled && !readOnly && clearButton && (
+          <Box
+            insetTop={0}
+            insetRight={0}
+            padding={clearButtonBoxPadding}
+            position="absolute"
+            style={{zIndex: 2}}
+          >
+            <Button
+              aria-label="Clear"
+              data-qa="clear-button"
+              display="block"
+              fontSize={fontSize}
+              icon={CloseIcon}
+              mode="bleed"
+              padding={clearButtonPadding}
+              radius={radius}
+              {...clearButtonProps}
+              onClick={handleClearClick}
+              onMouseDown={handleClearMouseDown}
+            />
+          </Box>
+        )}
+      </Box>
+
+      {suffix && (
+        <Box className={textInputSuffix()} sizing="border">
+          <span>{suffix}</span>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/core/primitives/tooltip/__workshop__/customPortal.tsx

@@ -0,0 +1,102 @@
+import {
+  BoundaryElementProvider,
+  Button,
+  Card,
+  Flex,
+  Portal,
+  PortalProvider,
+  Stack,
+  Text,
+  Tooltip,
+} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useMemo, useState} from 'react'
+
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
+
+const PORTAL_OPTIONS = {
+  '(true)': true,
+  '(false)': false,
+  'portal1': 'portal1',
+}
+
+export default function CustomPortalStory(): React.JSX.Element {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useSelect('Portal', PORTAL_OPTIONS)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const __unstable_elements = useMemo(
+    () => ({
+      portal1: portal1Element,
+    }),
+    [portal1Element],
+  )
+
+  return (
+    <PortalProvider __unstable_elements={__unstable_elements}>
+      <Flex align="center" height="fill" justify="center">
+        <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+          <Card
+            border
+            padding={4}
+            ref={setBoundaryElement}
+            style={{
+              height: 'calc(100vh - 100px)',
+              position: 'relative',
+              width: '500px',
+            }}
+          >
+            <Text>Boundary element</Text>
+            <Flex align="center" height="fill" justify="center">
+              <Flex justify="center">
+                <Stack gap={2}>
+                  <Tooltip
+                    boundaryElement={useBoundaryElement ? boundaryElement : null}
+                    content={content ? <Text size={1}>{content}</Text> : undefined}
+                    padding={2}
+                    placement={placement}
+                    portal={portal}
+                  >
+                    <Button mode="bleed" text="Tooltip" />
+                  </Tooltip>
+                </Stack>
+              </Flex>
+            </Flex>
+          </Card>
+        </BoundaryElementProvider>
+      </Flex>
+
+      <Card
+        border
+        margin={4}
+        padding={4}
+        ref={setPortal1Element}
+        style={{
+          left: 0,
+          position: 'absolute',
+          top: 0,
+          width: '175px',
+        }}
+        tone="critical"
+      />
+
+      <Portal __unstable_name="portal1">
+        <Stack gap={4}>
+          <Text size={1} weight="medium">
+            Portal 1 content
+          </Text>
+          <Text size={1}>
+            The tooltip's max-width should not exceed this container's width (minus padding) if it's
+            set to use this portal
+          </Text>
+        </Stack>
+      </Portal>
+    </PortalProvider>
+  )
+}

package/src/core/primitives/tooltip/__workshop__/index.ts

@@ -0,0 +1,31 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/tooltip',
+  title: 'Tooltip',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'resizableBoundary',
+      title: 'Resizable Boundary',
+      component: lazy(() => import('./resizableBoundary')),
+    },
+    {
+      name: 'overflowBoundary',
+      title: 'Overflowing Boundary',
+      component: lazy(() => import('./overflowingBoundary')),
+    },
+    {
+      name: 'customPortalStory',
+      title: 'Custom Portal',
+      component: lazy(() => import('./customPortal')),
+    },
+  ],
+}
+
+export default scope

package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -0,0 +1,74 @@
+import {BoundaryElementProvider, Button, Card, Code, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
+
+export default function OverflowingBoundaryStory(): React.JSX.Element {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useBoolean('Portal', false)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonsVisible, setButtonsVisible] = useState(true)
+
+  const handleHideButtons = useCallback(() => {
+    setButtonsVisible(false)
+  }, [])
+
+  const handleShowButtons = useCallback(() => {
+    setButtonsVisible(true)
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center" style={{height: '200vh'}}>
+      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+        <Card
+          border
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 100px)',
+            overflow: 'hidden',
+            position: 'relative',
+            resize: 'both',
+            width: '500px',
+          }}
+        >
+          <Flex align="center" height="fill" justify="center">
+            <Flex justify="center">
+              <Stack gap={2}>
+                <Code size={1}>Placement: {placement}</Code>
+                <Button
+                  disabled={buttonsVisible}
+                  fontSize={1}
+                  onClick={handleShowButtons}
+                  text="Show buttons"
+                />
+              </Stack>
+            </Flex>
+          </Flex>
+
+          {buttonsVisible && (
+            <Tooltip
+              content={<Text size={1}>{content}</Text>}
+              padding={2}
+              placement={placement}
+              portal={portal}
+            >
+              <Button
+                mode="bleed"
+                onClick={handleHideButtons}
+                style={{position: 'absolute', top: 10, right: 10}}
+                text="Tooltip"
+              />
+            </Tooltip>
+          )}
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}

package/src/core/primitives/tooltip/__workshop__/props.tsx

@@ -0,0 +1,112 @@
+import {Button, Card, Flex, Stack, Text, Tooltip, TooltipDelayGroupProvider} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_SHADOW_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '$workshop'
+
+export default function PropsStory(): React.JSX.Element {
+  const arrow = useBoolean('Arrow', false)
+  const content = useText('Content', 'Tooltip content')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
+  const portal = useBoolean('Portal', true)
+  const openDelay = useNumber('Open Delay', 200)
+  const closeDelay = useNumber('Close Delay', 200)
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
+
+  return (
+    <Card height="fill">
+      <Flex
+        height="fill"
+        align="center"
+        justify="center"
+        padding={8}
+        sizing="border"
+        direction="column"
+        gap={4}
+      >
+        <Stack
+          gap={4}
+          padding={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
+        >
+          <Text align="center" size={3}>
+            Standalone tooltip
+          </Text>
+          <Flex align="center" justify="center" padding={4} sizing="border">
+            <Tooltip
+              arrow={arrow}
+              content={<Text size={1}>{content}</Text>}
+              padding={padding}
+              placement={placement}
+              portal={portal}
+              shadow={shadow}
+              delay={{
+                open: openDelay,
+                close: closeDelay,
+              }}
+            >
+              <Button mode="bleed" text="Hover me" />
+            </Tooltip>
+          </Flex>
+        </Stack>
+        <Stack
+          gap={4}
+          padding={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
+        >
+          <Text align="center" size={3}>
+            Grouped tooltips
+          </Text>
+          <Text align="center" size={1}>
+            All tooltip delays are set to 1ms after the first tooltip within a DelayGroupProvider
+            opens.
+          </Text>
+          <Flex align="center" justify="center" padding={4} sizing="border" gap={4}>
+            <TooltipDelayGroupProvider
+              delay={{
+                open: openDelay,
+                close: closeDelay,
+              }}
+            >
+              <Tooltip
+                arrow={arrow}
+                // This is overridden by the group delay, kept here intentionally for testing purposes.
+                delay={{
+                  open: 100,
+                  close: 100,
+                }}
+                content={<Text size={1}>{content}</Text>}
+                padding={padding}
+                placement={placement}
+                portal={portal}
+                shadow={shadow}
+              >
+                <Button mode="bleed" text="Hover me" />
+              </Tooltip>
+              <Tooltip
+                arrow={arrow}
+                // This is overridden by the group delay, kept here intentionally for testing purposes.
+                delay={{
+                  open: 100,
+                  close: 100,
+                }}
+                content={<Text size={1}>{content}</Text>}
+                padding={padding}
+                placement={placement}
+                portal={portal}
+                shadow={shadow}
+              >
+                <Button mode="bleed" text="Or me" />
+              </Tooltip>
+            </TooltipDelayGroupProvider>
+          </Flex>
+        </Stack>
+      </Flex>
+    </Card>
+  )
+}

package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -0,0 +1,86 @@
+import {BoundaryElementProvider, Button, Card, Code, Flex, Text, Tooltip} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useState} from 'react'
+
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
+
+export default function ResizableBoundaryStory(): React.JSX.Element {
+  const content = useText(
+    'Content',
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
+  )
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
+  const portal = useBoolean('Portal', true)
+  const useBoundaryElement = useBoolean('Use boundary element', true)
+
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <BoundaryElementProvider element={useBoundaryElement ? boundaryElement : null}>
+        <Card
+          border
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 100px)',
+            overflow: 'hidden',
+            position: 'relative',
+            resize: 'both',
+            width: '500px',
+          }}
+        >
+          <Flex align="center" height="fill" justify="center">
+            <Flex justify="center">
+              <Code size={1}>Placement: {placement}</Code>
+            </Flex>
+          </Flex>
+
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button mode="bleed" style={{position: 'absolute', top: 10, left: 10}} text="Tooltip" />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', top: 10, right: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', bottom: 10, left: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+          <Tooltip
+            content={<Text size={1}>{content}</Text>}
+            padding={2}
+            placement={placement}
+            portal={portal}
+          >
+            <Button
+              mode="bleed"
+              style={{position: 'absolute', bottom: 10, right: 10}}
+              text="Tooltip"
+            />
+          </Tooltip>
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}