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

package/src/ui/utils/layer/layerCard.tsx

@@ -0,0 +1,92 @@
+import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+
+import {EMPTY_RECORD} from '../../constants'
+import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
+import {Card, CardElementType} from '../../primitives'
+import {Props} from '../../types'
+import {LayerElementType, LayerOwnProps} from './layer'
+import {useLayer} from './useLayer'
+
+/** @internal */
+export const DEFAULT_LAYER_CARD_ELEMENT = 'div'
+
+/** @internal */
+export type LayerCardOwnProps = Omit<LayerOwnProps, 'zOffset'>
+
+/** @internal */
+export type LayerCardElementType = LayerElementType
+
+/** @internal */
+export type LayerCardProps<E extends LayerCardElementType = LayerCardElementType> = Props<
+  LayerCardOwnProps,
+  E
+>
+
+/** @internal */
+export function LayerCard<E extends LayerCardElementType = typeof DEFAULT_LAYER_CARD_ELEMENT>(
+  props: LayerCardProps<E>,
+) {
+  const {
+    as = DEFAULT_LAYER_CARD_ELEMENT,
+    children,
+    onActivate,
+    onFocus,
+    position = 'relative',
+    ref: forwardedRef,
+    style = EMPTY_RECORD,
+    ...rest
+  } = props as LayerCardProps<typeof DEFAULT_LAYER_CARD_ELEMENT>
+
+  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 (
+    <Card
+      data-ui="Layer"
+      {...rest}
+      as={as as CardElementType}
+      onFocus={handleFocus}
+      position={position}
+      ref={ref}
+      style={{...style, zIndex}}
+    >
+      {children}
+    </Card>
+  )
+}
+
+LayerCard.displayName = 'LayerCard'

package/src/ui/utils/layer/layerProvider.tsx

@@ -5,17 +5,13 @@ import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface LayerProviderProps {
   children?: ReactNode
   zOffset?: number | number[]
 }
 
-/**
- * @public
- */
+/** @public */
 export function LayerProvider(props: LayerProviderProps): ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
 

package/src/ui/utils/layer/useLayer.ts

@@ -4,9 +4,7 @@ import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function useLayer(): LayerContextValue {
   const value = useContext(LayerContext)
 

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

@@ -4,9 +4,7 @@ import {createPortal} from 'react-dom'
 import {CardProvider, useCard} from '../../primitives'
 import {usePortal} from './usePortal'
 
-/**
- * @public
- */
+/** @public */
 export interface PortalProps {
   children: ReactNode
   /**
@@ -15,9 +13,7 @@ export interface PortalProps {
   __unstable_name?: string
 }
 
-/**
- * @public
- */
+/** @public */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
   const card = useCard()

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

@@ -3,9 +3,7 @@ import {ReactElement, ReactNode, useMemo, useRef, useSyncExternalStore} from 're
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export interface PortalProviderProps {
   /**
    * @deprecated Use `<BoundaryElementProvider element={...} />` instead
@@ -19,9 +17,7 @@ export interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/**
- * @public
- */
+/** @public */
 export function PortalProvider(props: PortalProviderProps): ReactElement {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)

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

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface PortalContextValue {
   version: 0.0
   boundaryElement: HTMLElement | null

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

@@ -4,9 +4,7 @@ import {isRecord} from '../../lib/isRecord'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
-/**
- * @public
- */
+/** @public */
 export function usePortal(): PortalContextValue {
   const value = useContext(PortalContext)
 

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

@@ -1,35 +1,40 @@
 import {composeClassNames, srOnly} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, ReactNode} from 'react'
 
-import {Props} from '../../types'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface SrOnlyProps {
-  children?: ReactNode
-}
+/** @public */
+export const DEFAULT_SR_ONLY_ELEMENT = 'span'
+
+/** @public */
+export type SrOnlyOwnProps = {} // eslint-disable-line @typescript-eslint/no-empty-object-type
+
+/** @public */
+export type SrOnlyElementType = 'span' | ComponentType
 
-/**
- * @public
- */
-export const SrOnly = forwardRef(function SrOnly(
-  props: Props<SrOnlyProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+/** @public */
+export type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<SrOnlyOwnProps, E>
+
+/** @public */
+export function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
+  props: SrOnlyProps<E>,
 ) {
-  const {as: As = 'div', children, className, ...rest} = props
+  const {
+    as: Element = DEFAULT_SR_ONLY_ELEMENT,
+    children,
+    className,
+    ...rest
+  } = props as SrOnlyProps<typeof DEFAULT_SR_ONLY_ELEMENT>
 
   return (
-    <As
+    <Element
       data-ui="SrOnly"
       {...rest}
       aria-hidden
       className={composeClassNames(className, srOnly())}
-      ref={ref}
     >
       {children}
-    </As>
+    </Element>
   )
-})
+}
 
-SrOnly.displayName = 'ForwardRef(SrOnly)'
+SrOnly.displayName = 'SrOnly'

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

@@ -1,10 +1,7 @@
 import {vars} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {
-  CSSProperties,
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
+  type CSSProperties,
   ReactNode,
   useEffect,
   useImperativeHandle,
@@ -15,12 +12,13 @@ import {
 
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
-import {Box, StackProps} from '../../primitives'
-import {Props} from '../../types'
+import {Box} from '../../primitives'
+import {ComponentType, Props} from '../../types'
 
-/**
- * @beta
- */
+/** @beta */
+export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
+
+/** @beta */
 export interface VirtualListChangeOpts {
   fromIndex: number
   gap: number
@@ -30,10 +28,8 @@ export interface VirtualListChangeOpts {
   toIndex: number
 }
 
-/**
- * @beta
- */
-export interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
+/** @beta */
+export type VirtualListOwnProps<Item = any> = {
   gap?: Space
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
@@ -41,14 +37,30 @@ export interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
   renderItem?: (item: Item) => ReactNode
 }
 
-/**
- * @beta
- */
-export const VirtualList = forwardRef(function VirtualList(
-  props: Props<VirtualListProps, 'div'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-): ReactElement {
-  const {gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
+/** @beta */
+export type VirtualListElementType = 'div' | ComponentType
+
+/** @beta */
+export type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> = Props<
+  VirtualListOwnProps,
+  E
+>
+
+/** @beta */
+export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT>(
+  props: VirtualListProps<E>,
+) {
+  const {
+    as = DEFAULT_VIRTUAL_LIST_ELEMENT,
+    gap = 0,
+    getItemKey,
+    items = [],
+    onChange,
+    renderItem,
+    ref: forwardedRef,
+    ...rest
+  } = props as VirtualListProps<typeof DEFAULT_VIRTUAL_LIST_ELEMENT>
+
   const ref = useRef<HTMLDivElement | null>(null)
   const wrapperRef = useRef<HTMLDivElement | null>(null)
   const [scrollTop, setScrollTop] = useState(0)
@@ -173,15 +185,15 @@ export const VirtualList = forwardRef(function VirtualList(
   const wrapperStyle: CSSProperties = useMemo(() => ({height}), [height])
 
   return (
-    <Box data-ui="VirtualList" {...restProps} position="relative" ref={ref}>
+    <Box data-ui="VirtualList" {...rest} as={as} position="relative" ref={ref}>
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>
     </Box>
   )
-})
+}
 
-VirtualList.displayName = 'ForwardRef(VirtualList)'
+VirtualList.displayName = 'VirtualList'
 
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode

package/src/css/compile/compileRule.ts

@@ -1,97 +0,0 @@
-import {PREFIX} from '../constants'
-import {type Properties} from '../types'
-import {CompileRulesContext} from './types'
-
-// TODO: remove this
-export function compileRule(
-  selector: string,
-  props: Properties,
-  context: CompileRulesContext,
-): string {
-  let css = compileProperties(selector, props)
-
-  if (props['@nest']) {
-    css += compileNestedRules(selector, props['@nest'], context)
-  }
-
-  // @ts-expect-error - TODO: fix this
-  if (props['@keyframes']) {
-    // @ts-expect-error - TODO: fix this
-    for (const name in props['@keyframes']) {
-      // @ts-expect-error - TODO: fix this
-      context.keyframes[name] = props['@keyframes'][name]
-    }
-  }
-
-  if (props['@media']) {
-    for (const key in props['@media']) {
-      if (!context.media[key]) {
-        context.media[key] = {}
-      }
-
-      context.media[key][selector] = props['@media'][key]
-    }
-  }
-
-  return css
-}
-
-function compileProperties(selector: string, props: Properties) {
-  let css = '{'
-
-  for (const key in props) {
-    if (key === '@keyframes') continue // ignore
-    if (key === '@media') continue // ignore
-    if (key === '@nest') continue // ignore
-
-    const value = (props as Record<string, string>)[key]
-
-    const valueArr = Array.isArray(value) ? value : [value]
-
-    for (const v of valueArr) {
-      css += toSnakeCase(key) + ':' + v + ';'
-    }
-  }
-
-  if (css === '{') return ''
-
-  return selector + css + '}'
-}
-
-function compileNestedRules(
-  selector: string,
-  props: Record<string, Properties>,
-  context: CompileRulesContext,
-) {
-  if (!props) return ''
-
-  let css = ''
-
-  for (const [_selector, _props] of Object.entries(props)) {
-    css +=
-      '\n' +
-      compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context)
-  }
-
-  return css
-}
-
-export function compileMediaQueryRule(query: string, rules: Record<string, Properties>): string {
-  let css = `@media ${query}{`
-
-  for (const [selector, props] of Object.entries(rules)) {
-    // console.log('compileMediaQueryRule', {selector, props})
-
-    css += '\n  ' + compileProperties(selector, props)
-
-    if (props['@nest']) {
-      css += compileNestedRules(selector, props['@nest'], {keyframes: {}, media: {}})
-    }
-  }
-
-  return css + '\n}'
-}
-
-function toSnakeCase(value: string) {
-  return value.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase())
-}

package/src/css/compile/compileRules.test.ts

@@ -1,36 +0,0 @@
-import {responsiveRules} from '../responsiveRules'
-import {Rules} from '../types'
-import {compileRules} from './compileRules'
-
-it('should compile deeply nested rules', () => {
-  const rules: Rules = {
-    card: {
-      '@nest': {
-        '&:is(a)': {
-          // @ts-expect-error - TODO: fix this
-          '@media': {
-            '(hover: hover)': {
-              background: 'red',
-            },
-          },
-        },
-      },
-    },
-  }
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})
-
-it.only('should compile responsive rules', () => {
-  const rules = responsiveRules('block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  })
-
-  // eslint-disable-next-line no-console
-  console.log(compileRules(rules))
-})

package/src/css/compile/compileRules.ts

@@ -1,43 +0,0 @@
-import {scopeClassName} from '../scopeClassName'
-import {type Rules} from '../types'
-import {compileMediaQueryRule, compileRule} from './compileRule'
-import {CompileRulesContext} from './types'
-
-/** @public */
-export function compileRules(rules: Rules): string {
-  let css = ''
-
-  const context: CompileRulesContext = {
-    keyframes: {},
-    media: {},
-  }
-
-  for (const [className, props] of Object.entries(rules)) {
-    const ruleCss = compileRule(
-      `.${scopeClassName(className)}`.replace(/:/g, '\\:'),
-      props,
-      context,
-    )
-
-    css += ruleCss ? `${ruleCss}\n` : ''
-  }
-
-  for (const [name, value] of Object.entries(context.keyframes)) {
-    let keyframesCss = `@keyframes ${name} {\n`
-
-    for (const [key, props] of Object.entries(value)) {
-      keyframesCss += `  ${key}`
-      keyframesCss += compileRule('', props, context).replace(/\n/g, '\n    ') + '\n'
-    }
-
-    keyframesCss += `\n}\n`
-
-    css += keyframesCss
-  }
-
-  for (const [query, queryRules] of Object.entries(context.media)) {
-    css += compileMediaQueryRule(query, queryRules) + '\n'
-  }
-
-  return css.replace(/\n{2,}/g, '\n').trimStart()
-}

package/src/css/compile/compileSystem.ts

@@ -1,7 +0,0 @@
-import {systemStyle} from '../system.style'
-import {compileStyle} from './compileStyle'
-
-/** @public */
-export function compileSystem(): string {
-  return compileStyle(systemStyle)
-}

package/src/css/compile/types.ts

@@ -1,6 +0,0 @@
-import {Properties} from '../types'
-
-export interface CompileRulesContext {
-  keyframes: Record<string, Record<string, Properties>>
-  media: Record<string, Record<string, Properties>>
-}

package/src/css/primitives/_selectable/_contants.ts

@@ -1,11 +0,0 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'default',
-  neutral: 'neutral',
-  suggest: 'suggest',
-  primary: 'accent',
-  positive: 'positive',
-  caution: 'caution',
-  critical: 'critical',
-} as const

package/src/css/primitives/card/_constants.ts

@@ -1,13 +0,0 @@
-import {ThemeColorCardToneKey} from '@sanity/ui/theme'
-
-export const toneMap: Record<ThemeColorCardToneKey | 'inherit', string | undefined> = {
-  transparent: 'transparent',
-  default: 'default',
-  neutral: 'neutral',
-  suggest: 'suggest',
-  primary: 'accent',
-  positive: 'positive',
-  caution: 'caution',
-  critical: 'critical',
-  inherit: undefined,
-} as const

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

@@ -1,23 +0,0 @@
-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/conditionalWrapper/index.ts

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