@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,93 +0,0 @@
-import {useSelect} from '@sanity/ui-workshop'
-import {useCallback, useEffect, useRef, useState} from 'react'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
-import {CardTone} from '../../../types'
-import {BoundaryElementProvider} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Popover, PopoverProps} from '../popover'
-import {PopoverUpdateCallback} from '../types'
-
-const SIDE_PANEL_WIDTH = {
-  sm: 300,
-  md: 400,
-  lg: 500,
-  xl: 600,
-}
-
-export default function SidePanelStory() {
-  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', WORKSHOP_CARD_TONE_OPTIONS) ?? '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 borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
-          <Stack padding={4} space={5}>
-            <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; updateRef?: PopoverProps['updateRef']}) {
-  const {tone, updateRef} = props
-  const [open, setOpen] = useState(false)
-
-  const handleClick = useCallback(() => {
-    setOpen((prev) => !prev)
-  }, [])
-
-  return (
-    <Popover
-      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>
-      }
-      constrainSize
-      open={open}
-      overflow="auto"
-      portal
-      tone={tone}
-      width={0}
-      updateRef={updateRef}
-    >
-      {/* 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/ui/primitives/popover/__workshop__/TestStory.tsx

@@ -1,98 +0,0 @@
-import {Radius} from '@sanity/ui/theme'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {useRef, useState} from 'react'
-
-import {
-  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
-  WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-} from '../../../../../workshop/constants'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Text} from '../../text'
-import {Popover} from '../popover'
-import {PopoverUpdateCallback} from '../types'
-
-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', WORKSHOP_RADIUS_OPTIONS, 2)
-  const referenceWide = useBoolean('Reference wide?', false)
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
-
-  const text = useText('Text', 'Test')
-
-  const updateRef = useRef<PopoverUpdateCallback>(undefined)
-
-  const button = (
-    <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />
-  )
-
-  return (
-    <Card
-      ref={setBoundaryElement}
-      shadow={2}
-      style={{
-        position: 'absolute',
-        top: 50,
-        right: 50,
-        bottom: 50,
-        left: 50,
-      }}
-    >
-      <div
-        data-portal=""
-        ref={setPortalElement}
-        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}
-                  content={<Text size={1}>{text}</Text>}
-                  constrainSize={constrainSize}
-                  fallbackPlacements={['left', 'bottom', 'right', 'top']}
-                  matchReferenceWidth={matchReferenceWidth}
-                  open={open}
-                  overflow="hidden"
-                  padding={3}
-                  placement={placement}
-                  portal={portal}
-                  preventOverflow={preventOverflow}
-                  radius={radius as Radius}
-                  updateRef={updateRef}
-                  width={width}
-                >
-                  {button}
-                </Popover>
-              )}
-            </BoundaryElementProvider>
-          </PortalProvider>
-        </div>
-      </div>
-    </Card>
-  )
-}

package/src/ui/primitives/popover/helpers.ts

@@ -1,32 +0,0 @@
-import {ContainerWidth} from '@sanity/ui/theme'
-
-import {DEFAULT_POPOVER_PADDING} from './constants'
-
-export function calcCurrentWidth(params: {
-  mediaIndex: number
-  container: number[]
-  width: (ContainerWidth | 'fill' | null | undefined)[]
-}): number | undefined {
-  const {container, mediaIndex, width} = params
-
-  const w = width[mediaIndex]
-  const currentWidth = w === undefined ? width[width.length - 1] : w
-
-  return typeof currentWidth === 'number' ? container[currentWidth] : undefined
-}
-
-export function calcMaxWidth(params: {
-  boundaryWidth: number | undefined
-  currentWidth: number | undefined
-}): number | undefined {
-  const {boundaryWidth, currentWidth} = params
-
-  if (currentWidth === undefined && boundaryWidth === undefined) {
-    return undefined
-  }
-
-  return Math.min(
-    currentWidth ?? Infinity,
-    (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2,
-  )
-}

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

@@ -1,422 +0,0 @@
-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} 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={{height: '100vh', inset: 0, position: 'fixed', width: '100vw', 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 = layer.popover.zOffset,
-      zOffset: zOffsetProp = Z_OFFSETS.popover,
-      updateRef,
-      ...restProps
-    } = props
-    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}
-          // referenceWidth={matchReferenceWidth ? referenceWidthRef.current : width}
-          scheme={scheme}
-          shadow={shadow}
-          originX={originX}
-          originY={originY}
-          strategy={strategy}
-          tone={tone}
-          x={x}
-          y={y}
-        >
-          {content}
-        </PopoverCard>
-      </LayerProvider>
-    )
-
-    const children =
-      open &&
-      (portal ? (
-        <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>{popover}</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
-}