@sanity/ui 2.0.0-beta.3 → 2.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.5",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",

package/src/core/components/menu/__workshop__/selectedItem.tsx

@@ -16,8 +16,10 @@ const POPOVER_PROPS: MenuButtonProps['popover'] = {
   matchReferenceWidth: true,
 }
 
+const INITIAL_INDEX = 1
+
 export default function SelectedItemStory() {
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
 
   return (
     <Box padding={[4, 5, 6]}>
@@ -26,12 +28,13 @@ export default function SelectedItemStory() {
 
         <MenuButton
           button={<Button text="Open menu" />}
-          id="selected-item-example"
+          id="menu-button"
           menu={
             <Menu>
               <MenuItem
                 icon={SearchIcon}
                 iconRight={selectedIndex === 0 ? CheckmarkIcon : undefined}
+                id="menu-item-1"
                 onClick={() => setSelectedIndex(0)}
                 pressed={selectedIndex === 0}
                 selected={selectedIndex === 0}
@@ -40,6 +43,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ClockIcon}
                 iconRight={selectedIndex === 1 ? CheckmarkIcon : undefined}
+                id="menu-item-2"
                 onClick={() => setSelectedIndex(1)}
                 pressed={selectedIndex === 1}
                 selected={selectedIndex === 1}
@@ -49,6 +53,7 @@ export default function SelectedItemStory() {
               <MenuItem
                 icon={ExpandIcon}
                 iconRight={selectedIndex === 2 ? CheckmarkIcon : undefined}
+                id="menu-item-3"
                 onClick={() => setSelectedIndex(2)}
                 pressed={selectedIndex === 2}
                 selected={selectedIndex === 2}

package/src/core/components/menu/menuButton.tsx

@@ -99,6 +99,16 @@ export const MenuButton = forwardRef(function MenuButton(
     setShouldFocus(null)
   }, [])
 
+  // Prevent mouse event propagation when the menu is open.
+  // This is to ensure that `handleBlur` isn't triggered when clicking the menu button whilst open,
+  // which can lead to `setOpen` being triggered multiple times (once by `handleBlur`, and again by `handleButtonClick`).
+  const handleMouseDown = useCallback(
+    (event: PointerEvent) => {
+      if (open) event.preventDefault()
+    },
+    [open],
+  )
+
   const handleButtonKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {
     // On `ArrowDown`, `Enter` and `Space`
     // - Opens menu and moves focus to first menuitem
@@ -231,13 +241,14 @@ export const MenuButton = forwardRef(function MenuButton(
             id,
             onClick: handleButtonClick,
             onKeyDown: handleButtonKeyDown,
+            onMouseDown: handleMouseDown,
             'aria-haspopup': true,
             'aria-expanded': open,
             ref: setButtonRef,
             selected: open,
           })
         : null,
-    [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef],
+    [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open, setButtonRef],
   )
 
   const popoverProps: MenuButtonProps['popover'] = useMemo(

package/src/core/constants.ts

@@ -1,3 +1,5 @@
+import {Transition, Variant} from 'framer-motion'
+
 /**
  * @internal
  */
@@ -8,6 +10,22 @@ export const EMPTY_ARRAY: never[] = []
  */
 export const EMPTY_RECORD: Record<string, never> = {}
 
+/**
+ * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
+ * @internal
+ */
+export const POPOVER_MOTION_PROPS: {
+  animate: Variant
+  initial: Variant
+  exit: Variant
+  transition: Transition
+} = {
+  initial: {opacity: 0.5, scale: 0.97},
+  animate: {opacity: 1, scale: 1},
+  exit: {opacity: 0, scale: 0.97},
+  transition: {duration: 0.4, type: 'spring'},
+}
+
 /**
  * @internal
  * @deprecated No longer used.

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/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_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,14 @@ 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;
+`
 
 /**
  * @internal
@@ -30,13 +32,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 +55,7 @@ export const PopoverCard = memo(
   ) {
     const {
       __unstable_margins: marginsProp,
+      animate,
       arrow,
       arrowRef,
       arrowX,
@@ -57,6 +63,8 @@ export const PopoverCard = memo(
       children,
       padding,
       placement,
+      originX,
+      originY,
       overflow,
       radius,
       scheme,
@@ -84,14 +92,16 @@ export const PopoverCard = memo(
 
     const rootStyle: CSSProperties = useMemo(
       () => ({
+        left: x,
+        originX,
+        originY,
         position: strategy,
         top: y,
-        left: x,
         width,
         zIndex,
         ...style,
       }),
-      [strategy, style, width, x, y, zIndex],
+      [originX, originY, strategy, style, width, x, y, zIndex],
     )
 
     const arrowStyle: CSSProperties = useMemo(
@@ -105,9 +115,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 +126,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 +143,7 @@ export const PopoverCard = memo(
             radius={DEFAULT_POPOVER_ARROW_RADIUS}
           />
         )}
-      </Root>
+      </MotionCard>
     )
   }),
 )

package/src/core/primitives/tooltip/tooltip.tsx

@@ -10,7 +10,7 @@ import {
   RootBoundary,
 } from '@floating-ui/react-dom'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {AnimatePresence, motion} from 'framer-motion'
+import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
   forwardRef,
@@ -19,27 +19,30 @@ import {
   useMemo,
   useRef,
   useState,
-  CSSProperties,
   ForwardedRef,
   useId,
 } from 'react'
 import styled from 'styled-components'
 import {useArrayProp, useForwardedRef} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
+import {origin} from '../../middleware/origin'
 import {useTheme_v2} from '../../theme'
 import {Placement} from '../../types'
-import {Arrow, Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
-import {Card} from '../card'
+import {
+  ConditionalWrapper,
+  Layer,
+  LayerProps,
+  Portal,
+  useBoundaryElement,
+  usePortal,
+} from '../../utils'
 import {Delay} from '../types'
-import {ConditionalWrapper} from './conditionalWrapper'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
-  DEFAULT_TOOLTIP_ARROW_HEIGHT,
-  DEFAULT_TOOLTIP_ARROW_RADIUS,
-  DEFAULT_TOOLTIP_ARROW_WIDTH,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
+import {TooltipCard} from './tooltipCard'
 import {useTooltipDelayGroup} from './tooltipDelayGroup'
 
 /**
@@ -98,6 +101,7 @@ export const Tooltip = forwardRef(function Tooltip(
   const boundaryElementContext = useBoundaryElement()
   const {layer} = useTheme_v2()
   const {
+    animate = false,
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext?.element,
     children: childProp,
@@ -113,7 +117,6 @@ export const Tooltip = forwardRef(function Tooltip(
     shadow = 2,
     zOffset = layer.tooltip.zOffset,
     delay,
-    animate = false,
     ...restProps
   } = props
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
@@ -168,8 +171,14 @@ export const Tooltip = forwardRef(function Tooltip(
       ret.push(arrow({element: arrowRef, padding: DEFAULT_TOOLTIP_PADDING}))
     }
 
+    // Determine the origin to scale from.
+    // Must be placed after `@sanity/ui/size` and `shift` middleware.
+    if (animate) {
+      ret.push(origin)
+    }
+
     return ret
-  }, [arrowProp, boundaryElement, fallbackPlacements])
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements])
 
   const {floatingStyles, placement, middlewareData, refs, update} = useFloating({
     middleware,
@@ -180,15 +189,8 @@ export const Tooltip = forwardRef(function Tooltip(
   const arrowX = middlewareData.arrow?.x
   const arrowY = middlewareData.arrow?.y
 
-  const arrowStyle: CSSProperties = useMemo(
-    () => ({
-      left: arrowX !== null ? arrowX : undefined,
-      top: arrowY !== null ? arrowY : undefined,
-      right: undefined,
-      bottom: undefined,
-    }),
-    [arrowX, arrowY],
-  )
+  const originX = middlewareData['@sanity/ui/origin']?.originX
+  const originY = middlewareData['@sanity/ui/origin']?.originY
 
   const tooltipId = useId()
   const [isOpen, setIsOpen] = useDelayedState(false)
@@ -386,7 +388,7 @@ export const Tooltip = forwardRef(function Tooltip(
 
   if (disabled) return child
 
-  const root = (
+  const tooltip = (
     <Root
       data-ui="Tooltip"
       {...restProps}
@@ -395,62 +397,50 @@ export const Tooltip = forwardRef(function Tooltip(
       zOffset={zOffset}
       $maxWidth={tooltipWidth}
     >
-      <ConditionalWrapper
-        condition={animate} // Add animation wrapper if it should animate
-        wrapper={(children) => (
-          <motion.div
-            initial={{opacity: 0.5, scale: 0.95}}
-            animate={{opacity: 1, scale: 1}}
-            exit={{opacity: 0, scale: 0.95}}
-            transition={{duration: 0.3, type: 'spring'}}
-          >
-            {children}
-          </motion.div>
-        )}
+      <TooltipCard
+        {...restProps}
+        animate={animate}
+        arrow={arrowProp}
+        arrowRef={setArrow}
+        arrowX={arrowX}
+        arrowY={arrowY}
+        originX={originX}
+        originY={originY}
+        padding={padding}
+        placement={placement}
+        radius={radius}
+        ref={setFloating}
+        scheme={scheme}
+        shadow={shadow}
       >
-        <Card
-          data-ui="Tooltip__card"
-          data-placement={placement}
-          padding={padding}
-          radius={radius}
-          scheme={scheme}
-          shadow={shadow}
-        >
-          {content}
-          {arrowProp && (
-            <Arrow
-              ref={setArrow}
-              style={arrowStyle}
-              width={DEFAULT_TOOLTIP_ARROW_WIDTH}
-              height={DEFAULT_TOOLTIP_ARROW_HEIGHT}
-              radius={DEFAULT_TOOLTIP_ARROW_RADIUS}
-            />
-          )}
-        </Card>
-      </ConditionalWrapper>
+        {content}
+      </TooltipCard>
     </Root>
   )
 
   return (
     <>
-      {child}
+      {/* the tooltip */}
       <ConditionalWrapper
         condition={animate}
-        wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>} // Add AnimatePresence if it should animate
+        wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>}
       >
         {showTooltip && (
           <ConditionalWrapper
-            condition={!!portalProp} // Add portal if portalProp is set
+            condition={!!portalProp}
             wrapper={(children) => (
               <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
                 {children}
               </Portal>
             )}
           >
-            {root}
+            {tooltip}
           </ConditionalWrapper>
         )}
       </ConditionalWrapper>
+
+      {/* the referred element */}
+      {child}
     </>
   )
 })