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

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

@@ -14,6 +14,7 @@ import {FontTextSize, Space} from '@sanity/ui/theme'
 import {ElementType, ForwardedRef, forwardRef, isValidElement, ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
+import {useTheme_v2} from '../../_compat'
 import {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
@@ -89,7 +90,7 @@ export const Button = forwardRef(function Button(
     text,
     textAlign,
     textOverflow = 'ellipsis',
-    textWeight = 'medium',
+    textWeight,
     tone = 'default',
     type = 'button',
     muted = false,
@@ -97,7 +98,7 @@ export const Button = forwardRef(function Button(
     wrap,
     ...restProps
   } = props
-  // const {button: buttonTheme} = useTheme_v2()
+  const {button: buttonTheme} = useTheme_v2()
 
   return (
     <As
@@ -113,12 +114,12 @@ export const Button = forwardRef(function Button(
     >
       {Boolean(loading) && (
         <Box
-          align="center"
+          align={align}
           as="span"
           className={buttonLoadingBox()}
           display="flex"
           flex={1}
-          justify="center"
+          justify={justify}
           width="fill"
         >
           <Spinner size={fontSize} />
@@ -127,7 +128,6 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box
-          // align={align}
           as="span"
           direction={direction}
           display="flex"
@@ -143,8 +143,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          // width="fill"
-          // wrap={wrap}
+          width="fill"
+          wrap={wrap}
         >
           {IconComponent && (
             <Text as="span" flex="none" muted size={fontSize}>
@@ -161,7 +161,7 @@ export const Button = forwardRef(function Button(
               muted={muted}
               size={fontSize}
               textOverflow={textOverflow}
-              weight={textWeight}
+              weight={textWeight ?? buttonTheme.textWeight}
             >
               {text}
             </Text>
@@ -178,15 +178,13 @@ export const Button = forwardRef(function Button(
 
       {children && (
         <Box
-          // align={align}
           as="span"
-          // direction={direction}
-          // display="flex"
+          direction={direction}
+          display="flex"
           flex={1}
           gap={gap}
           gapX={gapX}
           gapY={gapY}
-          // justify={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -194,8 +192,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          // width="fill"
-          // wrap={wrap}
+          width="fill"
+          wrap={wrap}
         >
           {children}
         </Box>

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

@@ -1,11 +1,10 @@
 import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
-import {createElement, ForwardedRef, forwardRef} from 'react'
+import {ForwardedRef, forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 
+import {ThemeColorProvider, useRootTheme} from '../../_compat'
 import {Props} from '../../types'
 import {Box, BoxProps} from '../box'
-import {CardProvider} from './cardProvider'
-import {useCard} from './useCard'
 
 /**
  * @public
@@ -46,73 +45,58 @@ export const Card = forwardRef(function Card(
     pressed,
     radius = 0,
     scheme: schemeProp,
-    // selectable,
+    selectable,
     selected,
     shadow,
     style,
-    tone: toneProp = 'default',
+    tone: toneProp,
     ...restProps
   } = props
 
   const as = isValidElementType(asProp) ? asProp : 'div'
 
-  const parent = useCard()
+  const rootTheme = useRootTheme()
 
-  const context = {
-    tone: parent?.tone ?? 'default',
-    scheme: parent?.scheme ?? 'light',
-  }
-
-  const tone = toneProp === 'inherit' ? context.tone : toneProp
-  const scheme = schemeProp === undefined ? context.scheme : schemeProp
+  const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
+  const scheme = schemeProp === undefined ? rootTheme.scheme : schemeProp
 
-  let node = (
+  const node = (
     <Box
+      // data-as={typeof as === 'string' ? as : undefined}
       data-ui="Card"
       {...restProps}
       as={as}
       className={composeClassNames(
         className,
         card({
-          scheme: scheme === context.scheme ? undefined : scheme,
+          scheme: scheme === rootTheme.scheme ? undefined : scheme,
           shadow,
-          tone,
+          tone: tone === rootTheme.tone ? undefined : tone,
         }),
       )}
       data-checkered={checkered ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
+      data-selectable={selectable ? '' : undefined}
       data-selected={selected ? '' : undefined}
       radius={radius}
       ref={ref}
+      // selected={selected}
       style={style}
     />
   )
 
-  if (scheme === context.scheme && tone === context.tone) {
+  if (scheme === rootTheme.scheme && tone === rootTheme.tone) {
     return node
   }
 
-  node = (
-    <CardProvider
-      compat_provider={parent?.compat_provider}
-      rendered={true}
-      scheme={scheme}
-      tone={tone ?? context.tone}
-    >
+  return (
+    // Render a theme provider around the card if the scheme or tone differs from the root theme.
+    // This is needed for backwards compatibility with the legacy theme API.
+    <ThemeColorProvider scheme={scheme} tone={tone ?? rootTheme.tone}>
       {node}
-    </CardProvider>
+    </ThemeColorProvider>
   )
-
-  if (parent?.compat_provider) {
-    return createElement(parent.compat_provider, {
-      children: node,
-      scheme,
-      tone: tone ?? context.tone,
-    })
-  }
-
-  return node
 })
 
 Card.displayName = 'ForwardRef(Card)'

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

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

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

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

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

@@ -26,7 +26,7 @@ export const Code = forwardRef(function Code(
     children,
     className,
     language: languageProp,
-    size = 2,
+    size = 1,
     weight,
     ...restProps
   } = props

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

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

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

@@ -28,7 +28,7 @@ export const KBD = forwardRef(function KBD(
     children,
     className,
     display = 'inline-block',
-    fontSize = 0,
+    fontSize = 1,
     padding = 1,
     radius = 2,
     ...restProps
@@ -45,7 +45,7 @@ export const KBD = forwardRef(function KBD(
       padding={padding}
       ref={ref}
     >
-      <Text as="span" muted size={fontSize} weight="semibold">
+      <Text as="span" muted size={fontSize}>
         {children}
       </Text>
     </Box>

package/src/{ui → core}/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} tone="default">
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

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

@@ -1,8 +1,6 @@
 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'
@@ -23,7 +21,6 @@ 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])
 
@@ -45,7 +42,7 @@ export default function SidePanelStory() {
 
             <Card border padding={3}>
               <Text size={1}>
-                Some editor <InlineObject tone={tone} updateRef={updateRef} />
+                Some editor <InlineObject updateRef={updateRef} />
               </Text>
             </Card>
           </Stack>
@@ -55,8 +52,8 @@ export default function SidePanelStory() {
   )
 }
 
-function InlineObject(props: {tone: CardTone; updateRef?: PopoverProps['updateRef']}) {
-  const {tone, updateRef} = props
+function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
+  const {updateRef} = props
   const [open, setOpen] = useState(false)
 
   const handleClick = useCallback(() => {
@@ -82,7 +79,6 @@ function InlineObject(props: {tone: CardTone; updateRef?: PopoverProps['updateRe
       open={open}
       overflow="auto"
       portal
-      tone={tone}
       width={0}
       updateRef={updateRef}
     >

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

@@ -26,8 +26,8 @@ import {
   useRef,
 } from 'react'
 
-import {Z_OFFSETS} from '../../constants'
-import {useArrayProp, 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,6 +39,7 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
+import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
 import {PopoverUpdateCallback} from './types'
 
@@ -61,7 +62,7 @@ export interface PopoverProps extends CardProps, LayerProps {
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
    * - by resizing
-   *
+  /*
    * Note that:
    * - setting `preventOverflow` to `true` also prevents overflow on its side axis
    * - setting `matchReferenceWidth` to `true` also causes the popover to resize
@@ -122,13 +123,13 @@ export const Popover = memo(
     props: Props<PopoverProps, 'div'>,
     forwardedRef: ForwardedRef<HTMLDivElement>,
   ): ReactElement {
+    const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -154,13 +155,17 @@ export const Popover = memo(
       shadow = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      // zOffset: zOffsetProp = layer.popover.zOffset,
-      zOffset: zOffsetProp = Z_OFFSETS.popover,
+      zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
     } = props
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
+    const boundarySize = useElementSize(boundaryElement)?.border
+    // const padding = useArrayProp(paddingProp)
+    // const radius = useArrayProp(radiusProp)
+    // const shadow = useArrayProp(shadowProp)
+    const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -171,9 +176,57 @@ export const Popover = memo(
       () => ref.current,
     )
 
+    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)
+
+    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)
+
+    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
+
+      if (!open || !floatingElement) return
+
+      const referenceWidth = referenceWidthRef.current
+
+      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])
+
     const middleware = useMemo(() => {
       const ret: Middleware[] = []
 
@@ -201,12 +254,21 @@ export const Popover = memo(
 
               referenceWidthRef.current = referenceWidth
 
+              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`
               }
 
               if (constrainSize) {
-                elements.floating.style.maxWidth = `${availableWidth}px`
+                elements.floating.style.maxWidth = `${Math.min(
+                  availableWidth,
+                  _maxWidth ?? Infinity,
+                )}px`
+
                 elements.floating.style.maxHeight = `${availableHeight}px`
               }
             },
@@ -350,13 +412,12 @@ 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/{ui → core}/primitives/popover/popoverCard.tsx

@@ -1,12 +1,11 @@
 import {Strategy} from '@floating-ui/react-dom'
-import {popoverCard} from '@sanity/ui/css'
 import {motion, MotionProps} from 'framer-motion'
 import {CSSProperties, ForwardedRef, forwardRef, memo, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {Arrow, useLayer} from '../../utils'
-import {Card, CardProps, CardProvider, useCard} from '../card'
+import {Card, CardProps} from '../card'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -51,7 +50,6 @@ export const PopoverCard = memo(
       arrowX,
       arrowY,
       children,
-      maxWidth,
       padding,
       placement,
       originX,
@@ -70,9 +68,7 @@ export const PopoverCard = memo(
       ...restProps
     } = props
 
-    const card = useCard()
-
-    const layer = useLayer()
+    const {zIndex} = useLayer()
 
     // Get margins: [top, right, bottom, left]
     const margins: PopoverMargins = useMemo(
@@ -92,11 +88,11 @@ export const PopoverCard = memo(
         position: strategy,
         top: y,
         width: referenceWidth,
-        zIndex: layer.zIndex ?? 100,
+        zIndex,
         willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [animate, layer.zIndex, originX, originY, referenceWidth, strategy, style, x, y],
+      [animate, originX, originY, referenceWidth, strategy, style, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(
@@ -110,51 +106,42 @@ export const PopoverCard = memo(
     )
 
     return (
-      <CardProvider tone={card?.tone ?? 'transparent'} scheme={card?.scheme ?? 'light'}>
-        <MotionCard
-          className={popoverCard()}
-          data-ui="Popover"
-          {...(restProps as CardProps & MotionProps)}
-          data-context-tone={card?.tone ?? 'transparent'}
-          data-placement={placement}
-          direction="column"
-          display="flex"
-          radius={radius}
-          ref={ref}
-          scheme={scheme}
-          shadow={shadow}
-          sizing="border"
-          style={rootStyle}
-          tone={tone}
-          variants={POPOVER_MOTION_PROPS.card}
-          transition={POPOVER_MOTION_PROPS.transition}
-          initial={animate ? ['hidden', 'initial'] : undefined}
-          animate={animate ? ['visible', 'scaleIn'] : undefined}
-          exit={animate ? ['hidden', 'scaleOut'] : undefined}
-        >
-          <Flex
-            data-ui="Popover__wrapper"
-            direction="column"
-            flex={1}
-            maxWidth={maxWidth}
-            overflow={overflow}
-          >
-            <Flex direction="column" flex={1} padding={padding}>
-              {children}
-            </Flex>
+      <MotionCard
+        className="popover-card"
+        data-ui="Popover"
+        {...(restProps as CardProps & MotionProps)}
+        data-placement={placement}
+        direction="column"
+        display="flex"
+        radius={radius}
+        ref={ref}
+        scheme={scheme}
+        shadow={shadow}
+        sizing="border"
+        style={rootStyle}
+        tone={tone}
+        variants={POPOVER_MOTION_PROPS.card}
+        transition={POPOVER_MOTION_PROPS.transition}
+        initial={animate ? ['hidden', 'initial'] : undefined}
+        animate={animate ? ['visible', 'scaleIn'] : undefined}
+        exit={animate ? ['hidden', 'scaleOut'] : undefined}
+      >
+        <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
+          <Flex direction="column" flex={1} padding={padding}>
+            {children}
           </Flex>
+        </Flex>
 
-          {arrow && (
-            <Arrow
-              ref={arrowRef}
-              style={arrowStyle}
-              width={DEFAULT_POPOVER_ARROW_WIDTH}
-              height={DEFAULT_POPOVER_ARROW_HEIGHT}
-              radius={DEFAULT_POPOVER_ARROW_RADIUS}
-            />
-          )}
-        </MotionCard>
-      </CardProvider>
+        {arrow && (
+          <Arrow
+            ref={arrowRef}
+            style={arrowStyle}
+            width={DEFAULT_POPOVER_ARROW_WIDTH}
+            height={DEFAULT_POPOVER_ARROW_HEIGHT}
+            radius={DEFAULT_POPOVER_ARROW_RADIUS}
+          />
+        )}
+      </MotionCard>
     )
   }),
 )

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

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

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

@@ -1,4 +1,4 @@
-import {composeClassNames, ResponsiveProp, stack} from '@sanity/ui/css'
+import {ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {ForwardedRef, forwardRef} from 'react'
 
@@ -8,11 +8,7 @@ import {Box, BoxProps} from '../box'
 /**
  * @public
  */
-export interface StackProps
-  extends Omit<
-    BoxProps,
-    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
-  > {
+export interface StackProps extends Omit<BoxProps, 'direction' | 'display' | 'gapX' | 'gapY'> {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
@@ -26,16 +22,15 @@ export const Stack = forwardRef(function Stack(
   props: Props<StackProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, className, gap, space, ...restProps} = props
+  const {as, gap, space, ...restProps} = props
 
   return (
     <Box
       data-ui="Stack"
       {...restProps}
       as={as}
-      autoRows="min"
-      className={composeClassNames(className, stack())}
-      display="grid"
+      direction="column"
+      display="flex"
       gap={gap ?? space}
       ref={ref}
     />

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

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

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

@@ -106,7 +106,7 @@ export const TextInput = forwardRef(function TextInput(
     className,
     clearButton,
     disabled = false,
-    fontSize = 2,
+    fontSize = 1,
     gap,
     icon: IconComponent,
     iconRight: IconRightComponent,