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

package/src/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -1,95 +0,0 @@
-import {
-  BoundaryElementProvider,
-  Box,
-  Card,
-  CARD_TONES,
-  type CardTone,
-  Flex,
-  Popover,
-  type PopoverProps,
-  type PopoverUpdateCallback,
-  Stack,
-  Text,
-} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {useCallback, useEffect, useRef, useState} from 'react'
-
-const SIDE_PANEL_WIDTH = {
-  sm: 300,
-  md: 400,
-  lg: 500,
-  xl: 600,
-}
-
-export default function SidePanelStory(): React.JSX.Element {
-  const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
-  const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
-  const updateRef = useRef<PopoverUpdateCallback>(undefined)
-  const tone = useSelect('Tone', CARD_TONES) ?? 'inherit'
-
-  useEffect(() => updateRef.current?.(), [sidePanelWidth])
-
-  return (
-    <Flex height="fill">
-      <Card flex={1}>
-        <Box padding={4}>
-          <Text>
-            This story shows that popovers respect their boundary when used in a side panel.
-          </Text>
-        </Box>
-      </Card>
-      <BoundaryElementProvider element={sidePanel}>
-        <Card ref={setSidePanel} borderLeft flex="none" style={{width: sidePanelWidth}} width={0}>
-          <Stack gap={5} padding={4}>
-            <Text muted size={1}>
-              Click the <code>reference</code> text below to toggle the popover.
-            </Text>
-
-            <Card border padding={3}>
-              <Text size={1}>
-                Some editor <InlineObject tone={tone} updateRef={updateRef} />
-              </Text>
-            </Card>
-          </Stack>
-        </Card>
-      </BoundaryElementProvider>
-    </Flex>
-  )
-}
-
-function InlineObject(props: {tone: CardTone | 'inherit'; updateRef?: PopoverProps['updateRef']}) {
-  const {tone, updateRef} = props
-  const [open, setOpen] = useState(false)
-
-  const handleClick = useCallback(() => {
-    setOpen((prev) => !prev)
-  }, [])
-
-  return (
-    <Popover
-      constrainSize
-      content={
-        <Box padding={3}>
-          <Text size={1}>
-            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
-            has been the industry's standard dummy text ever since the 1500s, when an unknown
-            printer took a galley of type and scrambled it to make a type specimen book. It has
-            survived not only five centuries, but also the leap into electronic typesetting,
-            remaining essentially unchanged. It was popularised in the 1960s with the release of
-            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
-            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-          </Text>
-        </Box>
-      }
-      open={open}
-      overflow="auto"
-      portal
-      tone={tone}
-      updateRef={updateRef}
-      width={0}
-    >
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
-      <code onClick={handleClick}>reference</code>
-    </Popover>
-  )
-}

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -1,97 +0,0 @@
-import {
-  BoundaryElementProvider,
-  Button,
-  Card,
-  Popover,
-  type PopoverUpdateCallback,
-  PortalProvider,
-  Text,
-} from '@sanity/ui'
-import {CONTAINER, RADIUS} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useRef, useState} from 'react'
-
-import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
-
-export default function TestStory(): React.JSX.Element {
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  const mount = useBoolean('Mount', true)
-  const arrow = useBoolean('Arrow', true)
-  const constrainSize = useBoolean('Constrain size', true)
-  const matchReferenceWidth = useBoolean('Match reference width', false)
-  const open = useBoolean('Open', true)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
-  const portal = useBoolean('Render in portal', true)
-  const preventOverflow = useBoolean('Prevent overflow', true)
-  const radius = useSelect('Radius', RADIUS, 2)
-  const referenceWide = useBoolean('Reference wide?', false)
-  const width = useSelect('Width', CONTAINER, 'auto')
-
-  const text = useText('Text', 'Test')
-
-  const updateRef = useRef<PopoverUpdateCallback>(undefined)
-
-  const button = (
-    <Button selected style={{width: referenceWide ? 300 : undefined}} text="reference" />
-  )
-
-  return (
-    <Card
-      ref={setBoundaryElement}
-      shadow={2}
-      style={{
-        position: 'absolute',
-        top: 50,
-        right: 50,
-        bottom: 50,
-        left: 50,
-      }}
-    >
-      <div
-        ref={setPortalElement}
-        data-portal=""
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-        }}
-      />
-
-      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
-        <div style={{padding: '150vh'}}>
-          <PortalProvider element={portalElement}>
-            <BoundaryElementProvider element={boundaryElement}>
-              {!mount && button}
-              {mount && (
-                <Popover
-                  arrow={arrow}
-                  constrainSize={constrainSize}
-                  content={<Text size={1}>{text}</Text>}
-                  fallbackPlacements={['left', 'bottom', 'right', 'top']}
-                  matchReferenceWidth={matchReferenceWidth}
-                  open={open}
-                  overflow="hidden"
-                  padding={3}
-                  placement={placement}
-                  portal={portal}
-                  preventOverflow={preventOverflow}
-                  radius={radius}
-                  updateRef={updateRef}
-                  width={width}
-                >
-                  {button}
-                </Popover>
-              )}
-            </BoundaryElementProvider>
-          </PortalProvider>
-        </div>
-      </div>
-    </Card>
-  )
-}

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

@@ -1,56 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/popover',
-  title: 'Popover',
-  stories: [
-    {
-      name: 'test',
-      title: 'Test',
-      component: lazy(() => import('./TestStory')),
-    },
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./PlainStory')),
-    },
-    {
-      name: 'recursive',
-      title: 'Recursive',
-      component: lazy(() => import('./RecursiveStory')),
-    },
-    {
-      name: 'match-ref-width',
-      title: 'Match reference width',
-      component: lazy(() => import('./MatchReferenceWidthStory')),
-    },
-    {
-      name: 'margins',
-      title: 'Margins',
-      component: lazy(() => import('./MarginsStory')),
-    },
-    {
-      name: 'aligned',
-      title: 'Aligned',
-      component: lazy(() => import('./AlignedStory')),
-    },
-    {
-      name: 'openOnMountStory',
-      title: 'Open on mount',
-      component: lazy(() => import('./OpenOnMountStory')),
-    },
-    {
-      name: 'side-panel',
-      title: 'Side panel',
-      component: lazy(() => import('./SidePanelStory')),
-    },
-    {
-      name: 'portal-inheritance',
-      title: 'Portal inheritance',
-      component: lazy(() => import('./portal-inheritance')),
-    },
-  ],
-}
-
-export default scope

package/src/primitives/popover/__workshop__/portal-inheritance.tsx

@@ -1,15 +0,0 @@
-import {Box, Card, Popover, Text, usePrefersDark} from '@sanity/ui'
-
-export default function PortalInheritanceStory() {
-  const dark = usePrefersDark()
-
-  return (
-    <Card padding={5} scheme={dark ? 'light' : 'dark'}>
-      <Box display="flex">
-        <Popover content={<Text>Within portal</Text>} open padding={4} portal>
-          <Text>Flipped scheme</Text>
-        </Popover>
-      </Box>
-    </Card>
-  )
-}

package/src/primitives/popover/constants.ts

@@ -1,20 +0,0 @@
-import type {Placement} from '../../core/types'
-import type {PopoverMargins} from './types'
-
-export const DEFAULT_POPOVER_DISTANCE = 4
-export const DEFAULT_POPOVER_PADDING = 4
-export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]
-export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  'top': ['bottom', 'left', 'right'],
-  'top-start': ['bottom-start', 'left-start', 'right-start'],
-  'top-end': ['bottom-end', 'left-end', 'right-end'],
-  'bottom': ['top', 'left', 'right'],
-  'bottom-start': ['top-start', 'left-start', 'right-start'],
-  'bottom-end': ['top-end', 'left-end', 'right-end'],
-  'left': ['right', 'top', 'bottom'],
-  'left-start': ['right-start', 'top-start', 'bottom-start'],
-  'left-end': ['right-end', 'top-end', 'bottom-end'],
-  'right': ['left', 'top', 'bottom'],
-  'right-start': ['left-start', 'top-start', 'bottom-start'],
-  'right-end': ['left-end', 'top-end', 'bottom-end'],
-}

package/src/primitives/popover/floating-ui/size.ts

@@ -1,75 +0,0 @@
-import {detectOverflow, type Middleware} from '@floating-ui/react-dom'
-
-export function size(options: {
-  boundaryElement?: HTMLElement | null
-  constrainSize: boolean
-  matchReferenceWidth?: boolean
-  padding?: number
-  referenceWidthRef: React.RefObject<number | undefined>
-}): Middleware {
-  const {padding = 0, constrainSize, matchReferenceWidth, referenceWidthRef} = options
-
-  return {
-    name: '@sanity/ui/size',
-    async fn(args) {
-      const {elements, placement, platform, rects} = args
-      const {floating, reference} = rects
-
-      const overflow = await detectOverflow(args, {
-        altBoundary: true,
-        boundary: options.boundaryElement || undefined,
-        elementContext: 'floating',
-        padding,
-        rootBoundary: 'viewport',
-      })
-
-      let maxWidth = Infinity
-      let maxHeight = Infinity
-
-      const floatingW = floating.width
-      const floatingH = floating.height
-
-      if (placement.includes('top')) {
-        maxWidth = floatingW - (overflow.left + overflow.right)
-        maxHeight = floatingH - overflow.top
-      }
-
-      if (placement.includes('right')) {
-        maxWidth = floatingW - overflow.right
-        maxHeight = floatingH - (overflow.top + overflow.bottom)
-      }
-
-      if (placement.includes('bottom')) {
-        maxWidth = floatingW - (overflow.left + overflow.right)
-        maxHeight = floatingH - overflow.bottom
-      }
-
-      if (placement.includes('left')) {
-        maxWidth = floatingW - overflow.left
-        maxHeight = floatingH - (overflow.top + overflow.bottom)
-      }
-
-      referenceWidthRef.current = reference.width
-
-      // IMPORTANT – APPLY ELEMENT STYLES HERE
-      if (matchReferenceWidth) {
-        elements.floating.style.width = `${reference.width}px`
-      }
-      if (constrainSize) {
-        elements.floating.style.maxWidth = `${maxWidth}px`
-        elements.floating.style.maxHeight = `${maxHeight}px`
-      }
-
-      const nextDimensions = await platform.getDimensions(elements.floating)
-
-      const targetH = nextDimensions.height
-      const targetW = nextDimensions.width
-
-      if (floatingW !== targetW || floatingH !== targetH) {
-        return {reset: {rects: true}}
-      }
-
-      return {}
-    },
-  }
-}

package/src/primitives/popover/types.ts

@@ -1,12 +0,0 @@
-import type {ContainerWidth} from '@sanity/ui-tokens'
-
-/**
- * @beta
- */
-export type PopoverMargins = [number, number, number, number]
-
-/** @beta */
-export type PopoverUpdateCallback = () => void
-
-/** @public */
-export type PopoverWidth = Exclude<ContainerWidth, 'auto'>

package/src/primitives/popover/useMiddleware.ts

@@ -1,126 +0,0 @@
-import {
-  autoPlacement,
-  flip,
-  hide,
-  type Middleware,
-  offset,
-  type RootBoundary,
-  shift as shiftMiddleware,
-} from '@floating-ui/react-dom'
-import {useMemo} from 'react'
-
-import type {Placement} from '../../core/types'
-import {origin} from '../../middleware/origin'
-import {DEFAULT_POPOVER_PADDING} from './constants'
-import {size} from './floating-ui/size'
-
-export function useMiddleware({
-  animate,
-  constrainSize,
-  distance,
-  shift,
-  fallbackPlacements,
-  floatingBoundary,
-  matchReferenceWidth,
-  placement,
-  placementStrategy,
-  preventOverflow,
-  referenceBoundary,
-  referenceWidthRef,
-  rootBoundary,
-}: {
-  animate: boolean
-  constrainSize: boolean
-  distance: number
-  shift: number
-  fallbackPlacements: Placement[]
-  floatingBoundary: HTMLElement | null
-  matchReferenceWidth: boolean | undefined
-  placement: Placement
-  placementStrategy: 'flip' | 'autoPlacement'
-  preventOverflow: boolean
-  referenceBoundary: HTMLElement | null
-  referenceWidthRef: React.RefObject<number | undefined>
-  rootBoundary: RootBoundary
-}) {
-  return useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    if (constrainSize || preventOverflow) {
-      if (placementStrategy === 'autoPlacement') {
-        ret.push(
-          autoPlacement({
-            allowedPlacements: [placement].concat(fallbackPlacements),
-          }),
-        )
-      } else {
-        ret.push(
-          flip({
-            boundary: floatingBoundary || undefined,
-            fallbackPlacements,
-            padding: DEFAULT_POPOVER_PADDING,
-            rootBoundary,
-          }),
-        )
-      }
-    }
-
-    // Define distance between reference and floating element
-    ret.push(offset({mainAxis: distance, crossAxis: shift}))
-
-    // Track sizes
-    if (constrainSize || matchReferenceWidth) {
-      ret.push(
-        size({
-          boundaryElement: floatingBoundary || undefined,
-          constrainSize,
-          matchReferenceWidth,
-          padding: DEFAULT_POPOVER_PADDING,
-          referenceWidthRef,
-        }),
-      )
-    }
-
-    // Shift the popover so its sits within the boundary element
-    if (preventOverflow) {
-      ret.push(
-        shiftMiddleware({
-          boundary: floatingBoundary || undefined,
-          rootBoundary,
-          padding: DEFAULT_POPOVER_PADDING,
-        }),
-      )
-    }
-
-    // Determine the origin to scale from.
-    // Must be placed after `@sanity/ui/size` and `shift` middleware.
-    if (animate) {
-      ret.push(origin)
-    }
-
-    ret.push(
-      hide({
-        boundary: referenceBoundary || undefined,
-        padding: DEFAULT_POPOVER_PADDING,
-        strategy: 'referenceHidden',
-      }),
-    )
-
-    return ret
-  }, [
-    animate,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    floatingBoundary,
-    matchReferenceWidth,
-    placement,
-    placementStrategy,
-    preventOverflow,
-    referenceBoundary,
-    referenceWidthRef,
-    rootBoundary,
-    shift,
-  ])
-}

package/src/primitives/radio/Radio.tsx

@@ -1,64 +0,0 @@
-import {radio, radio_input, radio_presentation} from '@sanity/ui-css'
-import {useImperativeHandle, useRef} from 'react'
-
-import type {ComponentType, Props} from '../../core/types'
-import {useCustomValidity} from '../../hooks/useCustomValidity'
-
-/** @public */
-export const DEFAULT_RADIO_ELEMENT = 'input'
-
-/** @public */
-export type RadioOwnProps = {
-  customValidity?: string
-}
-
-/** @public */
-export type RadioElementType = 'input' | ComponentType
-
-/** @public */
-export type RadioProps<E extends RadioElementType = RadioElementType> = Props<RadioOwnProps, E>
-
-/**
- * The `Radio` component allows the user to select one option from a set.
- *
- * @public
- */
-export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
-  props: RadioProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_RADIO_ELEMENT,
-    className,
-    disabled,
-    style,
-    customValidity,
-    readOnly,
-    ref: forwardedRef,
-    ...rest
-  } = props as RadioProps<typeof DEFAULT_RADIO_ELEMENT>
-
-  const ref = useRef<HTMLInputElement | null>(null)
-
-  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  useCustomValidity(ref, customValidity)
-
-  return (
-    <span className={radio({className})} data-ui="Radio" style={style}>
-      <Element
-        {...rest}
-        ref={ref}
-        className={radio_input()}
-        data-invalid={customValidity ? '' : undefined}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        disabled={disabled || readOnly}
-        readOnly={readOnly}
-        type="radio"
-      />
-      <span className={radio_presentation()} />
-    </span>
-  )
-}

package/src/primitives/radio/__workshop__/Example.tsx

@@ -1,63 +0,0 @@
-import {Box, Container, Flex, Radio, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory(): React.JSX.Element {
-  const [value, setValue] = useState('first-option')
-  const disabled = useBoolean('Disabled', false)
-  const readOnly = useBoolean('Read only', false)
-
-  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value)
-  }, [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
-      <Container width={0}>
-        <Stack gap={3}>
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'first-option'}
-              disabled={disabled}
-              name="name"
-              readOnly={readOnly}
-              value="first-option"
-              onChange={handleChange}
-            />
-            <Box marginLeft={2}>
-              <Text>First option</Text>
-            </Box>
-          </Flex>
-
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'second-option'}
-              disabled={disabled}
-              name="name"
-              readOnly={readOnly}
-              value="second-option"
-              onChange={handleChange}
-            />
-            <Box marginLeft={2}>
-              <Text>Second option</Text>
-            </Box>
-          </Flex>
-
-          <Flex align="center" as="label">
-            <Radio
-              checked={value === 'third-option'}
-              disabled={disabled}
-              name="name"
-              readOnly={readOnly}
-              value="third-option"
-              onChange={handleChange}
-            />
-            <Box marginLeft={2}>
-              <Text>Third option</Text>
-            </Box>
-          </Flex>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

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

@@ -1,28 +0,0 @@
-import {Flex, Radio} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PlainStory(): React.JSX.Element {
-  const checked = useBoolean('Checked', false)
-  const disabled = useBoolean('Disabled', false)
-  const id = 'radioStory'
-  const name = 'radioStory'
-  const onBlur = useAction('onBlur')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const readOnly = useBoolean('Read only', false)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
-      <Radio
-        checked={checked}
-        disabled={disabled}
-        id={id}
-        name={name}
-        readOnly={readOnly}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-      />
-    </Flex>
-  )
-}

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

@@ -1,13 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/radio',
-  title: 'Radio',
-  stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
-  ],
-}
-
-export default scope