@coinbase/cds-web 8.56.0 → 8.56.1

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.56.1 (3/24/2026 PST)
+
+#### 🐞 Fixes
+
+- Fixed issue when typing space in combobox input closes the popover by mistake. [[#523](https://github.com/coinbase/cds/pull/523)]
+
 ## 8.56.0 (3/23/2026 PST)
 
 #### 🚀 Updates

package/dts/alpha/combobox/DefaultComboboxControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultComboboxControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/combobox/DefaultComboboxControl.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,YAAY,CAAC;AAOjF,eAAO,MAAM,sBAAsB,EAkI9B,wBAAwB,CAAC"}
+{"version":3,"file":"DefaultComboboxControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/combobox/DefaultComboboxControl.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,wBAAwB,EAAwB,MAAM,YAAY,CAAC;AAOjF,eAAO,MAAM,sBAAsB,EAmI9B,wBAAwB,CAAC"}

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;AAkClB,KAAK,wBAAwB,GAAG,CAC9B,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;CAAE,KAClF,KAAK,CAAC,YAAY,CAAC;AAsbxB,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;AAkClB,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;AA0bxB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}

package/esm/alpha/combobox/DefaultComboboxControl.js

@@ -62,6 +62,7 @@ export const DefaultComboboxControl = /*#__PURE__*/memo(_ref => {
     compact: compact,
     open: open,
     options: options,
+    role: "combobox",
     setOpen: setOpen,
     value: value
   }, props), {}, {

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "blendStyles", "align", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessibilityLabel", "ariaHaspopup", "tabIndex", "styles", "classNames"];
+const _excluded = ["role", "type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "blendStyles", "align", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessibilityLabel", "ariaHaspopup", "tabIndex", "styles", "classNames"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -38,6 +38,7 @@ const variantColor = {
 };
 const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
+      role = 'button',
       type,
       options,
       value,
@@ -72,7 +73,6 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
   const isMultiSelect = type === 'multi';
   const shouldShowCompactLabel = compact && label && !isMultiSelect;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
-
   // Map of options to their values
   // If multiple options share the same value, the first occurrence wins (matches native HTML select behavior)
   const optionsMap = useMemo(() => {
@@ -226,14 +226,13 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       children: singleValueContent
     }) : singleValueContent;
   }, [hasValue, isMultiSelect, singleValueContent, align, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, handleUnselectValue]);
-  const inputNode = useMemo(() =>
-  /*#__PURE__*/
-  // We don't offer control over setting the role since this must always be a button
-  _jsxs(Pressable, {
+  const inputNode = useMemo(() => /*#__PURE__*/_jsxs(Pressable, {
     ref: controlPressableRef,
     noScaleOnPress: true,
     accessibilityLabel: computedControlAccessibilityLabel,
+    "aria-expanded": open,
     "aria-haspopup": ariaHaspopup,
+    as: role === 'combobox' ? 'div' : 'button',
     background: "transparent",
     blendStyles: interactableBlendStyles,
     borderWidth: 0,
@@ -246,6 +245,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     minWidth: 0,
     onClick: () => setOpen(s => !s),
     paddingStart: 1,
+    role: role,
     style: styles === null || styles === void 0 ? void 0 : styles.controlInputNode,
     tabIndex: tabIndex,
     children: [!!startNode && /*#__PURE__*/_jsx(HStack, {
@@ -286,7 +286,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         children: [valueNode, contentNode]
       })
     })]
-  }), [computedControlAccessibilityLabel, ariaHaspopup, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, labelVariant, compact, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, startNode, shouldShowCompactLabel, labelNode, align, isMultiSelect, valueNode, contentNode, setOpen]);
+  }), [computedControlAccessibilityLabel, ariaHaspopup, open, role, interactableBlendStyles, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, disabled, labelVariant, compact, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, tabIndex, startNode, shouldShowCompactLabel, labelNode, align, isMultiSelect, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     "aria-hidden": true,
     flexShrink: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.56.0",
+  "version": "8.56.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -207,7 +207,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.56.0",
+    "@coinbase/cds-common": "^8.56.1",
     "@coinbase/cds-icons": "^5.13.0",
     "@coinbase/cds-illustrations": "^4.35.0",
     "@coinbase/cds-lottie-files": "^3.3.4",