@sanity/ui 1.0.0-beta.8 → 1.0.0-next.3

package/src/primitives/popover/popover.tsx

@@ -0,0 +1,281 @@
+import {
+  Middleware,
+  RootBoundary,
+  arrow,
+  autoUpdate,
+  flip,
+  hide,
+  offset,
+  shift,
+  useFloating,
+} from '@floating-ui/react-dom'
+import {cloneElement, forwardRef, 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 {DEFAULT_POPOVER_DISTANCE, DEFAULT_POPOVER_PADDING} from './constants'
+import {size} from './floating-ui/size'
+import {PopoverCard} from './popoverCard'
+
+/**
+ * @public
+ */
+export interface PopoverProps
+  extends Omit<LayerProps, 'as'>,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps,
+    ResponsiveWidthProps {
+  /**
+   * @beta
+   */
+  __unstable_margins?: PopoverMargins
+  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
+  tone?: CardTone
+}
+
+/** @public */
+export const Popover = 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,
+    arrow: arrowProp = true,
+    boundaryElement = boundaryElementContext.element,
+    children: childProp,
+    constrainSize = false,
+    content,
+    disabled,
+    fallbackPlacements,
+    matchReferenceWidth: matchReferenceWidthProp,
+    open,
+    overflow = props.constrainSize ? 'auto' : 'hidden',
+    padding: paddingProp,
+    placement: placementProp = 'bottom',
+    portal,
+    preventOverflow = true,
+    radius: radiusProp = 3,
+    referenceElement,
+    scheme,
+    shadow: shadowProp = 3,
+    tone = 'inherit',
+    width: widthProp = 'auto',
+    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: DEFAULT_POPOVER_PADDING,
+          rootBoundary,
+        })
+      )
+    }
+
+    // Track sizes
+    if (constrainSize || matchReferenceWidthProp) {
+      ret.push(
+        size({
+          boundaryElement,
+          constrainSize,
+          matchReferenceWidth: matchReferenceWidthProp,
+          padding: DEFAULT_POPOVER_PADDING,
+          setAvailableHeight,
+          setAvailableWidth,
+          setReferenceWidth,
+        })
+      )
+    }
+
+    // Define distance between reference and floating element
+    ret.push(
+      offset({
+        mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
+      })
+    )
+
+    // Shift the popover so its sits with the boundary eleement
+    if (preventOverflow) {
+      ret.push(
+        shift({
+          boundary: boundaryElement || undefined,
+          rootBoundary,
+          padding: DEFAULT_POPOVER_PADDING,
+        })
+      )
+    }
+
+    // Place arrow
+    if (arrowProp) {
+      ret.push(
+        arrow({
+          element: arrowRef,
+          padding: DEFAULT_POPOVER_PADDING,
+        })
+      )
+    }
+
+    ret.push(
+      hide({
+        boundary: boundaryElement || undefined,
+        padding: DEFAULT_POPOVER_PADDING,
+        strategy: 'referenceHidden',
+      })
+    )
+
+    return ret
+  }, [
+    arrowProp,
+    boundaryElement,
+    constrainSize,
+    fallbackPlacements,
+    matchReferenceWidthProp,
+    preventOverflow,
+  ])
+
+  const {x, y, placement, reference, floating, middlewareData, strategy} = useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
+  })
+
+  const referenceHidden = middlewareData.hide?.referenceHidden
+
+  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={preventOverflow ? boundarySize?.width : undefined}
+        hidden={referenceHidden}
+        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,82 @@
+import {forwardRef, memo} from 'react'
+import styled from 'styled-components'
+import {DEFAULT_POPOVER_ARROW_HEIGHT, DEFAULT_POPOVER_ARROW_WIDTH} from './constants'
+
+const Root = memo(
+  styled.div({
+    position: 'absolute',
+    pointerEvents: 'none',
+    width: `${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+    height: `${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+    fill: 'none',
+
+    ':empty + &': {
+      display: 'none',
+    },
+
+    '& > svg': {
+      display: 'block',
+      transformOrigin: `${DEFAULT_POPOVER_ARROW_WIDTH / 2}px ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px`,
+    },
+
+    '[data-placement^="top"] > &': {
+      bottom: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+    },
+
+    '[data-placement^="right"] > &': {
+      left: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+
+      '& > svg': {
+        transform: 'rotate(90deg)',
+      },
+    },
+
+    '[data-placement^="left"] > &': {
+      right: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+
+      '& > svg': {
+        transform: 'rotate(-90deg)',
+      },
+    },
+
+    '[data-placement^="bottom"] > &': {
+      top: `-${DEFAULT_POPOVER_ARROW_WIDTH}px`,
+
+      '& > svg': {
+        transform: 'rotate(180deg)',
+      },
+    },
+  })
+)
+
+const BorderPath = memo(
+  styled.path({
+    fill: 'var(--card-shadow-outline-color)',
+  })
+)
+
+const ShapePath = memo(
+  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={DEFAULT_POPOVER_ARROW_WIDTH}
+        height={DEFAULT_POPOVER_ARROW_HEIGHT}
+        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>
+  )
+})

package/src/primitives/popover/popoverCard.tsx

@@ -0,0 +1,173 @@
+import {Strategy} from '@floating-ui/react-dom'
+import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
+import {CSSObject} from 'styled-components'
+import {FLOATING_STATIC_SIDES} from '../../constants'
+import {compose, ThemeProps} from '../../styles'
+import {ThemeColorSchemeKey} from '../../theme'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {useLayer} from '../../utils'
+import {Card} from '../card'
+import {Container} from '../container'
+import {
+  DEFAULT_POPOVER_ARROW_WIDTH,
+  DEFAULT_POPOVER_MARGINS,
+  DEFAULT_POPOVER_PADDING,
+} from './constants'
+import {PopoverArrow} from './popoverArrow'
+
+function popoverCardStyle(props: {$boundaryWidth?: number} & ThemeProps): CSSObject {
+  const {$boundaryWidth} = props
+
+  return {
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+
+    flexDirection: 'column',
+
+    width: 'max-content',
+    minWidth: 'min-content',
+    maxWidth:
+      typeof $boundaryWidth === 'number'
+        ? `${$boundaryWidth - DEFAULT_POPOVER_PADDING * 2}px`
+        : undefined,
+
+    height: 'max-content',
+    minHeight: 'min-content',
+  }
+}
+
+const Root = memo(compose<{$boundaryWidth?: number}>(Card, [popoverCardStyle]))
+
+/**
+ * @internal
+ */
+export const PopoverCard = memo(
+  forwardRef(function PopoverCard(
+    props: {
+      /** @beta*/
+      __unstable_margins?: PopoverMargins
+      arrow: boolean
+      arrowRef: React.Ref<HTMLDivElement>
+      arrowX?: number
+      arrowY?: number
+      availableHeight?: number
+      availableWidth?: number
+      boundaryWidth?: number
+      overflow?: BoxOverflow
+      padding?: number | number[]
+      placement?: Placement
+      radius?: number | number[]
+      referenceWidth?: number
+      scheme?: ThemeColorSchemeKey
+      shadow?: number | number[]
+      strategy: Strategy
+      tone: CardTone
+      width?: number | 'auto' | (number | 'auto')[]
+      x: number | null
+      y: number | null
+    } & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const {
+      __unstable_margins: marginsProp,
+      arrow,
+      arrowRef,
+      arrowX,
+      arrowY,
+      availableHeight,
+      availableWidth,
+      boundaryWidth,
+      children,
+      padding,
+      placement,
+      overflow,
+      radius,
+      referenceWidth: referenceWidthProp,
+      scheme,
+      shadow,
+      strategy,
+      style,
+      tone,
+      width = 'auto',
+      x: xProp,
+      y: yProp,
+      ...restProps
+    } = props
+
+    const {zIndex} = useLayer()
+
+    // Get margins: [top, right, bottom, left]
+    const margins: PopoverMargins = useMemo(
+      () => marginsProp || DEFAULT_POPOVER_MARGINS,
+      [marginsProp]
+    )
+
+    // Translate according to margins
+    const referenceWidth = referenceWidthProp
+      ? referenceWidthProp - margins[1] - margins[3]
+      : undefined
+
+    const x = (xProp ?? 0) + margins[3]
+    const y = (yProp ?? 0) + margins[0]
+
+    const rootStyle: CSSProperties = useMemo(
+      () => ({
+        position: strategy,
+        top: y,
+        left: x,
+        zIndex,
+        width: referenceWidth,
+        maxWidth: availableWidth,
+        maxHeight: availableHeight,
+        ...style,
+      }),
+      [availableHeight, availableWidth, referenceWidth, strategy, style, x, y, zIndex]
+    )
+
+    const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]]
+
+    const arrowStyle: CSSProperties = useMemo(() => {
+      const style: CSSProperties = {
+        left: arrowX !== null ? arrowX : undefined,
+        top: arrowY !== null ? arrowY : undefined,
+        right: undefined,
+        bottom: undefined,
+      }
+
+      if (staticSide) style[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH
+
+      return style
+    }, [arrowX, arrowY, staticSide])
+
+    return (
+      <Root
+        {...restProps}
+        $boundaryWidth={boundaryWidth}
+        data-placement={placement}
+        data-ui="Popover"
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+        style={rootStyle}
+        tone={tone}
+      >
+        <Container
+          data-ui="Popover__wrapper"
+          flex={1}
+          overflow={overflow}
+          padding={padding}
+          sizing="border"
+          width={width}
+        >
+          {children}
+        </Container>
+
+        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
+      </Root>
+    )
+  })
+)
+
+PopoverCard.displayName = 'PopoverCard'

package/src/primitives/radio/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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() {
+  const [value, setValue] = useState('first-option')
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const readOnly = useBoolean('Read only', false, 'Props')
+
+  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 space={3}>
+          <Flex align="center" as="label">
+            <Radio
+              checked={value === 'first-option'}
+              disabled={disabled}
+              name="name"
+              onChange={handleChange}
+              readOnly={readOnly}
+              value="first-option"
+            />
+            <Box marginLeft={2}>
+              <Text>First option</Text>
+            </Box>
+          </Flex>
+
+          <Flex align="center" as="label">
+            <Radio
+              checked={value === 'second-option'}
+              disabled={disabled}
+              name="name"
+              onChange={handleChange}
+              readOnly={readOnly}
+              value="second-option"
+            />
+            <Box marginLeft={2}>
+              <Text>Second option</Text>
+            </Box>
+          </Flex>
+
+          <Flex align="center" as="label">
+            <Radio
+              checked={value === 'third-option'}
+              disabled={disabled}
+              name="name"
+              onChange={handleChange}
+              readOnly={readOnly}
+              value="third-option"
+            />
+            <Box marginLeft={2}>
+              <Text>Third option</Text>
+            </Box>
+          </Flex>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}

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

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

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() {
+  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/primitives/radio/index.ts

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

package/src/primitives/radio/radio.tsx

@@ -0,0 +1,41 @@
+import {forwardRef, memo} from 'react'
+import styled from 'styled-components'
+import {useForwardedRef, useCustomValidity} from '../../hooks'
+import {radioBaseStyle, inputElementStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface RadioProps {
+  customValidity?: string
+}
+
+const Root = memo(styled.div(radioBaseStyle))
+const Input = memo(styled.input(inputElementStyle))
+
+/**
+ * @public
+ */
+export const Radio = forwardRef(function Radio(
+  props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps,
+  forwardedRef: React.ForwardedRef<HTMLInputElement>
+) {
+  const {className, disabled, style, customValidity, readOnly, ...restProps} = props
+  const ref = useForwardedRef(forwardedRef)
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <Root className={className} data-ui="Radio" style={style}>
+      <Input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        {...restProps}
+        disabled={disabled || readOnly}
+        readOnly={readOnly}
+        ref={ref}
+        type="radio"
+      />
+      <span />
+    </Root>
+  )
+})