@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -0,0 +1,94 @@
+import {
+  BoundaryElementProvider,
+  Box,
+  Card,
+  Flex,
+  Popover,
+  type PopoverProps,
+  type PopoverUpdateCallback,
+  Stack,
+  Text,
+} from '@sanity/ui'
+import {CARD_TONES, type CardTone} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,97 @@
+import {
+  BoundaryElementProvider,
+  Button,
+  Card,
+  Popover,
+  type PopoverUpdateCallback,
+  PortalProvider,
+  Text,
+} from '@sanity/ui'
+import {CONTAINER, RADIUS} from '@sanity/ui/tokens'
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,13 @@
+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