@sanity/ui 2.0.0-alpha.24 → 2.0.0-alpha.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.24",
+  "version": "2.0.0-alpha.26",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/components/dialog/dialog.tsx

@@ -16,6 +16,8 @@ import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {BORDER_OFFSET_X} from './constants'
 import {
+  animationDialogStyle,
+  AnimationDialogStyleProps,
   dialogStyle,
   responsiveDialogPositionStyle,
   ResponsiveDialogPositionStyleProps,
@@ -48,6 +50,13 @@ export interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProp
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey
   zOffset?: number | number[]
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 interface DialogCardProps extends ResponsiveWidthProps {
@@ -94,11 +103,9 @@ function isTargetWithinScope(
   )
 }
 
-const Root = styled(Layer)<ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps>(
-  responsivePaddingStyle,
-  dialogStyle,
-  responsiveDialogPositionStyle,
-)
+const Root = styled(Layer)<
+  ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
+>(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
 
 const DialogContainer = styled(Container)`
   &:not([hidden]) {
@@ -382,6 +389,7 @@ export const Dialog = forwardRef(function Dialog(
     scheme,
     width: widthProp = 0,
     zOffset: zOffsetProp = dialog.zOffset || theme.sanity.layer?.dialog.zOffset,
+    animate = false,
     ...restProps
   } = props
   const portal = usePortal()
@@ -470,6 +478,7 @@ export const Dialog = forwardRef(function Dialog(
         ref={ref}
         role="dialog"
         zOffset={zOffset}
+        animate={animate}
       >
         <div ref={preDivRef} tabIndex={0} />
         <DialogCard

package/src/components/dialog/styles.ts

@@ -1,3 +1,4 @@
+import {css} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
 import {CSSObject} from '../../types/styled'
@@ -36,3 +37,41 @@ export function responsiveDialogPositionStyle(
 
   return _responsive(media, props.$position, (position) => ({'&&': {position}}))
 }
+
+/**
+ * @internal
+ */
+export interface AnimationDialogStyleProps {
+  animate: boolean
+}
+
+export function animationDialogStyle(props: AnimationDialogStyleProps): ReturnType<typeof css> {
+  if (!props.animate) return css``
+
+  return css`
+    @keyframes zoomIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    animation: fadeIn 200ms ease-out;
+    // Animates the dialog card.
+    & > [data-ui='DialogCard'] {
+      animation: zoomIn 200ms ease-out;
+    }
+  `
+}

package/src/primitives/tooltip/conditionalWrapper.tsx

@@ -0,0 +1,15 @@
+export function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: (children: React.ReactNode) => React.ReactNode
+}): React.ReactNode {
+  if (!condition) {
+    return children
+  }
+
+  return wrapper(children)
+}

package/src/primitives/tooltip/constants.ts

@@ -3,16 +3,16 @@ import {Placement} from '@floating-ui/react-dom'
 export const DEFAULT_TOOLTIP_DISTANCE = 4
 export const DEFAULT_TOOLTIP_PADDING = 4
 export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  top: ['bottom', 'left', 'right'],
-  'top-start': ['bottom-start', 'left-start', 'right-start'],
-  'top-end': ['bottom-end', 'left-end', 'right-end'],
-  bottom: ['top', 'left', 'right'],
-  'bottom-start': ['top-start', 'left-start', 'right-start'],
-  'bottom-end': ['top-end', 'left-end', 'right-end'],
-  left: ['right', 'top', 'bottom'],
-  'left-start': ['right-start', 'top-start', 'bottom-start'],
-  'left-end': ['right-end', 'top-end', 'bottom-end'],
-  right: ['left', 'top', 'bottom'],
-  'right-start': ['left-start', 'top-start', 'bottom-start'],
-  'right-end': ['left-end', 'top-end', 'bottom-end'],
+  top: ['top-end', 'top-start', 'bottom', 'left', 'right'],
+  'top-start': ['top', 'top-end', 'bottom-start', 'left-start', 'right-start'],
+  'top-end': ['top', 'top-start', 'bottom-end', 'left-end', 'right-end'],
+  bottom: ['bottom-end', 'bottom-start', 'top', 'left', 'right'],
+  'bottom-start': ['bottom', 'bottom-end', 'top-start', 'left-start', 'right-start'],
+  'bottom-end': ['bottom', 'bottom-start', 'top-end', 'left-end', 'right-end'],
+  left: ['left-end', 'left-start', 'right', 'top', 'bottom'],
+  'left-start': ['left', 'left-end', 'right-start', 'top-start', 'bottom-start'],
+  'left-end': ['left', 'left-start', 'right-end', 'top-end', 'bottom-end'],
+  right: ['right-end', 'right-start', 'left', 'top', 'bottom'],
+  'right-start': ['right', 'right-end', 'left-start', 'top-start', 'bottom-start'],
+  'right-end': ['right', 'right-start', 'left-end', 'top-end', 'bottom-end'],
 }

package/src/primitives/tooltip/tooltip.tsx

@@ -9,6 +9,7 @@ import {
   Middleware,
   RootBoundary,
 } from '@floating-ui/react-dom'
+import {AnimatePresence, motion} from 'framer-motion'
 import {
   cloneElement,
   forwardRef,
@@ -30,6 +31,7 @@ import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {Card} from '../card'
 import {Delay} from '../types'
+import {ConditionalWrapper} from './conditionalWrapper'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
@@ -57,13 +59,23 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
   /**
-   * @public Adds a delay to open or close the tooltip.  Defaults to 0.
+   * Adds a delay to open or close the tooltip.
    *
    * If only a `number` is passed, it will be used for both opening and closing.
    *
    * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
+   * @defaultValue 0
    */
   delay?: Delay
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 const Root = styled(Layer)<{$maxWidth: number}>`
@@ -97,6 +109,7 @@ export const Tooltip = forwardRef(function Tooltip(
     shadow = 2,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
     delay,
+    animate = false,
     ...restProps
   } = props
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
@@ -383,35 +396,53 @@ export const Tooltip = forwardRef(function Tooltip(
       zOffset={zOffset}
       $maxWidth={tooltipWidth}
     >
-      <Card
-        data-ui="Tooltip__card"
-        data-placement={placement}
-        padding={padding}
-        radius={3}
-        scheme={scheme}
-        shadow={shadow}
+      <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.4, type: 'spring'}}}
+          >
+            {children}
+          </motion.div>
+        )}
       >
-        {content}
-        {arrowProp && <TooltipArrow ref={setArrow} style={arrowStyle} />}
-      </Card>
+        <Card
+          data-ui="Tooltip__card"
+          data-placement={placement}
+          padding={padding}
+          radius={3}
+          scheme={scheme}
+          shadow={shadow}
+        >
+          {content}
+          {arrowProp && <TooltipArrow ref={setArrow} style={arrowStyle} />}
+        </Card>
+      </ConditionalWrapper>
     </Root>
   )
 
   return (
     <>
       {child}
-
-      {showTooltip && (
-        <>
-          {portalProp ? (
-            <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
-              {root}
-            </Portal>
-          ) : (
-            root
-          )}
-        </>
-      )}
+      <ConditionalWrapper
+        condition={animate}
+        wrapper={(children) => <AnimatePresence>{children}</AnimatePresence>} // Add AnimatePresence if it should animate
+      >
+        {showTooltip && (
+          <ConditionalWrapper
+            condition={!!portalProp} // Add portal if portalProp is set
+            wrapper={(children) => (
+              <Portal __unstable_name={typeof portalProp === 'string' ? portalProp : undefined}>
+                {children}
+              </Portal>
+            )}
+          >
+            {root}
+          </ConditionalWrapper>
+        )}
+      </ConditionalWrapper>
     </>
   )
 })

package/src/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -10,11 +10,13 @@ import {TooltipDelayGroupContextValue} from './types'
 export interface TooltipDelayGroupProviderProps {
   children?: React.ReactNode
   /**
-   * @public Handles the delays to open or close a tooltip inside a group
+   * Handles the delays to open or close a tooltip inside a group
    *
    * If only a `number` is passed, it will be used for both opening and closing.
    *
    * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
    */
   delay: Delay
 }