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

package/src/primitives/popover/popoverCard.tsx

@@ -0,0 +1,160 @@
+import {Strategy} from '@floating-ui/react-dom'
+import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
+import styled, {CSSObject} from 'styled-components'
+import {FLOATING_STATIC_SIDES} from '../../constants'
+import {ThemeColorSchemeKey} from '../../theme'
+import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
+import {useLayer} from '../../utils'
+import {Box} from '../box'
+import {Card} from '../card'
+import {PopoverArrow} from './popoverArrow'
+
+function popoverCardStyle(props: {$boundaryWidth?: number}): CSSObject {
+  const {$boundaryWidth} = props
+
+  return {
+    maxWidth: $boundaryWidth ? `${$boundaryWidth - 16}px` : 'calc(100% - 16px)',
+  }
+}
+
+const Root = memo(styled(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,
+      tone,
+      width,
+      x: xProp,
+      y: yProp,
+      ...restProps
+    } = props
+
+    const {zIndex} = useLayer()
+
+    // top right bottom left
+    const margins: PopoverMargins = useMemo(() => marginsProp || [0, 0, 0, 0], [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 maxWidth = availableWidth
+      ? Math.min(availableWidth - 8, referenceWidth || Infinity)
+      : undefined
+
+    const rootStyle: CSSProperties = useMemo(
+      () => ({
+        position: strategy,
+        top: y,
+        left: x,
+        zIndex,
+        width: referenceWidth,
+        maxWidth: referenceWidth ? undefined : maxWidth,
+      }),
+      [referenceWidth, maxWidth, strategy, x, y, zIndex]
+    )
+
+    const wrapperStyle: CSSProperties = useMemo(
+      () => ({
+        minHeight: 25,
+        maxHeight: availableHeight ? availableHeight - 8 : undefined,
+      }),
+      [availableHeight]
+    )
+
+    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] = -27
+
+      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}
+        $width={width}
+      >
+        <Box
+          data-ui="Popover__wrapper"
+          overflow={overflow}
+          padding={padding}
+          sizing="border"
+          style={wrapperStyle}
+        >
+          {children}
+        </Box>
+
+        {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} 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,27 @@
+import {Card, Container, Label, Select, Stack} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+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,23 @@
+import {Card, Container, Label, Select, Stack} from '@sanity/ui'
+
+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'

package/src/primitives/select/select.tsx

@@ -0,0 +1,77 @@
+import {SelectIcon} from '@sanity/icons'
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
+import {Box} from '../box'
+import {Text} from '../text'
+import {selectStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface SelectProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: number | number[]
+  space?: number | number[]
+  customValidity?: string
+}
+
+const Root = styled.div(selectStyle.root)
+
+const Input = styled.select<{
+  $fontSize: number[]
+  $padding: number[]
+  $radius: number[]
+  $space: number[]
+}>(selectStyle.input)
+
+const IconBox = styled(Box)(selectStyle.iconBox)
+
+/**
+ * @public
+ */
+export const Select = forwardRef(function Select(
+  props: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>,
+  forwardedRef: React.ForwardedRef<HTMLSelectElement>
+) {
+  const {
+    children,
+    customValidity,
+    disabled,
+    fontSize = 2,
+    padding = 3,
+    radius = 1,
+    readOnly,
+    space = 3,
+    ...restProps
+  } = props
+
+  const ref = useForwardedRef(forwardedRef)
+
+  useCustomValidity(ref, customValidity)
+
+  return (
+    <Root data-ui="Select">
+      <Input
+        data-read-only={!disabled && readOnly ? '' : undefined}
+        data-ui="Select"
+        {...restProps}
+        $fontSize={useArrayProp(fontSize)}
+        $padding={useArrayProp(padding)}
+        $radius={useArrayProp(radius)}
+        $space={useArrayProp(space)}
+        disabled={disabled || readOnly}
+        ref={ref}
+      >
+        {children}
+      </Input>
+
+      <IconBox padding={padding}>
+        <Text size={fontSize}>
+          <SelectIcon />
+        </Text>
+      </IconBox>
+    </Root>
+  )
+})