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

package/src/ui/primitives/card/cardContext.ts

@@ -0,0 +1,10 @@
+import {Context} from 'react'
+
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import {CardContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const CardContext: Context<CardContextValue | null> =
+  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/context/card', null)

package/src/ui/primitives/card/cardProvider.tsx

@@ -0,0 +1,19 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ReactNode, useMemo} from 'react'
+
+import {CardContext} from './cardContext'
+import {CardCompatProviderComponent} from './types'
+
+export function CardProvider(props: {
+  compat_provider?: CardCompatProviderComponent
+  children?: ReactNode
+  rendered?: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}) {
+  const {children, rendered = false, tone, scheme} = props
+
+  const context = useMemo(() => ({rendered, tone, scheme}), [rendered, tone, scheme])
+
+  return <CardContext.Provider value={context}>{children}</CardContext.Provider>
+}

package/src/ui/primitives/card/index.ts

@@ -0,0 +1,4 @@
+export * from './card'
+export * from './cardProvider'
+export * from './types'
+export * from './useCard'

package/src/ui/primitives/card/types.ts

@@ -0,0 +1,27 @@
+import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ComponentType, ReactNode} from 'react'
+
+/**
+ * @internal
+ * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
+ */
+export interface CardStyleProps {
+  $checkered: boolean
+  $focusRing: boolean
+  $muted: boolean
+  $tone: ThemeColorCardToneKey
+}
+
+export type CardCompatProviderComponent = ComponentType<{
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}>
+
+/** @internal */
+export interface CardContextValue {
+  compat_provider?: CardCompatProviderComponent
+  rendered: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey
+}

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

@@ -0,0 +1,7 @@
+import {useContext} from 'react'
+
+import {CardContext} from './cardContext'
+
+export function useCard() {
+  return useContext(CardContext)
+}

package/src/{core → ui}/primitives/heading/heading.tsx

@@ -31,7 +31,7 @@ export const Heading = forwardRef(function Heading(
     className,
     flex,
     muted = false,
-    size = 1,
+    size = 2,
     textOverflow: textOverflowProp,
     weight,
     ...restProps

package/src/{core → ui}/primitives/popover/__workshop__/OpenOnMountStory.tsx

@@ -3,7 +3,7 @@ import {Button, Card, Popover, Text} from '@sanity/ui'
 export default function OpenOnMountStory() {
   return (
     <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3} tone="default">
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

package/src/{core → ui}/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -1,6 +1,8 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {CardTone} from '../../../types'
 import {BoundaryElementProvider} from '../../../utils'
 import {Box} from '../../box'
 import {Card} from '../../card'
@@ -21,6 +23,7 @@ export default function SidePanelStory() {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
   const updateRef = useRef<PopoverUpdateCallback>(undefined)
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS) ?? 'inherit'
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])
 
@@ -42,7 +45,7 @@ export default function SidePanelStory() {
 
             <Card border padding={3}>
               <Text size={1}>
-                Some editor <InlineObject updateRef={updateRef} />
+                Some editor <InlineObject tone={tone} updateRef={updateRef} />
               </Text>
             </Card>
           </Stack>
@@ -52,8 +55,8 @@ export default function SidePanelStory() {
   )
 }
 
-function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
-  const {updateRef} = props
+function InlineObject(props: {tone: CardTone; updateRef?: PopoverProps['updateRef']}) {
+  const {tone, updateRef} = props
   const [open, setOpen] = useState(false)
 
   const handleClick = useCallback(() => {
@@ -79,6 +82,7 @@ function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
       open={open}
       overflow="auto"
       portal
+      tone={tone}
       width={0}
       updateRef={updateRef}
     >

package/src/{core → ui}/primitives/popover/popover.tsx

@@ -26,8 +26,13 @@ import {
   useRef,
 } from 'react'
 
-import {useTheme_v2} from '../../_compat'
-import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+// import {useTheme_v2} from '../../_compat'
+import {
+  useArrayProp,
+  // useElementSize,
+  // useMediaIndex,
+  usePrefersReducedMotion,
+} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
@@ -39,7 +44,7 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-import {calcCurrentWidth, calcMaxWidth} from './helpers'
+// import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
 import {PopoverUpdateCallback} from './types'
 
@@ -123,7 +128,7 @@ export const Popover = memo(
     props: Props<PopoverProps, 'div'>,
     forwardedRef: ForwardedRef<HTMLDivElement>,
   ): ReactElement {
-    const {container, layer} = useTheme_v2()
+    // const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
     const {
@@ -155,17 +160,18 @@ export const Popover = memo(
       shadow = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: zOffsetProp = layer.popover.zOffset,
+      // zOffset: zOffsetProp = layer.popover.zOffset,
+      zOffset: zOffsetProp,
       updateRef,
       ...restProps
     } = props
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
-    const boundarySize = useElementSize(boundaryElement)?.border
+    // const boundarySize = useElementSize(boundaryElement)?.border
     // const padding = useArrayProp(paddingProp)
     // const radius = useArrayProp(radiusProp)
     // const shadow = useArrayProp(shadowProp)
-    const widthArrayProp = useArrayProp(widthProp)
+    // const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -176,56 +182,56 @@ export const Popover = memo(
       () => ref.current,
     )
 
-    const mediaIndex = useMediaIndex()
-    const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
+    // const mediaIndex = useMediaIndex()
+    // const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
 
     // Update width when
     // - media index changes
     // - `width` property changes
-    const width = calcCurrentWidth({
-      container,
-      mediaIndex,
-      width: widthArrayProp,
-    })
-    const widthRef = useRef(width)
+    // const width = calcCurrentWidth({
+    //   container,
+    //   mediaIndex,
+    //   width: widthArrayProp,
+    // })
+    // const widthRef = useRef(width)
 
-    useEffect(() => {
-      widthRef.current = width
-    }, [width])
+    // useEffect(() => {
+    //   widthRef.current = width
+    // }, [width])
 
     // Update max width when
     // - boundary width changes
     // - `width` property changes
-    const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
-    const maxWidthRef = useRef(maxWidth)
+    // const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
+    // const maxWidthRef = useRef(maxWidth)
 
-    useEffect(() => {
-      maxWidthRef.current = maxWidth
-    }, [maxWidth])
+    // useEffect(() => {
+    //   maxWidthRef.current = maxWidth
+    // }, [maxWidth])
 
     // Keep track of reference element width (see `size` middleware below)
     const referenceWidthRef = useRef<number>(undefined)
 
-    // Force apply width & max width to floating element
-    useEffect(() => {
-      const floatingElement = ref.current
+    // // Force apply width & max width to floating element
+    // useEffect(() => {
+    //   const floatingElement = ref.current
 
-      if (!open || !floatingElement) return
+    //   if (!open || !floatingElement) return
 
-      const referenceWidth = referenceWidthRef.current
+    //   const referenceWidth = referenceWidthRef.current
 
-      if (matchReferenceWidth) {
-        if (referenceWidth !== undefined) {
-          floatingElement.style.width = `${referenceWidth}px`
-        }
-      } else if (width !== undefined) {
-        floatingElement.style.width = `${width}px`
-      }
+    //   if (matchReferenceWidth) {
+    //     if (referenceWidth !== undefined) {
+    //       floatingElement.style.width = `${referenceWidth}px`
+    //     }
+    //   } else if (width !== undefined) {
+    //     floatingElement.style.width = `${width}px`
+    //   }
 
-      if (typeof maxWidth === 'number') {
-        floatingElement.style.maxWidth = `${maxWidth}px`
-      }
-    }, [width, matchReferenceWidth, maxWidth, open])
+    //   if (typeof maxWidth === 'number') {
+    //     floatingElement.style.maxWidth = `${maxWidth}px`
+    //   }
+    // }, [width, matchReferenceWidth, maxWidth, open])
 
     const middleware = useMemo(() => {
       const ret: Middleware[] = []
@@ -254,21 +260,23 @@ export const Popover = memo(
 
               referenceWidthRef.current = referenceWidth
 
-              const _currentWidth = widthRef.current
-              const _maxWidth = maxWidthRef.current
+              // const _currentWidth = widthRef.current
+              // const _maxWidth = maxWidthRef.current
 
               if (matchReferenceWidth) {
                 elements.floating.style.width = `${referenceWidth}px`
-              } else if (_currentWidth !== undefined) {
-                elements.floating.style.width = `${_currentWidth}px`
               }
+              // else if (_currentWidth !== undefined) {
+              //   elements.floating.style.width = `${_currentWidth}px`
+              // }
 
               if (constrainSize) {
-                elements.floating.style.maxWidth = `${Math.min(
-                  availableWidth,
-                  _maxWidth ?? Infinity,
-                )}px`
+                // elements.floating.style.maxWidth = `${Math.min(
+                //   availableWidth,
+                //   _maxWidth ?? Infinity,
+                // )}px`
 
+                elements.floating.style.maxWidth = `${availableWidth}px`
                 elements.floating.style.maxHeight = `${availableHeight}px`
               }
             },
@@ -412,12 +420,13 @@ export const Popover = memo(
           arrowX={arrowX}
           arrowY={arrowY}
           hidden={referenceHidden}
+          maxWidth={widthProp}
           overflow={overflow}
           padding={padding}
           placement={placement}
           radius={radius}
           ref={setFloating}
-          referenceWidth={matchReferenceWidth ? referenceWidthRef.current : width}
+          // referenceWidth={matchReferenceWidth ? referenceWidthRef.current : width}
           scheme={scheme}
           shadow={shadow}
           originX={originX}

package/src/{core → ui}/primitives/popover/popoverCard.tsx

@@ -50,6 +50,7 @@ export const PopoverCard = memo(
       arrowX,
       arrowY,
       children,
+      maxWidth,
       padding,
       placement,
       originX,
@@ -68,7 +69,7 @@ export const PopoverCard = memo(
       ...restProps
     } = props
 
-    const {zIndex} = useLayer()
+    const layer = useLayer()
 
     // Get margins: [top, right, bottom, left]
     const margins: PopoverMargins = useMemo(
@@ -88,11 +89,11 @@ export const PopoverCard = memo(
         position: strategy,
         top: y,
         width: referenceWidth,
-        zIndex,
+        zIndex: layer.zIndex ?? 100,
         willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [animate, originX, originY, referenceWidth, strategy, style, x, y, zIndex],
+      [animate, layer.zIndex, originX, originY, referenceWidth, strategy, style, x, y],
     )
 
     const arrowStyle: CSSProperties = useMemo(
@@ -126,7 +127,13 @@ export const PopoverCard = memo(
         animate={animate ? ['visible', 'scaleIn'] : undefined}
         exit={animate ? ['hidden', 'scaleOut'] : undefined}
       >
-        <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
+        <Flex
+          data-ui="Popover__wrapper"
+          direction="column"
+          flex={1}
+          maxWidth={maxWidth}
+          overflow={overflow}
+        >
           <Flex direction="column" flex={1} padding={padding}>
             {children}
           </Flex>

package/src/{core → ui}/primitives/select/select.tsx

@@ -38,10 +38,10 @@ export const Select = forwardRef(function Select(
     children,
     customValidity,
     disabled,
-    fontSize = 1,
+    fontSize = 2,
     gap,
-    padding = 2,
-    radius = 2,
+    padding = 3,
+    radius = 1,
     readOnly,
     space = 2,
     ...restProps

package/src/{core → ui}/primitives/text/text.tsx

@@ -33,7 +33,7 @@ export const Text = forwardRef(function Text(
     className,
     flex,
     muted = false,
-    size = 1,
+    size = 2,
     textOverflow: textOverflowProp,
     weight,
     ...restProps

package/src/{core → ui}/primitives/tooltip/tooltip.test.tsx

@@ -6,8 +6,8 @@ import '../../../../test/mocks/matchMedia.mock'
 import {act, fireEvent, screen} from '@testing-library/react'
 
 import {render} from '../../../../test'
-import {Button, Text} from '../../primitives'
-import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
+import {Button, Text} from '..'
+import {Tooltip, TooltipDelayGroupProvider} from '.'
 
 // Fake timers using Jest
 beforeEach(() => {

package/src/{core → ui}/utils/layer/layerProvider.tsx

@@ -34,7 +34,7 @@ export function LayerProvider(props: LayerProviderProps): ReactElement {
   // Get responsive z-index value
   const maxMediaIndex = zOffset.length - 1
   const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
-  const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]
+  const zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : (zOffset[mediaIndex] ?? 0)
 
   // A state value that is used to keep track of the number of child layers on each level
   const [, setChildLayers] = useState<Record<number, number>>({})

package/src/{core → ui}/utils/portal/portal.ts

@@ -1,6 +1,7 @@
-import {ReactNode, ReactPortal} from 'react'
+import {createElement, ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
+import {CardProvider, useCard} from '../../primitives'
 import {usePortal} from './usePortal'
 
 /**
@@ -19,6 +20,7 @@ export interface PortalProps {
  */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
+  const card = useCard()
   const portal = usePortal()
   const portalElement =
     (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default
@@ -27,7 +29,18 @@ export function Portal(props: PortalProps): ReactPortal | null {
     return null
   }
 
-  return createPortal(children, portalElement)
+  return createPortal(
+    createElement(
+      CardProvider,
+      {
+        rendered: true,
+        tone: 'transparent', // card?.tone || 'default',
+        scheme: card?.scheme || 'light',
+      },
+      children,
+    ),
+    portalElement,
+  )
 }
 
 Portal.displayName = 'Portal'

package/src/{core → ui}/utils/virtualList/virtualList.tsx

@@ -133,7 +133,7 @@ export const VirtualList = forwardRef(function VirtualList(
 
     if (itemHeight === -1) {
       return [
-        <Box insetTop={0} insetLeft={0} key={0} position="absolute">
+        <Box insetTop={0} insetLeft={0} insetRight={0} key={0} position="absolute">
           {renderItem(items[0])}
         </Box>,
       ]
@@ -147,6 +147,7 @@ export const VirtualList = forwardRef(function VirtualList(
       return (
         <Box
           insetLeft={0}
+          insetRight={0}
           key={key}
           position="absolute"
           style={{top: itemIndex * (itemHeight + space[gap])}}

package/src/core/_compat/theme/themeContext.ts

@@ -1,10 +0,0 @@
-import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @internal
- */
-export const ThemeContext = createGlobalScopedContext<ThemeContextValue | null>(
-  '@sanity/ui/context/theme',
-  null,
-)

package/src/core/hooks/useMatchMedia.ts

@@ -1,46 +0,0 @@
-import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
-
-/**
- * Efficiently subscribes to `window.matchMedia` queries
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean {
-  const {subscribe, getSnapshot} = useMemo(() => {
-    /**
-     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
-     * we don't want to eagerly instantiate it to ensure it's only created when actually used
-     */
-    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
-
-    const getMatchMedia = (): MediaQueryList => {
-      if (!MEDIA_QUERY_CACHE) {
-        // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
-        // the `window` global is available and we're in a browser environment
-        MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)
-      }
-
-      return MEDIA_QUERY_CACHE
-    }
-
-    return {
-      subscribe: (onStoreChange: () => void): (() => void) => {
-        const matchMedia = getMatchMedia()
-
-        matchMedia.addEventListener('change', onStoreChange)
-
-        return () => matchMedia.removeEventListener('change', onStoreChange)
-      },
-      getSnapshot: () => getMatchMedia().matches,
-    }
-  }, [mediaQueryString])
-
-  useDebugValue(mediaQueryString)
-
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
-}

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

@@ -1,2 +0,0 @@
-export * from './card'
-export * from './types'

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

@@ -1,12 +0,0 @@
-import {ThemeColorToneKey} from '@sanity/ui/theme'
-
-/**
- * @internal
- * @deprecated
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorToneKey
-}

package/src/css/primitives/badge/rules.ts

@@ -1,22 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-
-import type {Rules} from '../../types'
-
-const badgeToneRules: Rules = {}
-
-for (const tone of THEME_COLOR_STATE_TONES) {
-  badgeToneRules[`badge-${tone}`] = {
-    '--color-bg': `var(--color-tinted-${tone}-bg-4)`,
-    '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-  }
-}
-
-export const badgeRules: Rules = {
-  badge: {
-    backgroundColor: 'var(--color-bg)',
-    color: 'var(--color-fg)',
-    verticalAlign: 'top',
-  },
-
-  ...badgeToneRules,
-}

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

@@ -1,28 +0,0 @@
-import type {Rules} from '../../types'
-
-export const boxRules: Rules = {
-  'box': {
-    'minWidth': 0,
-    'minHeight': 0,
-
-    '@nest': {
-      '&:is(ul), &:is(ol)': {
-        listStyle: 'none',
-      },
-
-      '&.muted': {
-        backgroundColor: 'var(--color-muted-bg)',
-      },
-    },
-  },
-
-  // sizing
-
-  'box-content': {
-    boxSizing: 'content-box',
-  },
-
-  'box-border': {
-    boxSizing: 'border-box',
-  },
-}