@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

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

@@ -1,3 +1,4 @@
+import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
 import {
   type ReactElement,
   type ReactNode,
@@ -8,7 +9,7 @@ import {
   useState,
 } from 'react'
 
-import {useArrayProp, useMediaIndex} from '../../hooks'
+import {useMediaIndex, useResponsiveProp} from '../../hooks'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import type {LayerContextValue} from './types'
@@ -16,7 +17,7 @@ import type {LayerContextValue} from './types'
 /** @public */
 export interface LayerProviderProps {
   children?: ReactNode
-  zOffset?: number | number[]
+  zOffset?: ResponsiveProp<number>
 }
 
 /** @public */
@@ -33,11 +34,11 @@ export function LayerProvider(props: LayerProviderProps): ReactElement {
   const level = parentLevel + 1
 
   // Get z-index offset
-  const zOffset = useArrayProp(zOffsetProp)
+  const zOffset = useResponsiveProp(zOffsetProp)
 
   // Get responsive z-index value
-  const maxMediaIndex = zOffset.length - 1
-  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
+  const maxMediaIndex = Object.values(zOffset).length - 1
+  const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex) as Breakpoint
   const zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : (zOffset[mediaIndex] ?? 0)
 
   // A state value that is used to keep track of the number of child layers on each level
@@ -110,5 +111,3 @@ export function LayerProvider(props: LayerProviderProps): ReactElement {
 
   return <LayerContext.Provider value={value}>{children}</LayerContext.Provider>
 }
-
-LayerProvider.displayName = 'LayerProvider'

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

@@ -37,5 +37,3 @@ export function Portal(props: PortalProps): ReactPortal | null {
     portalElement,
   )
 }
-
-Portal.displayName = 'Portal'

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

@@ -39,8 +39,6 @@ export function PortalProvider(props: PortalProviderProps): ReactElement {
   return <PortalContext.Provider value={value}>{children}</PortalContext.Provider>
 }
 
-PortalProvider.displayName = 'PortalProvider'
-
 const emptySubscribe = () => () => {}
 
 /**

package/src/core/utils/srOnly/srOnly.tsx

@@ -1,4 +1,4 @@
-import {_composeClassNames, srOnly} from '@sanity/ui/css'
+import {srOnly} from '@sanity/ui/css'
 
 import type {ComponentType, Props} from '../../types'
 
@@ -26,15 +26,8 @@ export function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEM
   } = props as SrOnlyProps<typeof DEFAULT_SR_ONLY_ELEMENT>
 
   return (
-    <Element
-      data-ui="SrOnly"
-      {...rest}
-      aria-hidden
-      className={_composeClassNames(className, srOnly())}
-    >
+    <Element data-ui="SrOnly" {...rest} aria-hidden className={srOnly({className})}>
       {children}
     </Element>
   )
 }
-
-SrOnly.displayName = 'SrOnly'

package/src/core/utils/virtualList/virtualList.tsx

@@ -193,8 +193,6 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
   )
 }
 
-VirtualList.displayName = 'VirtualList'
-
 function findScrollable(parentNode: ParentNode | null) {
   let _scrollEl = parentNode
 

package/src/css/__theme/index.ts

@@ -0,0 +1,16 @@
+// import {buildTheme_v3} from '@sanity/ui/theme'
+
+// import {resolveTheme} from './resolveTheme'
+
+// const result = resolveTheme({theme: buildTheme_v3()})
+
+// /** @public */
+// export const vars = result.vars
+
+// /** @public */
+// export const varNames = result.varNames
+
+// /** @public */
+// export const properties = result.properties
+
+export {}

package/src/css/__theme/lib/contract/buildVarContract.ts

@@ -0,0 +1,78 @@
+// import {_hash} from '../../../_hash'
+// import type {Contract, ContractProperties, ContractVarNames, ContractVars} from './types'
+
+// export function buildVarContract<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+// ) {
+//   return {
+//     vars: buildVars(contract, options),
+//     varNames: buildVarNames(contract, options),
+//     properties: buildProperties(contract, options),
+//   }
+// }
+
+// function buildProperties<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+// ) {
+//   const _properties: ContractProperties = {}
+
+//   function walk(c: Contract) {
+//     for (const key in c) {
+//       if (typeof c[key] === 'string') {
+//         _properties[`--${options.prefix}${_hash(`${options.layer}.${c[key]}`)}`] = c[key]
+//       } else if (c[key] === null) {
+//         // ignore
+//       } else {
+//         walk(c[key])
+//       }
+//     }
+//   }
+
+//   walk(contract)
+
+//   return Object.freeze(_properties)
+// }
+
+// function buildVars<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+//   path: string = '',
+// ) {
+//   const _vars = {} as Record<string, unknown>
+
+//   for (const key in contract) {
+//     if (typeof contract[key] === 'string') {
+//       _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)})`
+//     } else if (contract[key] === null) {
+//       _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)})`
+//     } else {
+//       _vars[key] = buildVars(contract[key], options, [path, key].join('.'))
+//     }
+//   }
+
+//   return Object.freeze(_vars) as ContractVars<C>
+// }
+
+// function buildVarNames<C extends Contract, P extends string>(
+//   contract: C,
+//   options: {layer: string; prefix: P},
+//   path: string = '',
+// ) {
+//   const _varNames = {} as Record<string, unknown>
+
+//   for (const key in contract) {
+//     if (typeof contract[key] === 'string') {
+//       _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)}`
+//     } else if (contract[key] === null) {
+//       _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)}`
+//     } else {
+//       _varNames[key] = buildVarNames(contract[key], options, [path, key].join('.'))
+//     }
+//   }
+
+//   return Object.freeze(_varNames) as ContractVarNames<C>
+// }
+
+export {}

package/src/css/__theme/lib/contract/index.ts

@@ -0,0 +1,4 @@
+// export * from './buildVarContract'
+// export * from './types'
+
+export {}

package/src/css/__theme/lib/contract/types.ts

@@ -0,0 +1,17 @@
+// export interface Contract {
+//   [key: string]: string | Contract | null
+// }
+
+// export interface ContractProperties {
+//   [key: `--${string}`]: string
+// }
+
+// export type ContractVars<C extends Contract> = {
+//   [key in keyof C]: C[key] extends object ? ContractVars<C[key]> : `var(--${string})`
+// }
+
+// export type ContractVarNames<C extends Contract> = {
+//   [key in keyof C]: C[key] extends object ? ContractVarNames<C[key]> : `--${string}`
+// }
+
+export {}