@coinbase/cds-web 9.7.1 → 9.7.2

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.7.2 (7/23/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: adjust select placeholder fallback. [[#805](https://github.com/coinbase/cds/pull/805)]
+
 ## 9.7.1 ((7/22/2026, 01:58 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/alpha/select/DefaultSelectControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAgB9E,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AA4BlB,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACE,KAAK,CAAC,YAAY,CAAC;AAqgBxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAgB9E,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AA4BlB,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B,KACE,KAAK,CAAC,YAAY,CAAC;AA4gBxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -120,19 +120,23 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     });
     return map;
   }, [options]);
+  const matchedOption = useMemo(() => {
+    if (isMultiSelect || value === null || Array.isArray(value)) return undefined;
+    return optionsMap.get(value);
+  }, [isMultiSelect, optionsMap, value]);
+  const isShowingPlaceholder = matchedOption === undefined;
   const singleValueContent = useMemo(() => {
-    var _ref3, _ref4, _option$label;
-    const option = !isMultiSelect ? optionsMap.get(value) : undefined;
-    const label = (_ref3 = (_ref4 = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option === null || option === void 0 ? void 0 : option.description) !== null && _ref4 !== void 0 ? _ref4 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref3 !== void 0 ? _ref3 : placeholder;
-    return hasValue ? label : placeholder;
-  }, [hasValue, isMultiSelect, optionsMap, placeholder, value]);
+    var _ref3, _matchedOption$label;
+    if (!matchedOption) return placeholder;
+    return (_ref3 = (_matchedOption$label = matchedOption.label) !== null && _matchedOption$label !== void 0 ? _matchedOption$label : matchedOption.description) !== null && _ref3 !== void 0 ? _ref3 : matchedOption.value;
+  }, [matchedOption, placeholder]);
   const computedControlAccessibilityLabel = useMemo(() => {
     // For multi-select, set the label to the content of each selected value and the hidden selected options label
     if (isMultiSelect) {
       const selectedValues = value.map(v => {
-        var _ref5, _ref6, _option$label2;
+        var _ref4, _ref5, _option$label;
         const option = optionsMap.get(v);
-        return (_ref5 = (_ref6 = (_option$label2 = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option === null || option === void 0 ? void 0 : option.description) !== null && _ref6 !== void 0 ? _ref6 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref5 !== void 0 ? _ref5 : v;
+        return (_ref4 = (_ref5 = (_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : option === null || option === void 0 ? void 0 : option.description) !== null && _ref5 !== void 0 ? _ref5 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref4 !== void 0 ? _ref4 : v;
       }).slice(0, maxSelectedOptionsToShow).join(', ');
       return "".concat(accessibilityLabel, ", ").concat(value.length > 0 ? selectedValues : placeholder !== null && placeholder !== void 0 ? placeholder : '').concat(value.length > maxSelectedOptionsToShow ? ', ' + hiddenSelectedOptionsLabel : '');
     }
@@ -206,7 +210,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         flexWrap: "wrap",
         gap: 1,
         children: [optionsToShow.map((option, index) => {
-          var _option$value, _ref7, _ref8, _option$label3;
+          var _option$value, _ref6, _ref7, _option$label2;
           const accessibilityLabel = typeof option.label === 'string' ? option.label : typeof option.description === 'string' ? option.description : (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : '';
           return /*#__PURE__*/_jsx(InputChip, {
             compact: true,
@@ -225,7 +229,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
               flexShrink: 1,
               font: "label1",
               overflow: "truncate",
-              children: (_ref7 = (_ref8 = (_option$label3 = option.label) !== null && _option$label3 !== void 0 ? _option$label3 : option.description) !== null && _ref8 !== void 0 ? _ref8 : option.value) !== null && _ref7 !== void 0 ? _ref7 : ''
+              children: (_ref6 = (_ref7 = (_option$label2 = option.label) !== null && _option$label2 !== void 0 ? _option$label2 : option.description) !== null && _ref7 !== void 0 ? _ref7 : option.value) !== null && _ref6 !== void 0 ? _ref6 : ''
             })
           }, option.value);
         }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(InputChip, {
@@ -239,7 +243,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     }
     return typeof singleValueContent === 'string' ? /*#__PURE__*/_jsx(Text, {
       as: "p",
-      color: hasValue ? 'fg' : 'fgMuted',
+      color: isShowingPlaceholder ? 'fgMuted' : 'fg',
       display: "block",
       font: font,
       overflow: "truncate",
@@ -247,7 +251,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       width: "100%",
       children: singleValueContent
     }) : singleValueContent;
-  }, [hasValue, isMultiSelect, singleValueContent, font, align, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, handleUnselectValue, isInteractionBlocked]);
+  }, [hasValue, isMultiSelect, isShowingPlaceholder, singleValueContent, font, align, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, handleUnselectValue, isInteractionBlocked]);
   const inputNode = useMemo(() => /*#__PURE__*/_jsxs(Pressable, {
     ref: controlPressableRef,
     noScaleOnPress: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.7.1",
+  "version": "9.7.2",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -227,7 +227,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.7.1",
+    "@coinbase/cds-common": "^9.7.2",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.44.0",
     "@coinbase/cds-lottie-files": "^3.3.4",