@coinbase/cds-mobile 9.26.1 → 9.26.2

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 9.26.2 (2026-09-11)
+
+### 🩹 Fixes
+
+- Fix: vertically align the helper-text error icon with the text in web and mobile inputs.
+- Fix: dismiss the Android soft keyboard when the mobile `TextInput` unmounts while focused.
+
+### 🧱 Updated Dependencies
+
+- Updated illustrations to 4.48.1
+
 ## 9.26.1 (2026-09-03)
 
 ### 🩹 Fixes

package/dts/controls/HelperText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../src/controls/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,6CAA6C;IAC7C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,MAAM,CAAC,EAAE;QACP,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1B,yBAAyB;QACzB,IAAI,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;KAC3B,CAAC;CACH,GAAG,SAAS,CAAC;AAEd,eAAO,MAAM,UAAU,6CAgErB,CAAC"}
+{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../src/controls/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,6CAA6C;IAC7C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wEAAwE;IACxE,MAAM,CAAC,EAAE;QACP,wBAAwB;QACxB,IAAI,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1B,yBAAyB;QACzB,IAAI,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;KAC3B,CAAC;CACH,GAAG,SAAS,CAAC;AAEd,eAAO,MAAM,UAAU,6CAiDrB,CAAC"}

package/dts/controls/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,cAAc,EACd,SAAS,IAAI,WAAW,EACxB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAc/E,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CACF,gBAAgB,EAChB,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CACjF,GACD,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,oBAAoB,GACpB,iBAAiB,CACpB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACrC,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,GAAG,gBAAgB,CAAC,GAAG;IAC/F,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;CACrD,CAAC;AAWJ,eAAO,MAAM,SAAS,iDAIjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,6CA6RF,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,cAAc,EACd,SAAS,IAAI,WAAW,EACxB,cAAc,IAAI,gBAAgB,EAEnC,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAc/E,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAC1C,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CACF,gBAAgB,EAChB,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CACjF,GACD,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,oBAAoB,GACpB,iBAAiB,CACpB,GAAG;IACF;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;IAC/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACrC,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAC7C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,GAAG,gBAAgB,CAAC,GAAG;IAC/F,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;CACrD,CAAC;AAWJ,eAAO,MAAM,SAAS,iDAIjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,6CA2SF,CAAC"}

package/esm/controls/HelperText.js

@@ -1,10 +1,10 @@
-const _excluded = ["color", "errorIconAccessibilityLabel", "errorIconTestID", "children", "align", "dangerouslySetColor", "style", "styles"];
+const _excluded = ["color", "errorIconAccessibilityLabel", "errorIconTestID", "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';
-import { glyphMap } from '@coinbase/cds-icons/glyphMap';
 import { useTheme } from '../hooks/useTheme';
-import { getIconSourceSize } from '../icons/Icon';
+import { Icon } from '../icons/Icon';
+import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const HelperText = /*#__PURE__*/memo(function HelperText(_ref) {
@@ -12,49 +12,49 @@ export const HelperText = /*#__PURE__*/memo(function HelperText(_ref) {
       color,
       errorIconAccessibilityLabel,
       errorIconTestID,
-      children,
-      align,
-      dangerouslySetColor,
-      style,
       styles
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
-  // Get info icon for negative variant
-  const iconSize = theme.iconSize.xs;
-  const sourceSize = getIconSourceSize(iconSize);
-  const glyphKey = "info-" + sourceSize + "-active";
-  const glyph = glyphMap[glyphKey];
-  const iconStyle = useMemo(() => [{
-    fontFamily: 'CoinbaseIcons',
-    fontSize: iconSize,
-    height: iconSize,
-    width: iconSize,
-    letterSpacing: 4
-  }, // TODO: when we actually remove dangerouslySetColor:
+  const rootStyle = [props.style, styles == null ? void 0 : styles.root];
+  // TODO: when we actually remove dangerouslySetColor:
   // when migrating from dangerouslySetColor to style.color,
   // root style/className color will not automatically style the error icon like dangerouslySetColor.
   // Consumers must set both styles.root and styles.icon (or classNames equivalents).
   // We need to have a migrator handle this or document in future migration guide.
-  styles == null ? void 0 : styles.icon], [iconSize, styles == null ? void 0 : styles.icon]);
-  return /*#__PURE__*/_jsxs(Text, _extends({
-    align: align,
+  const iconStyle = useMemo(() => [{
+    // Sit on the first line of label2, matching nested-text alignment.
+    marginTop: (theme.lineHeight.label2 - theme.iconSize.xs) / 2
+  }, styles == null ? void 0 : styles.icon], [styles == null ? void 0 : styles.icon, theme.iconSize.xs, theme.lineHeight.label2]);
+  const justifyContent = props.align === 'end' ? 'flex-end' : props.align === 'center' ? 'center' : 'flex-start';
+  if (color === 'fgNegative') {
+    return /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "flex-start",
+      gap: 0.5,
+      justifyContent: justifyContent,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        active: true,
+        accessibilityLabel: errorIconAccessibilityLabel,
+        allowFontScaling: false,
+        color: "fgNegative",
+        dangerouslySetColor: typeof props.dangerouslySetColor === 'string' ? props.dangerouslySetColor : undefined,
+        name: "info",
+        size: "xs",
+        style: iconStyle,
+        testID: errorIconTestID
+      }), /*#__PURE__*/_jsx(Text, _extends({
+        color: color,
+        font: "label2"
+      }, props, {
+        flexShrink: 1,
+        style: rootStyle
+      }))]
+    });
+  }
+  return /*#__PURE__*/_jsx(Text, _extends({
     color: color,
-    dangerouslySetColor: dangerouslySetColor,
-    font: "label2",
-    style: [style, styles == null ? void 0 : styles.root]
+    font: "label2"
   }, props, {
-    children: [color === 'fgNegative' && /*#__PURE__*/_jsx(Text, {
-      accessible: true,
-      accessibilityLabel: errorIconAccessibilityLabel,
-      accessibilityRole: "image",
-      align: align,
-      color: color,
-      dangerouslySetColor: dangerouslySetColor,
-      font: "label2",
-      style: iconStyle,
-      testID: errorIconTestID,
-      children: glyph
-    }), children]
+    style: rootStyle
   }));
 });

package/esm/controls/TextInput.js

@@ -2,8 +2,8 @@ const _excluded = ["ref"],
   _excluded2 = ["label", "labelFont", "labelColor", "helperText", "variant", "testID", "testIDMap", "start", "end", "width", "disabled", "align", "font", "compact", "size", "suffix", "accessibilityLabel", "borderRadius", "enableColorSurge", "helperTextErrorIconAccessibilityLabel", "bordered", "focusedBorderWidth", "labelVariant", "labelNode", "inputBackground"];
 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, { cloneElement, isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
-import { Pressable } from 'react-native';
+import React, { cloneElement, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform, Pressable } from 'react-native';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
 import { useMergeRefs } from '@coinbase/cds-common/hooks/useMergeRefs';
 import { useComponentConfig } from '../hooks/useComponentConfig';
@@ -68,6 +68,20 @@ export const TextInput = /*#__PURE__*/memo(_ref => {
   const focusedVariant = useInputVariant(focused, variant);
   const internalRef = useRef(null);
   const refs = useMergeRefs(ref, internalRef);
+  // Tracks the latest focus state for the unmount cleanup, which can't read `focused` directly
+  // without re-subscribing on every focus change.
+  const focusedRef = useRef(false);
+  focusedRef.current = focused;
+
+  // Android doesn't dismiss the keyboard when a focused TextInput unmounts (iOS does), leaving it
+  // stranded on screen. Dismiss it on unmount when this field was focused.
+  useEffect(() => {
+    return () => {
+      if (Platform.OS === 'android' && focusedRef.current) {
+        Keyboard.dismiss();
+      }
+    };
+  }, []);
   const {
     borderFocusedStyle,
     borderUnfocusedStyle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.26.1",
+  "version": "9.26.2",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,9 +218,9 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.26.1",
-    "@coinbase/cds-icons": "^5.22.0",
-    "@coinbase/cds-illustrations": "^4.48.0",
+    "@coinbase/cds-common": "^9.26.2",
+    "@coinbase/cds-icons": "^5.24.0",
+    "@coinbase/cds-illustrations": "^4.48.1",
     "@coinbase/cds-lottie-files": "^3.3.4",
     "@coinbase/cds-utils": "^2.3.5",
     "@floating-ui/react-native": "^0.10.5",