@coinbase/cds-web 8.43.2 → 8.44.1

package/esm/overlays/tray/Tray.js

@@ -1,45 +1,96 @@
-import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { DISMISSAL_DRAG_THRESHOLD, DISMISSAL_VELOCITY_THRESHOLD } from '@coinbase/cds-common/animation/drawer';
 import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
-import { m, useAnimation } from 'framer-motion';
+import { domMax, LazyMotion, m as motion, useAnimate, useDragControls } from 'framer-motion';
 import { IconButton } from '../../buttons';
+import { cx } from '../../cx';
+import { useDimensions } from '../../hooks/useDimensions';
 import { useScrollBlocker } from '../../hooks/useScrollBlocker';
+import { useTheme } from '../../hooks/useTheme';
 import { Box, HStack } from '../../layout';
 import { VStack } from '../../layout/VStack';
 import { Text } from '../../typography/Text';
 import { FocusTrap } from '../FocusTrap';
+import { HandleBar } from '../handlebar/HandleBar';
 import { Overlay } from '../overlay/Overlay';
 import { Portal } from '../Portal';
 import { trayContainerId } from '../PortalProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Animation constants
-const ANIMATIONS = {
-  SLIDE_IN: {
-    y: 0,
+const DISMISSAL_DRAG_PERCENTAGE = 0.4;
+const MotionVStack = motion(Box);
+
+/**
+ * Conditionally wraps children in LazyMotion with domMax features to support dragging.
+ */
+const DragMotionProvider = _ref => {
+  let {
+    enabled,
+    children
+  } = _ref;
+  if (!enabled) {
+    return children;
+  }
+  return /*#__PURE__*/_jsx(LazyMotion, {
+    features: domMax,
+    children: children
+  });
+};
+const trayHeaderBorderBaseCss = "trayHeaderBorderBaseCss-t552jyb";
+const trayHeaderBorderVisibleCss = "trayHeaderBorderVisibleCss-tx59ve0";
+const trayContainerBaseCss = "trayContainerBaseCss-t1gubbn2";
+const trayContainerPinBottomCss = "trayContainerPinBottomCss-ttp17ir";
+const trayContainerPinTopCss = "trayContainerPinTopCss-t1ql0a7m";
+const trayContainerPinLeftCss = "trayContainerPinLeftCss-tddpnpb";
+const trayContainerPinRightCss = "trayContainerPinRightCss-t17d10kx";
+
+/**
+ * Static class names for Tray component parts.
+ * Use these selectors to target specific elements with CSS.
+ */
+export const trayClassNames = {
+  /** Root container element */
+  root: 'cds-Tray',
+  /** Overlay backdrop element */
+  overlay: 'cds-Tray-overlay',
+  /** Animated sliding container element */
+  container: 'cds-Tray-container',
+  /** Header section element */
+  header: 'cds-Tray-header',
+  /** Title text element */
+  title: 'cds-Tray-title',
+  /** Content area element */
+  content: 'cds-Tray-content',
+  /** Handle bar container element, only rendered when showHandleBar is true and pin is "bottom" */
+  handleBar: 'cds-Tray-handleBar',
+  /** Handle bar indicator element, only rendered when showHandleBar is true and pin is "bottom" */
+  handleBarHandle: 'cds-Tray-handleBarHandle',
+  /** Close button element */
+  closeButton: 'cds-Tray-closeButton'
+};
+
+// Extended ref type for web implementation
+
+const animationConfig = {
+  slideIn: {
     transition: {
       duration: 0.3
     }
   },
-  SLIDE_OUT: {
-    y: '100%',
+  slideOut: {
     transition: {
       duration: 0.3
     }
-  },
-  SNAP_BACK: {
-    y: 0,
-    transition: {
-      type: 'spring',
-      stiffness: 300,
-      damping: 30
-    }
   }
 };
-
-// Extended props for web-specific functionality
-
-// Extended ref type for web implementation
-
-export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref, ref) {
+const overlayContentContextValue = {
+  isDrawer: true
+};
+export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref2, ref) {
   let {
     children,
     header,
@@ -50,146 +101,282 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
     onBlur,
     onClose,
     onCloseComplete,
-    preventDismiss = false,
+    preventDismiss,
     id,
     role = 'dialog',
     accessibilityLabel = 'Tray',
-    focusTabIndexElements = false,
+    accessibilityLabelledBy,
+    focusTabIndexElements,
     restoreFocusOnUnmount = true,
     closeAccessibilityLabel = 'Close',
-    closeAccessibilityHint
-  } = _ref;
+    closeAccessibilityHint,
+    styles,
+    classNames,
+    zIndex,
+    pin = 'bottom',
+    showHandleBar,
+    hideCloseButton
+  } = _ref2;
+  const theme = useTheme();
   const [isOpen, setIsOpen] = useState(true);
+  const [hasScrolledDown, setHasScrolledDown] = useState(false);
   const trayRef = useRef(null);
-  const controls = useAnimation();
+  const {
+    observe: observeTraySize,
+    height: trayHeight
+  } = useDimensions();
+  const contentRef = useRef(null);
+  const [scope, animate] = useAnimate();
+  const dragControls = useDragControls();
+  const isSideTray = pin === 'right' || pin === 'left';
+  const horizontalPadding = useMemo(() => pin !== 'bottom' || showHandleBar ? {
+    base: 4,
+    phone: 3
+  } : 6, [showHandleBar, pin]);
   const blockScroll = useScrollBlocker();
-
-  // prevent body scroll when modal is open
   useEffect(() => {
     blockScroll(isOpen);
-    return () => {
-      blockScroll(false);
-    };
+    return () => blockScroll(false);
   }, [isOpen, blockScroll]);
-
-  // Setup initial animation
   useEffect(() => {
-    controls.start(ANIMATIONS.SLIDE_IN);
-  }, [controls]);
-
-  // Unified dismissal function
+    onVisibilityChange === null || onVisibilityChange === void 0 || onVisibilityChange('visible');
+    return () => onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange('hidden');
+  }, [onVisibilityChange]);
   const handleClose = useCallback(() => {
-    // Run the animation
-    controls.start(ANIMATIONS.SLIDE_OUT).then(() => {
-      // Then set state after animation completes
+    if (!scope.current) return;
+    animate(scope.current, isSideTray ? {
+      x: pin === 'right' ? '100%' : '-100%'
+    } : {
+      y: pin === 'bottom' ? '100%' : '-100%'
+    }, animationConfig.slideOut.transition).then(() => {
       setIsOpen(false);
       onClose === null || onClose === void 0 || onClose();
       onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete();
     });
-  }, [onClose, onCloseComplete, controls]);
-  const handleOverlayPress = useCallback(() => {
+  }, [animate, scope, isSideTray, pin, onClose, onCloseComplete]);
+  const handleSwipeClose = useCallback(() => {
+    if (!scope.current) return;
+    animate(scope.current, {
+      y: '100%'
+    }, {
+      duration: 0.15,
+      ease: 'easeOut'
+    }).then(() => {
+      setIsOpen(false);
+      onBlur === null || onBlur === void 0 || onBlur();
+      onClose === null || onClose === void 0 || onClose();
+      onCloseComplete === null || onCloseComplete === void 0 || onCloseComplete();
+    });
+  }, [animate, scope, onBlur, onClose, onCloseComplete]);
+  useImperativeHandle(ref, () => ({
+    close: handleClose
+  }), [handleClose]);
+  const handleOverlayClick = useCallback(() => {
     if (!preventDismiss) {
       onBlur === null || onBlur === void 0 || onBlur();
       handleClose();
     }
   }, [handleClose, preventDismiss, onBlur]);
+  const handleDragEnd = useCallback((_event, info) => {
+    const offsetY = info.offset.y;
+    const velocityY = info.velocity.y;
+    const dragThreshold = trayHeight ? Math.min(trayHeight * DISMISSAL_DRAG_PERCENTAGE, DISMISSAL_DRAG_THRESHOLD) : DISMISSAL_DRAG_THRESHOLD;
 
-  // Use imperative handle for cleaner ref implementation
-  useImperativeHandle(ref, () => ({
-    close: handleClose
-  }), [handleClose]);
+    // Close if dragged past threshold OR if flicked down with high velocity
+    if (offsetY >= dragThreshold || velocityY >= DISMISSAL_VELOCITY_THRESHOLD) {
+      handleSwipeClose();
+    } else {
+      // Snap back to closed position
+      animate(scope.current, {
+        y: 0
+      }, {
+        duration: 0.2,
+        ease: 'easeOut'
+      });
+    }
+  }, [trayHeight, handleSwipeClose, animate, scope]);
+  const initialAnimationValue = useMemo(() => isSideTray ? {
+    x: pin === 'right' ? '100%' : '-100%'
+  } : {
+    y: pin === 'bottom' ? '100%' : '-100%'
+  }, [isSideTray, pin]);
+  const animateValue = useMemo(() => isSideTray ? {
+    x: 0
+  } : {
+    y: 0
+  }, [isSideTray]);
 
-  // Handle visibility changes
+  // Handle bar only shows for bottom-pinned trays (matching mobile behavior)
+  const shouldShowHandleBar = showHandleBar && pin === 'bottom';
+  const shouldShrinkPadding = pin !== 'bottom' || showHandleBar;
+  const shouldShowCloseButton = !preventDismiss && !(hideCloseButton !== null && hideCloseButton !== void 0 ? hideCloseButton : shouldShowHandleBar);
+  const shouldShowTitle = title || shouldShowCloseButton;
   useEffect(() => {
-    onVisibilityChange === null || onVisibilityChange === void 0 || onVisibilityChange('visible');
-    return () => {
-      onVisibilityChange === null || onVisibilityChange === void 0 || onVisibilityChange('hidden');
+    const content = contentRef.current;
+    if (!content || !shouldShrinkPadding) return;
+    const handleScroll = () => {
+      setHasScrolledDown(content.scrollTop > 0);
     };
-  }, [onVisibilityChange]);
-  const overlayContentContextValue = {
-    isDrawer: true
-  };
+    content.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => content.removeEventListener('scroll', handleScroll);
+  }, [shouldShrinkPadding]);
+  const headerContent = useMemo(() => typeof header === 'function' ? header({
+    handleClose
+  }) : header, [header, handleClose]);
+  const content = useMemo(() => typeof children === 'function' ? children({
+    handleClose
+  }) : children, [children, handleClose]);
+  const footerContent = useMemo(() => typeof footer === 'function' ? footer({
+    handleClose
+  }) : footer, [footer, handleClose]);
+  const trayContainerPinCss = useMemo(() => {
+    switch (pin) {
+      case 'top':
+        return trayContainerPinTopCss;
+      case 'left':
+        return trayContainerPinLeftCss;
+      case 'right':
+        return trayContainerPinRightCss;
+      case 'bottom':
+      default:
+        return trayContainerPinBottomCss;
+    }
+  }, [pin]);
   if (!isOpen) return null;
   return /*#__PURE__*/_jsx(OverlayContentContext.Provider, {
     value: overlayContentContextValue,
     children: /*#__PURE__*/_jsx(Portal, {
       containerId: trayContainerId,
       children: /*#__PURE__*/_jsxs(Box, {
+        ref: trayRef,
+        className: cx(trayClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
         height: "100vh",
         pin: "all",
         position: "fixed",
+        style: styles === null || styles === void 0 ? void 0 : styles.root,
         width: "100vw",
+        zIndex: zIndex,
         children: [/*#__PURE__*/_jsx(Overlay, {
-          onClick: handleOverlayPress,
+          className: cx(trayClassNames.overlay, classNames === null || classNames === void 0 ? void 0 : classNames.overlay),
+          onClick: handleOverlayClick,
+          style: styles === null || styles === void 0 ? void 0 : styles.overlay,
           testID: "tray-overlay"
-        }), /*#__PURE__*/_jsx(FocusTrap, {
-          focusTabIndexElements: focusTabIndexElements,
-          onEscPress: preventDismiss ? undefined : handleClose,
-          restoreFocusOnUnmount: restoreFocusOnUnmount,
-          children: /*#__PURE__*/_jsx(m.div, {
-            animate: controls,
-            initial: {
-              y: '100%'
-            },
-            style: {
-              width: '100%',
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              zIndex: 1,
-              maxHeight: verticalDrawerPercentageOfView,
-              overflowY: 'auto'
-            },
-            tabIndex: 0,
-            children: /*#__PURE__*/_jsx(VStack, {
-              ref: trayRef,
+        }), /*#__PURE__*/_jsx(DragMotionProvider, {
+          enabled: !preventDismiss,
+          children: /*#__PURE__*/_jsx(FocusTrap, {
+            focusTabIndexElements: focusTabIndexElements,
+            onEscPress: preventDismiss ? undefined : handleClose,
+            restoreFocusOnUnmount: restoreFocusOnUnmount,
+            children: /*#__PURE__*/_jsx(MotionVStack, {
+              ref: scope,
               accessibilityLabel: accessibilityLabel,
-              alignItems: "center",
+              accessibilityLabelledBy: accessibilityLabelledBy,
+              animate: animateValue,
               "aria-modal": "true",
-              background: "bg",
-              borderTopLeftRadius: 400,
-              borderTopRightRadius: 400,
+              bordered: theme.activeColorScheme === 'dark',
+              className: cx(trayContainerBaseCss, trayContainerPinCss, trayClassNames.container, classNames === null || classNames === void 0 ? void 0 : classNames.container),
               "data-testid": "tray",
-              height: "100%",
+              drag: !preventDismiss ? 'y' : undefined,
+              dragConstraints: {
+                top: 0,
+                bottom: 0
+              },
+              dragControls: dragControls,
+              dragElastic: {
+                top: 0.5,
+                bottom: 0.5
+              },
+              dragListener: false,
+              elevation: 2,
               id: id,
-              justifyContent: "center",
-              minHeight: 200,
+              initial: initialAnimationValue,
               onClick: e => e.stopPropagation(),
+              onDragEnd: !preventDismiss ? handleDragEnd : undefined,
+              pin: pin,
               role: role,
+              style: _objectSpread({
+                maxHeight: isSideTray ? undefined : verticalDrawerPercentageOfView,
+                touchAction: !preventDismiss && pin === 'bottom' ? 'none' : undefined
+              }, styles === null || styles === void 0 ? void 0 : styles.container),
+              tabIndex: 0,
+              transition: animationConfig.slideIn.transition,
+              width: isSideTray ? 'min(400px, 100vw)' : undefined,
               children: /*#__PURE__*/_jsxs(VStack, {
-                maxWidth: "70em",
-                paddingX: 6,
+                ref: observeTraySize,
+                flexGrow: 1,
+                maxWidth: isSideTray ? undefined : '70em',
+                minHeight: 0,
                 width: "100%",
-                children: [header, /*#__PURE__*/_jsxs(HStack, {
-                  alignItems: "center",
-                  justifyContent: title ? 'space-between' : 'flex-end',
-                  paddingBottom: 1,
-                  paddingTop: 3,
-                  position: "sticky",
-                  top: 0,
-                  children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-                    font: "title3",
-                    children: title
-                  }) : title), !preventDismiss && /*#__PURE__*/_jsx(IconButton, {
-                    transparent: true,
+                children: [(shouldShowTitle || headerContent || shouldShowHandleBar) && /*#__PURE__*/_jsxs(VStack, {
+                  className: cx(shouldShrinkPadding && trayHeaderBorderBaseCss, shouldShrinkPadding && hasScrolledDown && trayHeaderBorderVisibleCss, trayClassNames.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
+                  flexShrink: 0,
+                  overflow: "hidden",
+                  paddingBottom: shouldShrinkPadding ? 0.75 : 1,
+                  paddingTop: !shouldShrinkPadding ? 3 : shouldShowHandleBar ? 0 : isSideTray ? 4 : 2,
+                  style: styles === null || styles === void 0 ? void 0 : styles.header,
+                  children: [shouldShowHandleBar && (preventDismiss ? /*#__PURE__*/_jsx(HandleBar, {
+                    classNames: {
+                      root: cx(trayClassNames.handleBar, classNames === null || classNames === void 0 ? void 0 : classNames.handleBar),
+                      handle: cx(trayClassNames.handleBarHandle, classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle)
+                    },
+                    styles: {
+                      root: styles === null || styles === void 0 ? void 0 : styles.handleBar,
+                      handle: styles === null || styles === void 0 ? void 0 : styles.handleBarHandle
+                    }
+                  }) : /*#__PURE__*/_jsx(HandleBar, {
                     accessibilityHint: closeAccessibilityHint,
                     accessibilityLabel: closeAccessibilityLabel,
-                    name: "close",
-                    onClick: handleClose,
-                    testID: "tray-close-button"
-                  })]
+                    classNames: {
+                      root: cx(trayClassNames.handleBar, classNames === null || classNames === void 0 ? void 0 : classNames.handleBar),
+                      handle: cx(trayClassNames.handleBarHandle, classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle)
+                    },
+                    onClose: handleClose,
+                    onPointerDown: e => {
+                      dragControls.start(e);
+                    },
+                    styles: {
+                      root: styles === null || styles === void 0 ? void 0 : styles.handleBar,
+                      handle: _objectSpread(_objectSpread({}, styles === null || styles === void 0 ? void 0 : styles.handleBarHandle), {}, {
+                        touchAction: 'none'
+                      })
+                    }
+                  })), shouldShowTitle && /*#__PURE__*/_jsxs(HStack, {
+                    alignItems: isSideTray ? 'flex-start' : 'center',
+                    justifyContent: title ? 'space-between' : 'flex-end',
+                    paddingX: horizontalPadding,
+                    children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+                      className: cx(trayClassNames.title, classNames === null || classNames === void 0 ? void 0 : classNames.title),
+                      font: "title3",
+                      style: styles === null || styles === void 0 ? void 0 : styles.title,
+                      children: title
+                    }) : title), shouldShowCloseButton && /*#__PURE__*/_jsx(IconButton, {
+                      transparent: true,
+                      accessibilityHint: closeAccessibilityHint,
+                      accessibilityLabel: closeAccessibilityLabel,
+                      className: cx(trayClassNames.closeButton, classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
+                      margin: isSideTray ? -1.5 : undefined,
+                      name: "close",
+                      onClick: handleClose,
+                      style: styles === null || styles === void 0 ? void 0 : styles.closeButton,
+                      testID: "tray-close-button"
+                    })]
+                  }), headerContent]
                 }), /*#__PURE__*/_jsx(VStack, {
+                  ref: contentRef,
+                  className: cx(trayClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+                  flexGrow: 1,
                   minHeight: 0,
-                  paddingBottom: 2,
-                  paddingTop: 1,
-                  style: {
+                  overflow: "hidden",
+                  paddingBottom: shouldShrinkPadding ? 0 : 2,
+                  paddingTop: shouldShrinkPadding ? 0 : 1,
+                  paddingX: horizontalPadding,
+                  style: _objectSpread({
                     overflowY: 'auto'
-                  },
-                  children: typeof children === 'function' ? children({
-                    handleClose
-                  }) : children
-                }), footer]
+                  }, styles === null || styles === void 0 ? void 0 : styles.content),
+                  children: content
+                }), footerContent]
               })
             })
           })
@@ -197,4 +384,5 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       })
     })
   });
-}));
+}));
+import "./Tray.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.43.2",
+  "version": "8.44.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.43.2",
+    "@coinbase/cds-common": "^8.44.1",
     "@coinbase/cds-icons": "^5.11.0",
     "@coinbase/cds-illustrations": "^4.31.0",
     "@coinbase/cds-lottie-files": "^3.3.4",