@sanity/ui 2.0.0-beta.2 → 2.0.0-beta.21

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,9 +1,12 @@
 /** @jest-environment node */
-import {defaultTheme} from '@sanity/ui/theme'
+
+import {buildTheme} from '@sanity/ui/theme'
 import {renderToString, renderToStaticMarkup} from 'react-dom/server'
 import {ThemeProvider} from '../../theme'
 import {useMediaIndex} from './useMediaIndex'
 
+const theme = buildTheme()
+
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -14,7 +17,7 @@ describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
     expect(
       renderToStaticMarkup(
-        <ThemeProvider theme={defaultTheme}>
+        <ThemeProvider theme={theme}>
           <Log />
         </ThemeProvider>,
       ),
@@ -23,7 +26,7 @@ describe('useMediaIndex', () => {
   it(`SSR to markup for hydration doesn't throw`, () => {
     expect(
       renderToString(
-        <ThemeProvider theme={defaultTheme}>
+        <ThemeProvider theme={theme}>
           <Log />
         </ThemeProvider>,
       ),

package/src/core/middleware/origin.ts

@@ -0,0 +1,47 @@
+import {Middleware} from '@floating-ui/react-dom'
+
+/**
+ * Custom floating-ui middleware which calculates transform-origin X + Y offsets
+ * based on the current floating rect's dimensions and shift offset.
+ *
+ * Scaling popovers with these transform-origin offsets will give the effect of
+ * popvers slightly 'growing' from the origin/reference element.
+ *
+ * This middleware must be applied after both `@sanity/ui/size` and `shift` middlewares.
+ */
+export const origin: Middleware = {
+  name: '@sanity/ui/origin',
+  fn({middlewareData, placement, rects}) {
+    const [side] = placement.split('-')
+
+    const floatingWidth = rects.floating.width
+    const floatingHeight = rects.floating.height
+
+    const shiftX = middlewareData.shift?.x || 0
+    const shiftY = middlewareData.shift?.y || 0
+
+    if (floatingWidth <= 0 || floatingHeight <= 0) {
+      return {}
+    }
+
+    const isVerticalPlacement = ['bottom', 'top'].includes(side)
+
+    const {originX, originY}: {originX: number; originY: number} = isVerticalPlacement
+      ? {
+          originX: clamp(0.5 - shiftX / floatingWidth, 0, 1),
+          originY: side === 'bottom' ? 0 : 1,
+        }
+      : {
+          originX: side === 'left' ? 1 : 0,
+          originY: clamp(0.5 - shiftY / floatingHeight, 0, 1),
+        }
+
+    return {
+      data: {originX, originY},
+    }
+  },
+}
+
+function clamp(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max)
+}

package/src/core/primitives/badge/badge.tsx

@@ -54,9 +54,7 @@ export const Badge = forwardRef(function Badge(
       padding={useArrayProp(padding)}
       ref={ref}
     >
-      <Text size={fontSize} weight="medium">
-        {children}
-      </Text>
+      <Text size={fontSize}>{children}</Text>
     </Root>
   )
 })

package/src/core/primitives/button/button.tsx

@@ -149,17 +149,15 @@ export const Button = forwardRef(function Button(
             )}
 
             {text && (
-              <Box flex={iconRight ? 1 : undefined}>
-                <Text
-                  muted={muted}
-                  align={textAlign}
-                  size={fontSize}
-                  textOverflow="ellipsis"
-                  weight={button.textWeight}
-                >
-                  {text}
-                </Text>
-              </Box>
+              <Text
+                muted={muted}
+                align={textAlign}
+                size={fontSize}
+                textOverflow="ellipsis"
+                weight={button.textWeight}
+              >
+                {text}
+              </Text>
             )}
 
             {iconRight && (

package/src/core/primitives/heading/styles.ts

@@ -46,6 +46,10 @@ export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnT
       }
     }
 
+    & strong {
+      font-weight: ${font.heading.weights.bold};
+    }
+
     & svg {
       /* Certain popular CSS libraries changes the defaults for SVG display */
       /* Make sure SVGs are rendered as inline elements */

package/src/core/primitives/kbd/kbd.tsx

@@ -26,6 +26,8 @@ function kbdStyle() {
     background: var(--card-bg-color);
     font: inherit;
 
+    vertical-align: top;
+
     &:not([hidden]) {
       display: inline-block;
     }

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

@@ -10,6 +10,7 @@ import {
   useFloating,
 } from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {AnimatePresence} from 'framer-motion'
 import {
   MutableRefObject,
   RefCallback,
@@ -22,9 +23,16 @@ import {
   useRef,
 } from 'react'
 import {useForwardedRef, useArrayProp, useElementSize, useMediaIndex} from '../../hooks'
+import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
-import {LayerProps, LayerProvider, Portal, useBoundaryElement} from '../../utils'
+import {
+  ConditionalWrapper,
+  LayerProps,
+  LayerProvider,
+  Portal,
+  useBoundaryElement,
+} from '../../utils'
 import {ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
 import {
   DEFAULT_POPOVER_DISTANCE,
@@ -46,15 +54,41 @@ export interface PopoverProps
     ResponsiveShadowProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
+  /**
+   * Whether the popover should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
+  /**
+   * 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
+   *
+   * @defaultValue false
+   */
   constrainSize?: boolean
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
   floatingBoundary?: HTMLElement | null
+  /**
+   * When `true`, set the maximum width to match the reference element, and also prevent overflow within
+   * the current boundary by resizing.
+   *
+   * Note that setting `constrainSize` to `true` also causes the popover to resize
+   *
+   * @defaultValue false
+   */
   matchReferenceWidth?: boolean
   open?: boolean
   overflow?: BoxOverflow
@@ -90,6 +124,7 @@ export const Popover = memo(
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
+      animate = false,
       arrow: arrowProp = false,
       boundaryElement = boundaryElementContext.element,
       children: childProp,
@@ -234,7 +269,7 @@ export const Popover = memo(
         )
       }
 
-      // Shift the popover so its sits within the boundary eleement
+      // Shift the popover so its sits within the boundary element
       if (preventOverflow) {
         ret.push(
           shift({
@@ -255,6 +290,12 @@ export const Popover = memo(
         )
       }
 
+      // Determine the origin to scale from.
+      // Must be placed after `@sanity/ui/size` and `shift` middleware.
+      if (animate) {
+        ret.push(origin)
+      }
+
       ret.push(
         hide({
           boundary: referenceBoundary || undefined,
@@ -265,6 +306,7 @@ export const Popover = memo(
 
       return ret
     }, [
+      animate,
       arrowProp,
       constrainSize,
       fallbackPlacements,
@@ -286,6 +328,9 @@ export const Popover = memo(
     const arrowX = middlewareData.arrow?.x
     const arrowY = middlewareData.arrow?.y
 
+    const originX = middlewareData['@sanity/ui/origin']?.originX
+    const originY = middlewareData['@sanity/ui/origin']?.originY
+
     const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
       arrowRef.current = arrowEl
     }, [])
@@ -343,6 +388,7 @@ export const Popover = memo(
         <PopoverCard
           {...restProps}
           __unstable_margins={margins}
+          animate={animate}
           arrow={arrowProp}
           arrowRef={setArrow}
           arrowX={arrowX}
@@ -355,6 +401,8 @@ export const Popover = memo(
           ref={setFloating}
           scheme={scheme}
           shadow={shadow}
+          originX={originX}
+          originY={originY}
           strategy={strategy}
           tone={tone}
           width={matchReferenceWidth ? referenceWidthRef.current : width}
@@ -369,17 +417,23 @@ export const Popover = memo(
     return (
       <>
         {/* the popover */}
-        {open && (
-          <>
-            {portal ? (
-              <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-                {popover}
-              </Portal>
-            ) : (
-              popover
-            )}
-          </>
-        )}
+        <ConditionalWrapper
+          condition={animate}
+          wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>}
+        >
+          {open && (
+            <ConditionalWrapper
+              condition={!!portal}
+              wrapper={(children) => (
+                <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
+                  {children}
+                </Portal>
+              )}
+            >
+              {popover}
+            </ConditionalWrapper>
+          )}
+        </ConditionalWrapper>
 
         {/* the referred element */}
         {child}

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

@@ -1,10 +1,12 @@
 import {Strategy} from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {MotionProps, motion} from 'framer-motion'
 import React, {CSSProperties, forwardRef, memo, useMemo} from 'react'
 import styled from 'styled-components'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY, POPOVER_MOTION_PROPS} from '../../constants'
 import {BoxOverflow, CardTone, Placement, PopoverMargins, Radius} from '../../types'
 import {Arrow, useLayer} from '../../utils'
-import {Card} from '../card'
+import {Card, CardProps} from '../card'
 import {Flex} from '../flex'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
@@ -13,14 +15,18 @@ import {
   DEFAULT_POPOVER_MARGINS,
 } from './constants'
 
-const Root = styled(Card)({
-  '&:not([hidden])': {
-    display: 'flex',
-  },
-  flexDirection: 'column',
-  width: 'max-content',
-  minWidth: 'min-content',
-})
+const MotionCard = styled(motion(Card))`
+  &:not([hidden]) {
+    display: flex;
+  }
+  flex-direction: column;
+  width: max-content;
+  min-width: min-content;
+  & > * {
+    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+    will-change: opacity;
+  }
+`
 
 /**
  * @internal
@@ -30,13 +36,16 @@ export const PopoverCard = memo(
     props: {
       /** @beta*/
       __unstable_margins?: PopoverMargins
+      animate?: boolean
       arrow: boolean
       arrowRef: React.Ref<HTMLDivElement>
       arrowX?: number
       arrowY?: number
+      originX?: number
+      originY?: number
       overflow?: BoxOverflow
       padding?: number | number[]
-      placement?: Placement
+      placement: Placement
       radius?: Radius | Radius[]
       scheme?: ThemeColorSchemeKey
       shadow?: number | number[]
@@ -50,6 +59,7 @@ export const PopoverCard = memo(
   ) {
     const {
       __unstable_margins: marginsProp,
+      animate,
       arrow,
       arrowRef,
       arrowX,
@@ -57,6 +67,8 @@ export const PopoverCard = memo(
       children,
       padding,
       placement,
+      originX,
+      originY,
       overflow,
       radius,
       scheme,
@@ -84,14 +96,17 @@ export const PopoverCard = memo(
 
     const rootStyle: CSSProperties = useMemo(
       () => ({
+        left: x,
+        originX,
+        originY,
         position: strategy,
         top: y,
-        left: x,
         width,
         zIndex,
+        willChange: animate ? 'transform' : undefined,
         ...style,
       }),
-      [strategy, style, width, x, y, zIndex],
+      [animate, originX, originY, strategy, style, width, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(
@@ -105,9 +120,9 @@ export const PopoverCard = memo(
     )
 
     return (
-      <Root
+      <MotionCard
         data-ui="Popover"
-        {...restProps}
+        {...(restProps as CardProps & MotionProps)}
         data-placement={placement}
         radius={radius}
         ref={ref}
@@ -116,6 +131,7 @@ export const PopoverCard = memo(
         sizing="border"
         style={rootStyle}
         tone={tone}
+        {...(animate ? POPOVER_MOTION_PROPS : {})}
       >
         <Flex data-ui="Popover__wrapper" direction="column" flex={1} overflow={overflow}>
           <Flex direction="column" flex={1} padding={padding}>
@@ -132,7 +148,7 @@ export const PopoverCard = memo(
             radius={DEFAULT_POPOVER_ARROW_RADIUS}
           />
         )}
-      </Root>
+      </MotionCard>
     )
   }),
 )

package/src/core/primitives/select/select.tsx

@@ -44,7 +44,7 @@ export const Select = forwardRef(function Select(
     disabled,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     readOnly,
     space = 3,
     ...restProps

package/src/core/primitives/switch/styles.ts

@@ -102,6 +102,11 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
       --switch-bg-color: ${color.input.default.readOnly.border};
       --switch-fg-color: ${color.input.default.readOnly.bg};
     }
+
+    input:checked[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.input.default.readOnly.fg};
+      --switch-fg-color: ${color.input.default.readOnly.bg};
+    }
   `
 }
 
@@ -152,7 +157,7 @@ export function switchThumbStyles(
     transition-timing-function: ${input.switch.transitionTimingFunction};
     background: var(--switch-fg-color);
     transform: translate3d(0, 0, 0);
-    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
 
     ${checked &&
     css`

package/src/core/primitives/textInput/__workshop__/plain.tsx

@@ -62,7 +62,7 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   ) as IconSymbol
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const placeholder = useText('Placeholder', '', 'Props') || undefined
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined

package/src/core/primitives/textInput/__workshop__/states.tsx

@@ -1,7 +1,8 @@
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
-import {useAction} from '@sanity/ui-workshop'
+import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function StatesStory() {
+  const invalid = useBoolean('Invalid', false, 'Props')
   const onChange = useAction('onChange')
 
   return (
@@ -12,7 +13,12 @@ export default function StatesStory() {
             <Text size={1} weight="medium">
               <label htmlFor="enabled-example">Enabled (default)</label>
             </Text>
-            <TextInput id="enabled-example" onChange={onChange} value="This is some text" />
+            <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
+              id="enabled-example"
+              onChange={onChange}
+              value="This is some text"
+            />
           </Stack>
 
           <Stack space={3}>
@@ -20,6 +26,7 @@ export default function StatesStory() {
               <label htmlFor="disabled-example">Disabled</label>
             </Text>
             <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
               disabled
               id="disabled-example"
               onChange={onChange}
@@ -32,6 +39,7 @@ export default function StatesStory() {
               <label htmlFor="read-only-example">Read-only</label>
             </Text>
             <TextInput
+              customValidity={invalid ? 'invalid' : undefined}
               id="read-only-example"
               readOnly
               onChange={onChange}