@sanity/ui 0.36.17 → 0.37.3

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

@@ -1,58 +0,0 @@
-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

@@ -1,246 +0,0 @@
-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

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

package/src/primitives/radio/__workshop__/example.tsx

@@ -1,63 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

package/src/primitives/radio/radio.tsx

@@ -1,41 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

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