@coinbase/cds-mobile 8.17.5 → 8.18.0

package/CHANGELOG.md

@@ -8,11 +8,21 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.18.0 (10/29/2025 PST)
+
+#### 🚀 Updates
+
+- Support custom `titleNode` `descriptionNode` `detailNode` `subdetailNode` `accessoryNode` for ListCell. [[#131](https://github.com/coinbase/cds/pull/131)] [DX-5006]
+
+## 8.17.6 ((10/28/2025, 02:28 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.17.5 (10/27/2025 PST)
 
 #### 🐞 Fixes
 
-- Fix: correct padding. [[#133](https://github.com/coinbase/cds/pull/133)]
+- Increased ListCell innerSpacing when spacingVariant=“condensed” [[#133](https://github.com/coinbase/cds/pull/133)]
 
 ## 8.17.4 (10/27/2025 PST)
 

package/dts/cells/Cell.d.ts

@@ -26,6 +26,8 @@ export type CellBaseProps = SharedProps &
   LinkableProps & {
     /** Accessory element rendered at the end of the cell (e.g., chevron). */
     accessory?: React.ReactElement<CellAccessoryProps>;
+    /** Custom accessory node rendered at the end of the cell. Takes precedence over `accessory`. */
+    accessoryNode?: React.ReactNode;
     /** Main content of the cell; typically title/description content. */
     children: React.ReactNode;
     /**

package/dts/cells/Cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK5E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,eAAe,GACf,cAAc,GACd,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,WAAW,GACX,cAAc,GACd,aAAa,CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,aAAa,GAAG;IACd,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACnD,qEAAqE;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,sDAAsD;IACtD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,mDAAmD;QACnD,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjD,eAAO,MAAM,IAAI,uCAgNf,CAAC"}
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../src/cells/Cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,SAAS,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK5E,OAAO,EAAO,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,YAAY,EACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,eAAe,GACf,cAAc,GACd,QAAQ,GACR,SAAS,GACT,SAAS,GACT,WAAW,GACX,WAAW,GACX,cAAc,GACd,aAAa,CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,GACrC,aAAa,GAAG;IACd,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;IACnD,gGAAgG;IAChG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,qEAAqE;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sDAAsD;IACtD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6GAA6G;IAC7G,QAAQ,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,sDAAsD;IACtD,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,0DAA0D;IAC1D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,mDAAmD;QACnD,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEjD,eAAO,MAAM,IAAI,uCAkNf,CAAC"}

package/dts/cells/CellDetail.d.ts

@@ -4,14 +4,18 @@ export type CellDetailVariant = 'foregroundMuted' | 'negative' | 'positive' | 'w
 export type CellDetailProps = {
   /**
    * Label and/or extra detail. This prop is only intended to accept a string or Text component;
-   * other use cases, while allowed, are not supported and may result in unexpected behavior.
+   * other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `detailNode`.
    */
   detail?: React.ReactNode;
+  /** React node to render label and/or extra detail. Takes precedence over `detail`. */
+  detailNode?: React.ReactNode;
   /**
    * Subdetail providing more information. This prop is only intended to accept a string or Text component;
-   * other use cases, while allowed, are not supported and may result in unexpected behavior.
+   * other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `subdetailNode`.
    */
   subdetail?: React.ReactNode;
+  /** React node to render subdetail. Takes precedence over `subdetail`. */
+  subdetailNode?: React.ReactNode;
   /** Variant color to apply to the subdetail text. */
   variant?: CellDetailVariant;
   /** Specifies whether font should be scaled down automatically to fit given style constraints. */

package/dts/cells/CellDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellDetail.d.ts","sourceRoot":"","sources":["../../src/cells/CellDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AACxF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iGAAiG;IACjG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AASF,eAAO,MAAM,UAAU,6CA2BrB,CAAC"}
+{"version":3,"file":"CellDetail.d.ts","sourceRoot":"","sources":["../../src/cells/CellDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AACxF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sFAAsF;IACtF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,yEAAyE;IACzE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,iGAAiG;IACjG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AASF,eAAO,MAAM,UAAU,6CAiCrB,CAAC"}

package/dts/cells/ListCell.d.ts

@@ -17,6 +17,8 @@ export type ListCellBaseProps = CellDetailProps &
   Omit<CellBaseProps, 'accessory' | 'children'> & {
     /** Accessory to display at the end of the cell. */
     accessory?: CellAccessoryType;
+    /** Custom accessory node rendered at the end of the cell. Takes precedence over `accessory`. */
+    accessoryNode?: React.ReactNode;
     /**
      * End-aligned content (e.g., CTA, form element, metric). Replacement for the deprecated action prop, and takes precedence over it.
      * If the content is a action (like button, link, etc), we recommand avoid using alongside `onPress`.
@@ -55,8 +57,10 @@ export type ListCellBaseProps = CellDetailProps &
      * @default 'normal'
      */
     spacingVariant?: 'normal' | 'compact' | 'condensed';
-    /** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. */
+    /** Description of content. Max 1 line (with title) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `descriptionNode`. */
     description?: React.ReactNode;
+    /** React node to render description. Takes precedence over `description`. */
+    descriptionNode?: React.ReactNode;
     /**
      * Disable the default accessory that is displayed when the cell is selected.
      * If `accessory` is provided, that will continue to be displayed, otherwise no accessory will be displayed when the cell is selected.
@@ -76,8 +80,10 @@ export type ListCellBaseProps = CellDetailProps &
     media?: React.ReactElement;
     /** Allow the description to span multiple lines. This *will* break fixed height requirements, so should not be used in a `FlatList`. */
     multiline?: boolean;
-    /** Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. */
+    /** Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use `titleNode`. */
     title?: React.ReactNode;
+    /** React node to render title. Takes precedence over `title`. */
+    titleNode?: React.ReactNode;
     /** Styles for the components */
     styles?: {
       root?: StyleProp<ViewStyle>;

package/dts/cells/ListCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAoB,MAAM,QAAQ,CAAC;AACpF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAGjC,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAEjC,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAC7C,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC9C,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IACpD,qGAAqG;IACrG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,wIAAwI;IACxI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qGAAqG;IACrG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;AAE1F,eAAO,MAAM,QAAQ,2CA6HnB,CAAC"}
+{"version":3,"file":"ListCell.d.ts","sourceRoot":"","sources":["../../src/cells/ListCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,OAAO,EAAQ,KAAK,aAAa,EAAE,KAAK,SAAS,EAAoB,MAAM,QAAQ,CAAC;AACpF,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhE,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAGjC,eAAO,MAAM,qBAAqB;;;;CAIF,CAAC;AAEjC,MAAM,MAAM,iBAAiB,GAAG,eAAe,GAC7C,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAC9C,mDAAmD;IACnD,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,gGAAgG;IAChG,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,WAAW,CAAC;IACpD,6SAA6S;IAC7S,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,6EAA6E;IAC7E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,wIAAwI;IACxI,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uSAAuS;IACvS,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iEAAiE;IACjE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gCAAgC;IAChC,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACxC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACnC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACpC,CAAC;CACH,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,UAAU,CAAC,CAAC;AAE1F,eAAO,MAAM,QAAQ,2CAoJnB,CAAC"}

package/esm/cells/Cell.js

@@ -1,4 +1,4 @@
-const _excluded = ["accessory", "alignItems", "borderRadius", "children", "styles", "end", "detail", "detailWidth", "disabled", "intermediary", "media", "minHeight", "maxHeight", "onLayout", "onPress", "priority", "selected", "testID", "accessibilityLabel", "accessibilityHint", "gap", "columnGap", "rowGap", "innerSpacing", "outerSpacing", "bottomContent", "style"],
+const _excluded = ["accessory", "accessoryNode", "alignItems", "borderRadius", "children", "styles", "end", "detail", "detailWidth", "disabled", "intermediary", "media", "minHeight", "maxHeight", "onLayout", "onPress", "priority", "selected", "testID", "accessibilityLabel", "accessibilityHint", "gap", "columnGap", "rowGap", "innerSpacing", "outerSpacing", "bottomContent", "style"],
   _excluded2 = ["marginX"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -15,6 +15,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
   let {
       accessory,
+      accessoryNode,
       alignItems = 'center',
       borderRadius = 200,
       children,
@@ -100,11 +101,11 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
         style: styles == null ? void 0 : styles.end,
         width: detailWidth,
         children: endContent
-      }), !!accessory && /*#__PURE__*/_jsx(Box, {
+      }), !!(accessoryNode != null ? accessoryNode : accessory) && /*#__PURE__*/_jsx(Box, {
         flexGrow: 0,
         flexShrink: 0,
         style: styles == null ? void 0 : styles.accessory,
-        children: accessory
+        children: accessoryNode != null ? accessoryNode : accessory
       })]
     });
     if (!bottomContent) {
@@ -125,7 +126,7 @@ export const Cell = /*#__PURE__*/memo(function Cell(_ref) {
         children: bottomContent
       })]
     }));
-  }, [borderRadius, testID, disabled, selected, onPress, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, styles == null ? void 0 : styles.media, priority, children, intermediary, styles == null ? void 0 : styles.intermediary, end, detail, detailWidth, styles == null ? void 0 : styles.end, accessory, styles == null ? void 0 : styles.accessory, bottomContent, styles == null ? void 0 : styles.contentContainer, styles == null ? void 0 : styles.topContent, styles == null ? void 0 : styles.bottomContent, rowGap]);
+  }, [borderRadius, testID, disabled, selected, onPress, innerSpacingWithoutMarginX, innerSpacing, alignItems, columnGap, gap, media, styles == null ? void 0 : styles.media, priority, children, intermediary, styles == null ? void 0 : styles.intermediary, end, detail, detailWidth, styles == null ? void 0 : styles.end, accessory, accessoryNode, styles == null ? void 0 : styles.accessory, bottomContent, styles == null ? void 0 : styles.contentContainer, styles == null ? void 0 : styles.topContent, styles == null ? void 0 : styles.bottomContent, rowGap]);
   const pressableWrappedContent = useMemo(() => {
     if (onPress) {
       const offsetStyle = {

package/esm/cells/CellDetail.js

@@ -12,7 +12,9 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
   let {
     adjustsFontSizeToFit,
     detail,
+    detailNode,
     subdetail,
+    subdetailNode,
     variant = 'foregroundMuted',
     subdetailFont = 'label2'
   } = _ref;
@@ -20,17 +22,17 @@ export const CellDetail = /*#__PURE__*/memo(function CellDetail(_ref) {
     alignContent: "flex-end",
     alignItems: "flex-end",
     justifyContent: "center",
-    children: [!!detail && /*#__PURE__*/_jsx(Text, {
+    children: [detailNode ? detailNode : detail ? /*#__PURE__*/_jsx(Text, {
       adjustsFontSizeToFit: adjustsFontSizeToFit,
       font: "body",
       numberOfLines: 1,
       children: detail
-    }), !!subdetail && /*#__PURE__*/_jsx(Text, {
+    }) : null, subdetailNode ? subdetailNode : subdetail ? /*#__PURE__*/_jsx(Text, {
       adjustsFontSizeToFit: adjustsFontSizeToFit,
       color: variantColorMap[variant],
       font: subdetailFont,
       numberOfLines: 1,
       children: subdetail
-    })]
+    }) : null]
   });
 });

package/esm/cells/ListCell.js

@@ -1,4 +1,4 @@
-const _excluded = ["accessory", "end", "action", "compact", "title", "disableMultilineTitle", "description", "detail", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "variant", "onPress", "spacingVariant", "style", "styles"];
+const _excluded = ["accessory", "accessoryNode", "end", "action", "compact", "title", "titleNode", "disableMultilineTitle", "description", "descriptionNode", "detail", "detailNode", "detailWidth", "intermediary", "priority", "innerSpacing", "outerSpacing", "disabled", "disableSelectionAccessory", "helperText", "media", "multiline", "selected", "subdetail", "subdetailNode", "variant", "onPress", "spacingVariant", "style", "styles"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useMemo } from 'react';
@@ -25,13 +25,17 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
   var _props$borderRadius;
   let {
       accessory,
+      accessoryNode,
       end: endProp,
       action,
       compact,
       title,
+      titleNode,
       disableMultilineTitle = false,
       description,
+      descriptionNode,
       detail,
+      detailNode,
       detailWidth,
       intermediary,
       priority,
@@ -44,6 +48,7 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
       multiline,
       selected,
       subdetail,
+      subdetailNode,
       variant,
       onPress,
       spacingVariant = compact ? 'compact' : 'normal',
@@ -53,18 +58,21 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const minHeight = spacingVariant === 'compact' ? compactListHeight : spacingVariant === 'normal' ? listHeight : undefined;
   const accessoryType = selected && !disableSelectionAccessory ? 'selected' : accessory;
-  const hasDetails = Boolean(detail || subdetail);
+  const hasDetails = Boolean(detail || subdetail || detailNode || subdetailNode);
   const end = useMemo(() => endProp || action || hasDetails && /*#__PURE__*/_jsx(CellDetail, {
     adjustsFontSizeToFit: !!detailWidth,
     detail: detail,
+    detailNode: detailNode,
     subdetail: subdetail,
     subdetailFont: spacingVariant === 'condensed' ? 'label2' : 'body',
+    subdetailNode: subdetailNode,
     variant: variant
-  }), [endProp, action, hasDetails, detail, subdetail, detailWidth, spacingVariant, variant]);
+  }), [endProp, action, hasDetails, detail, detailNode, subdetail, subdetailNode, detailWidth, spacingVariant, variant]);
   return /*#__PURE__*/_jsx(Cell, _extends({
     accessory: accessoryType ? /*#__PURE__*/_jsx(CellAccessory, {
       type: accessoryType
     }) : undefined,
+    accessoryNode: accessoryNode,
     borderRadius: (_props$borderRadius = props.borderRadius) != null ? _props$borderRadius : spacingVariant === 'condensed' ? 0 : undefined,
     bottomContent: helperText,
     detailWidth: detailWidth,
@@ -80,23 +88,23 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
     selected: selected,
     style: [style, styles == null ? void 0 : styles.root],
     styles: {
-      media: styles == null ? void 0 : styles.media,
-      intermediary: styles == null ? void 0 : styles.intermediary,
-      end: styles == null ? void 0 : styles.end,
       accessory: styles == null ? void 0 : styles.accessory,
-      topContent: styles == null ? void 0 : styles.mainContent,
       bottomContent: styles == null ? void 0 : styles.helperText,
       contentContainer: styles == null ? void 0 : styles.contentContainer,
+      end: styles == null ? void 0 : styles.end,
+      intermediary: styles == null ? void 0 : styles.intermediary,
+      media: styles == null ? void 0 : styles.media,
       pressable: [
       // for the condensed spacing, we need to offset the margin vertical to remove the strange gap between the pressable area
-      spacingVariant === 'condensed' && !!onPress && {
+      spacingVariant === 'condensed' && Boolean(onPress) && {
         marginVertical: -1
-      }, styles == null ? void 0 : styles.pressable]
+      }, styles == null ? void 0 : styles.pressable],
+      topContent: styles == null ? void 0 : styles.mainContent
     }
   }, props, {
     children: /*#__PURE__*/_jsxs(VStack, {
       justifyContent: "center",
-      children: [!!title && /*#__PURE__*/_jsx(Text, {
+      children: [titleNode ? titleNode : title ? /*#__PURE__*/_jsx(Text, {
         ellipsize: "tail",
         font: "headline",
         numberOfLines: disableMultilineTitle ? 1 :
@@ -104,14 +112,14 @@ export const ListCell = /*#__PURE__*/memo(function ListCell(_ref) {
         spacingVariant === 'condensed' ? 2 : description ? 1 : 2,
         style: styles == null ? void 0 : styles.title,
         children: title
-      }), !!description && /*#__PURE__*/_jsx(Text, {
+      }) : null, descriptionNode ? descriptionNode : description ? /*#__PURE__*/_jsx(Text, {
         color: "fgMuted",
         ellipsize: multiline ? undefined : 'tail',
         font: spacingVariant === 'condensed' ? 'label2' : 'body',
         numberOfLines: multiline ? undefined : title ? 1 : 2,
         style: styles == null ? void 0 : styles.description,
         children: description
-      })]
+      }) : null]
     })
   }));
 });

package/esm/cells/__stories__/ListCell.stories.js

@@ -85,6 +85,70 @@ const Content = () => {
     })]
   });
 };
+const CustomNodes = () => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(ListCell, {
+    descriptionNode: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        children: "Composed description with any React nodes"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "info"
+      })]
+    }),
+    media: /*#__PURE__*/_jsx(Avatar, {
+      src: assets.eth.imageUrl
+    }),
+    spacingVariant: "condensed",
+    titleNode: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "checkmark"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "headline",
+        children: "Verified account"
+      })]
+    })
+  }), /*#__PURE__*/_jsx(ListCell, {
+    accessoryNode: /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: "Help",
+      name: "info",
+      onPress: () => console.log('Accessory')
+    }),
+    description: "Using detailNode/subdetailNode and accessoryNode",
+    detailNode: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      justifyContent: "flex-end",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "info"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "body",
+        children: "$12"
+      })]
+    }),
+    media: /*#__PURE__*/_jsx(Avatar, {
+      src: assets.eth.imageUrl
+    }),
+    priority: "end",
+    spacingVariant: "condensed",
+    subdetailNode: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 0.5,
+      justifyContent: "flex-end",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "info"
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "fgPositive",
+        font: "label2",
+        children: "+5.43%"
+      })]
+    }),
+    title: "Custom nodes"
+  })]
+});
 const CompactContent = () => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ListCell, {
@@ -1157,6 +1221,12 @@ const ListCellScreen = () => {
       title: "Content",
       titlePadding: titlePadding,
       children: /*#__PURE__*/_jsx(Content, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      paddingX: 0,
+      title: "CustomNodes",
+      titlePadding: titlePadding,
+      children: /*#__PURE__*/_jsx(CustomNodes, {})
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       paddingX: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.17.5",
+  "version": "8.18.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -150,7 +150,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.17.5",
+    "@coinbase/cds-common": "^8.18.0",
     "@coinbase/cds-icons": "^5.5.0",
     "@coinbase/cds-illustrations": "^4.25.0",
     "@coinbase/cds-lottie-files": "^3.3.2",