@sanity/ui 3.0.0-static.30 → 3.0.0-static.32

package/src/core/primitives/types.ts

@@ -23,7 +23,7 @@ import type {BoxDisplay} from './box/types'
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveBorderProps {
   border?: boolean | boolean[]
@@ -35,7 +35,7 @@ export interface ResponsiveBorderProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveBoxProps {
   display?: BoxDisplay | BoxDisplay[]
@@ -46,7 +46,7 @@ export interface ResponsiveBoxProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveFlexProps {
   align?: AlignItems | AlignItems[]
@@ -57,7 +57,7 @@ export interface ResponsiveFlexProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
@@ -66,7 +66,7 @@ export interface ResponsiveFlexItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
@@ -78,7 +78,7 @@ export interface ResponsiveGridProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveGridItemProps {
   column?: GridItemColumn | GridItemColumn[]
@@ -91,7 +91,7 @@ export interface ResponsiveGridItemProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveMarginProps {
   /** Applies margins to all sides. The property is responsive. */
@@ -108,7 +108,7 @@ export interface ResponsiveMarginProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsivePaddingProps {
   padding?: number | number[]
@@ -122,7 +122,7 @@ export interface ResponsivePaddingProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveRadiusProps {
   radius?: Radius | Radius[]
@@ -130,7 +130,7 @@ export interface ResponsiveRadiusProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveShadowProps {
   shadow?: number | number[]
@@ -138,7 +138,7 @@ export interface ResponsiveShadowProps {
 
 /**
  * @public
- * @deprecated
+ * @deprecated No longer used.
  */
 export interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]

package/src/core/types/props.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
 

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

@@ -49,10 +49,11 @@ describe('utils/boundaryElement', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <BoundaryElementContext.Provider value={value as any}>
+          <BoundaryElementContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </BoundaryElementContext.Provider>
         )
@@ -79,12 +80,12 @@ describe('utils/boundaryElement', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <BoundaryElementContext.Provider value={value as any}>
+          <BoundaryElementContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </BoundaryElementContext.Provider>
         )

package/src/core/utils/getElementRef.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 /** @internal */
 // 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`

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

@@ -53,10 +53,11 @@ describe('utils/portal', () => {
       }
 
       function Root() {
-        const value = undefined
-
         return (
-          <PortalContext.Provider value={value as any}>
+          <PortalContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={undefined}
+          >
             <Debug />
           </PortalContext.Provider>
         )
@@ -82,12 +83,12 @@ describe('utils/portal', () => {
 
       function Root() {
         // NOTE: we’re testing this because the context value may be a function in the future
-        const value = () => {
-          return {version: 1}
-        }
 
         return (
-          <PortalContext.Provider value={value as any}>
+          <PortalContext.Provider
+            // @ts-expect-error - we want to test the error case
+            value={() => ({version: 1})}
+          >
             <Debug />
           </PortalContext.Provider>
         )

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

@@ -28,11 +28,7 @@ export function Portal(props: PortalProps): ReactPortal | null {
   }
 
   return createPortal(
-    <CardProvider
-      // rendered={true}
-      tone="transparent" // card?.tone || 'default',
-      scheme={card?.scheme || 'light'}
-    >
+    <CardProvider tone="transparent" scheme={card.scheme}>
       {children}
     </CardProvider>,
     portalElement,

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

@@ -5,7 +5,10 @@ import type {PortalContextValue} from './types'
 const key = '@sanity/ui/context/portal'
 const elementKey = Symbol.for(`${key}/element`)
 
-globalScope[elementKey] = null
+// Use the global scope as a map of symbols to elements
+const elementMap = globalScope as Record<symbol, HTMLDivElement | null>
+
+elementMap[elementKey] = null
 
 export const defaultContextValue: PortalContextValue = {
   version: 0.0,
@@ -15,16 +18,16 @@ export const defaultContextValue: PortalContextValue = {
       return null
     }
 
-    if (globalScope[elementKey]) {
-      return globalScope[elementKey]
+    if (elementMap[elementKey]) {
+      return elementMap[elementKey]
     }
 
-    globalScope[elementKey] = document.createElement('div')
-    globalScope[elementKey].setAttribute('data-portal', '')
+    elementMap[elementKey] = document.createElement('div')
+    elementMap[elementKey].setAttribute('data-portal', '')
 
-    document.body.appendChild(globalScope[elementKey])
+    document.body.appendChild(elementMap[elementKey])
 
-    return globalScope[elementKey]
+    return elementMap[elementKey]
   },
 }
 

package/src/css/components/dialog/dialog.css.ts

@@ -75,7 +75,7 @@ export const scrollerShadowTop = _style(layers.components, {
   top: 0,
   left: 0,
   right: 0,
-  height: 8,
+  height: 4,
   background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
   boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
   pointerEvents: 'none',
@@ -86,7 +86,7 @@ export const scrollerShadowBottom = _style(layers.components, {
   bottom: 0,
   left: 0,
   right: 0,
-  height: 8,
+  height: 4,
   background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
   boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
   pointerEvents: 'none',

package/src/css/components/toast/toast.css.ts

@@ -2,11 +2,11 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const layer = _style(layers.components, {
-  position: 'fixed',
+  position: 'absolute',
   right: 0,
   bottom: 0,
   pointerEvents: 'none',
-  minWidth: `${320 / 16}rem`, // 320px
+  // minWidth: `${320 / 16}rem`, // 320px
   maxWidth: `${420 / 16}rem`, // 420px
   width: '100%',
 })

package/src/css/primitives/button/button.css.ts

@@ -63,8 +63,6 @@ export const loadingBox = _style(layers.primitives, {
   opacity: 0.8,
 })
 
-// todo
-
 export const tones = {
   ..._fromEntries(
     THEME_COLOR_STATE_TONES.map((t) => {

package/src/css/primitives/root/root.css.ts

@@ -2,7 +2,7 @@ import {_style} from '../../_style.css'
 import {layers} from '../../layers.css'
 
 export const _root = _style(layers.primitives, {
-  minWidth: `${320 / 16}rem`, // 320px
+  // minWidth: `${320 / 16}rem`, // 320px
 
   selectors: {
     'html.&': {
@@ -11,5 +11,9 @@ export const _root = _style(layers.primitives, {
       textSizeAdjust: 'none',
       WebkitFontSmoothing: 'antialiased',
     },
+
+    'div.&': {
+      position: 'relative',
+    },
   },
 })

package/src/css/primitives/root/root.ts

@@ -12,6 +12,6 @@ export function root(props: RootStyleProps) {
     themeClassName,
     _root,
     card({scheme: props.scheme ?? 'light', tone: props.tone ?? 'transparent'}),
-    height({height: props.height ?? 'fill'}),
+    height(props),
   )
 }

package/src/css/props/gridColumnStart/types.ts

@@ -12,7 +12,7 @@ export type GridItemColumnStart = 'auto' | number
 /** @public */
 export interface GridColumnStartStyleProps {
   /**
-   * @deprecated Use `gridColumn` instead
+   * @deprecated Use `gridColumnStart` instead
    */
   columnStart?: ResponsiveProp<GridItemColumnStart>
   gridColumnStart?: ResponsiveProp<GridColumnStart>

package/src/theme/v0/css.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import type {StyledObject} from 'styled-components'
 
 /**

package/src/theme/v2/build/merge.ts

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

package/src/theme/v3/merge.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {
   return (records.filter(Boolean) as T[]).reduce(_merge, {} as T)
 }

package/src/core/primitives/root/__workshop__/boundary.tsx

@@ -1,5 +0,0 @@
-import {Root} from '@sanity/ui'
-
-export default function BoundaryStory() {
-  return <Root>Hello!</Root>
-}

package/src/core/primitives/root/__workshop__/index.ts

@@ -1,8 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/radio',
-  title: 'Radio',
-  stories: [{name: 'boundary', title: 'Boundary', component: lazy(() => import('./boundary'))}],
-})