@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

package/src/ui/utils/portal/portal.ts

@@ -0,0 +1,46 @@
+import {createElement, ReactNode, ReactPortal} from 'react'
+import {createPortal} from 'react-dom'
+
+import {CardProvider, useCard} from '../../primitives'
+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(
+    createElement(
+      CardProvider,
+      {
+        rendered: true,
+        tone: 'transparent', // card?.tone || 'default',
+        scheme: card?.scheme || 'light',
+      },
+      children,
+    ),
+    portalElement,
+  )
+}
+
+Portal.displayName = 'Portal'

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

@@ -0,0 +1,79 @@
+import {ReactElement, ReactNode, useMemo, useRef, useSyncExternalStore} from 'react'
+
+import {PortalContext} from './portalContext'
+import {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>
+}
+
+PortalProvider.displayName = 'PortalProvider'
+
+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/ui/utils/portal/usePortal.ts

@@ -0,0 +1,25 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {PortalContext} from './portalContext'
+import {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/ui/utils/spanWithTextOverflow.tsx

@@ -0,0 +1,10 @@
+import {styled} from 'styled-components'
+
+/** @internal */
+export const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`

package/src/ui/utils/srOnly/index.ts

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

package/src/ui/utils/srOnly/srOnly.tsx

@@ -0,0 +1,35 @@
+import {composeClassNames, srOnly} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, ReactNode} from 'react'
+
+import {Props} from '../../types'
+
+/**
+ * @public
+ */
+export interface SrOnlyProps {
+  children?: ReactNode
+}
+
+/**
+ * @public
+ */
+export const SrOnly = forwardRef(function SrOnly(
+  props: Props<SrOnlyProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {as: As = 'div', children, className, ...rest} = props
+
+  return (
+    <As
+      data-ui="SrOnly"
+      {...rest}
+      aria-hidden
+      className={composeClassNames(className, srOnly())}
+      ref={ref}
+    >
+      {children}
+    </As>
+  )
+})
+
+SrOnly.displayName = 'ForwardRef(SrOnly)'

package/src/ui/utils/virtualList/virtualList.tsx

@@ -0,0 +1,189 @@
+import {
+  ForwardedRef,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {useTheme_v2} from '../../_compat'
+import {_isScrollable} from '../../helpers'
+import {_ResizeObserver} from '../../observers'
+import {Box, StackProps} from '../../primitives'
+import {Props} from '../../types'
+
+/**
+ * @beta
+ */
+export interface VirtualListChangeOpts {
+  fromIndex: number
+  gap: number
+  itemHeight: number
+  scrollHeight: number
+  scrollTop: number
+  toIndex: number
+}
+
+/**
+ * @beta
+ */
+export interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
+  gap?: number
+  getItemKey?: (item: Item, itemIndex: number) => string
+  items?: Item[]
+  onChange?: (opts: VirtualListChangeOpts) => void
+  renderItem?: (item: Item) => ReactNode
+}
+
+/**
+ * @beta
+ */
+export const VirtualList = forwardRef(function VirtualList(
+  props: Props<VirtualListProps, 'div'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
+): ReactElement {
+  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
+  const {space} = useTheme_v2()
+  const ref = useRef<HTMLDivElement | null>(null)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const [itemHeight, setItemHeight] = useState(-1)
+
+  // Sync ref to parent
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+
+  useEffect(() => {
+    if (!wrapperRef.current) return
+
+    const firstElement = wrapperRef.current.firstChild
+
+    if (firstElement instanceof HTMLElement) {
+      setItemHeight(firstElement.offsetHeight)
+    }
+  }, [renderItem])
+
+  useEffect((): (() => void) | undefined => {
+    if (!ref.current) return
+
+    const scrollEl = findScrollable(ref.current.parentNode)
+
+    if (scrollEl) {
+      if (!(scrollEl instanceof HTMLElement)) return
+
+      const handleScroll = () => {
+        setScrollTop(scrollEl.scrollTop)
+      }
+
+      scrollEl.addEventListener('scroll', handleScroll, {passive: true})
+
+      const ro = new _ResizeObserver((entries) => {
+        setScrollHeight(entries[0].contentRect.height)
+      })
+
+      ro.observe(scrollEl)
+
+      handleScroll()
+
+      return () => {
+        scrollEl.removeEventListener('scroll', handleScroll)
+
+        ro.unobserve(scrollEl)
+        ro.disconnect()
+      }
+    }
+
+    const handleScroll = () => {
+      setScrollTop(window.scrollY)
+    }
+
+    const handleResize = () => {
+      setScrollHeight(window.innerHeight)
+    }
+
+    window.addEventListener('scroll', handleScroll, {passive: true})
+    window.addEventListener('resize', handleResize)
+
+    setScrollHeight(window.innerHeight)
+
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  const len = items.length
+  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
+  const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
+  const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
+
+  useEffect(() => {
+    if (!onChange) return
+    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
+  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
+
+  const children = useMemo(() => {
+    if (!renderItem || items.length === 0) return null
+
+    if (itemHeight === -1) {
+      return [
+        <Box insetTop={0} insetLeft={0} insetRight={0} key={0} position="absolute">
+          {renderItem(items[0])}
+        </Box>,
+      ]
+    }
+
+    return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex
+      const node = renderItem(item)
+      const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+      return (
+        <Box
+          insetLeft={0}
+          insetRight={0}
+          key={key}
+          position="absolute"
+          style={{top: itemIndex * (itemHeight + space[gap])}}
+        >
+          {node}
+        </Box>
+      )
+    })
+  }, [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex])
+
+  const wrapperStyle = useMemo(() => ({height}), [height])
+
+  return (
+    <Box
+      // Root
+      as={as}
+      data-ui="VirtualList"
+      {...restProps}
+      position="relative"
+      ref={ref}
+    >
+      <div ref={wrapperRef} style={wrapperStyle}>
+        {children}
+      </div>
+    </Box>
+  )
+})
+
+VirtualList.displayName = 'ForwardRef(VirtualList)'
+
+function findScrollable(parentNode: ParentNode | null) {
+  let _scrollEl = parentNode
+
+  while (_scrollEl && !_isScrollable(_scrollEl)) {
+    _scrollEl = _scrollEl.parentNode
+  }
+
+  return _scrollEl
+}

package/dist/_chunks-cjs/getTheme_v2.js

@@ -1,316 +0,0 @@
-"use strict";
-const defaultThemeConfig = {
-  _version: 2,
-  avatar: {
-    sizes: [
-      { distance: -4, size: 19 },
-      { distance: -4, size: 25 },
-      { distance: -8, size: 33 },
-      { distance: -12, size: 49 }
-    ],
-    focusRing: { offset: 1, width: 1 }
-  },
-  button: {
-    textWeight: "medium",
-    border: { width: 1 },
-    focusRing: { offset: -1, width: 1 }
-  },
-  card: {
-    border: { width: 1 },
-    focusRing: { offset: -1, width: 1 },
-    shadow: { outline: 0.5 }
-  },
-  container: [320, 640, 960, 1280, 1600, 1920],
-  media: [360, 600, 900, 1200, 1800, 2400],
-  layer: {
-    dialog: { zOffset: 600 },
-    popover: { zOffset: 400 },
-    tooltip: { zOffset: 200 }
-  },
-  radius: [0, 1, 5, 9, 13, 21, 33],
-  shadow: [
-    null,
-    { umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0] },
-    { umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1] },
-    { umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4] },
-    { umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6] },
-    { umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8] }
-  ],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    border: {
-      width: 1
-    },
-    checkbox: {
-      size: 17,
-      focusRing: { offset: -1, width: 1 }
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: { offset: -1, width: 1 }
-    },
-    switch: {
-      width: 25,
-      height: 17,
-      padding: 5,
-      transitionDurationMs: 150,
-      transitionTimingFunction: "ease-out",
-      focusRing: { offset: 1, width: 1 }
-    },
-    select: {
-      focusRing: { offset: -1, width: 1 }
-    },
-    text: {
-      focusRing: { offset: -1, width: 1 }
-    }
-  },
-  style: {
-    button: {
-      root: {
-        transition: "background-color 100ms,border-color 100ms,color 100ms"
-      }
-    }
-    // card: {
-    //   root: {
-    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
-    //   },
-    // },
-  }
-}, cache$1 = /* @__PURE__ */ new WeakMap();
-function themeColor_v0_v2(color_v0) {
-  const cached_v2 = cache$1.get(color_v0);
-  if (cached_v2) return cached_v2;
-  const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
-    _blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
-    _dark: color_v0.dark,
-    accent: base.accent,
-    avatar: base.avatar,
-    backdrop: color_v0.base.shadow.ambient,
-    badge: base.badge,
-    bg: color_v0.base.bg,
-    border: color_v0.base.border,
-    button: {
-      default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
-      ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
-      bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
-    },
-    code: base.code,
-    fg: color_v0.base.fg,
-    focusRing: color_v0.base.focusRing,
-    icon: base.muted.fg,
-    input: {
-      default: inputStatesThemeColor_v0_v2(color_v0.input.default),
-      invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
-    },
-    kbd: base.kbd,
-    link: base.link,
-    muted: {
-      ...base.muted,
-      bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg
-    },
-    selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
-    shadow: color_v0.base.shadow,
-    skeleton: {
-      from: color_v0.skeleton?.from || color_v0.base.border,
-      to: color_v0.skeleton?.to || color_v0.base.border
-    },
-    syntax: color_v0.syntax
-  };
-  return cache$1.set(color_v0, color_v2), color_v2;
-}
-function stateTonesThemeColor_v0_v2(v0, t) {
-  return {
-    default: {
-      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.default.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
-    },
-    primary: {
-      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
-    },
-    positive: {
-      enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.positive.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
-    },
-    caution: {
-      enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.caution.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
-    },
-    critical: {
-      enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.critical.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
-    }
-  };
-}
-function stateThemeColor_v0_v2(v0, state) {
-  return {
-    ...state,
-    avatar: {
-      gray: {
-        bg: v0.spot.gray,
-        fg: v0.base.bg
-      },
-      blue: {
-        bg: v0.spot.blue,
-        fg: v0.base.bg
-      },
-      purple: {
-        bg: v0.spot.purple,
-        fg: v0.base.bg
-      },
-      magenta: {
-        bg: v0.spot.magenta,
-        fg: v0.base.bg
-      },
-      red: {
-        bg: v0.spot.red,
-        fg: v0.base.bg
-      },
-      orange: {
-        bg: v0.spot.orange,
-        fg: v0.base.bg
-      },
-      yellow: {
-        bg: v0.spot.yellow,
-        fg: v0.base.bg
-      },
-      green: {
-        bg: v0.spot.green,
-        fg: v0.base.bg
-      },
-      cyan: {
-        bg: v0.spot.cyan,
-        fg: v0.base.bg
-      }
-    },
-    badge: {
-      default: {
-        bg: v0.muted.default.enabled.bg,
-        fg: v0.muted.default.enabled.fg,
-        dot: v0.muted.default.enabled.muted.fg,
-        icon: v0.muted.default.enabled.muted.fg
-      },
-      primary: {
-        bg: v0.muted.primary.enabled.bg,
-        fg: v0.muted.primary.enabled.fg,
-        dot: v0.muted.primary.enabled.muted.fg,
-        icon: v0.muted.primary.enabled.muted.fg
-      },
-      positive: {
-        bg: v0.muted.positive.enabled.bg,
-        fg: v0.muted.positive.enabled.fg,
-        dot: v0.muted.positive.enabled.muted.fg,
-        icon: v0.muted.positive.enabled.muted.fg
-      },
-      caution: {
-        bg: v0.muted.caution.enabled.bg,
-        fg: v0.muted.caution.enabled.fg,
-        dot: v0.muted.caution.enabled.muted.fg,
-        icon: v0.muted.caution.enabled.muted.fg
-      },
-      critical: {
-        bg: v0.muted.critical.enabled.bg,
-        fg: v0.muted.critical.enabled.fg,
-        dot: v0.muted.critical.enabled.muted.fg,
-        icon: v0.muted.critical.enabled.muted.fg
-      }
-    },
-    kbd: {
-      bg: v0.muted.default.enabled.bg,
-      fg: v0.muted.default.enabled.fg,
-      border: v0.muted.default.enabled.border
-    },
-    muted: {
-      ...v0.muted.default.enabled.muted,
-      bg: state.bg2 || state.bg
-    },
-    skeleton: {
-      from: state.skeleton?.from || state.border,
-      to: state.skeleton?.to || state.border
-    }
-  };
-}
-function inputStatesThemeColor_v0_v2(states) {
-  return {
-    enabled: inputStateThemeColor_v0_v2(states.enabled),
-    disabled: inputStateThemeColor_v0_v2(states.disabled),
-    readOnly: inputStateThemeColor_v0_v2(states.readOnly),
-    hovered: inputStateThemeColor_v0_v2(states.hovered)
-  };
-}
-function inputStateThemeColor_v0_v2(state) {
-  return {
-    bg: state.bg,
-    border: state.border,
-    fg: state.fg,
-    muted: {
-      bg: state.bg2
-    },
-    placeholder: state.placeholder
-  };
-}
-const cache = /* @__PURE__ */ new WeakMap();
-function getTheme_v2(theme) {
-  if (theme.sanity.v2?._resolved) return theme.sanity.v2;
-  const cached_v2 = cache.get(theme);
-  if (cached_v2) return cached_v2;
-  const v2 = {
-    _version: 2,
-    _resolved: !0,
-    avatar: {
-      ...defaultThemeConfig.avatar,
-      ...theme.sanity.avatar
-    },
-    button: {
-      ...defaultThemeConfig.button,
-      ...theme.sanity.button
-    },
-    card: defaultThemeConfig.card,
-    color: themeColor_v0_v2(theme.sanity.color),
-    container: theme.sanity.container,
-    font: theme.sanity.fonts,
-    input: {
-      ...defaultThemeConfig.input,
-      ...theme.sanity.input,
-      checkbox: {
-        ...defaultThemeConfig.input.checkbox,
-        ...theme.sanity.input.checkbox
-      },
-      radio: {
-        ...defaultThemeConfig.input.radio,
-        ...theme.sanity.input.radio
-      },
-      switch: {
-        ...defaultThemeConfig.input.switch,
-        ...theme.sanity.input.switch
-      }
-    },
-    layer: theme.sanity.layer ?? defaultThemeConfig.layer,
-    media: theme.sanity.media,
-    radius: theme.sanity.radius,
-    shadow: theme.sanity.shadows,
-    space: theme.sanity.space,
-    style: theme.sanity.styles
-  };
-  return cache.set(theme, v2), v2;
-}
-exports.defaultThemeConfig = defaultThemeConfig;
-exports.getTheme_v2 = getTheme_v2;
-exports.themeColor_v0_v2 = themeColor_v0_v2;
-//# sourceMappingURL=getTheme_v2.js.map