@coinbase/cds-web 8.44.0 → 8.44.2

package/dts/visualizations/ProgressCircle.d.ts

@@ -24,54 +24,28 @@ export type ProgressCircleBaseProps = ProgressBaseProps & {
   contentNode?: React.ReactNode;
 };
 export type ProgressCircleProps = ProgressCircleBaseProps & {
-  /**
-   * Custom styles for the progress circle root.
-   */
   style?: React.CSSProperties;
-  /**
-   * Custom class name for the progress circle root.
-   */
   className?: string;
-  /**
-   * Custom styles for the progress circle.
-   */
+  /** Custom styles for individual elements of the ProgressCircle component */
   styles?: {
-    /**
-     * Custom styles for the progress circle root.
-     */
+    /** Root element */
     root?: React.CSSProperties;
-    /**
-     * Custom styles for the progress circle svg.
-     */
+    /** SVG element */
     svg?: React.CSSProperties;
-    /**
-     * Custom styles for the background circle.
-     */
+    /** Background circle element */
     circle?: React.CSSProperties;
-    /**
-     * Custom styles for the foreground circle.
-     */
+    /** Foreground progress circle element */
     progress?: React.CSSProperties;
   };
-  /**
-   * Custom class names for the progress circle.
-   */
+  /** Custom class names for individual elements of the ProgressCircle component */
   classNames?: {
-    /**
-     * Class name for the progress circle root.
-     */
+    /** Root element */
     root?: string;
-    /**
-     * Class name for the progress circle svg.
-     */
+    /** SVG element */
     svg?: string;
-    /**
-     * Class name for the progress circle background circle.
-     */
+    /** Background circle element */
     circle?: string;
-    /**
-     * Class name for the progress circle foreground circle.
-     */
+    /** Foreground progress circle element */
     progress?: string;
   };
 };
@@ -118,54 +92,28 @@ export declare const ProgressCircle: React.MemoExoticComponent<
          */
         contentNode?: React.ReactNode;
       } & {
-        /**
-         * Custom styles for the progress circle root.
-         */
         style?: React.CSSProperties;
-        /**
-         * Custom class name for the progress circle root.
-         */
         className?: string;
-        /**
-         * Custom styles for the progress circle.
-         */
+        /** Custom styles for individual elements of the ProgressCircle component */
         styles?: {
-          /**
-           * Custom styles for the progress circle root.
-           */
+          /** Root element */
           root?: React.CSSProperties;
-          /**
-           * Custom styles for the progress circle svg.
-           */
+          /** SVG element */
           svg?: React.CSSProperties;
-          /**
-           * Custom styles for the background circle.
-           */
+          /** Background circle element */
           circle?: React.CSSProperties;
-          /**
-           * Custom styles for the foreground circle.
-           */
+          /** Foreground progress circle element */
           progress?: React.CSSProperties;
         };
-        /**
-         * Custom class names for the progress circle.
-         */
+        /** Custom class names for individual elements of the ProgressCircle component */
         classNames?: {
-          /**
-           * Class name for the progress circle root.
-           */
+          /** Root element */
           root?: string;
-          /**
-           * Class name for the progress circle svg.
-           */
+          /** SVG element */
           svg?: string;
-          /**
-           * Class name for the progress circle background circle.
-           */
+          /** Background circle element */
           circle?: string;
-          /**
-           * Class name for the progress circle foreground circle.
-           */
+          /** Foreground progress circle element */
           progress?: string;
         };
       } & React.RefAttributes<HTMLDivElement>

package/dts/visualizations/ProgressCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAkEF,eAAO,MAAM,cAAc;;;;;;;;IAtJzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;IAI7B;;OAEG;YACK,KAAK,CAAC,aAAa;IAC3B;;OAEG;gBACS,MAAM;IAClB;;OAEG;aACM;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B;;WAEG;QACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B;;WAEG;QACH,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD;;OAEG;iBACU;QACX;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAkMF,CAAC"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../src/visualizations/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAatD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAWvD,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,GAAG;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,iFAAiF;IACjF,UAAU,CAAC,EAAE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,uBAAuB,EACvB,UAAU,GAAG,uBAAuB,GAAG,UAAU,CAClD,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACzB,CAAC;AAkEF,eAAO,MAAM,cAAc;;;;;;;;IA5HzB;;OAEG;kBACW,OAAO;IACrB;;;OAGG;eACQ,OAAO;IAClB;;;;;OAKG;WACI,MAAM;IACb;;OAEG;kBACW,KAAK,CAAC,SAAS;;YAIrB,KAAK,CAAC,aAAa;gBACf,MAAM;IAClB,4EAA4E;aACnE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,kBAAkB;QAClB,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC1B,gCAAgC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,yCAAyC;QACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC;IACD,iFAAiF;iBACpE;QACX,mBAAmB;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,kBAAkB;QAClB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,yCAAyC;QACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;yCAkMF,CAAC"}

package/esm/banner/Banner.js

@@ -1,4 +1,4 @@
-const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "style", "className", "numberOfLines", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginY", "marginX", "marginTop", "marginBottom", "marginStart", "marginEnd"];
+const _excluded = ["variant", "startIcon", "startIconActive", "onClose", "primaryAction", "secondaryAction", "title", "children", "showDismiss", "testID", "style", "className", "numberOfLines", "label", "styleVariant", "startIconAccessibilityLabel", "closeAccessibilityLabel", "borderRadius", "margin", "marginY", "marginX", "marginTop", "marginBottom", "marginStart", "marginEnd", "width"];
 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; }
@@ -47,7 +47,8 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       marginTop,
       marginBottom,
       marginStart,
-      marginEnd
+      marginEnd,
+      width = '100%'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -114,7 +115,7 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   }), [borderColor]);
   const content = /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({
     position: "relative",
-    width: "100%"
+    width: width
   }, !showDismiss && marginStyles), {}, {
     height: "fit-content",
     children: [/*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
@@ -200,7 +201,7 @@ export const Banner = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     display: "block",
     height: "fit-content",
     position: "relative",
-    width: "100%"
+    width: width
   }, marginStyles), {}, {
     children: [/*#__PURE__*/_jsx(Collapsible, {
       accessibilityLabelledBy: accessibilityLabelledBy,

package/esm/overlays/tray/Tray.js

@@ -48,6 +48,31 @@ 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 = {
@@ -226,7 +251,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
       containerId: trayContainerId,
       children: /*#__PURE__*/_jsxs(Box, {
         ref: trayRef,
-        className: classNames === null || classNames === void 0 ? void 0 : classNames.root,
+        className: cx(trayClassNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.root),
         height: "100vh",
         pin: "all",
         position: "fixed",
@@ -234,7 +259,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
         width: "100vw",
         zIndex: zIndex,
         children: [/*#__PURE__*/_jsx(Overlay, {
-          className: classNames === null || classNames === void 0 ? void 0 : classNames.overlay,
+          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"
@@ -251,7 +276,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
               animate: animateValue,
               "aria-modal": "true",
               bordered: theme.activeColorScheme === 'dark',
-              className: cx(trayContainerBaseCss, trayContainerPinCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+              className: cx(trayContainerBaseCss, trayContainerPinCss, trayClassNames.container, classNames === null || classNames === void 0 ? void 0 : classNames.container),
               "data-testid": "tray",
               drag: !preventDismiss ? 'y' : undefined,
               dragConstraints: {
@@ -260,7 +285,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
               },
               dragControls: dragControls,
               dragElastic: {
-                top: 0.5,
+                top: 0,
                 bottom: 0.5
               },
               dragListener: false,
@@ -285,7 +310,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
                 minHeight: 0,
                 width: "100%",
                 children: [(shouldShowTitle || headerContent || shouldShowHandleBar) && /*#__PURE__*/_jsxs(VStack, {
-                  className: cx(shouldShrinkPadding && trayHeaderBorderBaseCss, shouldShrinkPadding && hasScrolledDown && trayHeaderBorderVisibleCss, classNames === null || classNames === void 0 ? void 0 : classNames.header),
+                  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,
@@ -293,8 +318,8 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
                   style: styles === null || styles === void 0 ? void 0 : styles.header,
                   children: [shouldShowHandleBar && (preventDismiss ? /*#__PURE__*/_jsx(HandleBar, {
                     classNames: {
-                      root: classNames === null || classNames === void 0 ? void 0 : classNames.handleBar,
-                      handle: classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle
+                      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,
@@ -304,8 +329,8 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
                     accessibilityHint: closeAccessibilityHint,
                     accessibilityLabel: closeAccessibilityLabel,
                     classNames: {
-                      root: classNames === null || classNames === void 0 ? void 0 : classNames.handleBar,
-                      handle: classNames === null || classNames === void 0 ? void 0 : classNames.handleBarHandle
+                      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 => {
@@ -322,7 +347,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
                     justifyContent: title ? 'space-between' : 'flex-end',
                     paddingX: horizontalPadding,
                     children: [title && (typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-                      className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+                      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
@@ -330,7 +355,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
                       transparent: true,
                       accessibilityHint: closeAccessibilityHint,
                       accessibilityLabel: closeAccessibilityLabel,
-                      className: classNames === null || classNames === void 0 ? void 0 : classNames.closeButton,
+                      className: cx(trayClassNames.closeButton, classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
                       margin: isSideTray ? -1.5 : undefined,
                       name: "close",
                       onClick: handleClose,
@@ -340,7 +365,7 @@ export const Tray = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Tray(_ref
                   }), headerContent]
                 }), /*#__PURE__*/_jsx(VStack, {
                   ref: contentRef,
-                  className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
+                  className: cx(trayClassNames.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
                   flexGrow: 1,
                   minHeight: 0,
                   overflow: "hidden",

package/package.json

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