@sanity/ui 0.37.3 → 0.37.4

package/src/primitives/popover/modifiers/usePopoverModifiers.ts

@@ -0,0 +1,58 @@
+import {useMemo} from 'react'
+import {Modifier} from 'react-popper'
+
+import {getPopoverModifiers} from './getPopoverModifiers'
+import {PopoverModifiersProps} from './types'
+
+export function usePopoverModifiers(props: PopoverModifiersProps): Modifier<any, any>[] {
+  const {
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset,
+  } = props
+
+  return useMemo(() => {
+    return getPopoverModifiers({
+      allowedAutoPlacements,
+      arrow,
+      arrowElement,
+      boundaryElement,
+      constrainSize,
+      distance,
+      fallbackPlacements,
+      margins,
+      matchReferenceWidth,
+      open,
+      preventOverflow,
+      skidding,
+      tether,
+      tetherOffset,
+    })
+  }, [
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement,
+    constrainSize,
+    distance,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding,
+    tether,
+    tetherOffset,
+  ])
+}

package/src/primitives/popover/popover.tsx

@@ -0,0 +1,246 @@
+import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
+import {usePopper} from 'react-popper'
+import styled, {css} from 'styled-components'
+import {EMPTY_RECORD} from '../../constants'
+import {useForwardedRef} from '../../hooks'
+import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {CardTone, Placement, PopoverMargins} from '../../types'
+import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import {Card} from '../card'
+import {ResponsiveWidthStyleProps} from '../container'
+import {responsiveContainerWidthStyle} from '../container/styles'
+import {ResponsiveRadiusProps, ResponsiveShadowProps, ResponsiveWidthProps} from '../types'
+import {PopoverArrow} from './arrow'
+import {usePopoverModifiers} from './modifiers'
+
+/**
+ * @public
+ */
+export interface PopoverProps
+  extends Omit<LayerProps, 'as'>,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps,
+    ResponsiveWidthProps {
+  /**
+   * @beta
+   */
+  __unstable_margins?: PopoverMargins
+  allowedAutoPlacements?: Placement[]
+  arrow?: boolean
+  boundaryElement?: HTMLElement | null
+  children?: React.ReactElement
+  constrainSize?: boolean
+  content?: React.ReactNode
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  open?: boolean
+  padding?: number | number[]
+  placement?: Placement
+  portal?: boolean | string
+  preventOverflow?: boolean
+  referenceElement?: HTMLElement | null
+  matchReferenceWidth?: boolean
+  scheme?: ThemeColorSchemeKey
+  tether?: boolean
+  tetherOffset?: number | ((...args: any[]) => number)
+  tone?: CardTone
+}
+
+const Root = styled(Layer)<{$preventOverflow?: boolean}>(
+  ({$preventOverflow}) => css`
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - 16px);
+
+    & > * {
+      min-height: 0;
+    }
+
+    /* Hide the popover when the reference element is out of bounds */
+    ${$preventOverflow &&
+    css`
+      &[data-popper-reference-hidden='true'] {
+        display: none;
+      }
+    `}
+  `
+)
+
+const PopoverCard = styled(Card)<
+  ResponsiveWidthStyleProps & {
+    $constrainSize?: boolean
+    $preventOverflow?: boolean
+  }
+>(
+  ({$constrainSize}) => css`
+    flex: 1;
+    max-height: ${$constrainSize && '100%'};
+    pointer-events: all;
+
+    && {
+      display: flex;
+    }
+
+    flex-direction: column;
+
+    & > * {
+      min-height: 0;
+    }
+
+    ${responsiveContainerWidthStyle}
+  `
+)
+
+/**
+ * @public
+ */
+export const Popover = forwardRef(function Popover(
+  props: PopoverProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const boundaryElementContext = useBoundaryElement()
+  const theme = useTheme()
+  const {
+    __unstable_margins: margins,
+    allowedAutoPlacements,
+    arrow = true,
+    boundaryElement: boundaryElementProp = boundaryElementContext.element,
+    children: child,
+    content,
+    constrainSize,
+    disabled,
+    fallbackPlacements,
+    open = false,
+    padding,
+    placement = 'bottom',
+    portal: portalProp = false,
+    preventOverflow,
+    radius = 3,
+    referenceElement: referenceElementProp,
+    matchReferenceWidth,
+    shadow = 3,
+    scheme,
+    style = EMPTY_RECORD,
+    tether,
+    tetherOffset,
+    tone = 'inherit',
+    width = 0,
+    zOffset = theme.sanity.layer?.popover.zOffset,
+    ...restProps
+  } = props
+  const forwardedRef = useForwardedRef(ref)
+  const portal = usePortal()
+  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
+  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null)
+  const popperReferenceElement = referenceElementProp || referenceElement
+
+  const modifiers = usePopoverModifiers({
+    allowedAutoPlacements,
+    arrow,
+    arrowElement,
+    boundaryElement: boundaryElementProp || portal.boundaryElement,
+    constrainSize,
+    distance: arrow ? 4 : 0,
+    fallbackPlacements,
+    margins,
+    matchReferenceWidth,
+    open,
+    preventOverflow,
+    skidding: 0,
+    tether,
+    tetherOffset,
+  })
+
+  const popper = usePopper(popperReferenceElement, popperElement, {
+    placement,
+    modifiers,
+  })
+
+  const {attributes, forceUpdate, styles} = popper
+
+  const setRef = useCallback(
+    (el: HTMLElement | null) => {
+      const childRef = (child as any).ref
+
+      setReferenceElement(el)
+
+      if (typeof childRef === 'function') {
+        childRef(el)
+      } else if (childRef) {
+        childRef.current = el
+      }
+    },
+    [child]
+  )
+
+  const setRootRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      setPopperElement(el)
+      forwardedRef.current = el
+    },
+    [forwardedRef]
+  )
+
+  const popoverStyle = useMemo(() => ({...style, ...styles.popper}), [style, styles])
+
+  useEffect(() => {
+    if (forceUpdate) {
+      try {
+        forceUpdate()
+      } catch (_) {
+        // ignore caught error
+      }
+    }
+  }, [content, forceUpdate, open, popperReferenceElement])
+
+  if (disabled) {
+    return child || <></>
+  }
+
+  const node = (
+    <Root
+      data-ui="Popover"
+      {...restProps}
+      $preventOverflow={preventOverflow}
+      ref={setRootRef}
+      style={popoverStyle}
+      zOffset={zOffset}
+      {...attributes.popper}
+    >
+      <PopoverCard
+        $constrainSize={constrainSize}
+        data-ui="PopoverCard"
+        padding={padding}
+        radius={radius}
+        scheme={scheme}
+        shadow={shadow}
+        tone={tone}
+        width={width as any}
+      >
+        {arrow && <PopoverArrow ref={setArrowElement} style={styles.arrow} />}
+        {content}
+      </PopoverCard>
+    </Root>
+  )
+
+  return (
+    <>
+      {child && !referenceElementProp ? cloneElement(child, {ref: setRef}) : child || <></>}
+
+      {open && (
+        <>
+          {portalProp && (
+            <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
+              {node}
+            </Portal>
+          )}
+
+          {!portalProp && node}
+        </>
+      )}
+    </>
+  )
+})

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 React, {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,29 @@
+import {Flex, Radio} from '@sanity/ui'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
+import React from 'react'
+
+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 React, {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}
+        {...restProps}
+        disabled={disabled || readOnly}
+        readOnly={readOnly}
+        ref={ref}
+        type="radio"
+      />
+      <span />
+    </Root>
+  )
+})

package/src/primitives/radio/styles.ts

@@ -0,0 +1,105 @@
+import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {rem, ThemeProps} from '../../styles'
+import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
+
+export function radioBaseStyle(): FlattenSimpleInterpolation {
+  return css`
+    position: relative;
+
+    &:not([hidden]) {
+      display: inline-block;
+    }
+
+    &[data-read-only] {
+      outline: 1px solid red;
+    }
+  `
+}
+
+export function inputElementStyle(props: ThemeProps): FlattenSimpleInterpolation {
+  const {theme} = props
+  const {focusRing, input} = theme.sanity
+  const color = theme.sanity.color.input
+  const dist = (input.radio.size - input.radio.markSize) / 2
+
+  return css`
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
+    border-radius: ${rem(input.radio.size / 2)};
+    border: none;
+
+    /* enabled */
+    & + span {
+      display: block;
+      position: relative;
+      height: ${rem(input.radio.size)};
+      width: ${rem(input.radio.size)};
+      border-radius: ${rem(input.radio.size / 2)};
+      background: ${color.default.enabled.bg};
+      box-shadow: ${focusRingBorderStyle({
+        color: color.default.enabled.border,
+        width: input.border.width,
+      })};
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: ${rem(dist)};
+        left: ${rem(dist)};
+        height: ${rem(input.radio.markSize)};
+        width: ${rem(input.radio.markSize)};
+        border-radius: ${rem(input.radio.markSize / 2)};
+        background: ${color.default.enabled.fg};
+        opacity: 0;
+      }
+    }
+
+    /* focused */
+    &:not(:disabled):focus + span {
+      box-shadow: ${focusRingStyle({
+        border: {width: input.border.width, color: color.default.enabled.border},
+        focusRing,
+      })};
+    }
+
+    &:not(:disabled):focus:not(:focus-visible) + span {
+      box-shadow: ${focusRingBorderStyle({
+        color: color.default.enabled.border,
+        width: input.border.width,
+      })};
+    }
+
+    &:checked + span::after {
+      opacity: 1;
+    }
+
+    /* read only */
+    &[data-read-only] + span {
+      box-shadow: 0 0 0 1px ${color.default.readOnly.border};
+      background: ${color.default.readOnly.bg};
+
+      &::after {
+        background: ${color.default.readOnly.fg};
+      }
+    }
+
+    /* disabled */
+    &:not([data-read-only]):disabled + span {
+      box-shadow: 0 0 0 1px ${color.default.disabled.border};
+      background: ${color.default.disabled.bg};
+
+      &::after {
+        background: ${color.default.disabled.fg};
+      }
+    }
+  `
+}

package/src/primitives/select/__workshop__/.eslintrc

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

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

@@ -0,0 +1,7 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('primitives/select', 'Select', [
+  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
+  {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
+])

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

@@ -0,0 +1,28 @@
+import {Card, Container, Label, Select, Stack} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import React from 'react'
+
+export default function PlainStory() {
+  const disabled = useBoolean('Disabled', false, '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} 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>
+  )
+}

package/src/primitives/select/__workshop__/readOnly.tsx

@@ -0,0 +1,24 @@
+import {Card, Container, Label, Select, Stack} from '@sanity/ui'
+import React from 'react'
+
+export default function ReadOnlyStory() {
+  return (
+    <Container width={0}>
+      <Card padding={4}>
+        <Stack space={3}>
+          <Label as="label" htmlFor="select">
+            Select
+          </Label>
+
+          <Select id="select-example" radius={3} 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>
+  )
+}

package/src/primitives/select/index.ts

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