@coinbase/cds-mobile 8.52.2 → 8.53.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.53.1 (3/17/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: update RemoteImageGroup excess bg color. [[#512](https://github.com/coinbase/cds/pull/512)]
+
+## 8.53.0 (3/16/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: update Checkbox borderRadius to match design. [[#509](https://github.com/coinbase/cds/pull/509)]
+
 ## 8.52.2 (3/11/2026 PST)
 
 #### 🐞 Fixes

package/esm/alpha/combobox/__stories__/Combobox.stories.js

@@ -1,5 +1,7 @@
+const _excluded = ["freeSolo", "options", "value", "onChange", "placeholder"];
 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); }
-import { useRef, useState } from 'react';
+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 { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMultiSelect } from '@coinbase/cds-common/select/useMultiSelect';
 import { Button } from '../../../buttons';
 import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
@@ -118,37 +120,40 @@ const fruitOptions = [{
   value: 'lemon',
   label: 'Lemon'
 }];
+function getFlagEmoji(cc) {
+  return cc.toUpperCase().split('').map(c => String.fromCodePoint(0x1f1e6 - 65 + c.charCodeAt(0))).join('');
+}
 const countryOptions = [{
   value: 'us',
-  label: 'United States',
+  label: getFlagEmoji('us') + " United States",
   description: 'North America'
 }, {
   value: 'ca',
-  label: 'Canada',
+  label: getFlagEmoji('ca') + " Canada",
   description: 'North America'
 }, {
   value: 'mx',
-  label: 'Mexico',
+  label: getFlagEmoji('mx') + " Mexico",
   description: 'North America'
 }, {
   value: 'uk',
-  label: 'United Kingdom',
+  label: getFlagEmoji('gb') + " United Kingdom",
   description: 'Europe'
 }, {
   value: 'fr',
-  label: 'France',
+  label: getFlagEmoji('fr') + " France",
   description: 'Europe'
 }, {
   value: 'de',
-  label: 'Germany',
+  label: getFlagEmoji('de') + " Germany",
   description: 'Europe'
 }, {
   value: 'jp',
-  label: 'Japan',
+  label: getFlagEmoji('jp') + " Japan",
   description: 'Asia'
 }, {
   value: 'cn',
-  label: 'China',
+  label: getFlagEmoji('cn') + " China",
   description: 'Asia'
 }];
 const cryptoOptions = [{
@@ -197,6 +202,75 @@ const teamOptions = [{
   label: 'Charlie Brown',
   description: 'Marketing'
 }];
+const CREATE_OPTION_PREFIX = '__create__';
+function FreeSoloCombobox(_ref) {
+  let {
+      freeSolo = false,
+      options: initialOptions,
+      value,
+      onChange,
+      placeholder = 'Search or type to add...'
+    } = _ref,
+    comboboxProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const [searchText, setSearchText] = useState('');
+  const [options, setOptions] = useState(initialOptions);
+  useEffect(() => {
+    if (!freeSolo) return;
+    const initialSet = new Set(initialOptions.map(o => o.value));
+    const valueSet = new Set(Array.isArray(value) ? value : value != null ? [value] : []);
+    setOptions(prev => {
+      const addedStillSelected = prev.filter(o => !initialSet.has(o.value) && valueSet.has(o.value));
+      return [...initialOptions, ...addedStillSelected];
+    });
+  }, [value, freeSolo, initialOptions]);
+  const optionsWithCreate = useMemo(() => {
+    if (!freeSolo) return options;
+    const trimmed = searchText.trim();
+    if (!trimmed) return options;
+    const alreadyExists = options.some(o => typeof o.label === 'string' && o.label.toLowerCase() === trimmed.toLowerCase());
+    if (alreadyExists) return options;
+    return [...options, {
+      value: "" + CREATE_OPTION_PREFIX + trimmed,
+      label: "Add \"" + trimmed + "\""
+    }];
+  }, [options, searchText, freeSolo]);
+  const handleChange = useCallback(newValue => {
+    if (!freeSolo) {
+      onChange(newValue);
+      return;
+    }
+    const values = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    const createValue = values.find(v => String(v).startsWith(CREATE_OPTION_PREFIX));
+    if (createValue) {
+      const newLabel = String(createValue).slice(CREATE_OPTION_PREFIX.length);
+      const newOption = {
+        value: newLabel.toLowerCase(),
+        label: newLabel
+      };
+      setOptions(prev => [...prev, newOption]);
+      const updatedValues = values.filter(v => !String(v).startsWith(CREATE_OPTION_PREFIX)).concat(newOption.value);
+      if (comboboxProps.type === 'multi') {
+        onChange(updatedValues);
+      } else {
+        onChange(newOption.value);
+      }
+      setSearchText('');
+    } else {
+      onChange(newValue);
+    }
+  }, [onChange, freeSolo, comboboxProps.type]);
+  const effectiveOptions = freeSolo ? optionsWithCreate : initialOptions;
+  const effectiveSearchProps = freeSolo ? {
+    onSearch: setSearchText,
+    searchText
+  } : {};
+  return /*#__PURE__*/_jsx(Combobox, _extends({}, comboboxProps, effectiveSearchProps, {
+    onChange: handleChange,
+    options: effectiveOptions,
+    placeholder: placeholder,
+    value: value
+  }));
+}
 
 // Example Components
 const DefaultExample = () => {
@@ -410,6 +484,7 @@ const AccessibilityLabelExample = () => {
     initialValue: []
   });
   return /*#__PURE__*/_jsx(Combobox, {
+    accessibilityHint: "Select one or more fruits",
     accessibilityLabel: "Custom accessibility label",
     label: "Accessible combobox",
     onChange: onChange,
@@ -999,6 +1074,53 @@ const DynamicOptionsExample = () => {
     })]
   });
 };
+const FreeSoloComboboxExample = () => {
+  const [standardSingleValue, setStandardSingle] = useState(null);
+  const [freeSoloSingleValue, setFreeSoloSingle] = useState(null);
+  const standardMulti = useMultiSelect({
+    initialValue: []
+  });
+  const freeSoloMulti = useMultiSelect({
+    initialValue: []
+  });
+  const baseOptions = fruitOptions.slice(0, 6);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: false,
+      label: "Standard single",
+      onChange: setStandardSingle,
+      options: baseOptions,
+      placeholder: "Search fruits...",
+      type: "single",
+      value: standardSingleValue
+    }), /*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: true,
+      label: "FreeSolo single",
+      onChange: setFreeSoloSingle,
+      options: baseOptions,
+      placeholder: "Search or type to add...",
+      type: "single",
+      value: freeSoloSingleValue
+    }), /*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: false,
+      label: "Standard multi",
+      onChange: standardMulti.onChange,
+      options: baseOptions,
+      placeholder: "Search fruits...",
+      type: "multi",
+      value: standardMulti.value
+    }), /*#__PURE__*/_jsx(FreeSoloCombobox, {
+      freeSolo: true,
+      label: "FreeSolo multi",
+      onChange: freeSoloMulti.onChange,
+      options: baseOptions,
+      placeholder: "Search or type to add...",
+      type: "multi",
+      value: freeSoloMulti.value
+    })]
+  });
+};
 const CustomComponent = props => {
   var _props$value$length, _props$value;
   return /*#__PURE__*/_jsx(DefaultComboboxControl, _extends({}, props, {
@@ -1093,7 +1215,7 @@ const Default = () => {
       title: "Controlled search",
       children: /*#__PURE__*/_jsx(ControlledSearchExample, {})
     }), /*#__PURE__*/_jsx(Example, {
-      title: "Custom accessibility label",
+      title: "Custom accessibility label and hint",
       children: /*#__PURE__*/_jsx(AccessibilityLabelExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Options with descriptions",
@@ -1188,6 +1310,9 @@ const Default = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Borderless",
       children: /*#__PURE__*/_jsx(BorderlessExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "FreeSolo (select or add custom)",
+      children: /*#__PURE__*/_jsx(FreeSoloComboboxExample, {})
     })]
   });
 };

package/esm/controls/Checkbox.js

@@ -17,7 +17,7 @@ const CheckboxIcon = /*#__PURE__*/memo(_ref => {
     controlColor = 'fgInverse',
     background = checked || indeterminate ? 'bgPrimary' : 'bg',
     borderColor = checked || indeterminate ? 'bgPrimary' : 'bgLineHeavy',
-    borderRadius,
+    borderRadius = 100,
     borderWidth = 100,
     elevation,
     animatedScaleValue,

package/esm/media/RemoteImageGroup.js

@@ -77,7 +77,7 @@ export const RemoteImageGroup = _ref => {
         children: clonedChild
       }, index);
     }), excess > 0 && /*#__PURE__*/_jsx(Box, {
-      background: "bgOverlay",
+      background: "bgSecondary",
       borderColor: borderColor,
       borderWidth: borderWidth,
       marginStart: overlapSpacing,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.52.2",
+  "version": "8.53.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,9 +198,9 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.52.2",
-    "@coinbase/cds-icons": "^5.12.0",
-    "@coinbase/cds-illustrations": "^4.32.0",
+    "@coinbase/cds-common": "^8.53.1",
+    "@coinbase/cds-icons": "^5.13.0",
+    "@coinbase/cds-illustrations": "^4.34.0",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",