@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/core/utils/arrow/arrow.tsx

@@ -1,122 +1,59 @@
-import {ForwardedRef, HTMLProps, ReactElement, forwardRef} from 'react'
-import {styled, css} from '../../lib/styled'
-import {useTheme_v2} from '../../theme'
-import {Point, compileCommands, getRoundedCommands} from './cmds'
+import {_arrow, _arrowShape, _arrowStroke} from '@sanity/ui/css'
+import {CSSProperties, ForwardedRef, forwardRef, ReactElement, useMemo} from 'react'
 
-const Root = styled.div<{$w: number}>(
-  ({$w: w}) => css`
-    position: absolute;
-    width: ${w}px;
-    height: ${w}px;
-
-    :empty + & {
-      display: none;
-    }
-
-    & > svg {
-      display: block;
-      line-height: 0;
-      transform-origin: ${w / 2}px ${w / 2}px;
-    }
-
-    [data-placement^='top'] > & {
-      bottom: -${w}px;
-
-      & > svg {
-        transform: rotate(0);
-      }
-    }
-
-    [data-placement^='right'] > & {
-      left: -${w}px;
-
-      & > svg {
-        transform: rotate(90deg);
-      }
-    }
-
-    [data-placement^='left'] > & {
-      right: -${w}px;
-
-      & > svg {
-        transform: rotate(-90deg);
-      }
-    }
-
-    [data-placement^='bottom'] > & {
-      top: -${w}px;
-
-      & > svg {
-        transform: rotate(180deg);
-      }
-    }
-  `,
-)
-
-const StrokePath = styled.path`
-  stroke: var(--card-shadow-outline-color);
-`
-
-const ShapePath = styled.path`
-  fill: var(--card-bg-color);
-`
+import {useTheme_v2} from '../../_compat'
+import {Props} from '../../types'
+import {compileCommands, getRoundedCommands, Point} from './cmds'
 
 /** @internal */
 export const Arrow = forwardRef(function Arrow(
-  props: {width: number; height: number; radius?: number} & Omit<
-    HTMLProps<HTMLDivElement>,
-    'width' | 'height'
-  >,
+  props: Props<{width: number; height: number; radius?: number}, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ): ReactElement {
-  const {width: w, height: h, radius = 0, ...restProps} = props
+  const {width: w, height: h, radius = 0, style, ...restProps} = props
   const {card} = useTheme_v2()
   const strokeWidth = card.shadow.outline
 
   const center = w / 2
 
-  const points: Point[] = [
-    {
-      x: 0,
-      y: 0,
-    },
-    {
-      x: radius,
-      y: 0,
-      radius,
-    },
-    {
-      x: center,
-      y: h - 1,
-      radius,
-    },
-    {
-      x: w - radius,
-      y: 0,
-      radius,
-    },
-    {
-      x: w,
-      y: 0,
-    },
-  ]
+  const path = useMemo(() => {
+    const points: Point[] = [
+      {x: 0, y: 0},
+      {x: radius, y: 0, radius},
+      {x: center, y: h - 1, radius},
+      {x: w - radius, y: 0, radius},
+      {x: w, y: 0},
+    ]
+
+    const cmds = getRoundedCommands(points)
 
-  const cmds = getRoundedCommands(points)
-  const path = compileCommands(cmds)
+    return compileCommands(cmds)
+  }, [center, h, radius, w])
 
   const strokePath = `${path}`
   const fillPath = `${path} M ${w} -1 M 0 -1 Z`
 
   return (
-    <Root {...restProps} $w={w} ref={ref}>
+    <div
+      {...restProps}
+      className={_arrow()}
+      ref={ref}
+      style={{...style, '--arrow-size': `${w}px`} as CSSProperties}
+    >
       <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
         <mask id="stroke-mask">
           <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
         </mask>
-        <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
-        <ShapePath d={fillPath} />
+        <path
+          className={_arrowStroke()}
+          d={strokePath}
+          mask="url(#stroke-mask)"
+          strokeWidth={strokeWidth * 2}
+        />
+        <path className={_arrowShape()} d={fillPath} />
       </svg>
-    </Root>
+    </div>
   )
 })
+
 Arrow.displayName = 'ForwardRef(Arrow)'

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

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

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,4 +1,5 @@
-import {useMemo} from 'react'
+import {ReactElement, ReactNode, useMemo} from 'react'
+
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
 
@@ -6,14 +7,14 @@ import {BoundaryElementContextValue} from './types'
  * @public
  */
 export interface BoundaryElementProviderProps {
-  children: React.ReactNode
+  children: ReactNode
   element: HTMLElement | null
 }
 
 /**
  * @public
  */
-export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.ReactElement {
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): ReactElement {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 

package/src/core/utils/boundaryElement/index.ts

@@ -1,3 +1,3 @@
 export * from './boundaryElementProvider'
-export * from './useBoundaryElement'
 export * from './types'
+export * from './useBoundaryElement'

package/src/core/utils/boundaryElement/useBoundaryElement.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {isRecord} from '../../lib/isRecord'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'

package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx

@@ -1,3 +1,5 @@
+import {ReactNode} from 'react'
+
 /**
  * @internal
  * @deprecated this component will be removed in the next major release
@@ -7,10 +9,10 @@ export function ConditionalWrapper({
   condition,
   wrapper,
 }: {
-  children: React.ReactNode
+  children: ReactNode
   condition: boolean
-  wrapper: (children: React.ReactNode) => React.ReactNode
-}): React.ReactNode {
+  wrapper: (children: ReactNode) => ReactNode
+}): ReactNode {
   if (!condition) {
     return children
   }

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

@@ -1,6 +1,8 @@
-import {forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'
+import {ForwardedRef, forwardRef, useImperativeHandle, useMemo, useState} from 'react'
+
+import {useTheme_v2} from '../../_compat'
 import {useElementSize} from '../../hooks'
-import {useTheme_v2} from '../../theme'
+import {Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /**
@@ -8,7 +10,6 @@ import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
  * @beta
  */
 export interface MediaQueryProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   media?: number[]
 }
 
@@ -17,35 +18,34 @@ export interface MediaQueryProps {
  * @beta
  */
 export const ElementQuery = forwardRef(function ElementQuery(
-  props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+  props: Props<MediaQueryProps, 'div'>,
+  forwardedRef: 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)
+
+    return eq.length ? eq.join(' ') : undefined
+  }, [media, width])
+  const min = useMemo(() => {
+    const eq = findMinBreakpoints(media, width)
 
-  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+    return eq.length ? eq.join(' ') : undefined
+  }, [media, width])
 
-  const setRef = useCallback((el: HTMLDivElement | null) => {
-    ref.current = el
-    setElement(el)
-  }, [])
+  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/errorBoundary.tsx

@@ -1,4 +1,5 @@
-import {Component, PropsWithChildren} from 'react'
+import {Component, ErrorInfo, PropsWithChildren, ReactNode} from 'react'
+
 import {Code} from '../primitives/code'
 
 /**
@@ -6,7 +7,7 @@ import {Code} from '../primitives/code'
  * @beta
  */
 export type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
+  onCatch: (params: {error: Error; info: ErrorInfo}) => void
 }>
 
 /**
@@ -29,11 +30,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     return {error}
   }
 
-  componentDidCatch(error: Error, info: React.ErrorInfo): void {
+  componentDidCatch(error: Error, info: ErrorInfo): void {
     this.props.onCatch({error, info})
   }
 
-  render(): React.ReactNode {
+  render(): ReactNode {
     const {error} = this.state
 
     if (error) {

package/src/core/utils/getElementRef.ts

@@ -0,0 +1,26 @@
+// Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
+// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
+// After React 19 accessing `element.ref` does the opposite.
+// https://github.com/facebook/react/pull/28348
+//
+// Access the ref using the method that doesn't yield a warning.
+export function getElementRef(element: React.ReactElement) {
+  // React <=18 in DEV
+  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
+  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element as any).ref
+  }
+
+  // React 19 in DEV
+  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get
+  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning
+
+  if (mayWarn) {
+    return (element.props as {ref?: React.Ref<unknown>}).ref
+  }
+
+  // Not DEV
+  return (element.props as {ref?: React.Ref<unknown>}).ref || (element as any).ref
+}

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

@@ -1,4 +1,5 @@
 import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
+
 import {LayerDebugInfo} from './_debug'
 
 export default function MultipleRootsStory() {

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

@@ -1,6 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useCallback, useState} from 'react'
+
 import {LayerDebugInfo} from './_debug'
 
 export default function PlainStory() {

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

@@ -1,4 +1,5 @@
 import {Card, Layer} from '@sanity/ui'
+
 import {LayerDebugInfo} from './_debug'
 
 export default function ResponsiveZOffsetStory() {

package/src/core/utils/layer/index.ts

@@ -1,4 +1,4 @@
-export * from './useLayer'
 export * from './layer'
 export * from './layerProvider'
 export * from './types'
+export * from './useLayer'

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,8 +1,17 @@
-import {FocusEvent, forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {
+  FocusEvent,
+  ForwardedRef,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-// import {styled} from '../../lib/styled'
 import {Box, BoxProps} from '../../primitives'
+import {Props} from '../../types'
 import {LayerProvider} from './layerProvider'
 import {useLayer} from './useLayer'
 
@@ -10,23 +19,18 @@ import {useLayer} from './useLayer'
  * @public
  */
 export interface LayerProps extends BoxProps {
-  // as?: React.ElementType | keyof JSX.IntrinsicElements
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
 }
 
 interface LayerChildrenProps extends BoxProps {
-  // as?: React.ElementType | keyof JSX.IntrinsicElements
   onActivate?: LayerProps['onActivate']
 }
 
-// const Root = styled.div({position: 'relative'})
-
 const LayerChildren = forwardRef(function LayerChildren(
-  props: LayerChildrenProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
-  forwardedRef: React.Ref<HTMLDivElement>,
+  props: Props<LayerChildrenProps, 'div'>,
+  forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children,
@@ -91,8 +95,8 @@ const LayerChildren = forwardRef(function LayerChildren(
  * @public
  */
 export const Layer = forwardRef(function Layer(
-  props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'rows' | 'width' | 'wrap'>,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<LayerProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {children, zOffset = 1, ...restProps} = props
 

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

@@ -1,5 +1,6 @@
-import {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useArrayProp} from '../../hooks'
+import {ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
+
+import {useArrayProp, useMediaIndex} from '../../hooks'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
@@ -8,14 +9,14 @@ import {LayerContextValue} from './types'
  * @public
  */
 export interface LayerProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   zOffset?: number | number[]
 }
 
 /**
  * @public
  */
-export function LayerProvider(props: LayerProviderProps): React.ReactElement {
+export function LayerProvider(props: LayerProviderProps): ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
 
   // Get parent context values
@@ -85,7 +86,7 @@ export function LayerProvider(props: LayerProviderProps): React.ReactElement {
         parentDispose?.()
       }
     },
-    [parentRegisterChild],
+    [parentRegisterChild, setSize, setChildLayers],
   )
 
   // Register this layer on mount

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

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'

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/portal.ts

@@ -1,11 +1,13 @@
+import {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
+
 import {usePortal} from './usePortal'
 
 /**
  * @public
  */
 export interface PortalProps {
-  children: React.ReactNode
+  children: ReactNode
   /**
    * @beta This API might change. DO NOT USE IN PRODUCTION.
    */
@@ -15,7 +17,7 @@ export interface PortalProps {
 /**
  * @public
  */
-export function Portal(props: PortalProps): React.ReactPortal | null {
+export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
   const portal = usePortal()
   const portalElement =

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

@@ -1,4 +1,5 @@
-import {useMemo, useRef, useSyncExternalStore} from 'react'
+import {ReactElement, ReactNode, useMemo, useRef, useSyncExternalStore} from 'react'
+
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'
 
@@ -10,7 +11,7 @@ export interface PortalProviderProps {
    * @deprecated Use `<BoundaryElementProvider element={...} />` instead
    */
   boundaryElement?: HTMLElement | null
-  children: React.ReactNode
+  children: ReactNode
   element?: HTMLElement | null
   /**
    * @beta
@@ -21,7 +22,7 @@ export interface PortalProviderProps {
 /**
  * @public
  */
-export function PortalProvider(props: PortalProviderProps): React.ReactElement {
+export function PortalProvider(props: PortalProviderProps): ReactElement {
   const {boundaryElement, children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
   const fallbackElement = useSyncExternalStore(

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

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {isRecord} from '../../lib/isRecord'
 import {PortalContext} from './portalContext'
 import {PortalContextValue} from './types'

package/src/core/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/core/utils/srOnly/srOnly.tsx

@@ -1,36 +1,35 @@
-import {forwardRef} from 'react'
-import {styled} from '../../lib/styled'
+import {composeClassNames, srOnly} from '@sanity/ui/css'
+import {ForwardedRef, forwardRef, ReactNode} from 'react'
+
+import {Props} from '../../types'
 
 /**
  * @public
  */
 export interface SrOnlyProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
-const Root = styled.div`
-  display: block;
-  width: 0;
-  height: 0;
-  position: absolute;
-  overflow: hidden;
-  overflow: clip;
-`
-
 /**
  * @public
  */
 export const SrOnly = forwardRef(function SrOnly(
-  props: SrOnlyProps & Omit<React.HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>,
-  ref: React.Ref<HTMLDivElement>,
+  props: Props<SrOnlyProps, 'div'>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, children} = props
+  const {as: As = 'div', children, className, ...rest} = props
 
   return (
-    <Root aria-hidden as={as} data-ui="SrOnly" ref={ref}>
+    <As
+      data-ui="SrOnly"
+      {...rest}
+      aria-hidden
+      className={composeClassNames(className, srOnly())}
+      ref={ref}
+    >
       {children}
-    </Root>
+    </As>
   )
 })
+
 SrOnly.displayName = 'ForwardRef(SrOnly)'