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

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

package/src/css/rules.ts

@@ -1,113 +0,0 @@
-import {breadcrumbsRules} from './components/breadcrumbs/rules'
-import {dialogRules} from './components/dialog/rules'
-import {menuRules} from './components/menu/rules'
-import {skeletonRules} from './components/skeleton/rules'
-import {toastRules} from './components/toast/rules'
-import {_arrowRules} from './primitives/_arrow/rules'
-import {_inputRules} from './primitives/_input/rules'
-import {_selectableRules} from './primitives/_selectable/rules'
-import {avatarRules} from './primitives/avatar/rules'
-import {badgeRules} from './primitives/badge/rules'
-import {boxRules} from './primitives/box/rules'
-import {buttonRules} from './primitives/button/rules'
-import {cardRules} from './primitives/card/rules'
-import {checkboxRules} from './primitives/checkbox/rules'
-import {codeRules} from './primitives/code/rules'
-import {containerRules} from './primitives/container/rules'
-import {headingRules} from './primitives/heading/rules'
-import {kbdRules} from './primitives/kbd/rules'
-import {labelRules} from './primitives/label/rules'
-import {popoverRules} from './primitives/popover/rules'
-import {radioRules} from './primitives/radio/rules'
-import {selectRules} from './primitives/select/rules'
-import {spinnerRules} from './primitives/spinner/rules'
-import {switchRules} from './primitives/switch/rules'
-import {textRules} from './primitives/text/rules'
-import {textAreaRules} from './primitives/textArea/rules'
-import {textInputRules} from './primitives/textInput/rules'
-import {tokenRules} from './primitives/token/rules'
-import {tooltipRules} from './primitives/tooltip/rules'
-import {borderRules} from './styles/border/rules'
-import {displayRules} from './styles/display/rules'
-import {flexRules} from './styles/flex/rules'
-import {flexItemRules} from './styles/flexItem/rules'
-import {fontRules} from './styles/font/rules'
-import {gapRules} from './styles/gap/rules'
-import {gridRules} from './styles/grid/rules'
-import {gridItemRules} from './styles/gridItem/rules'
-import {heightRules} from './styles/height/rules'
-import {insetRules} from './styles/inset/rules'
-import {marginRules} from './styles/margin/rules'
-import {maxWidthRules} from './styles/maxWidth/rules'
-import {outlineRules} from './styles/outline/rules'
-import {overflowRules} from './styles/overflow/rules'
-import {paddingRules} from './styles/padding/rules'
-import {pointerEventsRules} from './styles/pointerEvents/rules'
-import {positionRules} from './styles/position/rules'
-import {radiusRules} from './styles/radius/rules'
-import {shadowRules} from './styles/shadow/rules'
-import {textOverflowRules} from './styles/textOverflow/rules'
-import {widthRules} from './styles/width/rules'
-import {type Rules} from './types'
-import {srOnlyRules} from './utils/srOnly/rules'
-
-export const rules: Rules = {
-  // styles
-  ...borderRules,
-  ...displayRules,
-  ...flexItemRules,
-  ...flexRules,
-  ...fontRules,
-  ...gapRules,
-  ...gridItemRules,
-  ...gridRules,
-  ...heightRules,
-  ...insetRules,
-  ...marginRules,
-  ...outlineRules,
-  ...overflowRules,
-  ...paddingRules,
-  ...pointerEventsRules,
-  ...positionRules,
-  ...radiusRules,
-  ...shadowRules,
-  ...widthRules,
-
-  // utils
-  ...srOnlyRules,
-
-  // primitives
-  ..._arrowRules,
-  ..._inputRules,
-  ..._selectableRules,
-  ...avatarRules,
-  ...badgeRules,
-  ...boxRules,
-  ...buttonRules,
-  ...cardRules,
-  ...checkboxRules,
-  ...codeRules,
-  ...containerRules,
-  ...headingRules,
-  ...kbdRules,
-  ...labelRules,
-  ...maxWidthRules,
-  ...popoverRules,
-  ...radioRules,
-  ...selectRules,
-  ...spinnerRules,
-  ...switchRules,
-  ...textAreaRules,
-  ...textInputRules,
-  ...textOverflowRules,
-  ...textRules,
-  ...tokenRules,
-  ...tooltipRules,
-
-  // components
-  ...breadcrumbsRules,
-  ...dialogRules,
-  ...menuRules,
-  ...skeletonRules,
-  ...toastRules,
-}

package/src/css/styles/border/border.ts

@@ -1,22 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {BorderStyleProps} from './types'
-
-const prefixes = {
-  border: 'border',
-  borderTop: 'border-t',
-  borderRight: 'border-r',
-  borderBottom: 'border-b',
-  borderLeft: 'border-l',
-}
-
-/** @public */
-export function border(props: BorderStyleProps): string | undefined {
-  return composeClassNames(
-    _resp(prefixes.border, props.border),
-    _resp(prefixes.borderTop, props.borderTop),
-    _resp(prefixes.borderRight, props.borderRight),
-    _resp(prefixes.borderBottom, props.borderBottom),
-    _resp(prefixes.borderLeft, props.borderLeft),
-  )
-}

package/src/css/styles/border/rules.ts

@@ -1,24 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-
-export const borderRules: Rules = {
-  ...responsiveRules('border', {
-    border: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-t', {
-    borderTop: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-r', {
-    borderRight: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-b', {
-    borderBottom: '1px solid var(--card-border-color)',
-  }),
-
-  ...responsiveRules('border-l', {
-    borderLeft: '1px solid var(--card-border-color)',
-  }),
-}

package/src/css/styles/display/rules.ts

@@ -1,62 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
-
-export const displayRules: Rules = {
-  ...responsiveRules('block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'block',
-      },
-    },
-  }),
-
-  ...responsiveRules('inline-block', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-    },
-  }),
-
-  ...responsiveRules('flex', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'flex',
-      },
-    },
-  }),
-
-  ...responsiveRules('inline-flex', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-flex',
-      },
-    },
-  }),
-
-  ...responsiveRules('grid', {
-    'gridTemplateRows': 'auto',
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'grid',
-      },
-    },
-  }),
-
-  ...responsiveRules('inline-grid', {
-    'gridTemplateRows': 'auto',
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-grid',
-      },
-    },
-  }),
-
-  ...responsiveRules('none', {
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'none',
-      },
-    },
-  }),
-}