@coinbase/cds-mobile 8.33.0 → 8.33.1

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.33.1 (12/19/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix RemoteImageGroup zIndex and trailing space issue. [[#170](https://github.com/coinbase/cds/pull/170)]
+
 ## 8.33.0 (12/18/2025 PST)
 
 #### 🚀 Updates

package/dts/media/RemoteImageGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,UAAU,EACV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAqFvB,CAAC;AAQF,eAAO,MAAM,WAAW,0BAgBtB,CAAC"}
+{"version":3,"file":"RemoteImageGroup.d.ts","sourceRoot":"","sources":["../../src/media/RemoteImageGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EACV,UAAU,EAEV,KAAK,EACL,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAOpC,MAAM,MAAM,yBAAyB,GAAG,WAAW,GACjD,wBAAwB,GAAG;IACzB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEJ,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAE9D,eAAO,MAAM,gBAAgB,GAAI,kDAO9B,qBAAqB,4CAqFvB,CAAC;AAQF,eAAO,MAAM,WAAW,0BAgBtB,CAAC"}

package/esm/alpha/select-chip/__stories__/AlphaSelectChip.stories.js

@@ -1,10 +1,10 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { assets } from '@coinbase/cds-common/internal/data/assets';
 import { useMultiSelect } from '@coinbase/cds-common/select/useMultiSelect';
 import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
 import { HStack } from '../../../layout/HStack';
 import { VStack } from '../../../layout/VStack';
-import { RemoteImage } from '../../../media';
+import { RemoteImage, RemoteImageGroup } from '../../../media';
 import { Text } from '../../../typography/Text';
 import { SelectChip } from '../SelectChip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -138,49 +138,58 @@ const assetImageMap = {
   ltc: assets.ltc.imageUrl,
   xrp: assets.xrp.imageUrl
 };
+export const MultiSelectWithAssets = () => {
+  const exampleOptions = [{
+    value: 'btc',
+    label: assets.btc.name
+  }, {
+    value: 'eth',
+    label: assets.eth.name
+  }, {
+    value: 'dai',
+    label: assets.dai.name
+  }, {
+    value: 'ltc',
+    label: assets.ltc.name
+  }, {
+    value: 'xrp',
+    label: assets.xrp.name
+  }];
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['eth', 'btc']
+  });
 
-// TODO: Add multi-select with assets story when RemoteImageGroup is fixed
-// export const MultiSelectWithAssets = () => {
-//   const exampleOptions = [
-//     { value: 'btc', label: assets.btc.name },
-//     { value: 'eth', label: assets.eth.name },
-//     { value: 'dai', label: assets.dai.name },
-//     { value: 'ltc', label: assets.ltc.name },
-//     { value: 'xrp', label: assets.xrp.name },
-//   ];
-//   const { value, onChange } = useMultiSelect({
-//     initialValue: ['eth', 'btc'],
-//   });
-
-//   // Get startNode based on selected assets
-//   const startNode = useMemo(() => {
-//     if (value.length === 0) return null;
-
-//     // Multiple assets selected - use RemoteImageGroup
-//     return (
-//       <RemoteImageGroup shape="circle" size={24}>
-//         {value.map((assetValue) => {
-//           const imageUrl = assetImageMap[assetValue];
-//           if (!imageUrl) return null;
-//           return <RemoteImage key={assetValue} source={imageUrl} />;
-//         })}
-//       </RemoteImageGroup>
-//     );
-//   }, [value]);
-
-//   return (
-//     <SelectChip
-//       accessibilityLabel="Select multiple assets"
-//       onChange={onChange}
-//       options={exampleOptions}
-//       placeholder="Choose assets"
-//       startNode={startNode}
-//       type="multi"
-//       value={value}
-//     />
-//   );
-// };
+  // Get startNode based on selected assets
+  const startNode = useMemo(() => {
+    if (value.length === 0) return null;
 
+    // Multiple assets selected - use RemoteImageGroup
+    return /*#__PURE__*/_jsx(RemoteImageGroup, {
+      shape: "circle",
+      size: 24,
+      children: value.map(assetValue => {
+        const imageUrl = assetImageMap[assetValue];
+        if (!imageUrl) return null;
+        return /*#__PURE__*/_jsx(RemoteImage, {
+          source: imageUrl
+        }, assetValue);
+      })
+    });
+  }, [value]);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select multiple assets",
+    maxWidth: 400,
+    onChange: onChange,
+    options: exampleOptions,
+    placeholder: "Choose assets",
+    startNode: startNode,
+    type: "multi",
+    value: value
+  });
+};
 export const InvertColorScheme = () => {
   const exampleOptions = [{
     value: '1',
@@ -544,6 +553,9 @@ const SelectChipScreen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "With Start End Nodes",
       children: /*#__PURE__*/_jsx(WithStartEndNodes, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi-Select with Assets",
+      children: /*#__PURE__*/_jsx(MultiSelectWithAssets, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Invert Color Scheme",
       children: /*#__PURE__*/_jsx(InvertColorScheme, {})

package/esm/media/RemoteImageGroup.js

@@ -23,7 +23,7 @@ export const RemoteImageGroup = _ref => {
   } = useTheme();
   const shapeStyle = shapeStyles[shape];
   const sizeAsNumber = typeof size === 'number' ? size : avatarSize[size];
-  const overlapSpacing = sizeAsNumber <= 40 ? 8 : 16;
+  const overlapSpacing = sizeAsNumber <= 40 ? -1 : -2;
   const excess = Children.count(children) - max;
   const groupChildren = useMemo(() => {
     const arrayChildren = Children.toArray(children);
@@ -63,7 +63,7 @@ export const RemoteImageGroup = _ref => {
       // zIndex is progressively lower so that each child is stacked below the previous one
       const zIndex = -index;
       return /*#__PURE__*/_jsx(Box, {
-        left: index === 0 ? 'initial' : overlapSpacing * zIndex,
+        marginStart: index === 0 ? undefined : overlapSpacing,
         position: "relative",
         testID: (testID ? testID + "-" : '') + "inner-box-" + index,
         zIndex: zIndex,
@@ -74,7 +74,7 @@ export const RemoteImageGroup = _ref => {
       background: "bgOverlay",
       height: sizeAsNumber,
       justifyContent: "center",
-      left: groupChildren.length * overlapSpacing * -1,
+      marginStart: overlapSpacing,
       position: "relative",
       style: shapeStyle,
       width: sizeAsNumber,

package/esm/media/__stories__/RemoteImageGroup.stories.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { assets, squareAssets } from '@coinbase/cds-common/internal/data/assets';
 import { avatarSizes } from '@coinbase/cds-common/internal/data/avatars';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.33.0",
+  "version": "8.33.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.33.0",
+    "@coinbase/cds-common": "^8.33.1",
     "@coinbase/cds-icons": "^5.8.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",