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

package/src/ui/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'
@@ -83,7 +84,7 @@ export const Button = forwardRef(function Button(
     paddingBottom,
     paddingLeft,
     paddingRight,
-    radius = 2,
+    radius = 3,
     selected,
     space = props.gap ?? props.space ?? props.padding ?? 3, // eslint-disable-line @typescript-eslint/no-unused-vars
     text,
@@ -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,6 +161,7 @@ export const Button = forwardRef(function Button(
               muted={muted}
               size={fontSize}
               textOverflow={textOverflow}
+              // weight={textWeight ?? buttonTheme.textWeight}
               weight={textWeight}
             >
               {text}
@@ -178,15 +179,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 +193,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/primitives/card/card.tsx

@@ -1,4 +1,4 @@
-import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
+import {_selectable, card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
 import {createElement, ForwardedRef, forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 
@@ -46,11 +46,11 @@ export const Card = forwardRef(function Card(
     pressed,
     radius = 0,
     scheme: schemeProp,
-    // selectable,
+    selectable,
     selected,
     shadow,
     style,
-    tone: toneProp = 'default',
+    tone: toneProp = 'inherit',
     ...restProps
   } = props
 
@@ -76,8 +76,9 @@ export const Card = forwardRef(function Card(
         card({
           scheme: scheme === context.scheme ? undefined : scheme,
           shadow,
-          tone,
+          tone: tone === context.tone ? undefined : tone,
         }),
+        selectable && _selectable({radius}),
       )}
       data-checkered={checkered ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}

package/src/ui/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/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/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/primitives/popover/popover.tsx

@@ -26,8 +26,13 @@ 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 +44,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 +67,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 +128,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,
@@ -155,12 +161,17 @@ export const Popover = memo(
       tone = 'inherit',
       width: widthProp = 'auto',
       // zOffset: zOffsetProp = layer.popover.zOffset,
-      zOffset: zOffsetProp = Z_OFFSETS.popover,
+      zOffset: zOffsetProp,
       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 +182,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,11 +260,22 @@ 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 = `${Math.min(
+                //   availableWidth,
+                //   _maxWidth ?? Infinity,
+                // )}px`
+
                 elements.floating.style.maxWidth = `${availableWidth}px`
                 elements.floating.style.maxHeight = `${availableHeight}px`
               }

package/src/ui/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,
@@ -70,8 +69,6 @@ export const PopoverCard = memo(
       ...restProps
     } = props
 
-    const card = useCard()
-
     const layer = useLayer()
 
     // Get margins: [top, right, bottom, left]
@@ -110,51 +107,48 @@ 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}
+      <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"
-          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={1}
+          maxWidth={maxWidth}
+          overflow={overflow}
         >
-          <Flex
-            data-ui="Popover__wrapper"
-            direction="column"
-            flex={1}
-            maxWidth={maxWidth}
-            overflow={overflow}
-          >
-            <Flex direction="column" flex={1} padding={padding}>
-              {children}
-            </Flex>
+          <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/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/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/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/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,

package/src/ui/primitives/tooltip/tooltip.tsx

@@ -28,7 +28,7 @@ import {
 } from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
-import {Z_OFFSETS} from '../../constants'
+import {useTheme_v2} from '../../_compat'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
@@ -91,6 +91,7 @@ export const Tooltip = forwardRef(function Tooltip(
   forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
+  const {layer} = useTheme_v2()
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
@@ -108,7 +109,7 @@ export const Tooltip = forwardRef(function Tooltip(
     radius = 3,
     scheme,
     shadow = 2,
-    zOffset = Z_OFFSETS.tooltip,
+    zOffset = layer.tooltip.zOffset,
     tone,
     ...restProps
   } = props

package/src/css/aspects/minWidth/index.ts

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

package/src/css/aspects/minWidth/minWidth.style.ts

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'min-w-0', {minWidth: '0'})
-_responsiveRule(util, 'min-w-auto', {minWidth: 'auto'})
-_responsiveRule(util, 'min-w-full', {minWidth: '100%'})
-_responsiveRule(util, 'min-w-min', {minWidth: 'min-content'})
-_responsiveRule(util, 'min-w-max', {minWidth: 'max-content'})
-_responsiveRule(util, 'min-w-fit', {minWidth: 'fit-content'})
-
-export const minWidthStyle: Style = {layers: {util}}

package/src/css/aspects/minWidth/minWidth.ts

@@ -1,6 +0,0 @@
-import {_resp} from '../../_resp'
-import {MinWidthStyleProps} from './types'
-
-export function minWidth(props: MinWidthStyleProps): string {
-  return _resp('min-w', props.minWidth) ?? ''
-}

package/src/css/aspects/minWidth/types.ts

@@ -1,7 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
-
-export interface MinWidthStyleProps {
-  minWidth?: ResponsiveProp<MinWidth>
-}

package/src/css/primitives/stack/index.ts

@@ -1 +0,0 @@
-export * from './stack'

package/src/css/primitives/stack/stack.style.ts

@@ -1,9 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.stack': {
-    gridTemplateColumns: 'minmax(0, 1fr)',
-  },
-}
-
-export const stackStyle: Style = {layers: {primitive}}

package/src/css/primitives/stack/stack.ts

@@ -1,6 +0,0 @@
-import {_comp} from '../../_comp'
-
-/** @public */
-export function stack(): string | undefined {
-  return _comp('stack')
-}