@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/src/primitives/tooltip/__workshop__/CustomPortal.tsx

@@ -1,102 +0,0 @@
-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
-            ref={setBoundaryElement}
-            border
-            padding={4}
-            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
-        ref={setPortal1Element}
-        border
-        margin={4}
-        padding={4}
-        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/primitives/tooltip/__workshop__/OverflowingBoundary.tsx

@@ -1,74 +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.',
-  )
-  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
-          ref={setBoundaryElement}
-          border
-          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}
-                  text="Show buttons"
-                  onClick={handleShowButtons}
-                />
-              </Stack>
-            </Flex>
-          </Flex>
-
-          {buttonsVisible && (
-            <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"
-                onClick={handleHideButtons}
-              />
-            </Tooltip>
-          )}
-        </Card>
-      </BoundaryElementProvider>
-    </Flex>
-  )
-}

package/src/primitives/tooltip/__workshop__/Props.tsx

@@ -1,107 +0,0 @@
-import {
-  Button,
-  Card,
-  SHADOW,
-  SPACE,
-  Stack,
-  Text,
-  Tooltip,
-  TooltipDelayGroupProvider,
-} from '@sanity/ui'
-import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
-
-import {CardWrapper, WORKSHOP_PLACEMENT_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', SPACE, 2)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-  const portal = useBoolean('Portal', true)
-  const openDelay = useNumber('Open Delay', 500)
-  const closeDelay = useNumber('Close Delay', 100)
-  const shadow = useSelect('Shadow', SHADOW, 2)
-
-  return (
-    <CardWrapper gap={[5, 6]} pattern="halftone">
-      <Stack gap={4}>
-        <Stack gap={3}>
-          <Text size={1} weight="medium">
-            Single tooltip
-          </Text>
-        </Stack>
-
-        <Card display="flex" gap={4} justifyContent="center" padding={4} radius={4} shadow={1}>
-          <Tooltip
-            arrow={arrow}
-            delay={{
-              open: openDelay,
-              close: closeDelay,
-            }}
-            padding={padding}
-            placement={placement}
-            portal={portal}
-            shadow={shadow}
-            text={content}
-          >
-            <Button mode="bleed" text="Hover me" />
-          </Tooltip>
-        </Card>
-      </Stack>
-
-      {/* GROUPED TOOLTIPS */}
-
-      <Stack gap={4}>
-        <Stack gap={3}>
-          <Text size={1} weight="medium">
-            Grouped tooltips
-          </Text>
-          <Text muted size={1}>
-            All tooltip delays are set to 1ms after the first tooltip within a DelayGroupProvider
-            opens.
-          </Text>
-        </Stack>
-
-        <Card display="flex" gap={4} justifyContent="center" padding={4} radius={4} shadow={1}>
-          <TooltipDelayGroupProvider
-            delay={{
-              open: openDelay,
-              close: closeDelay,
-            }}
-          >
-            <Tooltip
-              arrow={arrow}
-              content={<Text size={1}>{content}</Text>}
-              // This is overridden by the group delay, kept here intentionally for testing purposes.
-              delay={{
-                open: 100,
-                close: 100,
-              }}
-              padding={padding}
-              placement={placement}
-              portal={portal}
-              shadow={shadow}
-            >
-              <Button mode="bleed" text="Hover me" />
-            </Tooltip>
-            <Tooltip
-              arrow={arrow}
-              content={<Text size={1}>{content}</Text>}
-              // This is overridden by the group delay, kept here intentionally for testing purposes.
-              delay={{
-                open: 100,
-                close: 100,
-              }}
-              padding={padding}
-              placement={placement}
-              portal={portal}
-              shadow={shadow}
-            >
-              <Button mode="bleed" text="Or me" />
-            </Tooltip>
-          </TooltipDelayGroupProvider>
-        </Card>
-      </Stack>
-    </CardWrapper>
-  )
-}

package/src/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.',
-  )
-  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
-          ref={setBoundaryElement}
-          // border
-          radius={2}
-          shadow={1}
-          style={{
-            height: 'calc(100vh - 100px)',
-            overflow: 'hidden',
-            position: 'relative',
-            resize: 'both',
-            width: 'calc(100vw - 100px)',
-            // width: '500px',
-            // width: '100%',
-            // maxWidth: '640px',
-          }}
-        >
-          <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>
-  )
-}

package/src/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/primitives/tooltip/constants.ts

@@ -1,24 +0,0 @@
-import type {Placement} from '../../core/types'
-
-export const DEFAULT_TOOLTIP_DELAY = {
-  open: 500,
-  close: 100,
-}
-
-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/primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupContext.tsx

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

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

@@ -1,96 +0,0 @@
-import {type ReactNode, useCallback, useMemo, useRef, useState} from 'react'
-
-import type {Delay} from '../../../core/types'
-import {DEFAULT_TOOLTIP_DELAY} from '../constants'
-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 0ms after the first tooltip of the group opens.
- */
-export function TooltipDelayGroupProvider(
-  props: TooltipDelayGroupProviderProps,
-): React.JSX.Element {
-  const {children, delay = DEFAULT_TOOLTIP_DELAY} = props
-
-  const [visibleTooltipId, setVisibleTooltipId] = useState<string | undefined>(undefined)
-
-  const openDelay = typeof delay === 'number' ? delay : delay?.open || 0
-  const openDelayRef = useRef(openDelay)
-
-  const closeDelay = typeof delay === 'number' ? delay : delay?.close || 0
-  const closeDelayRef = useRef(closeDelay)
-
-  const timerRef = useRef<NodeJS.Timeout | undefined>(undefined)
-  const openRef = useRef(false)
-
-  const handleOpenChange = useCallback(
-    (params: {open: boolean; id: string; immediate?: boolean}) => {
-      const {open, id, immediate} = params
-
-      if (timerRef.current) {
-        clearTimeout(timerRef.current)
-        timerRef.current = undefined
-      }
-
-      if (open) {
-        // open
-
-        if (immediate) {
-          setVisibleTooltipId(id)
-          openRef.current = true
-          return
-        }
-
-        // If the group is already open, we want the next tooltip to open immediately.
-        const ms = openRef.current ? 0 : openDelayRef.current
-
-        timerRef.current = setTimeout(() => {
-          setVisibleTooltipId(id)
-          openRef.current = true
-        }, ms)
-        return
-      }
-
-      // close
-
-      if (immediate) {
-        setVisibleTooltipId(undefined)
-        openRef.current = false
-        return
-      }
-
-      timerRef.current = setTimeout(() => {
-        setVisibleTooltipId(undefined)
-        openRef.current = false
-      }, closeDelayRef.current)
-    },
-    [],
-  )
-
-  const value: TooltipDelayGroupContextValue = useMemo(
-    () => ({handleOpenChange, visibleTooltipId}),
-    [handleOpenChange, visibleTooltipId],
-  )
-
-  return <TooltipDelayGroupContext value={value}>{children}</TooltipDelayGroupContext>
-}

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

@@ -1,7 +0,0 @@
-/**
- * @beta
- */
-export interface TooltipDelayGroupContextValue {
-  handleOpenChange: (params: {open: boolean; id: string; immediate?: boolean}) => void
-  visibleTooltipId: string | undefined
-}

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

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

package/src/root/Root.tsx

@@ -1,93 +0,0 @@
-import {root, root_body, ROOT_STYLE_PROP_KEYS, type RootStyleProps} from '@sanity/ui-css'
-import {useCallback, useImperativeHandle, useRef, useState} from 'react'
-
-import {_splitKeys} from '../core/_keys'
-import type {Props} from '../core/types'
-import {RootProvider} from './RootProvider'
-
-/** @public */
-export const DEFAULT_ROOT_ELEMENT = 'html'
-
-/** @public */
-export type RootOwnProps = RootStyleProps
-
-/** @public */
-export type RootElementType = 'html' | 'div'
-
-/** @public */
-export type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
-
-/**
- * The `Root` component.
- *
- * @public
- */
-export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
-  props: RootProps<E>,
-): React.JSX.Element {
-  const [
-    {
-      height,
-      overflow = 'hidden',
-      scheme = 'light',
-      tone = 'default',
-      // split style props
-      ...styleProps
-    },
-    {
-      as: Element = DEFAULT_ROOT_ELEMENT,
-      children,
-      ref: forwardedRef,
-      // split DOM props
-      ...domProps
-    },
-  ] = _splitKeys(props as RootProps<typeof DEFAULT_ROOT_ELEMENT>, ROOT_STYLE_PROP_KEYS)
-
-  const ref = useRef<HTMLHtmlElement | null>(null)
-
-  useImperativeHandle<HTMLHtmlElement | null, HTMLHtmlElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
-
-  const handleRef = useCallback((el: HTMLHtmlElement | null) => {
-    setBoundaryElement(el)
-    ref.current = el
-  }, [])
-
-  let node = (
-    <RootProvider
-      boundaryElement={boundaryElement}
-      portalElement={portalElement}
-      scheme={scheme}
-      tone={tone}
-    >
-      {children}
-      <div ref={setPortalElement} data-portal="" />
-    </RootProvider>
-  )
-
-  if (Element === 'html') {
-    node = <body className={root_body({height})}>{node}</body>
-  }
-
-  return (
-    <Element
-      data-ui="Root"
-      {...domProps}
-      ref={handleRef}
-      className={root({
-        ...styleProps,
-        height,
-        overflow,
-        scheme,
-        tone,
-      })}
-    >
-      {node}
-    </Element>
-  )
-}