@sanity/ui 1.0.0-beta.3 → 1.0.0-beta.30

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

@@ -0,0 +1,68 @@
+import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
+import {useState} from 'react'
+import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const arrow = useBoolean('Arrow', true)
+  const boundaryElementFlag = useBoolean('Boundary element', true)
+  const constrainSize = useBoolean('Constrain size', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Portal', true)
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <PortalProvider element={portalElement}>
+      <Text muted size={1} style={{position: 'absolute', top: 40, left: 60}}>
+        Scroll this box to reveal the popover
+      </Text>
+      <div
+        ref={setBoundaryElement}
+        style={{
+          height: 'calc(100vh - 120px)',
+          position: 'relative',
+          margin: 60,
+          overflow: 'auto',
+          outline: '1px solid red',
+          width: 'calc(100vw - 120px)',
+        }}
+      >
+        <Card padding={4} style={{textAlign: 'center'}}>
+          <div style={{padding: '150vh 0'}}>
+            <Popover
+              __unstable_margins={[1, 1, 1, 1]}
+              arrow={arrow}
+              boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
+              constrainSize={constrainSize}
+              fallbackPlacements={['top', 'bottom']}
+              matchReferenceWidth={matchReferenceWidth}
+              open={open}
+              overflow="auto"
+              padding={padding}
+              placement={placement}
+              portal={portal}
+              preventOverflow={preventOverflow}
+              radius={radius}
+              width={width}
+            >
+              <Button text="This button is the popover reference" />
+            </Popover>
+          </div>
+        </Card>
+      </div>
+      <div ref={setPortalElement} />
+    </PortalProvider>
+  )
+}

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

@@ -0,0 +1,78 @@
+import {
+  Button,
+  Flex,
+  LayerProvider,
+  Placement,
+  Popover,
+  ThemeColorToneKey,
+  useLayer,
+} from '@sanity/ui'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
+export default function RecursiveStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <LayerProvider>
+        <RecursiveExample />
+      </LayerProvider>
+    </Flex>
+  )
+}
+
+const placements: Placement[] = ['top', 'right', 'bottom', 'left']
+const tones: ThemeColorToneKey[] = ['primary', 'positive', 'caution', 'critical']
+
+function RecursiveExample({onClose}: {onClose?: () => void}) {
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const {isTopLayer} = useLayer()
+  const [seed] = useState(() => Math.floor(Math.random() * 4))
+  const fallbackPlacements = useMemo(() => {
+    const before = placements.slice(seed)
+    const after = placements.slice(0, seed)
+
+    return before.concat(after)
+  }, [seed])
+
+  useEffect(() => {
+    if (open === false) buttonRef.current?.focus()
+  }, [open])
+
+  useEffect(() => {
+    setTimeout(() => {
+      buttonRef.current?.focus()
+    }, 0)
+  }, [])
+
+  const handleOpen = useCallback(() => setOpen(true), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (!isTopLayer) return
+      if (event.key === 'Escape' && onClose) onClose()
+    },
+    [isTopLayer, onClose]
+  )
+
+  return (
+    <Popover
+      fallbackPlacements={fallbackPlacements}
+      content={<RecursiveExample onClose={handleClose} />}
+      open={open}
+      padding={1}
+      placement={fallbackPlacements[3]}
+      portal
+      tone={tones[seed]}
+    >
+      <Button
+        mode="bleed"
+        onKeyDown={handleKeyDown}
+        onClick={handleOpen}
+        radius={3}
+        ref={buttonRef}
+        text="Open"
+      />
+    </Popover>
+  )
+}

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

@@ -0,0 +1,61 @@
+import {EllipsisVerticalIcon} from '@sanity/icons'
+import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import {useCallback, useState} from 'react'
+
+export default function RightAlignedStory() {
+  const constrainSize = useBoolean('Constrain size', false)
+
+  const [open, setOpen] = useState(false)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+
+  const content = (
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
+      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
+      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
+      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
+      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
+      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
+      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
+      Nulla sed eleifend mi.
+    </Text>
+  )
+
+  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
+  return (
+    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
+        <Flex justify="flex-end" padding={0}>
+          <Popover
+            boundaryElement={boundaryElement}
+            constrainSize={constrainSize}
+            content={content}
+            open={open}
+            overflow="auto"
+            padding={3}
+            portal
+            placement="bottom"
+            ref={setPopoverElement}
+          >
+            <Button
+              icon={EllipsisVerticalIcon}
+              mode="bleed"
+              onClick={handleToggleOpen}
+              ref={setButtonElement}
+              selected={open}
+            />
+          </Popover>
+        </Flex>
+      </Card>
+    </Card>
+  )
+}

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

@@ -0,0 +1,80 @@
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {ReactElement, 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'
+
+export default function TestStory(): ReactElement {
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const arrow = useBoolean('Arrow', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  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')
+
+  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}>
+              <Popover
+                arrow={arrow}
+                content={<Text size={1}>{text}</Text>}
+                fallbackPlacements={['left', 'bottom', 'right', 'top']}
+                matchReferenceWidth={matchReferenceWidth}
+                open={open}
+                overflow="auto"
+                padding={3}
+                placement={placement}
+                portal
+                preventOverflow={preventOverflow}
+                radius={radius}
+                width={width}
+              >
+                <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+              </Popover>
+            </BoundaryElementProvider>
+          </PortalProvider>
+        </div>
+      </div>
+    </Card>
+  )
+}

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

@@ -0,0 +1,35 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/popover', 'Popover', [
+  {
+    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: 'right-aligned',
+    title: 'Right-aligned',
+    component: lazy(() => import('./RightAlignedStory')),
+  },
+])

package/src/primitives/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover'

package/src/primitives/popover/popover.tsx

@@ -0,0 +1,299 @@
+import {
+  Middleware,
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+  size as sizeMiddleware,
+  RootBoundary,
+} from '@floating-ui/react-dom'
+import {
+  cloneElement,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {useForwardedRef, useArrayProp, useElementSize} from '../../hooks'
+import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
+import {ResponsiveRadiusProps, ResponsiveShadowProps, ResponsiveWidthProps} from '../types'
+import {PopoverCard} from './popoverCard'
+
+/**
+ * @public
+ */
+export interface PopoverProps
+  extends Omit<LayerProps, 'as'>,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps,
+    ResponsiveWidthProps {
+  /**
+   * @beta
+   */
+  __unstable_margins?: PopoverMargins
+  /** @deprecated Use `fallbackPlacements` instead. */
+  allowedAutoPlacements?: Placement[]
+  arrow?: boolean
+  boundaryElement?: HTMLElement | null
+  children?: React.ReactElement
+  constrainSize?: boolean
+  content?: React.ReactNode
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  open?: boolean
+  overflow?: BoxOverflow
+  padding?: number | number[]
+  placement?: Placement
+  portal?: boolean | string
+  preventOverflow?: boolean
+  referenceElement?: HTMLElement | null
+  matchReferenceWidth?: boolean
+  scheme?: ThemeColorSchemeKey
+  /** @deprecated No longer supported. */
+  tether?: boolean
+  /** @deprecated No longer supported. */
+  tetherOffset?: number | ((...args: any[]) => number)
+  tone?: CardTone
+}
+
+function size(scope: {
+  boundaryElement: HTMLElement | null
+  constrainSize: boolean
+  matchReferenceWidth: boolean | undefined
+  setAvailableWidth: (v: number) => void
+  setAvailableHeight: (v: number) => void
+  setReferenceWidth: (v: number) => void
+}) {
+  return sizeMiddleware({
+    apply(args) {
+      if (scope.constrainSize) {
+        scope.setAvailableWidth(args.availableWidth)
+        scope.setAvailableHeight(args.availableHeight)
+      }
+
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(args.rects.reference.width)
+      }
+    },
+    boundary: scope.boundaryElement || undefined,
+  })
+}
+
+/** @public */
+export const Popover = memo(
+  forwardRef(function Popover(
+    props: PopoverProps &
+      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ): React.ReactElement {
+    const theme = useTheme()
+    const boundaryElementContext = useBoundaryElement()
+
+    const {
+      __unstable_margins: margins,
+      allowedAutoPlacements,
+      arrow: arrowProp = true,
+      boundaryElement = boundaryElementContext.element,
+      children: childProp,
+      constrainSize = false,
+      content,
+      disabled,
+      fallbackPlacements,
+      matchReferenceWidth: matchReferenceWidthProp,
+      open,
+      overflow = props.constrainSize ? 'auto' : undefined,
+      padding: paddingProp,
+      placement: placementProp = 'bottom',
+      portal,
+      preventOverflow = true,
+      radius: radiusProp = 3,
+      referenceElement,
+      scheme,
+      shadow: shadowProp = 3,
+      tether,
+      tetherOffset,
+      tone = 'inherit',
+      width: widthProp = undefined,
+      zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
+      ...restProps
+    } = props
+    const boundarySize = useElementSize(boundaryElement)?.border
+    const padding = useArrayProp(paddingProp)
+    const radius = useArrayProp(radiusProp)
+    const shadow = useArrayProp(shadowProp)
+    const width = useArrayProp(widthProp)
+    const zOffset = useArrayProp(zOffsetProp)
+    const [availableWidth, setAvailableWidth] = useState<number | undefined>(undefined)
+    const [availableHeight, setAvailableHeight] = useState<number | undefined>(undefined)
+    const [referenceWidth, setReferenceWidth] = useState<number | undefined>(undefined)
+    const forwardedRef = useForwardedRef(ref)
+    const arrowRef = useRef<HTMLDivElement | null>(null)
+    const rootBoundary: RootBoundary = 'viewport'
+
+    const middleware = useMemo(() => {
+      const ret: Middleware[] = []
+
+      // Flip the floating element when leaving the boundary box
+      if (constrainSize || preventOverflow) {
+        ret.push(
+          flip({
+            boundary: boundaryElement || undefined,
+            fallbackPlacements,
+            padding: 8,
+            rootBoundary,
+          })
+        )
+      }
+
+      // Track sizes
+      ret.push(
+        size({
+          boundaryElement,
+          constrainSize,
+          matchReferenceWidth: matchReferenceWidthProp,
+          setAvailableHeight,
+          setAvailableWidth,
+          setReferenceWidth,
+        })
+      )
+
+      // Define distance between reference and floating element
+      ret.push(offset({mainAxis: arrowProp ? 4 : 0}))
+
+      // Shift the popover so its sits with the boundary eleement
+      if (preventOverflow) {
+        ret.push(
+          shift({
+            boundary: boundaryElement || undefined,
+            rootBoundary,
+            padding: 8,
+          })
+        )
+      }
+
+      // Place arrow
+      if (arrowProp) {
+        ret.push(arrow({element: arrowRef, padding: 4}))
+      }
+
+      return ret
+    }, [
+      arrowProp,
+      boundaryElement,
+      constrainSize,
+      fallbackPlacements,
+      matchReferenceWidthProp,
+      preventOverflow,
+    ])
+
+    const {x, y, placement, reference, floating, middlewareData, strategy} = useFloating({
+      middleware,
+      placement: placementProp,
+      whileElementsMounted: autoUpdate,
+    })
+
+    const arrowX = middlewareData.arrow?.x
+    const arrowY = middlewareData.arrow?.y
+
+    const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
+      arrowRef.current = arrowEl
+    }, [])
+
+    const setFloating = useCallback(
+      (node: HTMLDivElement | null) => {
+        forwardedRef.current = node
+        floating(node)
+      },
+      [floating, forwardedRef]
+    )
+
+    const setReference = useCallback(
+      (node: HTMLElement | null) => {
+        reference(node)
+
+        const childRef = (childProp as any)?.ref
+
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
+      },
+      [childProp, reference]
+    )
+
+    const child = useMemo(() => {
+      if (!childProp || referenceElement) return null
+
+      return cloneElement(childProp, {ref: setReference})
+    }, [childProp, referenceElement, setReference])
+
+    useEffect(() => {
+      if (referenceElement) reference(referenceElement)
+    }, [reference, referenceElement])
+
+    if (disabled) {
+      return childProp || <></>
+    }
+
+    const popover = (
+      <LayerProvider zOffset={zOffset}>
+        <PopoverCard
+          {...restProps}
+          __unstable_margins={margins}
+          arrow={arrowProp}
+          arrowRef={setArrow}
+          arrowX={arrowX}
+          arrowY={arrowY}
+          availableWidth={constrainSize ? availableWidth : undefined}
+          availableHeight={constrainSize ? availableHeight : undefined}
+          boundaryWidth={boundarySize?.width}
+          overflow={overflow}
+          padding={padding}
+          placement={placement}
+          radius={radius}
+          ref={setFloating}
+          referenceWidth={matchReferenceWidthProp ? referenceWidth : undefined}
+          scheme={scheme}
+          shadow={shadow}
+          strategy={strategy}
+          tone={tone}
+          x={x}
+          y={y}
+          width={width}
+        >
+          {content}
+        </PopoverCard>
+      </LayerProvider>
+    )
+
+    return (
+      <>
+        {/* the popover */}
+        {open && (
+          <>
+            {portal ? (
+              <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+                {popover}
+              </Portal>
+            ) : (
+              popover
+            )}
+          </>
+        )}
+
+        {/* the referred element */}
+        {child}
+      </>
+    )
+  })
+)
+
+Popover.displayName = 'Popover'

package/src/primitives/popover/popoverArrow.tsx

@@ -0,0 +1,75 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+
+const Root = styled.div`
+  position: absolute;
+  pointer-events: none;
+  width: 27px;
+  height: 27px;
+  fill: none;
+
+  :empty + & {
+    display: none;
+  }
+
+  & > svg {
+    display: block;
+    transform-origin: 13.5px 13.5px;
+  }
+
+  [data-placement^='top'] > & {
+    bottom: -27px;
+  }
+
+  [data-placement^='right'] > & {
+    left: -27px;
+
+    & > svg {
+      transform: rotate(90deg);
+    }
+  }
+
+  [data-placement^='left'] > & {
+    right: -27px;
+
+    & > svg {
+      transform: rotate(-90deg);
+    }
+  }
+
+  [data-placement^='bottom'] > & {
+    top: -27px;
+
+    & > svg {
+      transform: rotate(180deg);
+    }
+  }
+`
+
+const BorderPath = styled.path`
+  fill: var(--card-shadow-outline-color);
+`
+
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`
+
+export const PopoverArrow = forwardRef(function PopoverArrow(
+  props: Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <Root data-ui="Popover__arrow" {...props} ref={ref}>
+      <svg
+        width="27"
+        height="11"
+        viewBox="0 0 27 11"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <BorderPath d="M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z" />
+        <ShapePath d="M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z" />
+      </svg>
+    </Root>
+  )
+})