@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/src/ui/primitives/popover/popover.tsx

@@ -0,0 +1,440 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  hide,
+  Middleware,
+  offset,
+  RootBoundary,
+  shift,
+  useFloating,
+} from '@floating-ui/react-dom'
+import {AnimatePresence} from 'framer-motion'
+import {
+  cloneElement,
+  ForwardedRef,
+  forwardRef,
+  memo,
+  MutableRefObject,
+  ReactElement,
+  ReactNode,
+  RefCallback,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
+
+import {Z_OFFSETS} from '../../constants'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {origin} from '../../middleware/origin'
+import {Placement, PopoverMargins, Props} from '../../types'
+import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
+import {CardProps, CardProvider, useCard} from '../card'
+import {
+  DEFAULT_FALLBACK_PLACEMENTS,
+  DEFAULT_POPOVER_DISTANCE,
+  DEFAULT_POPOVER_MARGINS,
+  DEFAULT_POPOVER_PADDING,
+} from './constants'
+import {size} from './floating-ui/size'
+import {PopoverCard} from './popoverCard'
+import {PopoverUpdateCallback} from './types'
+
+/** @public */
+export interface PopoverProps extends CardProps, LayerProps {
+  /** @beta */
+  __unstable_margins?: PopoverMargins
+  /**
+   * Whether the popover should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
+  arrow?: boolean
+  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
+  boundaryElement?: HTMLElement | null
+  children?: ReactElement<{ref: ForwardedRef<HTMLElement>}>
+  /**
+   * When `true`, prevent overflow within the current boundary:
+   * - by flipping on its side axis
+   * - by resizing
+   *
+   * Note that:
+   * - setting `preventOverflow` to `true` also prevents overflow on its side axis
+   * - setting `matchReferenceWidth` to `true` also causes the popover to resize
+   *
+   * @defaultValue false
+   */
+  constrainSize?: boolean
+  content?: ReactNode
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  floatingBoundary?: HTMLElement | null
+  /**
+   * When `true`, set the maximum width to match the reference element, and also prevent overflow within
+   * the current boundary by resizing.
+   *
+   * Note that setting `constrainSize` to `true` also causes the popover to resize
+   *
+   * @defaultValue false
+   */
+  matchReferenceWidth?: boolean
+  /**
+   * When true, blocks all pointer interaction with elements beneath the popover until closed.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  modal?: boolean
+  open?: boolean
+  placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
+  portal?: boolean | string
+  preventOverflow?: boolean
+  referenceBoundary?: HTMLElement | null
+  /**
+   * When defined, the popover will be positioned relative to this element.
+   * The children of the popover won't be rendered.
+   */
+  referenceElement?: HTMLElement | null
+  /** @beta */
+  updateRef?:
+    | MutableRefObject<PopoverUpdateCallback | undefined>
+    | RefCallback<PopoverUpdateCallback | undefined>
+}
+
+const ViewportOverlay = () => {
+  const {zIndex} = useLayer()
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex,
+      }}
+    />
+  )
+}
+
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
+export const Popover = memo(
+  forwardRef(function Popover(
+    props: Props<PopoverProps, 'div'>,
+    forwardedRef: ForwardedRef<HTMLDivElement>,
+  ): ReactElement {
+    const boundaryElementContext = useBoundaryElement()
+
+    const {
+      __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
+      animate: _animate = false,
+      arrow: arrowProp = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      boundaryElement = boundaryElementContext.element,
+      children: childProp,
+      constrainSize = false,
+      content,
+      disabled,
+      fallbackPlacements = props.fallbackPlacements ??
+        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+      matchReferenceWidth,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      modal,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      onActivate,
+      open,
+      overflow = 'hidden',
+      padding,
+      placement: placementProp = 'bottom',
+      portal,
+      preventOverflow = true,
+      radius = 3,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
+      referenceElement,
+      scheme,
+      shadow = 3,
+      tone = 'inherit',
+      width: widthProp = 'auto',
+      zOffset: zOffsetProp = Z_OFFSETS.popover,
+      updateRef,
+      ...restProps
+    } = props
+
+    const card = useCard()
+
+    const prefersReducedMotion = usePrefersReducedMotion()
+    const animate = prefersReducedMotion ? false : _animate
+    const zOffset = useArrayProp(zOffsetProp)
+    const ref = useRef<HTMLDivElement | null>(null)
+    const arrowRef = useRef<HTMLDivElement | null>(null)
+    const rootBoundary: RootBoundary = 'viewport'
+
+    useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
+      forwardedRef,
+      () => ref.current,
+    )
+
+    // Keep track of reference element width (see `size` middleware below)
+    const referenceWidthRef = useRef<number>(undefined)
+
+    const middleware = useMemo(() => {
+      const ret: Middleware[] = []
+
+      // Flip the floating element when leaving the boundary box
+      if (constrainSize || preventOverflow) {
+        ret.push(
+          flip({
+            boundary: floatingBoundary || undefined,
+            fallbackPlacements,
+            padding: DEFAULT_POPOVER_PADDING,
+            rootBoundary,
+          }),
+        )
+      }
+
+      // Define distance between reference and floating element
+      ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
+
+      // Track sizes
+      if (constrainSize || matchReferenceWidth) {
+        ret.push(
+          size({
+            apply({availableWidth, availableHeight, elements, referenceWidth}) {
+              // not fresh, so use refs
+
+              referenceWidthRef.current = referenceWidth
+
+              if (matchReferenceWidth) {
+                elements.floating.style.width = `${referenceWidth}px`
+              }
+
+              if (constrainSize) {
+                elements.floating.style.maxWidth = `${availableWidth}px`
+                elements.floating.style.maxHeight = `${availableHeight}px`
+              }
+            },
+            boundaryElement: floatingBoundary || undefined,
+            constrainSize,
+            margins,
+            matchReferenceWidth,
+            padding: DEFAULT_POPOVER_PADDING,
+          }),
+        )
+      }
+
+      // Shift the popover so its sits within the boundary element
+      if (preventOverflow) {
+        ret.push(
+          shift({
+            boundary: floatingBoundary || undefined,
+            rootBoundary,
+            padding: DEFAULT_POPOVER_PADDING,
+          }),
+        )
+      }
+
+      // Place arrow
+      if (arrowProp) {
+        ret.push(
+          arrow({
+            element: arrowRef,
+            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,
+      arrowProp,
+      constrainSize,
+      fallbackPlacements,
+      floatingBoundary,
+      margins,
+      matchReferenceWidth,
+      preventOverflow,
+      referenceBoundary,
+    ])
+
+    const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
+      middleware,
+      placement: placementProp,
+      whileElementsMounted: autoUpdate,
+      elements: referenceElement
+        ? {
+            reference: referenceElement,
+          }
+        : undefined,
+    })
+
+    const referenceHidden = middlewareData.hide?.referenceHidden
+
+    const arrowX = middlewareData.arrow?.x
+    const arrowY = middlewareData.arrow?.y
+
+    const originX = middlewareData['@sanity/ui/origin']?.originX
+    const originY = middlewareData['@sanity/ui/origin']?.originY
+
+    const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+    }, [])
+
+    const setFloating = useCallback(
+      (node: HTMLDivElement | null) => {
+        ref.current = node
+        refs.setFloating(node)
+      },
+      [refs],
+    )
+
+    const setReference = useCallback(
+      (node: HTMLElement | null) => {
+        refs.setReference(node)
+
+        const childRef = getElementRef(childProp as any)
+
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
+      },
+      [childProp, refs],
+    )
+
+    const child = useMemo(() => {
+      // If a reference element is defined, we don't need to clone the child
+      if (referenceElement) return childProp
+
+      if (!childProp) return null
+
+      return cloneElement(childProp, {ref: setReference})
+    }, [childProp, referenceElement, setReference])
+
+    useEffect(() => {
+      if (updateRef) {
+        if (typeof updateRef === 'function') {
+          updateRef(update)
+        } else if (updateRef) {
+          updateRef.current = update
+        }
+      }
+    }, [update, updateRef])
+
+    if (disabled) {
+      return childProp || <></>
+    }
+
+    const popover = (
+      <LayerProvider zOffset={zOffset}>
+        {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned 
+        before the below popover card. */}
+        {modal && <ViewportOverlay />}
+
+        <PopoverCard
+          {...restProps}
+          __unstable_margins={margins}
+          animate={animate}
+          arrow={arrowProp}
+          arrowRef={setArrow}
+          arrowX={arrowX}
+          arrowY={arrowY}
+          hidden={referenceHidden}
+          maxWidth={widthProp}
+          overflow={overflow}
+          padding={padding}
+          placement={placement}
+          radius={radius}
+          ref={setFloating}
+          scheme={scheme}
+          shadow={shadow}
+          originX={originX}
+          originY={originY}
+          strategy={strategy}
+          x={x}
+          y={y}
+        >
+          {content}
+        </PopoverCard>
+      </LayerProvider>
+    )
+
+    const children =
+      open &&
+      (portal ? (
+        <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+          <CardProvider
+            tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
+            scheme={scheme ?? 'light'}
+          >
+            {popover}
+          </CardProvider>
+        </Portal>
+      ) : (
+        popover
+      ))
+
+    return (
+      <>
+        {/* the popover */}
+        {animate ? <AnimatePresence>{children}</AnimatePresence> : children}
+
+        {/* the referred element */}
+        {child}
+      </>
+    )
+  }),
+)
+
+Popover.displayName = 'Memo(ForwardRef(Popover))'
+
+// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
+// After React 19 accessing `element.ref` does the opposite.
+// https://github.com/facebook/react/pull/28348
+//
+// Access the ref using the method that doesn't yield a warning.
+function getElementRef(
+  element: ReactElement<{ref: ForwardedRef<HTMLElement>}>,
+): ForwardedRef<HTMLElement> {
+  // React <=18 in DEV
+  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
+  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element as any).ref
+  }
+
+  // React 19 in DEV
+  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
+  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return element.props.ref
+  }
+
+  // Not DEV
+  return element.props.ref || (element as any).ref
+}

package/src/ui/primitives/popover/popoverCard.tsx

@@ -0,0 +1,162 @@
+import {Strategy} from '@floating-ui/react-dom'
+import {popoverCard} from '@sanity/ui/css'
+import {motion, MotionProps} from 'framer-motion'
+import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
+
+import {POPOVER_MOTION_PROPS} from '../../constants'
+import {Placement, PopoverMargins, Props} from '../../types'
+import {Arrow, useLayer} from '../../utils'
+import {Card, CardProps} from '../card'
+import {Flex} from '../flex'
+import {
+  DEFAULT_POPOVER_ARROW_HEIGHT,
+  DEFAULT_POPOVER_ARROW_RADIUS,
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+} from './constants'
+
+/** @internal */
+export interface PopoverCardProps extends CardProps {
+  /** @beta*/
+  __unstable_margins?: PopoverMargins
+  animate?: boolean
+  arrow: boolean
+  arrowRef: ForwardedRef<HTMLDivElement>
+  arrowX?: number
+  arrowY?: number
+  originX?: number
+  originY?: number
+  placement: Placement
+  referenceWidth?: number
+  strategy: Strategy
+  x: number | null
+  y: number | null
+}
+
+const MotionCard = motion.create(Card)
+
+/**
+ * @internal
+ */
+export const PopoverCard = memo(
+  forwardRef(function PopoverCard(
+    props: Props<PopoverCardProps, 'div'>,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) {
+    const {
+      __unstable_margins: marginsProp,
+      animate,
+      arrow,
+      arrowRef,
+      arrowX,
+      arrowY,
+      children,
+      maxWidth,
+      padding,
+      placement,
+      originX,
+      originY,
+      overflow,
+      radius,
+      referenceWidth,
+      // scheme: schemeProp,
+      shadow,
+      strategy,
+      style,
+      tone = 'inherit',
+      // width,
+      x: xProp,
+      y: yProp,
+      ...restProps
+    } = props
+
+    // const card = useCard()
+
+    // const tone = toneProp ?? card?.tone ?? 'inherit'
+    // const scheme = schemeProp ?? card?.scheme ?? 'light'
+
+    const layer = useLayer()
+
+    // Get margins: [top, right, bottom, left]
+    const margins: PopoverMargins = useMemo(
+      () => marginsProp || DEFAULT_POPOVER_MARGINS,
+      [marginsProp],
+    )
+
+    // Translate according to margins
+    const x = (xProp ?? 0) + margins[3]
+    const y = (yProp ?? 0) + margins[0]
+
+    const rootStyle: CSSProperties = useMemo(
+      () => ({
+        left: x,
+        originX,
+        originY,
+        position: strategy,
+        top: y,
+        width: referenceWidth,
+        zIndex: layer.zIndex ?? 100,
+        willChange: animate ? 'transform' : undefined,
+        ...style,
+      }),
+      [animate, layer.zIndex, originX, originY, referenceWidth, strategy, style, x, y],
+    )
+
+    const arrowStyle: CSSProperties = useMemo(
+      () => ({
+        left: arrowX !== null ? arrowX : undefined,
+        top: arrowY !== null ? arrowY : undefined,
+        right: undefined,
+        bottom: undefined,
+      }),
+      [arrowX, arrowY],
+    )
+
+    return (
+      <MotionCard
+        className={popoverCard()}
+        data-ui="Popover"
+        {...(restProps as CardProps & MotionProps)}
+        data-context-tone={tone}
+        data-placement={placement}
+        direction="column"
+        display="flex"
+        radius={radius}
+        ref={ref}
+        // scheme={scheme}
+        shadow={shadow}
+        sizing="border"
+        style={rootStyle}
+        tone={tone}
+        variants={POPOVER_MOTION_PROPS.card}
+        transition={POPOVER_MOTION_PROPS.transition}
+        initial={animate ? ['hidden', 'initial'] : undefined}
+        animate={animate ? ['visible', 'scaleIn'] : undefined}
+        exit={animate ? ['hidden', 'scaleOut'] : undefined}
+      >
+        <Flex
+          data-ui="Popover__wrapper"
+          direction="column"
+          flex={1}
+          maxWidth={maxWidth}
+          overflow={overflow}
+        >
+          <Flex direction="column" flex={1} padding={padding}>
+            {children}
+          </Flex>
+        </Flex>
+
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_POPOVER_ARROW_WIDTH}
+            height={DEFAULT_POPOVER_ARROW_HEIGHT}
+            radius={DEFAULT_POPOVER_ARROW_RADIUS}
+          />
+        )}
+      </MotionCard>
+    )
+  }),
+)
+PopoverCard.displayName = 'Memo(ForwardRef(PopoverCard))'

package/src/ui/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() {
+  const checked = useBoolean('Checked', false, 'Props')
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const id = 'radioStory'
+  const name = 'radioStory'
+  const onBlur = useAction('onBlur')
+  const onChange = useAction('onChange')
+  const onFocus = useAction('onFocus')
+  const readOnly = useBoolean('Read only', false, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">
+      <Radio
+        checked={checked}
+        disabled={disabled}
+        id={id}
+        name={name}
+        onBlur={onBlur}
+        onChange={onChange}
+        onFocus={onFocus}
+        readOnly={readOnly}
+      />
+    </Flex>
+  )
+}

package/src/ui/primitives/radio/radio.tsx

@@ -0,0 +1,49 @@
+import {composeClassNames, radio} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, useImperativeHandle, useRef} from 'react'
+
+import {useCustomValidity} from '../../hooks'
+import {Props} from '../../types'
+
+/**
+ * @public
+ */
+export interface RadioProps {
+  customValidity?: string
+}
+
+/**
+ * The `Radio` component allows the user to select one option from a set.
+ *
+ * @public
+ */
+export const Radio = forwardRef(function Radio(
+  props: Props<RadioProps, 'input'>,
+  forwardedRef: ForwardedRef<HTMLInputElement>,
+) {
+  const {className, disabled, style, customValidity, readOnly, ...restProps} = props
+  const ref = useRef<HTMLInputElement | null>(null)
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <div className={composeClassNames(className, radio())} data-ui="Radio" style={style}>
+      <input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        data-error={customValidity ? '' : undefined}
+        {...restProps}
+        disabled={disabled || readOnly}
+        readOnly={readOnly}
+        ref={ref}
+        type="radio"
+      />
+      <span />
+    </div>
+  )
+})
+
+Radio.displayName = 'ForwardRef(Radio)'

package/src/ui/primitives/select/__workshop__/plain.tsx

@@ -0,0 +1,30 @@
+import {Card, Container, Label, Select, Stack} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '../../../../../workshop/constants'
+
+export default function PlainStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const readOnly = useBoolean('Read only', false, 'Props')
+
+  return (
+    <Container width={0}>
+      <Card padding={4}>
+        <Stack space={3}>
+          <Label as="label" htmlFor="select">
+            Select
+          </Label>
+
+          <Select disabled={disabled} fontSize={fontSize} id="select-example" readOnly={readOnly}>
+            <option value="a">Option A</option>
+            <option value="b">Option B</option>
+            <option value="c">Option C</option>
+            <option value="d">Option D</option>
+            <option value="e">Option E</option>
+          </Select>
+        </Stack>
+      </Card>
+    </Container>
+  )
+}