@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -0,0 +1,109 @@
+import {useSyncExternalStore} from 'react'
+import {useTheme_v2} from '../../theme'
+
+/**
+ * @internal
+ */
+export interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getSnapshot: () => number
+}
+
+const MEDIA_STORE_CACHE = new WeakMap<number[], _MediaStore>()
+
+type MediaQueryMinWidth = `(min-width: ${number}px)`
+type MediaQueryMaxWidth = `(max-width: ${number}px)`
+type MediaQueryMinMaxWidth = `${MediaQueryMinWidth} and ${MediaQueryMaxWidth}`
+type MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQueryMinMaxWidth}`
+
+function _getMediaQuery(media: number[], index: number): MediaQuery {
+  if (index === 0) {
+    return `screen and (max-width: ${media[index] - 1}px)`
+  }
+
+  if (index === media.length) {
+    return `screen and (min-width: ${media[index - 1]}px)`
+  }
+
+  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+}
+
+function _createMediaStore(media: number[]): _MediaStore {
+  const mediaLen = media.length
+  let sizes: {mq: MediaQueryList; index: number}[]
+
+  // The _createMediaStore function is called in both server and client environments.
+  // However since subscribe and getSnapshot are only called on the client we lazy init what we need for them
+  // so that we don't need to run checks for wether it's safe to call `window.matchMedia`
+  const getSizes = () => {
+    if (!sizes) {
+      sizes = []
+
+      for (let index = mediaLen; index > -1; index -= 1) {
+        const mediaQuery = _getMediaQuery(media, index)
+
+        sizes.push({index, mq: window.matchMedia(mediaQuery)})
+      }
+    }
+
+    return sizes
+  }
+
+  const getSnapshot = () => {
+    for (const {index, mq} of getSizes()) {
+      if (mq.matches) return index
+    }
+
+    return 0
+  }
+
+  const subscribe = (onStoreChange: () => void) => {
+    const disposeFns: (() => void)[] = []
+
+    for (const {mq} of getSizes()) {
+      const handleChange = () => {
+        if (mq.matches) onStoreChange()
+      }
+
+      mq.addEventListener('change', handleChange)
+
+      disposeFns.push(() => mq.removeEventListener('change', handleChange))
+    }
+
+    return () => {
+      for (const disposeFn of disposeFns) {
+        disposeFn()
+      }
+    }
+  }
+
+  return {getSnapshot, subscribe}
+}
+
+/**
+ * Only called during server-side rendering, and hydration if using hydrateRoot
+ * Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
+ * and we assume `(prefers-color-scheme: light)` since it's the most common scheme
+ *
+ * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
+ */
+function getServerSnapshot() {
+  return 0
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export function useMediaIndex(): number {
+  const {media} = useTheme_v2()
+
+  let store = MEDIA_STORE_CACHE.get(media)
+
+  if (!store) {
+    store = _createMediaStore(media)
+    MEDIA_STORE_CACHE.set(media, store)
+  }
+
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
+}

package/src/core/index.ts

@@ -0,0 +1,11 @@
+export * from './_compat'
+
+export * from './primitives'
+export * from './components'
+export * from './helpers'
+export * from './hooks'
+export * from './observers'
+export * from './styles'
+export * from './theme'
+export * from './types'
+export * from './utils'

package/src/core/lib/isRecord.ts

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

package/src/core/middleware/origin.ts

@@ -0,0 +1,47 @@
+import {Middleware} from '@floating-ui/react-dom'
+
+/**
+ * Custom floating-ui middleware which calculates transform-origin X + Y offsets
+ * based on the current floating rect's dimensions and shift offset.
+ *
+ * Scaling popovers with these transform-origin offsets will give the effect of
+ * popvers slightly 'growing' from the origin/reference element.
+ *
+ * This middleware must be applied after both `@sanity/ui/size` and `shift` middlewares.
+ */
+export const origin: Middleware = {
+  name: '@sanity/ui/origin',
+  fn({middlewareData, placement, rects}) {
+    const [side] = placement.split('-')
+
+    const floatingWidth = rects.floating.width
+    const floatingHeight = rects.floating.height
+
+    const shiftX = middlewareData.shift?.x || 0
+    const shiftY = middlewareData.shift?.y || 0
+
+    if (floatingWidth <= 0 || floatingHeight <= 0) {
+      return {}
+    }
+
+    const isVerticalPlacement = ['bottom', 'top'].includes(side)
+
+    const {originX, originY}: {originX: number; originY: number} = isVerticalPlacement
+      ? {
+          originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
+          originY: side === 'bottom' ? 0 : 1,
+        }
+      : {
+          originX: side === 'left' ? 1 : 0,
+          originY: clamp(0.5 - shiftY / floatingHeight, 0, 1),
+        }
+
+    return {
+      data: {originX, originY},
+    }
+  },
+}
+
+function clamp(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max)
+}

package/src/core/primitives/_selectable/style.ts

@@ -0,0 +1,114 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css} from 'styled-components'
+import {ThemeProps} from '../../styles'
+import {_cardColorStyle} from '../../styles/card'
+import {SelectableTone} from '../../types'
+
+/**
+ * @internal
+ */
+export interface SelectableStyleProps {
+  $tone: SelectableTone
+}
+
+export function selectableBaseStyle(): ReturnType<typeof css> {
+  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: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `
+}
+
+export function selectableColorStyle(
+  props: SelectableStyleProps & ThemeProps,
+): ReturnType<typeof css> {
+  const {$tone} = props
+  const {color, style} = getTheme_v2(props.theme)
+  const tone = color.selectable[$tone]
+
+  return css`
+    ${_cardColorStyle(color, tone.enabled)}
+
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
+    outline: none;
+
+    /* &:is(button) */
+    &[data-as='button'] {
+      &:disabled {
+        ${_cardColorStyle(color, tone.disabled)}
+      }
+
+      &:not(:disabled) {
+        &[aria-pressed='true'] {
+          ${_cardColorStyle(color, tone.pressed)}
+        }
+
+        &[data-selected],
+        &[aria-selected='true'] > & {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, tone.hovered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, tone.pressed)}
+            }
+          }
+        }
+      }
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      &[data-disabled] {
+        ${_cardColorStyle(color, tone.disabled)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, tone.pressed)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, tone.selected)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, tone.hovered)}
+            }
+            &:active {
+              ${_cardColorStyle(color, tone.pressed)}
+            }
+          }
+        }
+      }
+    }
+
+    ${style?.card?.root}
+  `
+}

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

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

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

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

@@ -0,0 +1,196 @@
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import ReactIs from 'react-is'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {useTheme_v2} from '../../theme'
+import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
+import {Label} from '../label'
+import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface AvatarProps {
+  /** @beta */
+  __unstable_hideInnerStroke?: boolean
+  animateArrowFrom?: AvatarPosition
+  arrowPosition?: AvatarPosition
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  color?: ThemeColorAvatarColorKey
+  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: ThemeColorAvatarColorKey; $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)
+
+const InitialsLabel = styled(Label)({
+  color: 'inherit',
+})
+
+const Image = styled.svg(avatarStyle.image)
+
+/**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
+ * @public
+ */
+export const Avatar = forwardRef(function Avatar(
+  props: AvatarProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    __unstable_hideInnerStroke,
+    as: asProp,
+    color = 'gray',
+    src,
+    title,
+    initials,
+    onImageLoadError,
+    arrowPosition: arrowPositionProp,
+    animateArrowFrom,
+    status = 'online',
+    size: sizeProp = 1,
+    ...restProps
+  } = props
+  const {avatar} = useTheme_v2()
+  const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
+  const size = useArrayProp(sizeProp)
+
+  // @todo: remove this
+  const avatarSize = avatar.sizes[size[0]] || 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])
+
+  const initialsSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
+
+  return (
+    <Root
+      as={as}
+      data-as={typeof as === 'string' ? as : undefined}
+      data-ui="Avatar"
+      {...restProps}
+      $color={color}
+      $size={size}
+      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 && (
+        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+          <defs>
+            <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
+              <image
+                href={src}
+                width="1"
+                height="1"
+                // eslint-disable-next-line react/no-unknown-property
+                onError={handleImageError}
+              />
+            </pattern>
+          </defs>
+
+          <circle cx={_radius} cy={_radius} r={_radius} fill={`url(#${imageId})`} />
+
+          {!__unstable_hideInnerStroke && (
+            <BgStroke
+              cx={_radius}
+              cy={_radius}
+              rx={_radius}
+              ry={_radius}
+              vectorEffect="non-scaling-stroke"
+            />
+          )}
+
+          <Stroke
+            cx={_radius}
+            cy={_radius}
+            rx={_radius}
+            ry={_radius}
+            vectorEffect="non-scaling-stroke"
+          />
+        </Image>
+      )}
+
+      {(imageFailed || !src) && initials && (
+        <>
+          <Initials>
+            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
+              {initials}
+            </InitialsLabel>
+          </Initials>
+        </>
+      )}
+    </Root>
+  )
+})

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

@@ -0,0 +1,92 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {forwardRef, useMemo} from 'react'
+import styled, {css} from 'styled-components'
+import {EMPTY_RECORD} from '../../constants'
+import {useArrayProp} from '../../hooks'
+import {rem, _responsive, ThemeProps} from '../../styles'
+import {AvatarSize} from '../../types'
+import {Label} from '../label'
+
+function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
+  const {avatar, media} = getTheme_v2(props.theme)
+
+  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 {space} = getTheme_v2(props.theme)
+
+  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 1px var(--card-hairline-hard-color);
+    padding: 0 ${rem(space[2])};
+
+    &:not([hidden]) {
+      display: flex;
+    }
+  `
+}
+
+const Root = styled.div<{$size: AvatarSize[]}>(
+  _responsiveAvatarCounterSizeStyle,
+  _avatarCounterBaseStyle,
+)
+
+/**
+ * @public
+ */
+export interface AvatarCounterProps {
+  count: number
+  size?: AvatarSize | AvatarSize[]
+  /** @deprecated No longer supported. */
+  tone?: 'navbar'
+}
+
+/**
+ * @public
+ */
+export const AvatarCounter = forwardRef(function AvatarCounter(
+  props: AvatarCounterProps,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {count, size: sizeProp = 1} = props
+  const size = useArrayProp(sizeProp)
+
+  const fontSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
+
+        return 0
+      }),
+    [size],
+  )
+
+  return (
+    <Root $size={size} data-ui="AvatarCounter" ref={ref}>
+      <Label as="span" size={fontSize} weight="medium">
+        {count}
+      </Label>
+    </Root>
+  )
+})