@sanity/ui 3.0.0-static.3 → 3.0.0-static.31

package/src/core/utils/portal/portal.test.tsx

@@ -0,0 +1,104 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {render} from '../../../../test'
+import {PortalContext} from './portalContext'
+import type {PortalContextValue} from './types'
+import {usePortal} from './usePortal'
+
+describe('utils/portal', () => {
+  describe('usePortal', () => {
+    it('should get context value', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        const rootPortal = usePortal()
+
+        log(rootPortal)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: PortalContextValue = {
+          version: 0.0,
+          boundaryElement: null,
+          element: null,
+        }
+
+        return (
+          <PortalContext.Provider value={value}>
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(log.mock.calls[0][0].boundaryElement).toBe(null)
+      expect(log.mock.calls[0][0].element).toBe(null)
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          usePortal()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        return (
+          <PortalContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('usePortal(): missing context value')
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = vi.fn()
+
+      function Debug() {
+        try {
+          usePortal()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        // NOTE: we’re testing this because the context value may be a function in the future
+
+        return (
+          <PortalContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
+            <Debug />
+          </PortalContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'usePortal(): the context value is not compatible',
+      )
+    })
+  })
+})

package/src/core/utils/portal/portal.tsx

@@ -0,0 +1,40 @@
+import type {ReactNode, ReactPortal} from 'react'
+import {createPortal} from 'react-dom'
+
+import {CardProvider} from '../../primitives/card/cardProvider'
+import {useCard} from '../../primitives/card/useCard'
+import {usePortal} from './usePortal'
+
+/** @public */
+export interface PortalProps {
+  children: ReactNode
+  /**
+   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   */
+  __unstable_name?: string
+}
+
+/** @public */
+export function Portal(props: PortalProps): ReactPortal | null {
+  const {children, __unstable_name: name} = props
+  const card = useCard()
+  const portal = usePortal()
+  const portalElement =
+    (name ? portal.elements && portal.elements[name] : portal.element) ||
+    portal.elements?.['default']
+
+  if (!portalElement) {
+    return null
+  }
+
+  return createPortal(
+    <CardProvider
+      // rendered={true}
+      tone="transparent" // card?.tone || 'default',
+      scheme={card?.scheme || 'light'}
+    >
+      {children}
+    </CardProvider>,
+    portalElement,
+  )
+}

package/src/core/utils/portal/portalContext.ts

@@ -0,0 +1,34 @@
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import {globalScope} from '../../lib/globalScope'
+import type {PortalContextValue} from './types'
+
+const key = '@sanity/ui/context/portal'
+const elementKey = Symbol.for(`${key}/element`)
+
+// Use the global scope as a map of symbols to elements
+const elementMap = globalScope as Record<symbol, HTMLDivElement | null>
+
+elementMap[elementKey] = null
+
+export const defaultContextValue: PortalContextValue = {
+  version: 0.0,
+  boundaryElement: null,
+  get element() {
+    if (typeof document === 'undefined') {
+      return null
+    }
+
+    if (elementMap[elementKey]) {
+      return elementMap[elementKey]
+    }
+
+    elementMap[elementKey] = document.createElement('div')
+    elementMap[elementKey].setAttribute('data-portal', '')
+
+    document.body.appendChild(elementMap[elementKey])
+
+    return elementMap[elementKey]
+  },
+}
+
+export const PortalContext = createGlobalScopedContext<PortalContextValue>(key, defaultContextValue)

package/src/core/utils/portal/portalProvider.tsx

@@ -0,0 +1,73 @@
+import {type ReactElement, type ReactNode, useMemo, useRef, useSyncExternalStore} from 'react'
+
+import {PortalContext} from './portalContext'
+import type {PortalContextValue} from './types'
+
+/** @public */
+export interface PortalProviderProps {
+  /**
+   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
+   */
+  boundaryElement?: HTMLElement | null
+  children: ReactNode
+  element?: HTMLElement | null
+  /**
+   * @beta
+   */
+  __unstable_elements?: Record<string, HTMLElement | null | undefined>
+}
+
+/** @public */
+export function PortalProvider(props: PortalProviderProps): ReactElement {
+  const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
+  const elements = useUnique(elementsProp)
+  const fallbackElement = useSyncExternalStore(
+    emptySubscribe,
+    () => document.body,
+    () => null,
+  )
+
+  const value: PortalContextValue = useMemo(() => {
+    return {
+      version: 0.0,
+      boundaryElement: boundaryElement || null,
+      element: element || fallbackElement,
+      elements,
+    }
+  }, [boundaryElement, element, elements, fallbackElement])
+
+  return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
+}
+
+const emptySubscribe = () => () => {}
+
+/**
+ * This is a React hook to make sure that a record identity is the same on every render. Uses strict
+ * equality comparison (eg by identity), and only goes one level deep.
+ */
+function useUnique<ValueType extends Comparable = Comparable>(value: ValueType): ValueType {
+  const valueRef = useRef<ValueType>(value)
+
+  if (!_isEqual(valueRef.current, value)) {
+    valueRef.current = value
+  }
+
+  return valueRef.current
+}
+
+function _isEqual(objA: Comparable, objB: Comparable): boolean {
+  if (!objA || !objB) {
+    return objA === objB
+  }
+
+  const keysA = Object.keys(objA)
+  const keysB = Object.keys(objB)
+
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+
+  return keysA.every((key) => objA[key] === objB[key])
+}
+
+type Comparable = Record<string | number | symbol, unknown> | undefined | null

package/src/core/utils/portal/types.ts

@@ -0,0 +1,7 @@
+/** @public */
+export interface PortalContextValue {
+  version: 0.0
+  boundaryElement: HTMLElement | null
+  element: HTMLElement | null
+  elements?: Record<string, HTMLElement | null | undefined>
+}

package/src/core/utils/portal/usePortal.ts

@@ -0,0 +1,23 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {PortalContext} from './portalContext'
+import type {PortalContextValue} from './types'
+
+/** @public */
+export function usePortal(): PortalContextValue {
+  const value = useContext(PortalContext)
+
+  if (!value) {
+    throw new Error('usePortal(): missing context value')
+  }
+
+  // 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 (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('usePortal(): the context value is not compatible')
+  }
+
+  return value
+}

package/src/css/_assign.ts

@@ -0,0 +1,3 @@
+export function _assign<T extends object, U extends object>(target: T, source: U): T & U {
+  return Object.assign(target, source)
+}

package/src/css/_composeClassNames.ts

@@ -0,0 +1,12 @@
+import {_getClassNames} from './_getClassNames'
+
+/** @internal */
+export function _composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  return unique(_getClassNames(...classNames)).join(' ') || undefined
+}
+
+function unique<T>(array: T[]): T[] {
+  return Array.from(new Set(array))
+}

package/src/css/_fromEntries.ts

@@ -0,0 +1,3 @@
+export function _fromEntries<K extends string | number | symbol, T>(entries: [K, T][]) {
+  return Object.fromEntries(entries) as Record<K, T>
+}

package/src/css/_getClassNames.ts

@@ -0,0 +1,9 @@
+/** @internal */
+export function _getClassNames(...classNames: Array<string | false | undefined>): string[] {
+  return classNames
+    .map((n) => typeof n === 'string' && n.trim())
+    .filter(Boolean)
+    .join(' ')
+    .split(' ')
+    .filter(Boolean)
+}

package/src/css/_responsiveClassName.ts

@@ -0,0 +1,45 @@
+// import {MEDIA} from './constants'
+import {BREAKPOINTS} from './constants'
+import type {ResponsiveProp, ResponsiveRuleOptions} from './types'
+
+export function _responsiveClassName<T extends string | number>(
+  rules: ResponsiveRuleOptions<T>,
+  _value: ResponsiveProp<T | boolean> | undefined,
+  options?: {
+    valueWhenTrue: T
+  },
+) {
+  let value = _value
+
+  if (value === undefined) {
+    return undefined
+  }
+
+  if (typeof value === 'boolean') {
+    if (value && options?.valueWhenTrue) {
+      value = options.valueWhenTrue
+    } else {
+      return undefined
+    }
+  }
+
+  if (typeof value === 'string' || typeof value === 'number') {
+    return rules[value]?.[0]
+  }
+
+  const classNames: string[] = []
+
+  for (const _index of Object.keys(BREAKPOINTS)) {
+    const index = Number(_index) as keyof typeof BREAKPOINTS
+
+    const valueAtIndex = value[index]
+
+    if (valueAtIndex !== undefined && valueAtIndex !== null && typeof valueAtIndex !== 'boolean') {
+      const rule = rules[valueAtIndex]
+
+      classNames.push(rule[index])
+    }
+  }
+
+  return classNames.join(' ') || undefined
+}

package/src/css/_responsiveStyle.css.ts

@@ -0,0 +1,34 @@
+import {style, type StyleRule} from '@vanilla-extract/css'
+
+import {BREAKPOINTS} from './constants'
+import type {ResponsiveRules} from './types'
+
+export function _responsiveStyle(layer: string, rule: StyleRule): ResponsiveRules {
+  const rules: Partial<ResponsiveRules> = {}
+
+  for (const _index of Object.keys(BREAKPOINTS)) {
+    const index = Number(_index) as keyof typeof BREAKPOINTS
+
+    const bp = BREAKPOINTS[index]
+
+    if (bp === 0) {
+      rules[index] = style({
+        '@layer': {
+          [layer]: rule,
+        },
+      })
+    } else {
+      rules[index] = style({
+        '@layer': {
+          [layer]: {
+            '@media': {
+              [`screen and (min-width: ${bp}px)`]: rule,
+            },
+          },
+        },
+      })
+    }
+  }
+
+  return rules as ResponsiveRules
+}

package/src/css/_style.css.ts

@@ -0,0 +1,9 @@
+import {style, type StyleRule} from '@vanilla-extract/css'
+
+export function _style(layer: string, rule: StyleRule) {
+  return style({
+    '@layer': {
+      [layer]: rule,
+    },
+  })
+}

package/src/css/components/breadcrumbs/breadcrumbs.css.ts

@@ -0,0 +1,6 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+
+export const root = _style(layers.components, {
+  lineHeight: 0,
+})

package/src/css/components/breadcrumbs/breadcrumbs.ts

@@ -1,5 +1,7 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {root} from './breadcrumbs.css'
 
-export function breadcrumbs(): string | undefined {
-  return _comp('breadcrumbs')
+/** @public */
+export function breadcrumbs(props: {className?: string}): string | undefined {
+  return _composeClassNames(props.className, root)
 }

package/src/css/components/dialog/dialog.css.ts

@@ -0,0 +1,106 @@
+import {keyframes} from '@vanilla-extract/css'
+
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+const zoomIn = keyframes({
+  // '@layer': {
+  //   [layers.components]: {
+  from: {
+    opacity: 0,
+    transform: 'scale(0.95)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'scale(1)',
+  },
+  //   },
+  // },
+})
+
+const fadeIn = keyframes({
+  // '@layer': {
+  //   [layers.components]: {
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+  //   },
+  // },
+})
+
+export const root = _style(layers.components, {
+  alignItems: 'center',
+  justifyContent: 'center',
+  outline: 'none',
+
+  background: vars.color.backdrop,
+
+  selectors: {
+    '&[data-animate]': {
+      animation: `${fadeIn} 200ms ease-out`,
+    },
+  },
+})
+
+export const card = _style(layers.components, {
+  width: '100%',
+  maxHeight: '100%',
+  overflow: ['hidden', 'clip'],
+
+  selectors: {
+    '[data-animate] > &': {
+      animation: `${zoomIn} 200ms ease-out`,
+    },
+  },
+})
+
+export const container = _style(layers.components, {
+  width: '100%',
+  height: '100%',
+})
+
+export const scroller = _style(layers.components, {
+  width: '100%',
+  height: '100%',
+  // overflow: 'auto',
+  outline: 'none',
+})
+
+export const scrollerShadowTop = _style(layers.components, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 4,
+  background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
+})
+
+export const scrollerShadowBottom = _style(layers.components, {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: 4,
+  background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
+})
+
+export const header = _style(layers.components, {
+  zIndex: 2,
+})
+
+export const content = _style(layers.components, {
+  zIndex: 1,
+  outline: 'none',
+})
+
+export const footer = _style(layers.components, {
+  zIndex: 3,
+})

package/src/css/components/dialog/dialog.ts

@@ -1,30 +1,58 @@
-import {_comp} from '../../_comp'
-import {inset} from '../../aspects'
+import {_composeClassNames} from '../../_composeClassNames'
+import {inset} from '../../props/inset/inset'
+import {
+  card,
+  container,
+  content,
+  footer,
+  header,
+  root,
+  scroller,
+  scrollerShadowBottom,
+  scrollerShadowTop,
+} from './dialog.css'
 
-export function dialog(): string | undefined {
-  return _comp('dialog', inset({inset: 0}))
+/** @public */
+export function dialog(props: {className?: string}): string | undefined {
+  return _composeClassNames(props.className, root, inset({inset: 0}))
 }
 
+/** @public */
+export function dialogCard(): string | undefined {
+  return card
+}
+
+/** @public */
 export function dialogContainer(): string | undefined {
-  return _comp('dialog-container')
+  return container
+}
+
+/** @public */
+export function dialogHeader(): string | undefined {
+  return header
 }
 
-export function dialogCardRoot(): string | undefined {
-  return _comp('dialog-card-root')
+/** @public */
+export function dialogContent(): string | undefined {
+  return content
 }
 
-export function dialogLayout(): string | undefined {
-  return _comp('dialog-layout')
+/** @public */
+export function dialogScroller(): string | undefined {
+  return scroller
 }
 
-export function dialogHeader(): string | undefined {
-  return _comp('dialog-header')
+/** @public */
+export function dialogScrollerShadowTop(): string | undefined {
+  return scrollerShadowTop
 }
 
-export function dialogContent(): string | undefined {
-  return _comp('dialog-content')
+/** @public */
+export function dialogScrollerShadowBottom(): string | undefined {
+  return scrollerShadowBottom
 }
 
+/** @public */
 export function dialogFooter(): string | undefined {
-  return _comp('dialog-footer')
+  return footer
 }

package/src/css/components/menu/menu.css.ts

@@ -0,0 +1,14 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.components, {
+  outline: 'none',
+})
+
+export const divider = _style(layers.components, {
+  height: `1px`,
+  border: 0,
+  backgroundColor: vars.color.border,
+  margin: 0,
+})

package/src/css/components/menu/menu.ts

@@ -1,9 +1,12 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {divider, root} from './menu.css'
 
-export function menu(): string | undefined {
-  return _comp('menu')
+/** @public */
+export function menu(props: {className?: string}) {
+  return _composeClassNames(props.className, root)
 }
 
-export function menuDivider(): string | undefined {
-  return _comp('menu-divider')
+/** @public */
+export function menuDivider(props: {className?: string}) {
+  return _composeClassNames(props.className, divider)
 }