@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/primitives/popover/popover.tsx

@@ -1,383 +0,0 @@
-import {
-  Middleware,
-  RootBoundary,
-  arrow,
-  autoUpdate,
-  flip,
-  hide,
-  offset,
-  shift,
-  useFloating,
-} from '@floating-ui/react-dom'
-import {
-  MutableRefObject,
-  RefCallback,
-  cloneElement,
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react'
-import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} from '../../hooks'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
-import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
-import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
-import {
-  DEFAULT_POPOVER_DISTANCE,
-  DEFAULT_POPOVER_MARGINS,
-  DEFAULT_FALLBACK_PLACEMENTS,
-  DEFAULT_POPOVER_PADDING,
-} from './constants'
-import {size} from './floating-ui/size'
-import {calcCurrentWidth, calcMaxWidth} from './helpers'
-import {PopoverCard} from './popoverCard'
-import {PopoverUpdateCallback, PopoverWidth} from './types'
-
-export type {PopoverUpdateCallback}
-
-/** @public */
-export interface PopoverProps
-  extends Omit<LayerProps, 'as'>,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
-  /** @beta */
-  __unstable_margins?: PopoverMargins
-  arrow?: boolean
-  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
-  boundaryElement?: HTMLElement | null
-  children?: React.ReactElement
-  constrainSize?: boolean
-  content?: React.ReactNode
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  floatingBoundary?: HTMLElement | null
-  matchReferenceWidth?: boolean
-  open?: boolean
-  overflow?: BoxOverflow
-  padding?: number | number[]
-  placement?: Placement
-  portal?: boolean | string
-  preventOverflow?: boolean
-  referenceBoundary?: HTMLElement | null
-  referenceElement?: HTMLElement | null
-  scheme?: ThemeColorSchemeKey
-  tone?: CardTone
-  /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
-  width?: PopoverWidth | PopoverWidth[]
-}
-
-/** @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 = DEFAULT_POPOVER_MARGINS,
-      arrow: arrowProp = true,
-      boundaryElement = boundaryElementContext.element,
-      children: childProp,
-      constrainSize = false,
-      content,
-      disabled,
-      fallbackPlacements = props.fallbackPlacements ??
-        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
-      matchReferenceWidth,
-      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
-      open,
-      overflow = 'hidden',
-      padding: paddingProp,
-      placement: placementProp = 'bottom',
-      portal,
-      preventOverflow = true,
-      radius: radiusProp = 3,
-      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
-      referenceElement,
-      scheme,
-      shadow: shadowProp = 3,
-      tone = 'inherit',
-      width: widthProp = 'auto',
-      zOffset: zOffsetProp = theme.sanity.layer?.popover.zOffset,
-      updateRef,
-      ...restProps
-    } = props
-    const boundarySize = useElementSize(boundaryElement)?.border
-    const padding = useArrayProp(paddingProp)
-    const radius = useArrayProp(radiusProp)
-    const shadow = useArrayProp(shadowProp)
-    const widthArrayProp = useArrayProp(widthProp)
-    const zOffset = useArrayProp(zOffsetProp)
-    const forwardedRef = useForwardedRef(ref)
-    const arrowRef = useRef<HTMLDivElement | null>(null)
-    const rootBoundary: RootBoundary = 'viewport'
-
-    const mediaIndex = useMediaIndex()
-    const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
-
-    // Update width when
-    // - media index changes
-    // - `width` property changes
-    const width = calcCurrentWidth({mediaIndex, theme, width: widthArrayProp})
-    const widthRef = useRef(width)
-
-    useEffect(() => {
-      widthRef.current = width
-    }, [width])
-
-    // Update max width when
-    // - boundary width changes
-    // - `width` property changes
-    const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
-    const maxWidthRef = useRef(maxWidth)
-
-    useEffect(() => {
-      maxWidthRef.current = maxWidth
-    }, [maxWidth])
-
-    // Keep track of reference element width (see `size` middleware below)
-    const referenceWidthRef = useRef<number>()
-
-    // Force apply width & max width to floating element
-    useEffect(() => {
-      const floatingElement = forwardedRef.current
-
-      if (!open || !floatingElement) return
-
-      const referenceWidth = referenceWidthRef.current
-
-      if (matchReferenceWidth) {
-        if (referenceWidth !== undefined) {
-          floatingElement.style.width = `${referenceWidth}px`
-        }
-      } else if (width !== undefined) {
-        floatingElement.style.width = `${width}px`
-      }
-
-      if (typeof maxWidth === 'number') {
-        floatingElement.style.maxWidth = `${maxWidth}px`
-      }
-    }, [width, forwardedRef, matchReferenceWidth, maxWidth, open])
-
-    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: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0,
-        }),
-      )
-
-      // Track sizes
-      if (constrainSize || matchReferenceWidth) {
-        ret.push(
-          size({
-            apply({availableWidth, availableHeight, elements, referenceWidth}) {
-              // not fresh, so use refs
-
-              referenceWidthRef.current = referenceWidth
-
-              const _currentWidth = widthRef.current
-              const _maxWidth = maxWidthRef.current
-
-              if (matchReferenceWidth) {
-                elements.floating.style.width = `${referenceWidth}px`
-              } else if (_currentWidth !== undefined) {
-                elements.floating.style.width = `${_currentWidth}px`
-              }
-
-              if (constrainSize) {
-                elements.floating.style.maxWidth = `${Math.min(
-                  availableWidth,
-                  _maxWidth ?? Infinity,
-                )}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 eleement
-      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,
-          }),
-        )
-      }
-
-      ret.push(
-        hide({
-          boundary: referenceBoundary || undefined,
-          padding: DEFAULT_POPOVER_PADDING,
-          strategy: 'referenceHidden',
-        }),
-      )
-
-      return ret
-    }, [
-      arrowProp,
-      constrainSize,
-      fallbackPlacements,
-      floatingBoundary,
-      margins,
-      matchReferenceWidth,
-      preventOverflow,
-      referenceBoundary,
-    ])
-
-    const {x, y, middlewareData, placement, refs, strategy, update} = 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
-        refs.setFloating(node)
-      },
-      [forwardedRef, refs],
-    )
-
-    const setReference = useCallback(
-      (node: HTMLElement | null) => {
-        refs.setReference(node)
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const childRef = (childProp as any)?.ref
-
-        if (typeof childRef === 'function') {
-          childRef(node)
-        } else if (childRef) {
-          childRef.current = node
-        }
-      },
-      [childProp, refs],
-    )
-
-    const child = useMemo(() => {
-      if (!childProp || referenceElement) 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])
-
-    useEffect(() => {
-      refs.setReference(referenceElement || null)
-    }, [referenceElement, refs])
-
-    if (disabled) {
-      return childProp || <></>
-    }
-
-    const popover = (
-      <LayerProvider zOffset={zOffset}>
-        <PopoverCard
-          {...restProps}
-          __unstable_margins={margins}
-          arrow={arrowProp}
-          arrowRef={setArrow}
-          arrowX={arrowX}
-          arrowY={arrowY}
-          hidden={referenceHidden}
-          overflow={overflow}
-          padding={padding}
-          placement={placement}
-          radius={radius}
-          ref={setFloating}
-          scheme={scheme}
-          shadow={shadow}
-          strategy={strategy}
-          tone={tone}
-          width={matchReferenceWidth ? referenceWidthRef.current : width}
-          x={x}
-          y={y}
-        >
-          {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

@@ -1,77 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {cssVars} from '../../theme'
-import {DEFAULT_POPOVER_ARROW_HEIGHT, DEFAULT_POPOVER_ARROW_WIDTH} from './constants'
-
-const Root = styled.div`
-  position: absolute;
-  pointer-events: none;
-  width: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  height: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: ${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 = styled.path`
-  fill: ${cssVars.default['base-shadow-outline-color']};
-`
-
-const ShapePath = styled.path`
-  fill: ${cssVars.mutable['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

@@ -1,138 +0,0 @@
-import {Strategy} from '@floating-ui/react-dom'
-import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
-import styled from 'styled-components'
-import {FLOATING_STATIC_SIDES} from '../../constants'
-import {ThemeColorSchemeKey} from '../../theme'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
-import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
-import {useLayer} from '../../utils'
-import {Card} from '../card'
-import {Flex} from '../flex'
-import {DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_MARGINS} from './constants'
-import {PopoverArrow} from './popoverArrow'
-
-const Root = styled(Card)({
-  '&:not([hidden])': {
-    display: 'flex',
-  },
-  flexDirection: 'column',
-  width: 'max-content',
-  minWidth: 'min-content',
-})
-
-/**
- * @internal
- */
-export const PopoverCard = memo(
-  forwardRef(function PopoverCard(
-    props: {
-      /** @beta*/
-      __unstable_margins?: PopoverMargins
-      arrow: boolean
-      arrowRef: React.Ref<HTMLDivElement>
-      arrowX?: number
-      arrowY?: number
-      overflow?: BoxOverflow
-      padding?: number | number[]
-      placement?: Placement
-      radius?: Radius | Radius[]
-      scheme?: ThemeColorSchemeKey
-      shadow?: number | number[]
-      strategy: Strategy
-      tone: CardTone
-      width: number | undefined
-      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,
-      children,
-      padding,
-      placement,
-      overflow,
-      radius,
-      scheme,
-      shadow,
-      strategy,
-      style,
-      tone,
-      width,
-      x: xProp,
-      y: yProp,
-      ...restProps
-    } = props
-    const {zIndex} = useLayer()
-    const toneContext = useToneContext()
-
-    // 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(
-      () => ({
-        position: strategy,
-        top: y,
-        left: x,
-        width,
-        zIndex,
-        ...style,
-      }),
-      [strategy, style, width, 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
-        data-ui="Popover"
-        {...restProps}
-        data-tone={tone}
-        data-placement={placement}
-        radius={radius}
-        ref={ref}
-        scheme={scheme}
-        shadow={shadow}
-        sizing="border"
-        // The popover creates a new html element, so it's out of context of the css variables generated in the cards.
-        updateCssVars
-        tone={tone === 'inherit' ? toneContext.tone : tone}
-        style={rootStyle}
-      >
-        <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
-          <Flex direction="column" flex={1} padding={padding}>
-            {children}
-          </Flex>
-        </Flex>
-
-        {arrow && <PopoverArrow ref={arrowRef} style={arrowStyle} />}
-      </Root>
-    )
-  }),
-)
-
-PopoverCard.displayName = 'PopoverCard'

package/src/primitives/popover/types.ts

@@ -1,6 +0,0 @@
-/** @beta */
-export type PopoverUpdateCallback = () => void
-
-/** @public */
-// TODO: remove `auto` from PopoverWidth
-export type PopoverWidth = number | 'auto'

package/src/primitives/radio/radio.tsx

@@ -1,42 +0,0 @@
-import {forwardRef} 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 = styled.div(radioBaseStyle)
-const Input = 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}
-        data-error={customValidity ? '' : undefined}
-        {...restProps}
-        disabled={disabled || readOnly}
-        readOnly={readOnly}
-        ref={ref}
-        type="radio"
-      />
-      <span />
-    </Root>
-  )
-})