@sanity/ui 3.0.0-static.8 → 3.0.0

package/src/core/theme/themeProvider.tsx

@@ -0,0 +1,62 @@
+import {
+  getScopedTheme,
+  type RootTheme,
+  type Theme,
+  type ThemeColorCardToneKey,
+  type ThemeColorSchemeKey,
+} from '@sanity/ui/theme'
+import {useContext, useMemo} from 'react'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface ThemeProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey
+  theme?: RootTheme
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * @public
+ */
+export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {
+  const parentTheme = useContext(ThemeContext)
+  const {children} = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
+
+  const themeContext: ThemeContextValue | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return {
+      version: 0.0,
+      theme: rootTheme,
+      scheme,
+      tone,
+    }
+  }, [rootTheme, scheme, tone])
+
+  const theme: Theme | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return getScopedTheme(rootTheme, scheme, tone)
+  }, [scheme, rootTheme, tone])
+
+  if (!theme) {
+    return <pre>ThemeProvider: no "theme" property provided</pre>
+  }
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+ThemeProvider.displayName = 'ThemeProvider'

package/src/core/types/avatar.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/**
+ * @public
+ */
+export type AvatarSize = 0 | 1 | 2 | 3
+
+/**
+ * @public
+ */
+export type AvatarStatus = 'online' | 'editing' | 'inactive'

package/src/core/types/box.ts

@@ -0,0 +1,19 @@
+/**
+ * @public
+ */
+export type BoxSizing = 'content' | 'border'
+
+/**
+ * @public
+ */
+export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+export type BoxHeight = 'stretch' | 'fill'
+
+/**
+ * @public
+ */
+export type BoxOverflow = 'visible' | 'hidden' | 'auto'

package/src/core/types/button.ts

@@ -0,0 +1,21 @@
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type ButtonMode = ThemeColorButtonModeKey
+
+/**
+ * @public
+ */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ */
+export type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export type ButtonWidth = 'fill'

package/src/core/types/flex.ts

@@ -0,0 +1,30 @@
+/**
+ * @public
+ */
+export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+
+/**
+ * @public
+ */
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/**
+ * @public
+ */
+export type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/**
+ * @public
+ */
+export type FlexValue = number | 'none' | 'auto' | 'initial'
+
+/**
+ * @public
+ */
+export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'

package/src/core/types/grid.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'

package/src/core/types/gridItem.ts

@@ -0,0 +1,29 @@
+/**
+ * @public
+ */
+export type GridItemColumn = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRow = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemRowStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRowEnd = 'auto' | number

package/src/core/types/index.ts

@@ -0,0 +1,14 @@
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './button'
+export * from './card'
+export * from './dialog'
+export * from './flex'
+export * from './grid'
+export * from './gridItem'
+export * from './placement'
+export * from './popover'
+export * from './radius'
+export * from './selectable'
+export * from './text'

package/src/core/types/radius.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type Radius = number | 'full'

package/src/core/types/selectable.ts

@@ -0,0 +1,6 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ */
+export type SelectableTone = ThemeColorStateToneKey

package/src/core/types/text.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'

package/src/core/utils/arrow/arrow.tsx

@@ -0,0 +1,123 @@
+import {ForwardedRef, forwardRef, HTMLProps} from 'react'
+import {css, styled} from 'styled-components'
+
+import {useTheme_v2} from '../../theme'
+import {compileCommands, getRoundedCommands, Point} from './cmds'
+
+const StyledArrow = styled.div<{$w: number}>(
+  ({$w: w}) => css`
+    position: absolute;
+    width: ${w}px;
+    height: ${w}px;
+
+    :empty + & {
+      display: none;
+    }
+
+    & > svg {
+      display: block;
+      line-height: 0;
+      transform-origin: ${w / 2}px ${w / 2}px;
+    }
+
+    [data-placement^='top'] > & {
+      bottom: -${w}px;
+
+      & > svg {
+        transform: rotate(0);
+      }
+    }
+
+    [data-placement^='right'] > & {
+      left: -${w}px;
+
+      & > svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    [data-placement^='left'] > & {
+      right: -${w}px;
+
+      & > svg {
+        transform: rotate(-90deg);
+      }
+    }
+
+    [data-placement^='bottom'] > & {
+      top: -${w}px;
+
+      & > svg {
+        transform: rotate(180deg);
+      }
+    }
+  `,
+)
+
+const StrokePath = styled.path`
+  stroke: var(--card-shadow-outline-color);
+`
+
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`
+
+/** @internal */
+export const Arrow = forwardRef(function Arrow(
+  props: {width: number; height: number; radius?: number} & Omit<
+    HTMLProps<HTMLDivElement>,
+    'width' | 'height'
+  >,
+  ref: ForwardedRef<HTMLDivElement>,
+): React.JSX.Element {
+  const {width: w, height: h, radius = 0, ...restProps} = props
+  const {card} = useTheme_v2()
+  const strokeWidth = card.shadow.outline
+
+  const center = w / 2
+
+  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)
+  const path = compileCommands(cmds)
+
+  const strokePath = `${path}`
+  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
+
+  return (
+    <StyledArrow {...restProps} $w={w} ref={ref}>
+      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
+        <mask id="stroke-mask">
+          <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
+        </mask>
+        <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
+        <ShapePath d={fillPath} />
+      </svg>
+    </StyledArrow>
+  )
+})
+Arrow.displayName = 'ForwardRef(Arrow)'

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -0,0 +1,24 @@
+import {useMemo} from 'react'
+
+import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface BoundaryElementProviderProps {
+  children: React.ReactNode
+  element: HTMLElement | null
+}
+
+/**
+ * @public
+ */
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
+  const {children, element} = props
+  const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
+
+  return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
+}
+
+BoundaryElementProvider.displayName = 'BoundaryElementProvider'

package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -0,0 +1,21 @@
+/**
+ * @internal
+ * @deprecated this component will be removed in the next major release
+ */
+export function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: (children: React.ReactNode) => React.ReactNode
+}): React.ReactNode {
+  if (!condition) {
+    return children
+  }
+
+  return wrapper(children)
+}
+
+ConditionalWrapper.displayName = 'ConditionalWrapper'

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -0,0 +1,53 @@
+import {forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+
+import {useElementSize} from '../../hooks'
+import {useTheme_v2} from '../../theme'
+import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface MediaQueryProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  media?: number[]
+}
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const ElementQuery = forwardRef(function ElementQuery(
+  props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const theme = useTheme_v2()
+  const {children, media: _media, ...restProps} = props
+  const media = _media ?? theme.media
+
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const elementSize = useElementSize(element)
+  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
+
+  const max = useMemo(() => {
+    const eq = findMaxBreakpoints(media, width)
+
+    return eq.length ? eq.join(' ') : undefined
+  }, [media, width])
+  const min = useMemo(() => {
+    const eq = findMinBreakpoints(media, width)
+
+    return eq.length ? eq.join(' ') : undefined
+  }, [media, width])
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
+    element,
+  ])
+
+  return (
+    <div data-ui="ElementQuery" {...restProps} data-eq-max={max} data-eq-min={min} ref={setElement}>
+      {children}
+    </div>
+  )
+})
+ElementQuery.displayName = 'ForwardRef(ElementQuery)'

package/src/core/utils/errorBoundary.tsx

@@ -0,0 +1,48 @@
+import {Component, PropsWithChildren} from 'react'
+
+import {Code} from '../primitives/code'
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export type ErrorBoundaryProps = PropsWithChildren<{
+  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
+}>
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export interface ErrorBoundaryState {
+  error: Error | null
+}
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = {error: null}
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    // Update state so the next render will show the fallback UI.
+    return {error}
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+    this.props.onCatch({error, info})
+  }
+
+  render(): React.ReactNode {
+    const {error} = this.state
+
+    if (error) {
+      const message = typeof error?.message === 'string' ? error.message : 'Error'
+
+      return <Code>{message}</Code>
+    }
+
+    return this.props.children
+  }
+}

package/src/core/utils/layer/layer.tsx

@@ -0,0 +1,98 @@
+import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {styled} from 'styled-components'
+
+import {EMPTY_RECORD} from '../../constants'
+import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+import {LayerProvider} from './layerProvider'
+import {useLayer} from './useLayer'
+
+/**
+ * @public
+ */
+export interface LayerProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
+  onActivate?: (props: {activeElement: HTMLElement | null}) => void
+  zOffset?: number | number[]
+}
+
+interface LayerChildrenProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  onActivate?: LayerProps['onActivate']
+}
+
+const StyledLayer = styled.div({position: 'relative'})
+
+const LayerChildren = forwardRef(function LayerChildren(
+  props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  forwardedRef: React.Ref<HTMLDivElement>,
+) {
+  const {children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps} = props
+  const {zIndex, isTopLayer} = useLayer()
+  const lastFocusedRef = useRef<HTMLElement | null>(null)
+  const ref = useRef<HTMLDivElement | null>(null)
+  const isTopLayerRef = useRef<boolean>(isTopLayer)
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+
+  // When the layer very first mounts, it will be the top layer, but we don't want to fire
+  // the callback in that case. We use a ref to track the previous value of isTopLayer to
+  // determine if the layer has become the top layer since the last render.
+  useEffect(() => {
+    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer
+
+    if (becameTopLayer) {
+      onActivate?.({activeElement: lastFocusedRef.current})
+    }
+
+    isTopLayerRef.current = isTopLayer
+  }, [isTopLayer, onActivate])
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLDivElement, Element>) => {
+      // Call the user-provided onFocus handler if any
+      onFocus?.(event)
+
+      const rootElement = ref.current
+      const target = document.activeElement
+
+      if (!isTopLayer || !rootElement || !target) return
+
+      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {
+        lastFocusedRef.current = target
+      }
+    },
+    [isTopLayer, onFocus],
+  )
+
+  return (
+    <StyledLayer
+      {...restProps}
+      data-ui="Layer"
+      onFocus={handleFocus}
+      ref={ref}
+      style={{...style, zIndex}}
+    >
+      {children}
+    </StyledLayer>
+  )
+})
+
+/**
+ * @public
+ */
+export const Layer = forwardRef(function Layer(
+  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {children, zOffset = 1, ...restProps} = props
+
+  return (
+    <LayerProvider zOffset={zOffset}>
+      <LayerChildren {...restProps} ref={ref}>
+        {children}
+      </LayerChildren>
+    </LayerProvider>
+  )
+})
+Layer.displayName = 'ForwardRef(Layer)'