@sanity/ui 4.0.0-v4.1 → 4.0.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/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>
-  )
-}

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

@@ -1,69 +0,0 @@
-import {avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
-import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
-import {useMemo} from 'react'
-
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/Box'
-import {Label} from '../label/Label'
-
-/** @public */
-export const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
-
-/** @public */
-export interface AvatarCounterOwnProps {
-  count: number
-  size?: ResponsiveProp<AvatarSize>
-}
-
-/** @public */
-export type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
-
-/** @public */
-export type AvatarCounterProps<E extends AvatarCounterElementType = AvatarCounterElementType> =
-  Props<AvatarCounterOwnProps, E>
-
-/** @public */
-export function AvatarCounter<
-  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
->(props: AvatarCounterProps<E>): React.JSX.Element {
-  const {
-    as = DEFAULT_AVATAR_COUNTER_ELEMENT,
-    className,
-    count,
-    size: sizeProp = 1,
-    ...rest
-  } = props as AvatarCounterProps<typeof DEFAULT_AVATAR_COUNTER_ELEMENT>
-  const size = useResponsiveProp(sizeProp)
-
-  const labelSize = 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 (
-    <Box
-      data-ui="AvatarCounter"
-      {...rest}
-      alignItems="center"
-      as={as}
-      className={avatarCounter({className, size})}
-      display="flex"
-      flex="none"
-      justifyContent="center"
-      paddingX={2}
-      sizing="border"
-    >
-      <Label align="center" as="span" size={labelSize} weight="medium">
-        {count}
-      </Label>
-    </Box>
-  )
-}

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

@@ -1,79 +0,0 @@
-import {avatarStack, type ResponsiveProp} from '@sanity/ui/css'
-import type {AvatarSize} from '@sanity/ui/theme'
-import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
-
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import type {ComponentType, Props} from '../../types'
-import {Box, type BoxOwnProps} from '../box/Box'
-import type {AvatarProps} from './Avatar'
-import {AvatarCounter} from './AvatarCounter'
-
-/** @public */
-export const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
-
-/** @public */
-export type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
-
-/** @public */
-export type AvatarStackOwnProps = Omit<
-  BoxOwnProps,
-  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
-> & {
-  children: AvatarStackChild | AvatarStackChild[]
-  maxLength?: number
-  size?: ResponsiveProp<AvatarSize>
-}
-
-/** @public */
-export type AvatarStackElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> = Props<
-  AvatarStackOwnProps,
-  E
->
-
-/** @public */
-export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT>(
-  props: AvatarStackProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_AVATAR_STACK_ELEMENT,
-    children: childrenProp,
-    className,
-    maxLength: maxLengthProp = 4,
-    size: sizeProp = 1,
-    ...rest
-  } = props as AvatarStackProps<typeof DEFAULT_AVATAR_STACK_ELEMENT>
-
-  const children = Children.toArray(childrenProp).filter(isValidElement) as ReactElement<
-    AvatarProps<'span'>
-  >[]
-  const maxLength = Math.max(maxLengthProp, 0)
-  const size = useResponsiveProp(sizeProp)
-
-  const len = children.length
-  const visibleCount = maxLength - 1
-  const extraCount = len - visibleCount
-  const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
-
-  return (
-    <Box
-      data-ui="AvatarStack"
-      {...rest}
-      alignItems="center"
-      as={as}
-      className={avatarStack({className, size})}
-      display="flex"
-      justifyContent="flex-start"
-    >
-      {len === 0 && <AvatarCounter count={len} size={size} />}
-
-      {len !== 0 && extraCount > 1 && <AvatarCounter count={extraCount} size={size} />}
-
-      {visibleChildren.map((child, childIndex) => (
-        <Fragment key={String(childIndex)}>{cloneElement(child, {size})}</Fragment>
-      ))}
-    </Box>
-  )
-}

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

@@ -1,21 +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 {
-  // @ts-expect-error - TODO: fix this
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Avatar
-        as="button"
-        color="purple"
-        initials="uq"
-        // @ts-expect-error - TODO: fix this
-        size={size}
-      />
-    </Flex>
-  )
-}

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

@@ -1,29 +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 {
-  // @ts-expect-error - TODO: fix this
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <AvatarStack
-        // @ts-expect-error - TODO: fix this
-        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>
-  )
-}