@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

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

@@ -1,76 +0,0 @@
-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.',
-  )
-  // @ts-expect-error - TODO: fix this
-  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}
-              // @ts-expect-error - TODO: fix this
-              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

@@ -1,124 +0,0 @@
-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')
-  // @ts-expect-error - TODO: fix this
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
-  // @ts-expect-error - TODO: fix this
-  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)
-  // @ts-expect-error - TODO: fix this
-  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>}
-              // @ts-expect-error - TODO: fix this
-              padding={padding}
-              // @ts-expect-error - TODO: fix this
-              placement={placement}
-              portal={portal}
-              // @ts-expect-error - TODO: fix this
-              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>}
-                // @ts-expect-error - TODO: fix this
-                padding={padding}
-                // @ts-expect-error - TODO: fix this
-                placement={placement}
-                portal={portal}
-                // @ts-expect-error - TODO: fix this
-                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>}
-                // @ts-expect-error - TODO: fix this
-                padding={padding}
-                // @ts-expect-error - TODO: fix this
-                placement={placement}
-                portal={portal}
-                // @ts-expect-error - TODO: fix this
-                shadow={shadow}
-              >
-                <Button mode="bleed" text="Or me" />
-              </Tooltip>
-            </TooltipDelayGroupProvider>
-          </Flex>
-        </Stack>
-      </Flex>
-    </Card>
-  )
-}

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

@@ -1,91 +0,0 @@
-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.',
-  )
-  // @ts-expect-error - TODO: fix this
-  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}
-            // @ts-expect-error - TODO: fix this
-            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}
-            // @ts-expect-error - TODO: fix this
-            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}
-            // @ts-expect-error - TODO: fix this
-            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}
-            // @ts-expect-error - TODO: fix this
-            placement={placement}
-            portal={portal}
-          >
-            <Button
-              mode="bleed"
-              style={{position: 'absolute', bottom: 10, right: 10}}
-              text="Tooltip"
-            />
-          </Tooltip>
-        </Card>
-      </BoundaryElementProvider>
-    </Flex>
-  )
-}

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

@@ -1,31 +0,0 @@
-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/constants.ts

@@ -1,23 +0,0 @@
-import type {Placement} from '../../types'
-
-export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
-export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6
-export const DEFAULT_TOOLTIP_ARROW_RADIUS = 2
-
-export const DEFAULT_TOOLTIP_DISTANCE = 4
-export const DEFAULT_TOOLTIP_PADDING = 4
-
-export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  'top': ['top-end', 'top-start', 'bottom', 'left', 'right'],
-  'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],
-  'top-end': ['top', 'top-start', 'bottom-end', 'left-end', 'right-end'],
-  'bottom': ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
-  'bottom-start': ['bottom', 'bottom-end', 'top-start', 'left-start', 'right-start'],
-  'bottom-end': ['bottom', 'bottom-start', 'top-end', 'left-end', 'right-end'],
-  'left': ['left-end', 'left-start', 'right', 'top', 'bottom'],
-  'left-start': ['left', 'left-end', 'right-start', 'top-start', 'bottom-start'],
-  'left-end': ['left', 'left-start', 'right-end', 'top-end', 'bottom-end'],
-  'right': ['right-end', 'right-start', 'left', 'top', 'bottom'],
-  'right-start': ['right', 'right-end', 'left-start', 'top-start', 'bottom-start'],
-  'right-end': ['right', 'right-start', 'left-end', 'top-end', 'bottom-end'],
-}

package/src/core/primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupContext.tsx

@@ -1,13 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../../lib/createGlobalScopedContext'
-import type {TooltipDelayGroupContextValue} from './types'
-
-/**
- * @beta
- */
-export const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null> =
-  createGlobalScopedContext<TooltipDelayGroupContextValue | null>(
-    '@sanity/ui/v3/tooltipDelayGroup',
-    null,
-  )

package/src/core/primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupProvider.tsx

@@ -1,55 +0,0 @@
-import {type ReactNode, useMemo} from 'react'
-
-import {useDelayedState} from '../../../hooks/useDelayedState'
-import type {Delay} from '../../../types'
-import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
-import type {TooltipDelayGroupContextValue} from './types'
-
-/**
- * @public
- * */
-export interface TooltipDelayGroupProviderProps {
-  children?: ReactNode
-  /**
-   * Handles the delays to open or close a tooltip inside a group
-   *
-   * If only a `number` is passed, it will be used for both opening and closing.
-   *
-   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
-   *
-   * @public
-   */
-  delay: Delay
-}
-
-/**
- * @public
- * Provides context for a group of tooltip elements that should share a delay
- * which temporarily becomes 1 ms after the first floating element of the group opens.
- */
-export function TooltipDelayGroupProvider(
-  props: TooltipDelayGroupProviderProps,
-): React.JSX.Element {
-  const {children, delay} = props
-  const [isGroupActive, setIsGroupActive] = useDelayedState(false)
-  const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)
-
-  const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
-  const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
-
-  const value: TooltipDelayGroupContextValue = useMemo(
-    () => ({
-      setIsGroupActive: setIsGroupActive,
-      openTooltipId: openTooltipId,
-      setOpenTooltipId: setOpenTooltipId,
-      // When the group is active, we want the next tooltip to open immediately.
-      openDelay: isGroupActive ? 1 : openDelay,
-      closeDelay: closeDelay,
-    }),
-    [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId],
-  )
-
-  return (
-    <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
-  )
-}

package/src/core/primitives/tooltip/tooltipDelayGroup/types.ts

@@ -1,10 +0,0 @@
-/**
- * @beta
- */
-export interface TooltipDelayGroupContextValue {
-  setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
-  setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
-  openDelay: number
-  closeDelay: number
-  openTooltipId: string | null
-}

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,13 +0,0 @@
-import {useContext} from 'react'
-
-import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
-import type {TooltipDelayGroupContextValue} from './types'
-
-/**
- * @beta
- */
-export function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null {
-  const value = useContext(TooltipDelayGroupContext)
-
-  return value
-}

package/src/core/types.ts

@@ -1,56 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
-
-/**
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
- *
- * @public
- */
-export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
-
-/** @public */
-export type EmptyProps = {}
-
-/** @public */
-export type TagType = keyof JSX.IntrinsicElements
-
-/** @public */
-export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
-
-/** @public */
-export type ElementType<P> = TagType | ComponentType<P>
-
-/** @public */
-export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
-  P & {as?: E}
->
-
-/**
- * Placement of floating UI elements.
- *
- * @public
- */
-export type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-
-/** @public */
-export type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>

package/src/core/utils/ErrorBoundary.tsx

@@ -1,50 +0,0 @@
-import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
-
-import {Code} from '../primitives/code/Code'
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: ErrorInfo}) => void
-}>
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export interface ErrorBoundaryState {
-  error: Error | null
-}
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  override state: ErrorBoundaryState = {error: null}
-
-  static displayName = 'ErrorBoundary'
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    // Update state so the next render will show the fallback UI.
-    return {error}
-  }
-
-  override componentDidCatch(error: Error, info: ErrorInfo): void {
-    this.props.onCatch({error, info})
-  }
-
-  override render(): ReactNode {
-    const {error} = this.state
-
-    if (error) {
-      const message = typeof error?.message === 'string' ? error.message : 'Error'
-
-      return <Code>{message}</Code>
-    }
-
-    return this.props.children
-  }
-}

package/src/core/utils/boundaryElement/BoundaryElement.test.tsx

@@ -1,102 +0,0 @@
-import {describe, expect, it, vi} from 'vitest'
-
-import {render} from '$test/utils'
-
-import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
-import {useBoundaryElement} from './useBoundaryElement'
-
-describe('utils/boundaryElement', () => {
-  describe('useBoundaryElement', () => {
-    it('should get context value', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: BoundaryElementContextValue = {
-          version: 0.0,
-          element: null,
-        }
-
-        return (
-          <BoundaryElementContext.Provider value={value}>
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should provide default value when no context value is provided', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        const rootBoundaryElement = useBoundaryElement()
-
-        log(rootBoundaryElement)
-
-        return null
-      }
-
-      function Root() {
-        return (
-          <BoundaryElementContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={undefined}
-          >
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].element).toBe(null)
-    })
-
-    it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
-
-      function Debug() {
-        try {
-          useBoundaryElement()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        // NOTE: we’re testing this because the context value may be a function in the future
-
-        return (
-          <BoundaryElementContext.Provider
-            // @ts-expect-error - we want to test the error case
-            value={() => ({version: 1})}
-          >
-            <Debug />
-          </BoundaryElementContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual(
-        'useBoundaryElement(): the context value is not compatible',
-      )
-    })
-  })
-})

package/src/core/utils/boundaryElement/BoundaryElementContext.ts

@@ -1,10 +0,0 @@
-import type {Context} from 'react'
-
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import type {BoundaryElementContextValue} from './types'
-
-export const BoundaryElementContext: Context<BoundaryElementContextValue | null> =
-  createGlobalScopedContext<BoundaryElementContextValue | null>(
-    '@sanity/ui/v3/boundaryElement',
-    null,
-  )

package/src/core/utils/boundaryElement/BoundaryElementProvider.tsx

@@ -1,18 +0,0 @@
-import {type ReactNode, useMemo} from 'react'
-
-import {BoundaryElementContext} from './BoundaryElementContext'
-import type {BoundaryElementContextValue} from './types'
-
-/** @public */
-export interface BoundaryElementProviderProps {
-  children: ReactNode
-  element: HTMLElement | null
-}
-
-/** @public */
-export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
-  const {children, element} = props
-  const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
-
-  return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
-}