@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/src/ui/primitives/types.ts

@@ -0,0 +1,166 @@
+import {
+  type FlexAlign,
+  type FlexDirection,
+  type FlexJustify,
+  type FlexValue,
+  type FlexWrap,
+  GridItemColumn,
+  GridItemColumnEnd,
+  GridItemColumnStart,
+  GridItemRow,
+  GridItemRowEnd,
+  GridItemRowStart,
+} from '@sanity/ui/css'
+
+import {
+  type BoxDisplay,
+  type BoxHeight,
+  type BoxOverflow,
+  type BoxSizing,
+  type GridAutoCols,
+  type GridAutoFlow,
+  type GridAutoRows,
+  // type GridItemColumn,
+  // type GridItemColumnEnd,
+  // type GridItemColumnStart,
+  // type GridItemRow,
+  // type GridItemRowEnd,
+  // type GridItemRowStart,
+  type Radius,
+} from '../types'
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveBorderProps {
+  border?: boolean | boolean[]
+  borderTop?: boolean | boolean[]
+  borderRight?: boolean | boolean[]
+  borderBottom?: boolean | boolean[]
+  borderLeft?: boolean | boolean[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveBoxProps {
+  display?: BoxDisplay | BoxDisplay[]
+  height?: BoxHeight | BoxHeight[]
+  overflow?: BoxOverflow | BoxOverflow[]
+  sizing?: BoxSizing | BoxSizing[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveFlexProps {
+  align?: FlexAlign | FlexAlign[]
+  direction?: FlexDirection | FlexDirection[]
+  justify?: FlexJustify | FlexJustify[]
+  wrap?: FlexWrap | FlexWrap[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
+  flex?: FlexValue | FlexValue[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveGridProps {
+  autoRows?: GridAutoRows | GridAutoRows[]
+  autoCols?: GridAutoCols | GridAutoCols[]
+  autoFlow?: GridAutoFlow | GridAutoFlow[]
+  columns?: number | number[]
+  // gap?: number | number[]
+  // gapX?: number | number[]
+  // gapY?: number | number[]
+  rows?: number | number[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveGridItemProps {
+  column?: GridItemColumn | GridItemColumn[]
+  columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  row?: GridItemRow | GridItemRow[]
+  rowStart?: GridItemRowStart | GridItemRowStart[]
+  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
+  margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
+  marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
+  marginY?: number | number[]
+  marginTop?: number | number[]
+  marginRight?: number | number[]
+  marginBottom?: number | number[]
+  marginLeft?: number | number[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsivePaddingProps {
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  paddingTop?: number | number[]
+  paddingRight?: number | number[]
+  paddingBottom?: number | number[]
+  paddingLeft?: number | number[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveRadiusProps {
+  radius?: Radius | Radius[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveShadowProps {
+  shadow?: number | number[]
+}
+
+/**
+ * @public
+ * @deprecated
+ */
+export interface ResponsiveWidthProps {
+  width?: number | 'auto' | (number | 'auto')[]
+}
+
+/**
+ * @public
+ */
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>

package/src/ui/types/box.ts

@@ -0,0 +1,22 @@
+export {
+  /**
+   * @public
+   * @deprecated use `Display` from `@sanity/ui/css` instead.
+   */
+  type Display as BoxDisplay,
+  /**
+   * @public
+   * @deprecated use `BoxHeight` from `@sanity/ui/css` instead.
+   */
+  type BoxHeight,
+  /**
+   * @public
+   * @deprecated use `Overflow` from `@sanity/ui/css` instead.
+   */
+  type BoxOverflow,
+  /**
+   * @public
+   * @deprecated use `BoxSizing` from `@sanity/ui/css` instead.
+   */
+  type BoxSizing,
+} from '@sanity/ui/css'

package/src/ui/types/button.ts

@@ -0,0 +1,24 @@
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` instead
+ */
+export type ButtonMode = ThemeColorButtonModeKey
+
+/**
+ * @public
+ */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
+ */
+export type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ * @deprecated Use `Width` from `@sanity/ui/css` instead.
+ */
+export type ButtonWidth = 'fill'

package/src/ui/types/flex.ts

@@ -0,0 +1,27 @@
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexAlign,
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexDirection,
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexJustify,
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexValue,
+  /**
+   * @public
+   * @deprecated
+   */
+  type FlexWrap,
+} from '@sanity/ui/css'

package/src/ui/types/grid.ts

@@ -0,0 +1,17 @@
+export {
+  /**
+   * @public
+   * @deprecated Use `GridAutoCols` from `@sanity/ui/css` instead.
+   */
+  type GridAutoCols,
+  /**
+   * @public
+   * @deprecated Use `GridAutoFlow` from `@sanity/ui/css` instead.
+   */
+  type GridAutoFlow,
+  /**
+   * @public
+   * @deprecated Use `GridAutoRows` from `@sanity/ui/css` instead.
+   */
+  type GridAutoRows,
+} from '@sanity/ui/css'

package/src/ui/types/gridItem.ts

@@ -0,0 +1,32 @@
+export {
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumn,
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumnEnd,
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemColumnStart,
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRow,
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRowEnd,
+  /**
+   * @public
+   * @deprecated
+   */
+  type GridItemRowStart,
+} from '@sanity/ui/css'

package/src/ui/types/index.ts

@@ -0,0 +1,15 @@
+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 './props'
+export * from './radius'
+export * from './selectable'
+export * from './text'

package/src/ui/types/props.ts

@@ -0,0 +1,18 @@
+import type {ComponentProps, ElementType} from 'react'
+
+export interface PolymorphicProps {
+  as?: ElementType
+}
+
+/** @public */
+export type ElementProps<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
+
+/** @public */
+export type Assign<T, U> = Omit<T, keyof U> & U
+
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
+  ElementProps<E> & PolymorphicProps,
+  P
+>

package/src/ui/types/selectable.ts

@@ -0,0 +1,7 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
+ */
+export type SelectableTone = ThemeColorStateToneKey

package/src/ui/utils/arrow/arrow.tsx

@@ -0,0 +1,51 @@
+import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask} from '@sanity/ui/css'
+import {CSSProperties, ForwardedRef, forwardRef, ReactElement, useMemo} from 'react'
+
+import {Props} from '../../types'
+import {compileCommands, getRoundedCommands, Point} from './cmds'
+
+/** @internal */
+export const Arrow = forwardRef(function Arrow(
+  props: Props<{width: number; height: number; radius?: number}, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+): ReactElement {
+  const {width: w, height: h, radius = 0, style, ...restProps} = props
+
+  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 (
+    <div
+      {...restProps}
+      className={_arrow()}
+      ref={ref}
+      style={{...style, '--arrow-size': `${w}px`} as CSSProperties}
+    >
+      <svg 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>
+    </div>
+  )
+})
+
+Arrow.displayName = 'ForwardRef(Arrow)'

package/src/ui/utils/boundaryElement/boundaryElement.test.tsx

@@ -0,0 +1,100 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContextValue} from './types'
+import {useBoundaryElement} from './useBoundaryElement'
+
+describe('utils/boundaryElement', () => {
+  describe('useBoundaryElement', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootBoundaryElement = useBoundaryElement()
+
+        log(rootBoundaryElement)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: BoundaryElementContextValue = {
+          version: 0.0,
+          element: null,
+        }
+
+        return (
+          <BoundaryElementContext.Provider value={value}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should provide default value when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootBoundaryElement = useBoundaryElement()
+
+        log(rootBoundaryElement)
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <BoundaryElementContext.Provider value={value as any}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useBoundaryElement()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        // NOTE: we’re testing this because the context value may be a function in the future
+        const value = () => {
+          return {version: 1}
+        }
+
+        return (
+          <BoundaryElementContext.Provider value={value as any}>
+            <Debug />
+          </BoundaryElementContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useBoundaryElement(): the context value is not compatible',
+      )
+    })
+  })
+})

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

@@ -0,0 +1,24 @@
+import {ReactElement, ReactNode, useMemo} from 'react'
+
+import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface BoundaryElementProviderProps {
+  children: ReactNode
+  element: HTMLElement | null
+}
+
+/**
+ * @public
+ */
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): ReactElement {
+  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/ui/utils/boundaryElement/index.ts

@@ -0,0 +1,3 @@
+export * from './boundaryElementProvider'
+export * from './types'
+export * from './useBoundaryElement'

package/src/ui/utils/boundaryElement/useBoundaryElement.ts

@@ -0,0 +1,26 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContextValue} from './types'
+
+const DEFAULT_VALUE: BoundaryElementContextValue = {
+  version: 0.0,
+  element: null,
+}
+
+/**
+ * @public
+ */
+export function useBoundaryElement(): BoundaryElementContextValue {
+  const value = useContext(BoundaryElementContext)
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (value && (!isRecord(value) || value.version !== 0.0)) {
+    throw new Error('useBoundaryElement(): the context value is not compatible')
+  }
+
+  return value || DEFAULT_VALUE
+}

package/src/ui/utils/conditionalWrapper/conditionalWrapper.tsx

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

package/src/ui/utils/elementQuery/elementQuery.tsx

@@ -0,0 +1,55 @@
+import {BREAKPOINTS} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+
+import {useElementSize} from '../../hooks'
+import {Props} from '../../types'
+import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface MediaQueryProps {
+  media?: number[]
+}
+
+const defaultBreakpoints = Object.values(BREAKPOINTS)
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const ElementQuery = forwardRef(function ElementQuery(
+  props: Props<MediaQueryProps, 'div'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
+) {
+  const {children, media: mediaProp, ...restProps} = props
+  const breakpoints = mediaProp ?? defaultBreakpoints
+
+  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(breakpoints, width)
+
+    return eq.length ? eq.join(' ') : undefined
+  }, [breakpoints, width])
+
+  const min = useMemo(() => {
+    const eq = findMinBreakpoints(breakpoints, width)
+
+    return eq.length ? eq.join(' ') : undefined
+  }, [breakpoints, 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/ui/utils/errorBoundary.tsx

@@ -0,0 +1,48 @@
+import {Component, ErrorInfo, PropsWithChildren, ReactNode} from 'react'
+
+import {Code} from '../primitives/code'
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export type ErrorBoundaryProps = PropsWithChildren<{
+  onCatch: (params: {error: Error; info: 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: ErrorInfo): void {
+    this.props.onCatch({error, info})
+  }
+
+  render(): ReactNode {
+    const {error} = this.state
+
+    if (error) {
+      const message = typeof error?.message === 'string' ? error.message : 'Error'
+
+      return <Code>{message}</Code>
+    }
+
+    return this.props.children
+  }
+}