@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/src/core/observers/elementSize.ts

@@ -1,116 +0,0 @@
-import {_ResizeObserver} from './resize'
-
-/**
- * @beta
- */
-export interface ElementRectValue {
-  width: number
-  height: number
-}
-
-/**
- * @beta
- */
-export interface ElementSize {
-  content: ElementRectValue
-  border: ElementRectValue
-
-  /** @deprecated INTERNAL ONLY */
-  _contentRect: DOMRectReadOnly
-}
-
-/**
- * @internal
- */
-export type _ElementSizeSubscriber = (elementRect: ElementSize) => void
-
-/**
- * @internal
- */
-export interface _ElementSizeObserver {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-/**
- * @internal
- */
-export interface _ElementSizeListener {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-// Initialize element size observer
-// NOTE: this should NOT have size effects
-/**
- * @internal
- */
-export const _elementSizeObserver: _ElementSizeObserver = _createElementSizeObserver()
-
-function _createElementRectValueListener(): _ElementSizeListener {
-  return {
-    subscribe(element, subscriber) {
-      const resizeObserver = new _ResizeObserver(([entry]) => {
-        subscriber({
-          _contentRect: entry.contentRect,
-          border: {
-            width: entry.borderBoxSize[0].inlineSize,
-            height: entry.borderBoxSize[0].blockSize,
-          },
-          content: {
-            width: entry.contentRect.width,
-            height: entry.contentRect.height,
-          },
-        })
-      })
-
-      resizeObserver.observe(element)
-
-      return () => {
-        resizeObserver.unobserve(element)
-        resizeObserver.disconnect()
-      }
-    },
-  }
-}
-
-function _createElementSizeObserver(): _ElementSizeObserver {
-  const disposeCache = new WeakMap<HTMLElement, () => void>()
-  const subscribersCache = new WeakMap<HTMLElement, _ElementSizeSubscriber[]>()
-
-  return {
-    subscribe(element, subscriber) {
-      const subscribers = subscribersCache.get(element) || []
-
-      let dispose = disposeCache.get(element)
-
-      if (!subscribersCache.has(element)) {
-        subscribersCache.set(element, subscribers)
-
-        const listener = _createElementRectValueListener()
-
-        // listen
-        dispose = listener.subscribe(element, (elementRect) => {
-          for (const sub of subscribers) {
-            sub(elementRect)
-          }
-        })
-      }
-
-      subscribers.push(subscriber)
-
-      return () => {
-        // dispose
-
-        const idx = subscribers.indexOf(subscriber)
-
-        if (idx > -1) {
-          subscribers.splice(idx, 1)
-        }
-
-        if (subscribers.length === 0) {
-          // unlisten
-          if (dispose) dispose()
-        }
-      }
-    },
-  }
-}

package/src/core/observers/resize.ts

@@ -1,9 +0,0 @@
-import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer'
-
-/**
- * @internal
- */
-export const _ResizeObserver: typeof ResizeObserver =
-  typeof document !== 'undefined' && typeof window !== 'undefined' && window.ResizeObserver
-    ? window.ResizeObserver
-    : ResizeObserverPolyfill

package/src/core/primitives/arrow/arrow.tsx

@@ -1,74 +0,0 @@
-import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} from '@sanity/ui/css'
-import {assignInlineVars} from '@vanilla-extract/dynamic'
-import {useMemo} from 'react'
-
-import type {ComponentType, Props} from '../../types'
-import {compileCommands, getRoundedCommands, type Point} from './cmds'
-
-/** @internal */
-export const DEFAULT_ARROW_ELEMENT = 'div'
-
-/** @internal */
-export type ArrowOwnProps = {
-  width: number
-  height: number
-  radius?: number
-}
-
-/** @internal */
-export type ArrowElementType = 'div' | 'span' | ComponentType
-
-/** @internal */
-export type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<ArrowOwnProps, E>
-
-/** @internal */
-export function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
-  props: ArrowProps<E>,
-): React.JSX.Element {
-  const {
-    as: Element = DEFAULT_ARROW_ELEMENT,
-    width: w,
-    height: h,
-    radius = 0,
-    style,
-    ...rest
-  } = props as ArrowProps<typeof DEFAULT_ARROW_ELEMENT>
-
-  const center = w / 2
-
-  const path = useMemo(() => {
-    const points: Point[] = [
-      {x: 0, y: 0},
-      {x: radius, y: 0, radius},
-      {x: center, y: h - 1, radius},
-      {x: w - radius, y: 0, radius},
-      {x: w, y: 0},
-    ]
-
-    const cmds = getRoundedCommands(points)
-
-    return compileCommands(cmds)
-  }, [center, h, radius, w])
-
-  const strokePath = `${path}`
-  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
-
-  return (
-    <Element
-      {...rest}
-      className={_arrow()}
-      style={{
-        ...style,
-        ...assignInlineVars({[vars.arrow.size]: `${w}px`}),
-      }}
-    >
-      <svg className={_arrowSvg()} width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
-        <mask id="stroke-mask">
-          <rect className={_arrowStrokeMask()} x={0} width={w} height={w} fill="white" />
-        </mask>
-        <path className={_arrowStroke()} d={strokePath} mask="url(#stroke-mask)" />
-        <path className={_arrowShape()} d={fillPath} />
-      </svg>
-    </Element>
-  )
-}

package/src/core/primitives/arrow/cmds.ts

@@ -1,91 +0,0 @@
-export interface PointCmd {
-  type: 'point'
-  x: number
-  y: number
-  radius?: number
-}
-
-export interface CurveCmd {
-  type: 'curve'
-  startControl: Point
-  endControl: Point
-  curveEnd: Point
-}
-
-export type Cmd = PointCmd | CurveCmd
-
-export interface Point {
-  x: number
-  y: number
-  radius?: number
-}
-
-function moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {
-  const width = targetPoint.x - movingPoint.x
-  const height = targetPoint.y - movingPoint.y
-
-  const distance = Math.sqrt(width * width + height * height)
-
-  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))
-}
-
-function moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {
-  return {
-    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
-    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,
-  }
-}
-
-export function getRoundedCommands(points: Point[]): Cmd[] {
-  const len = points.length
-
-  const cmds: Cmd[] = []
-
-  for (let i = 0; i < len; i += 1) {
-    const point = points[i]
-    const prevPoint = points[i - 1]
-    const nextPoint = points[i + 1]
-
-    if (prevPoint && point.radius) {
-      const curveStart = moveTowardsLength(point, prevPoint, point.radius)
-      const curveEnd = moveTowardsLength(point, nextPoint, point.radius)
-      const startControl = moveTowardsFractional(curveStart, point, 0.5)
-      const endControl = moveTowardsFractional(point, curveEnd, 0.5)
-
-      cmds.push({
-        type: 'point',
-        ...curveStart,
-      })
-
-      cmds.push({
-        type: 'curve',
-        curveEnd,
-        startControl,
-        endControl,
-      })
-    } else {
-      cmds.push({
-        type: 'point',
-        ...point,
-      })
-    }
-  }
-
-  return cmds
-}
-
-export function compileCommands(cmds: Cmd[]): string {
-  return cmds
-    .map((n, idx) => {
-      if (n.type === 'point') {
-        return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`
-      }
-
-      if (n.type === 'curve') {
-        return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`
-      }
-
-      return ``
-    })
-    .join(' ')
-}

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,14 +0,0 @@
-import {Avatar, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
-
-export default function AsButtonStory(): React.JSX.Element {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="purple" initials="uq" size={size} />
-    </Flex>
-  )
-}

package/src/core/primitives/avatar/__workshop__/index.ts

@@ -1,31 +0,0 @@
-import {type WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/avatar',
-  title: 'Avatar',
-  stories: [
-    {
-      name: 'as-button',
-      title: 'As button',
-      component: lazy(() => import('./asButton')),
-    },
-    {
-      name: 'avatar-stack',
-      title: 'Avatar stack',
-      component: lazy(() => import('./stack')),
-    },
-    {
-      name: 'within-button',
-      title: 'Within button',
-      component: lazy(() => import('./withinButton')),
-    },
-    {
-      name: 'within-menu-item',
-      title: 'Within menu item',
-      component: lazy(() => import('./withinMenuItem')),
-    },
-  ],
-}
-
-export default scope

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,25 +0,0 @@
-import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
-
-export default function StackStory(): React.JSX.Element {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <AvatarStack size={size}>
-        <AvatarCounter count={2} />
-        <Avatar color="magenta" initials="uq" />
-        <Avatar
-          color="purple"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-        <Avatar
-          color="blue"
-          src="https://avatars3.githubusercontent.com/u/406933?s=400&u=af898b0a50ef2ef1248be32dfa1410ccb55f6f65&v=4"
-        />
-      </AvatarStack>
-    </Flex>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -1,55 +0,0 @@
-import {Avatar, AvatarStack, Box, Button, Container, Flex, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function WithinButtonStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <Container width={1}>
-      <Stack gap={1} paddingX={4} paddingY={[5, 6, 7]}>
-        <Button disabled={disabled} padding={1}>
-          <Flex align="center" flex={1} gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Default button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="ghost" padding={1}>
-          <Flex align="center" flex={1} gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Ghost button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-        <Button disabled={disabled} mode="bleed" padding={1}>
-          <Flex align="center" flex={1} gap={3} padding={2}>
-            <Box flex={1}>
-              <Text size={1}>Bleed button</Text>
-            </Box>
-            <Box flex="none">
-              <AvatarStack>
-                <Avatar color="blue" initials="AB" />
-                <Avatar color="magenta" initials="CD" />
-                <Avatar color="purple" initials="EF" />
-              </AvatarStack>
-            </Box>
-          </Flex>
-        </Button>
-      </Stack>
-    </Container>
-  )
-}

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -1,72 +0,0 @@
-import {
-  Avatar,
-  AvatarStack,
-  Box,
-  Card,
-  Container,
-  Flex,
-  Layer,
-  Menu,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function WithinMenuItemStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <Container width={1}>
-      <Layer>
-        <Box paddingX={4} paddingY={[5, 6, 7]}>
-          <Card radius={3} shadow={3}>
-            <Menu gap={1}>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={1}>
-                  <Box flex={1} padding={2}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="purple" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="orange" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={1}>
-                  <Box flex={1} padding={2}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      {/* <Avatar color="purple" initials="AB" /> */}
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="orange" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={1}>
-                  <Box flex={1} padding={2}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="purple" initials="AB" />
-                      {/* <Avatar color="magenta" initials="CD" /> */}
-                      {/* <Avatar color="orange" initials="EF" /> */}
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-            </Menu>
-          </Card>
-        </Box>
-      </Layer>
-    </Container>
-  )
-}

package/src/core/primitives/avatar/avatar.tsx

@@ -1,147 +0,0 @@
-import {
-  avatar,
-  avatarArrow,
-  avatarImage,
-  avatarImageOutline,
-  avatarInitials,
-  type ResponsiveProp,
-} from '@sanity/ui/css'
-import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui/theme'
-import {useCallback, useEffect, useMemo, useState} from 'react'
-
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Label} from '../label/label'
-import type {AvatarPosition} from './types'
-
-/** @public */
-export const DEFAULT_AVATAR_ELEMENT = 'span'
-
-/** @public */
-export interface AvatarOwnProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  color?: AvatarColor
-  initials?: string
-  onImageLoadError?: (event: Error) => void
-  size?: ResponsiveProp<AvatarSize>
-  src?: string
-  title?: string
-}
-
-/** @public */
-export type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
-
-/** @public */
-export type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<AvatarOwnProps, E>
-
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
-  props: AvatarProps<E>,
-): React.JSX.Element {
-  const {
-    __unstable_hideInnerStroke,
-    as: Element = DEFAULT_AVATAR_ELEMENT,
-    className,
-    color = 'magenta',
-    src,
-    title,
-    initials,
-    onImageLoadError,
-    arrowPosition: arrowPositionProp,
-    animateArrowFrom,
-    size: sizeProp = 1,
-    ...rest
-  } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>
-
-  const size = useResponsiveProp(sizeProp)
-
-  const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
-    animateArrowFrom || arrowPositionProp || 'inside',
-  )
-
-  const [imageError, setImageError] = useState<boolean>(false)
-
-  useEffect(() => {
-    if (arrowPosition === arrowPositionProp) return undefined
-
-    // Start animation in the next frame
-    const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp))
-
-    return () => cancelAnimationFrame(raf)
-  }, [arrowPosition, arrowPositionProp])
-
-  useEffect(() => {
-    if (src) setImageError(false)
-  }, [src])
-
-  const handleImageError = useCallback(() => {
-    setImageError(true)
-
-    if (onImageLoadError) {
-      onImageLoadError(new Error('Avatar: the image failed to load'))
-    }
-  }, [onImageLoadError])
-
-  const initialsSize = useMemo(
-    () =>
-      Object.values(size).map((s) => {
-        if (s === 1) return 1 satisfies FontLabelSize
-        if (s === 2) return 3 satisfies FontLabelSize
-        if (s === 3) return 5 satisfies FontLabelSize
-
-        return 0 satisfies FontLabelSize
-      }) as ResponsiveProp<FontLabelSize>,
-    [size],
-  )
-
-  return (
-    <Element
-      data-hide-inner-stroke={__unstable_hideInnerStroke ? '' : undefined}
-      data-ui="Avatar"
-      {...rest}
-      aria-label={title}
-      className={avatar({className, color, size: sizeProp})}
-      data-arrow-position={arrowPosition}
-      data-image-error={imageError ? '' : undefined}
-      title={title}
-    >
-      <span className={avatarArrow()}>
-        <svg width="11" height="7" viewBox="0 0 11 7" fill="none">
-          <path
-            d="M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z"
-            fill={color}
-          />
-        </svg>
-      </span>
-
-      <Box
-        alignItems="center"
-        as="span"
-        className={avatarInitials()}
-        display="flex"
-        justifyContent="center"
-        position="absolute"
-        inset={0}
-      >
-        <Label align="center" as="span" size={initialsSize} weight="medium">
-          {initials}
-        </Label>
-      </Box>
-
-      {src && (
-        <Box className={avatarImage()} inset={0} position="absolute">
-          <img alt={initials} onError={handleImageError} src={src} />
-          <span className={avatarImageOutline()} />
-        </Box>
-      )}
-    </Element>
-  )
-}