@sanity/ui 4.0.0-static.3 → 4.0.0-static.30

package/src/core/primitives/tooltip/__workshop__/{props.tsx → Props.tsx}

@@ -11,11 +11,14 @@ import {
 export default function PropsStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', true)
   const openDelay = useNumber('Open Delay', 200)
   const closeDelay = useNumber('Close Delay', 200)
+  // @ts-expect-error - TODO: fix this
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
 
   return (
@@ -41,9 +44,12 @@ export default function PropsStory(): React.JSX.Element {
             <Tooltip
               arrow={arrow}
               content={<Text size={1}>{content}</Text>}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
+              // @ts-expect-error - TODO: fix this
               shadow={shadow}
               delay={{
                 open: openDelay,
@@ -81,9 +87,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Hover me" />
@@ -96,9 +105,12 @@ export default function PropsStory(): React.JSX.Element {
                   close: 100,
                 }}
                 content={<Text size={1}>{content}</Text>}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
+                // @ts-expect-error - TODO: fix this
                 placement={placement}
                 portal={portal}
+                // @ts-expect-error - TODO: fix this
                 shadow={shadow}
               >
                 <Button mode="bleed" text="Or me" />

package/src/core/primitives/tooltip/__workshop__/{resizableBoundary.tsx → ResizableBoundary.tsx}

@@ -9,6 +9,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'right')
   const portal = useBoolean('Portal', true)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -38,6 +39,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -46,6 +48,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -58,6 +61,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >
@@ -70,6 +74,7 @@ export default function ResizableBoundaryStory(): React.JSX.Element {
           <Tooltip
             content={<Text size={1}>{content}</Text>}
             padding={2}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             portal={portal}
           >

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

@@ -8,22 +8,22 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'resizableBoundary',
       title: 'Resizable Boundary',
-      component: lazy(() => import('./resizableBoundary')),
+      component: lazy(() => import('./ResizableBoundary')),
     },
     {
       name: 'overflowBoundary',
       title: 'Overflowing Boundary',
-      component: lazy(() => import('./overflowingBoundary')),
+      component: lazy(() => import('./OverflowingBoundary')),
     },
     {
       name: 'customPortalStory',
       title: 'Custom Portal',
-      component: lazy(() => import('./customPortal')),
+      component: lazy(() => import('./CustomPortal')),
     },
   ],
 }

package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupProvider.tsx → TooltipDelayGroupProvider.tsx}

@@ -2,7 +2,7 @@ import {type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
 import type {Delay} from '../../../types'
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,13 +1,13 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
+import {TooltipDelayGroupContext} from './TooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta
  */
 export function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null {
-  const value = useContext(TooltipDelayGroupContext)
+  const value = use(TooltipDelayGroupContext)
 
   return value
 }

package/src/core/types.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type {ComponentClass, ComponentProps, ExoticComponent, FunctionComponent, JSX} from 'react'
-
 /**
  * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
  *
@@ -14,17 +12,20 @@ export type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
 export type EmptyProps = {}
 
 /** @public */
-export type TagType = keyof JSX.IntrinsicElements
+export type TagType = keyof React.JSX.IntrinsicElements
 
 /** @public */
-export type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
+export type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
 
 /** @public */
 export type ElementType<P> = TagType | ComponentType<P>
 
 /** @public */
 export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
   P & {as?: E}
 >
 

package/src/core/utils/{errorBoundary.tsx → ErrorBoundary.tsx}

@@ -1,6 +1,6 @@
 import {Component, type ErrorInfo, type PropsWithChildren, type ReactNode} from 'react'
 
-import {Code} from '../primitives/code/code'
+import {Code} from '../primitives/code/Code'
 
 /**
  * DO NOT USE IN PRODUCTION

package/src/core/utils/boundaryElement/{boundaryElement.test.tsx → BoundaryElement.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'
 

package/src/core/utils/boundaryElement/{boundaryElementProvider.tsx → BoundaryElementProvider.tsx}

@@ -1,6 +1,6 @@
 import {type ReactNode, useMemo} from 'react'
 
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
 /** @public */

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

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

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

@@ -1,7 +1,7 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {BoundaryElementContext} from './boundaryElementContext'
+import {BoundaryElementContext} from './BoundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 
 const DEFAULT_VALUE: BoundaryElementContextValue = {
@@ -11,7 +11,7 @@ const DEFAULT_VALUE: BoundaryElementContextValue = {
 
 /** @public */
 export function useBoundaryElement(): BoundaryElementContextValue {
-  const value = useContext(BoundaryElementContext)
+  const value = use(BoundaryElementContext)
 
   // NOTE: This check is for future-compatiblity
   // - If the value is not an object, it’s not compatible with the current version

package/src/core/utils/elementQuery/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'custom-media',
       title: 'Custom media',
-      component: lazy(() => import('./customMedia')),
+      component: lazy(() => import('./CustomMedia')),
     },
   ],
 }

package/src/core/utils/portal/{portal.test.tsx → Portal.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 import {usePortal} from './usePortal'
 

package/src/core/utils/portal/{portal.tsx → Portal.tsx}

@@ -1,7 +1,7 @@
 import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider} from '../../primitives/card/cardProvider'
+import {CardProvider} from '../../primitives/card/CardProvider'
 import {useCard} from '../../primitives/card/useCard'
 import {usePortal} from './usePortal'
 

package/src/core/utils/portal/{portalProvider.tsx → PortalProvider.tsx}

@@ -1,6 +1,6 @@
-import {type ReactNode, useContext, useMemo, useRef, useSyncExternalStore} from 'react'
+import {type ReactNode, use, useMemo, useRef, useSyncExternalStore} from 'react'
 
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */
@@ -17,7 +17,7 @@ export interface PortalProviderProps {
 export function PortalProvider(props: PortalProviderProps): React.JSX.Element {
   const {children, element, __unstable_elements: elementsProp} = props
   const elements = useUnique(elementsProp)
-  const parentPortal = useContext(PortalContext)
+  const parentPortal = use(PortalContext)
   const fallbackElement = useSyncExternalStore(
     emptySubscribe,
     () => elements?.['default'] ?? (parentPortal.element || document.body),

package/src/core/utils/portal/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'named',
       title: 'Named portals',
-      component: lazy(() => import('./named')),
+      component: lazy(() => import('./Named')),
     },
   ],
 }

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

@@ -1,12 +1,12 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {PortalContext} from './portalContext'
+import {PortalContext} from './PortalContext'
 import type {PortalContextValue} from './types'
 
 /** @public */
 export function usePortal(): PortalContextValue {
-  const value = useContext(PortalContext)
+  const value = use(PortalContext)
 
   if (!value) {
     throw new Error('usePortal(): missing context value')

package/src/css/_responsiveStyle.css.ts

@@ -21,8 +21,8 @@ export function _responsiveStyle(layer: string, rule: StyleRule): ResponsiveRule
       rules[index] = style({
         '@layer': {
           [layer]: {
-            '@media': {
-              [`screen and (min-width: ${bp}px)`]: rule,
+            '@container': {
+              [`(min-width: ${bp}px)`]: rule,
             },
           },
         },

package/src/css/primitives/_input/_input.css.ts

@@ -37,8 +37,7 @@ export const element: string = _style(layers.primitives, {
   display: 'block',
   boxSizing: 'border-box',
   resize: 'none',
-  // See https://caniuse.com/?search=width%3A%20stretch
-  width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+  inlineSize: 'stretch',
 
   selectors: {
     '&::placeholder': {
@@ -112,12 +111,12 @@ export const presentation: string = _style(layers.primitives, {
   backgroundColor: vars.color.input.text.bg,
   borderRadius: 'inherit',
   boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.text.border}`,
+  display: 'block',
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  display: 'block',
   pointerEvents: 'none',
   zIndex: 0,
 
@@ -155,11 +154,12 @@ export const presentation: string = _style(layers.primitives, {
       },
     },
 
-    [`${root}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]: {
-      vars: {
-        [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+    [`${root}.${border}:not([data-invalid]):not([data-read-only]) ${element}:not(:disabled):hover + &`]:
+      {
+        vars: {
+          [vars.color.input.text.border]: vars.color.tinted.default.border[2],
+        },
       },
-    },
 
     [`${root}:not([data-invalid]) ${element}:focus + &`]: {
       vars: {
@@ -186,7 +186,7 @@ export const presentation: string = _style(layers.primitives, {
       },
     },
 
-    [`${root}[data-invalid] ${element}:not(:disabled):hover + &`]: {
+    [`${root}.${border}[data-invalid] ${element}:not(:disabled):hover + &`]: {
       vars: {
         [vars.color.input.text.border]: vars.color.tinted.critical.border[2],
       },

package/src/css/primitives/_input/input.ts

@@ -1,5 +1,6 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
+import {flex} from '../../props/flex/flex'
 import {radius} from '../../props/radius/radius'
 import {width} from '../../props/width/width'
 import {border, element, fontSize, gap, padding, presentation, root} from './_input.css'
@@ -13,6 +14,7 @@ export function _input(props: InputStyleProps): string | undefined {
     _responsiveClassName(fontSize, props.fontSize ?? 2),
     _responsiveClassName(padding, props.padding ?? 3),
     _responsiveClassName(gap, props.gap ?? 3),
+    flex(props),
     radius(props),
     width(props),
   )

package/src/css/primitives/_input/types.ts

@@ -1,11 +1,12 @@
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
+import type {FlexStyleProps} from '../../props/flex/types'
 import type {RadiusStyleProps} from '../../props/radius/types'
 import type {WidthStyleProps} from '../../props/width/types'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
+export interface InputStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
   border?: boolean
   fontSize?: ResponsiveProp<FontTextSize>
   gap?: ResponsiveProp<Space>

package/src/css/primitives/avatar/avatar.css.ts

@@ -137,11 +137,15 @@ export const image: string = _style(layers.primitives, {
 })
 
 globalStyle(`${image} img`, {
-  display: 'block',
-  width: '100%',
-  height: '100%',
-  objectFit: 'cover',
-  borderRadius: 'inherit',
+  '@layer': {
+    [layers.primitives]: {
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      borderRadius: 'inherit',
+    },
+  },
 })
 
 export const imageOutline: string = _style(layers.primitives, {
@@ -158,6 +162,14 @@ export const imageOutline: string = _style(layers.primitives, {
   ].join(', '),
 })
 
+globalStyle(`${root}[data-hide-inner-stroke] ${imageOutline}`, {
+  '@layer': {
+    [layers.primitives]: {
+      boxShadow: `inset 0 0 0 1px ${vars.color.avatar.bg}`,
+    },
+  },
+})
+
 export const initials: string = _style(layers.primitives, {
   color: vars.color.avatar.fg,
   borderRadius: 'inherit',

package/src/css/primitives/box/box.css.ts

@@ -4,6 +4,16 @@ import {vars} from '../../vars.css'
 
 export const root: string = _style(layers.primitives, {
   selectors: {
+    'button.&': {
+      WebkitFontSmoothing: 'inherit',
+      appearance: 'none',
+      outline: 'none',
+      font: 'inherit',
+      textAlign: 'inherit',
+      border: 'none',
+      inlineSize: 'stretch',
+    },
+
     'iframe.&': {
       border: 'none',
     },
@@ -15,5 +25,13 @@ export const root: string = _style(layers.primitives, {
 })
 
 export const muted: string = _style(layers.primitives, {
-  backgroundColor: vars.color.muted.bg,
+  backgroundColor: vars.color.bg,
+
+  selectors: {
+    '&&': {
+      vars: {
+        [vars.color.bg]: vars.color.muted.bg,
+      },
+    },
+  },
 })