@sanity/ui 0.37.2 → 0.37.3

package/src/lib/globalScope.ts

@@ -1,19 +0,0 @@
-/**
- * Gets the global scope instance in a given environment.
- *
- * The strategy is to return the most modern, and if not, the most common:
- * - The `globalThis` variable is the modern approach to accessing the global scope
- * - The `window` variable is the global scope in a web browser
- * - The `self` variable is the global scope in workers and others
- * - The `global` variable is the global scope in Node.js
- */
-function getGlobalScope() {
-  if (typeof globalThis !== 'undefined') return globalThis
-  if (typeof window !== 'undefined') return window
-  if (typeof self !== 'undefined') return self
-  if (typeof global !== 'undefined') return global
-
-  throw new Error('@sanity/ui: could not locate global scope')
-}
-
-export const globalScope = getGlobalScope() as any

package/src/lib/isRecord.ts

@@ -1,3 +0,0 @@
-export function isRecord(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === 'object')
-}

package/src/primitives/_selectable/index.ts

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

package/src/primitives/_selectable/selectable.tsx

@@ -1,12 +0,0 @@
-import styled from 'styled-components'
-import {responsiveBorderStyle, ResponsiveBorderStyleProps} from '../../styles/border'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
-import {Box} from '../box'
-import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from './style'
-
-/**
- * @internal
- */
-export const Selectable = styled(Box)<
-  SelectableStyleProps & ResponsiveRadiusStyleProps & ResponsiveBorderStyleProps
->(responsiveBorderStyle, responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle)

package/src/primitives/_selectable/style.ts

@@ -1,111 +0,0 @@
-import {css, FlattenSimpleInterpolation} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_colorVarsStyle} from '../../styles/colorVars'
-import {SelectableTone} from '../../types/selectable'
-
-/**
- * @internal
- */
-export interface SelectableStyleProps {
-  $tone: SelectableTone
-}
-
-export function selectableBaseStyle(): FlattenSimpleInterpolation {
-  return css`
-    background-color: inherit;
-    color: inherit;
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}
-
-export function selectableColorStyle(
-  props: SelectableStyleProps & ThemeProps
-): FlattenSimpleInterpolation {
-  const {$tone, theme} = props
-  const {base, muted, selectable} = theme.sanity.color
-  // @todo: remove use of `muted` here
-  const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
-
-  return css`
-    ${_colorVarsStyle(base, tone.enabled)}
-
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-    outline: none;
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      &:disabled {
-        ${_colorVarsStyle(base, tone.disabled)}
-      }
-
-      &:not(:disabled) {
-        &[aria-pressed='true'] {
-          ${_colorVarsStyle(base, tone.pressed)}
-        }
-
-        &[data-selected],
-        &[aria-selected='true'] > & {
-          ${_colorVarsStyle(base, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &:hover {
-              ${_colorVarsStyle(base, tone.hovered)}
-            }
-
-            &:active {
-              ${_colorVarsStyle(base, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      &[data-disabled] {
-        ${_colorVarsStyle(base, tone.disabled)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_colorVarsStyle(base, tone.pressed)}
-        }
-
-        &[data-selected] {
-          ${_colorVarsStyle(base, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &:hover {
-              ${_colorVarsStyle(base, tone.hovered)}
-            }
-
-            &:active {
-              ${_colorVarsStyle(base, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    ${theme.sanity.styles?.card?.root}
-  `
-}

package/src/primitives/avatar/__workshop__/.eslintrc

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

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

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

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

@@ -1,15 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('primitives/avatar', 'Avatar', [
-  {
-    name: 'as-button',
-    title: 'As button',
-    component: lazy(() => import('./asButton')),
-  },
-  {
-    name: 'avatar-stack',
-    title: 'Avatar stack',
-    component: lazy(() => import('./stack')),
-  },
-])

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

@@ -1,25 +0,0 @@
-import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 0, 'Props')
-
-  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/primitives/avatar/avatar.tsx

@@ -1,165 +0,0 @@
-import {useId} from '@reach/auto-id'
-import React, {forwardRef, useCallback, useEffect, useState} from 'react'
-import ReactIs from 'react-is'
-import styled from 'styled-components'
-import {useResponsiveProp} from '../../hooks'
-import {ThemeColorSpotKey, useTheme} from '../../theme'
-import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
-import {Text} from '../text'
-import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
-
-/**
- * @public
- */
-export interface AvatarProps {
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  color?: ThemeColorSpotKey
-  initials?: string
-  onImageLoadError?: (event: Error) => void
-  size?: AvatarSize | AvatarSize[]
-  src?: string
-  /**
-   * The status of the entity this Avatar represents.
-   * @alpha
-   */
-  status?: AvatarStatus
-  title?: string
-}
-
-const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
-  responsiveAvatarSizeStyle,
-  avatarStyle.root
-)
-
-const Arrow = styled.div(avatarStyle.arrow)
-
-const BgStroke = styled.ellipse(avatarStyle.bgStroke)
-
-const Stroke = styled.ellipse(avatarStyle.stroke)
-
-const Initials = styled.div(avatarStyle.initials)
-
-/**
- * @public
- */
-export const Avatar = forwardRef(function Avatar(
-  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const {
-    as: asProp,
-    color: colorKey = 'gray',
-    src,
-    title,
-    initials,
-    onImageLoadError,
-    arrowPosition: arrowPositionProp,
-    animateArrowFrom,
-    status = 'online',
-    size: sizeProp,
-    ...restProps
-  } = props
-  const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size: AvatarSize[] = useResponsiveProp(sizeProp, [0])
-  const theme = useTheme()
-  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
-
-  // @todo: remove this
-  const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0]
-  const _sizeRem = avatarSize.size
-  const _radius = _sizeRem / 2
-
-  const elementId = useId() || ''
-  const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
-    animateArrowFrom || arrowPositionProp || 'inside'
-  )
-
-  const [imageFailed, setImageFailed] = useState<boolean>(false)
-
-  const imageId = `avatar-image-${elementId}`
-
-  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) setImageFailed(false)
-  }, [src])
-
-  const handleImageError = useCallback(() => {
-    setImageFailed(true)
-
-    if (onImageLoadError) {
-      onImageLoadError(new Error('Avatar: the image failed to load'))
-    }
-  }, [onImageLoadError])
-
-  return (
-    <Root
-      as={as}
-      data-as={typeof as === 'string' ? as : undefined}
-      data-ui="Avatar"
-      {...restProps}
-      $size={size}
-      $color={color}
-      aria-label={title}
-      data-arrow-position={arrowPosition}
-      data-status={status}
-      ref={ref}
-      title={title}
-    >
-      <Arrow>
-        <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>
-      </Arrow>
-
-      {!imageFailed && src && (
-        <svg viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
-          <defs>
-            <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
-              <image href={src} width="1" height="1" onError={handleImageError} />
-            </pattern>
-          </defs>
-
-          <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
-          <BgStroke
-            cx={_radius}
-            cy={_radius}
-            rx={_radius}
-            ry={_radius}
-            vectorEffect="non-scaling-stroke"
-          />
-          <Stroke
-            cx={_radius}
-            cy={_radius}
-            rx={_radius}
-            ry={_radius}
-            stroke={color}
-            vectorEffect="non-scaling-stroke"
-          />
-        </svg>
-      )}
-
-      {(imageFailed || !src) && initials && (
-        <>
-          <Initials>
-            <Text as="span" size={size.map((s) => (s === 0 ? 0 : s + 1))}>
-              <strong>{initials}</strong>
-            </Text>
-          </Initials>
-        </>
-      )}
-    </Root>
-  )
-})

package/src/primitives/avatar/avatarCounter.tsx

@@ -1,77 +0,0 @@
-import React, {forwardRef} from 'react'
-import styled, {css} from 'styled-components'
-import {EMPTY_RECORD} from '../../constants'
-import {useResponsiveProp} from '../../hooks'
-import {rem, responsive, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
-import {Text} from '../text'
-
-function responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
-  const {theme} = props
-  const {avatar, media} = theme.sanity
-
-  return responsive(media, props.$size, (size) => {
-    const avatarSize = avatar.sizes[size]
-
-    if (!avatarSize) return EMPTY_RECORD
-
-    return {
-      borderRadius: rem(avatarSize.size / 2),
-      minWidth: rem(avatarSize.size),
-      height: rem(avatarSize.size),
-    }
-  })
-}
-
-function avatarCounterBaseStyle(props: ThemeProps) {
-  const {theme} = props
-
-  return css`
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    user-select: none;
-    color: inherit;
-    color: var(--card-fg-color);
-    background: var(--card-bg-color);
-    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);
-    padding: 0 ${rem(theme.sanity.space[2])};
-
-    &:not([hidden]) {
-      display: flex;
-    }
-  `
-}
-
-const Root = styled.div<{$size: AvatarSize[]}>(
-  responsiveAvatarCounterSizeStyle,
-  avatarCounterBaseStyle
-)
-
-/**
- * @public
- */
-export interface AvatarCounterProps {
-  count: number
-  size?: AvatarSize | AvatarSize[]
-  tone?: 'navbar'
-}
-
-/**
- * @public
- */
-export const AvatarCounter = forwardRef(function AvatarCounter(
-  props: AvatarCounterProps,
-  ref: React.Ref<HTMLDivElement>
-) {
-  const {count, size: sizeProp = 0, tone} = props
-  const size: AvatarSize[] = useResponsiveProp(sizeProp, [0])
-
-  return (
-    <Root $size={size} data-tone={tone} ref={ref}>
-      <Text as="span" size={size.map((s) => (s === 0 ? 0 : s + 1))}>
-        <strong>{count}</strong>
-      </Text>
-    </Root>
-  )
-})

package/src/primitives/avatar/avatarStack.tsx

@@ -1,93 +0,0 @@
-import React, {cloneElement, forwardRef} from 'react'
-import styled, {css} from 'styled-components'
-import {EMPTY_RECORD} from '../../constants'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
-import {AvatarSize} from '../../types'
-import {childrenToElementArray} from '../helpers'
-import {AvatarCounter} from './avatarCounter'
-
-const BASE_STYLES = css`
-  white-space: nowrap;
-
-  & > div {
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  }
-`
-
-function avatarStackStyle() {
-  return BASE_STYLES
-}
-
-function responsiveAvatarStackSizeStyle(props: {size: AvatarSize | AvatarSize[]} & ThemeProps) {
-  const {theme} = props
-  const {avatar, media} = theme.sanity
-
-  return responsive(media, getResponsiveProp(props.size), (size) => {
-    const avatarSize = avatar.sizes[size]
-
-    if (!avatarSize) return EMPTY_RECORD
-
-    return {
-      '& > div + div': {
-        marginLeft: rem(avatarSize.distance),
-      },
-    }
-  })
-}
-
-const Root = styled.div<{size: AvatarSize | AvatarSize[]}>(
-  responsiveAvatarStackSizeStyle,
-  avatarStackStyle
-)
-
-/**
- * @public
- */
-export interface AvatarStackProps {
-  children: React.ReactNode
-  maxLength?: number
-  size?: AvatarSize | AvatarSize[]
-  tone?: 'navbar'
-}
-
-/**
- * @public
- */
-export const AvatarStack = forwardRef(function AvatarStack(
-  props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const {children: childrenProp, maxLength: maxLengthProp = 4, size = 0, tone, ...restProps} = props
-  const maxLength = Math.max(maxLengthProp, 0)
-  const children = childrenToElementArray(childrenProp).filter(
-    (child) => typeof child !== 'string'
-  ) as React.ReactElement[]
-  const len = children.length
-  const visibleCount = maxLength - 1
-  const extraCount = len - visibleCount
-  const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
-
-  return (
-    <Root data-ui="AvatarStack" {...restProps} ref={ref} size={size}>
-      {len === 0 && (
-        <div>
-          <AvatarCounter count={len} tone={tone} />
-        </div>
-      )}
-
-      {len !== 0 && extraCount > 1 && (
-        <div>
-          <AvatarCounter count={extraCount} size={size} tone={tone} />
-        </div>
-      )}
-
-      {visibleChildren.map((child, childIndex) => (
-        <div key={String(childIndex)}>{cloneElement(child, {size, tone})}</div>
-      ))}
-    </Root>
-  )
-})

package/src/primitives/avatar/index.ts

@@ -1,4 +0,0 @@
-export * from './avatar'
-export * from './avatarCounter'
-export * from './avatarStack'
-export * from './types'