@sanity/ui 2.10.0-corel.0 → 2.10.0

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
+import {forwardRef, useImperativeHandle, useMemo, useState, type JSX} from 'react'
 import {useElementSize} from '../../hooks'
 import {useTheme_v2} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
@@ -21,31 +21,30 @@ export const ElementQuery = forwardRef(function ElementQuery(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const theme = useTheme_v2()
-  const {children, media = theme.media, ...restProps} = props
+  const {children, media: _media, ...restProps} = props
+  const media = _media ?? theme.media
 
-  const ref = useRef<HTMLDivElement | null>(null)
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const elementSize = useElementSize(element)
   const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
-  const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
-  const min = useMemo(() => findMinBreakpoints(media, width), [media, width])
+  const max = useMemo(() => {
+    const eq = findMaxBreakpoints(media, width)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+    return eq.length ? eq.join(' ') : undefined
+  }, [media, width])
+  const min = useMemo(() => {
+    const eq = findMinBreakpoints(media, width)
 
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setElement(el)
-  }, [])
+    return eq.length ? eq.join(' ') : undefined
+  }, [media, width])
+
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => element, [
+    element,
+  ])
 
   return (
-    <div
-      data-ui="ElementQuery"
-      {...restProps}
-      data-eq-max={max.length ? max.join(' ') : undefined}
-      data-eq-min={min.length ? min.join(' ') : undefined}
-      ref={setRef}
-    >
+    <div data-ui="ElementQuery" {...restProps} data-eq-max={max} data-eq-min={min} ref={setElement}>
       {children}
     </div>
   )

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

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {render} from '../../../../test'
 import {LayerContext} from './layerContext'

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

@@ -1,4 +1,12 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {
+  FocusEvent,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  type JSX,
+} from 'react'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'

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

@@ -15,7 +15,7 @@ export interface LayerProviderProps {
 /**
  * @public
  */
-export function LayerProvider(props: LayerProviderProps): React.ReactElement {
+export function LayerProvider(props: LayerProviderProps): React.ReactElement<any> {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values
@@ -85,7 +85,7 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
         parentDispose?.()
       }
     },
-    [parentRegisterChild],
+    [parentRegisterChild, setSize, setChildLayers],
   )
 
   // Register this layer on mount

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

@@ -1,5 +1,4 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {render} from '../../../../test'
 import {PortalContext} from './portalContext'

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

@@ -21,7 +21,7 @@ export interface PortalProviderProps {
 /**
  * @public
  */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement {
+export function PortalProvider(props: PortalProviderProps): React.ReactElement<any> {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(

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

@@ -1,4 +1,4 @@
-import {forwardRef} from 'react'
+import {forwardRef, type JSX} from 'react'
 import {styled} from 'styled-components'
 
 /**

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

@@ -1,5 +1,12 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type JSX,
+} from 'react'
 import {styled} from 'styled-components'
 import {_isScrollable} from '../../helpers'
 import {_ResizeObserver} from '../../observers'
@@ -48,7 +55,7 @@ export const VirtualList = forwardRef(function VirtualList(
     StackProps &
     Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
-): React.ReactElement {
+): React.ReactElement<any> {
   const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
   const {space} = useTheme_v2()
   const ref = useRef<HTMLDivElement | null>(null)

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -1,11 +1,11 @@
-import {ThemeColorBase, ThemeColorMuted, ThemeColorToneKey} from '../../../../system'
+import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../system'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorToneKey,
+  name: ThemeColorName,
 ): ThemeColorMuted {
   return {
     default: {

package/src/theme/build/buildColorTheme.ts

@@ -47,11 +47,13 @@ function buildColorScheme(
 ): ThemeColorScheme_v2 {
   const {scheme} = options
 
-  return THEME_COLOR_CARD_TONES.reduce((acc, tone) => {
-    acc[tone] = buildCardColorTheme({scheme, tone}, config)
+  const colorScheme = {} as ThemeColorScheme_v2
 
-    return acc
-  }, {} as ThemeColorScheme_v2)
+  for (const tone of THEME_COLOR_CARD_TONES) {
+    colorScheme[tone] = buildCardColorTheme({scheme, tone}, config)
+  }
+
+  return colorScheme
 }
 
 function buildCardColorTheme(
@@ -165,11 +167,13 @@ function buildBadgeColorTheme(
 ): ThemeColorBadge_v2 {
   const {scheme} = options
 
-  return THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-    acc[tone] = _buildBadgeColorTheme(tokens, {scheme, tone}, config)
+  const colorBadge = {} as ThemeColorBadge_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorBadge[tone] = _buildBadgeColorTheme(tokens, {scheme, tone}, config)
+  }
 
-    return acc
-  }, {} as ThemeColorBadge_v2)
+  return colorBadge
 }
 
 function _buildBadgeColorTheme(

package/src/theme/build/merge.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {isRecord} from './lib/isRecord'
 
 export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {