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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.31",
+  "version": "3.0.0-static.32",
   "keywords": [
     "react",
     "ui",

package/src/core/{primitives/root/Root.tsx → Root.tsx}

@@ -1,9 +1,9 @@
 import {box, root, type RootStyleProps} from '@sanity/ui/css'
 import {useCallback, useImperativeHandle, useRef, useState} from 'react'
 
-import type {Props} from '../../types/props'
-import {Box, type BoxOwnProps} from '../box/box'
+import {Box, type BoxOwnProps} from './primitives/box/box'
 import {RootProvider} from './RootProvider'
+import type {Props} from './types/props'
 
 /** @public */
 export const DEFAULT_ROOT_ELEMENT = 'html'
@@ -27,7 +27,8 @@ export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(pr
     as: as = DEFAULT_ROOT_ELEMENT,
     children,
     className,
-    height = 'fill',
+    height, // = 'fill',
+    overflow = 'hidden',
     ref: forwardedRef,
     scheme = 'light',
     tone = 'transparent',
@@ -76,6 +77,7 @@ export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(pr
         scheme,
         tone,
       })}
+      overflow={overflow}
       ref={handleRef}
     >
       {node}

package/src/core/{primitives/root/RootProvider.tsx → RootProvider.tsx}

@@ -1,11 +1,11 @@
 import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import type {ReactNode} from 'react'
 
-import {ToastProvider} from '../../components/toast/toastProvider'
-import {BoundaryElementProvider} from '../../utils/boundaryElement/boundaryElementProvider'
-import {PortalProvider} from '../../utils/portal/portalProvider'
-import {CardProvider} from '../card/cardProvider'
-import {LayerProvider} from '../layer/layerProvider'
+import {ToastProvider} from './components/toast/toastProvider'
+import {CardProvider} from './primitives/card/cardProvider'
+import {LayerProvider} from './primitives/layer/layerProvider'
+import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
+import {PortalProvider} from './utils/portal/portalProvider'
 
 /** @public */
 export interface RootProviderProps {

package/src/core/__workshop__/boundary.tsx

@@ -0,0 +1,28 @@
+import {Box, Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
+
+export default function BoundaryStory() {
+  const {scheme} = useCard()
+
+  return (
+    <Box padding={5}>
+      <Root as="div" padding={5} radius={4} scheme={scheme}>
+        <Layout />
+      </Root>
+    </Box>
+  )
+}
+
+function Layout() {
+  const toast = useToast()
+
+  return (
+    <Stack gap={4}>
+      <Text size={1}>
+        Testing the root component. Toast messages will be rendered here, and should be contained
+        within the root element.
+      </Text>
+
+      <Button onClick={() => toast.push({title: 'Hello!'})} text="Push toast message" width="min" />
+    </Stack>
+  )
+}

package/src/core/__workshop__/index.ts

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

package/src/core/index.ts

@@ -96,8 +96,6 @@ export * from './primitives/layer/useLayer'
 export * from './primitives/popover/popover'
 export * from './primitives/popover/types'
 export * from './primitives/radio/radio'
-export * from './primitives/root/Root'
-export * from './primitives/root/RootProvider'
 export * from './primitives/select/select'
 export * from './primitives/selectable/selectable'
 export * from './primitives/selectable/types'
@@ -128,6 +126,10 @@ export * from './utils/portal/portalProvider'
 export * from './utils/portal/types'
 export * from './utils/portal/usePortal'
 
+// root
+export * from './Root'
+export * from './RootProvider'
+
 // types
 export * from './types/gridItem'
 export * from './types/placement'

package/src/core/primitives/card/card.tsx

@@ -1,9 +1,10 @@
 import {card, type CardStyleProps} from '@sanity/ui/css'
+import {useContext} from 'react'
 
 import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {CardContext} from './cardContext'
 import {CardProvider} from './cardProvider'
-import {useCard} from './useCard'
 
 /** @public */
 export const DEFAULT_CARD_ELEMENT = 'div'
@@ -54,7 +55,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     ...rest
   } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
-  const parent = useCard()
+  const parent = useContext(CardContext)
   const tone = toneProp === 'inherit' ? parent?.tone : toneProp
   const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
@@ -96,7 +97,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
     const CompatProvider = parent.unstable_CompatProvider
 
     return (
-      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent?.tone ?? 'default'}>
+      <CompatProvider scheme={scheme ?? 'light'} tone={tone ?? parent.tone}>
         {node}
       </CompatProvider>
     )

package/src/core/primitives/card/useCard.ts

@@ -4,6 +4,12 @@ import {CardContext} from './cardContext'
 import type {CardContextValue} from './types'
 
 /** @public */
-export function useCard(): CardContextValue | null {
-  return useContext(CardContext)
+export function useCard(): CardContextValue {
+  const card = useContext(CardContext)
+
+  if (!card) {
+    throw new Error('useCard(): missing context value')
+  }
+
+  return card
 }

package/src/core/primitives/grid/types.ts

@@ -1,7 +1,7 @@
 export {
   /**
    * @public
-   * @deprecated Use `GridAutoCols` from `@sanity/ui/css` instead.
+   * @deprecated Use `GridAutoColumns` from `@sanity/ui/css` instead.
    */
   type GridAutoCols,
   /**

package/src/core/primitives/popover/popover.tsx

@@ -405,10 +405,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     open &&
     (portal ? (
       <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-        <CardProvider
-          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
-          scheme={scheme ?? 'light'}
-        >
+        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>

package/src/core/primitives/tooltip/tooltip.tsx

@@ -419,10 +419,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     showTooltip &&
     (portalProp ? (
       <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-        <CardProvider
-          tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
-          scheme={scheme ?? 'light'}
-        >
+        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>

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/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/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/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'))}],
-})