@coinbase/cds-web 9.1.0 → 9.1.1

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.1.1 (5/27/2026 PST)
+
+#### 🐞 Fixes
+
+- Fix: support inside label variant on select. [[#726](https://github.com/coinbase/cds/pull/726)]
+
 ## 9.1.0 (5/26/2026 PST)
 
 #### 🚀 Updates

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;AAiB9E,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;AAycxB,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;AA+exB,eAAO,MAAM,oBAAoB,EAAoC,wBAAwB,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -12,7 +12,6 @@ import { HelperText } from '../../controls/HelperText';
 import { InputLabel } from '../../controls/InputLabel';
 import { InputStack } from '../../controls/InputStack';
 import { cx } from '../../cx';
-import { useTheme } from '../../hooks/useTheme';
 import { HStack } from '../../layout/HStack';
 import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
@@ -45,7 +44,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       variant,
       helperText,
       label,
-      labelVariant,
+      labelVariant: labelVariantProp,
       contentNode,
       startNode,
       endNode: customEndNode,
@@ -67,11 +66,13 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
       classNames
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const theme = useTheme();
   const isMultiSelect = type === 'multi';
+  // When compact, labelVariant is ignored
+  const labelVariant = compact ? undefined : labelVariantProp;
   // horizontal/inline label is used for compact selesct exepct for multi-selects
   // multi-selects render their label outside of the control unless labelVariant is set to 'inside'
   const shouldShowCompactLabel = compact && label && !isMultiSelect;
+  const shouldShowInsideLabel = labelVariant === 'inside' && !compact && label;
   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)
@@ -158,27 +159,32 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     style: styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode,
     children: helperText
   }) : helperText, [helperText, variant, classNames === null || classNames === void 0 ? void 0 : classNames.controlHelperTextNode, styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode]);
-  const labelNode = useMemo(() =>
-  // labelVariant has no effect when compact is true
-  labelVariant === 'inside' && !compact ? /*#__PURE__*/_jsx(Pressable, {
-    noScaleOnPress: true,
-    onClick: () => setOpen(s => !s),
-    tabIndex: -1,
-    children: /*#__PURE__*/_jsx(InputLabel, {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
-      color: "fg",
-      style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
-      children: label
-    })
-  }) : typeof label === 'string' ? /*#__PURE__*/_jsx(InputLabel, {
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
-    color: "fg"
-    // remove default vertical padding when label is the compact/inline version
-    ,
-    paddingY: shouldShowCompactLabel ? 0 : 0.5,
-    style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
-    children: label
-  }) : label, [labelVariant, compact, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label, shouldShowCompactLabel, setOpen]);
+  const labelNode = useMemo(() => {
+    if (shouldShowInsideLabel || shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
+        color: "fg",
+        paddingY: 0.5,
+        style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label]);
+  const inlineLabelNode = useMemo(() => {
+    if (!shouldShowInsideLabel && !shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
+        color: "fg",
+        paddingY: 0,
+        style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, label]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
       const valuesToShow = value.length <= maxSelectedOptionsToShow ? value : value.slice(0, maxSelectedOptionsToShow);
@@ -262,8 +268,32 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
       paddingEnd: 1,
-      children: labelNode
-    }) : null, /*#__PURE__*/_jsx(HStack, {
+      children: inlineLabelNode
+    }) : null, shouldShowInsideLabel ? /*#__PURE__*/_jsxs(VStack, {
+      flexGrow: 1,
+      minWidth: 0,
+      width: "100%",
+      children: [inlineLabelNode, /*#__PURE__*/_jsx(HStack, {
+        alignItems: "center",
+        flexGrow: 1,
+        minWidth: 0,
+        width: "100%",
+        children: /*#__PURE__*/_jsxs(VStack, {
+          ref: valueNodeContainerRef,
+          alignItems: align,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode,
+          flexGrow: 1,
+          flexShrink: 1,
+          flexWrap: "wrap",
+          gap: 1,
+          justifyContent: "flex-start",
+          minWidth: 0,
+          overflow: "hidden",
+          style: styles === null || styles === void 0 ? void 0 : styles.controlValueNode,
+          children: [valueNode, contentNode]
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(HStack, {
       alignItems: "center",
       flexGrow: 1,
       flexShrink: 1,
@@ -286,7 +316,7 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
         children: [valueNode, contentNode]
       })
     })]
-  }), [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, 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, onKeyDown, startNode, shouldShowCompactLabel, labelNode, align, 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, 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, onKeyDown, startNode, shouldShowCompactLabel, shouldShowInsideLabel, inlineLabelNode, align, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     "aria-hidden": true,
     flexShrink: 0,
@@ -307,13 +337,11 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     })
   }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, labelVariant, styles === null || styles === void 0 ? void 0 : styles.controlEndNode, customEndNode, open, variant, setOpen]);
   const inputStackStyles = useMemo(() => ({
-    input: {
-      paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
-      paddingBottom: compact ? theme.space[1] : theme.space[2],
-      paddingLeft: theme.space[2],
-      paddingRight: theme.space[2]
-    }
-  }), [compact, theme.space, labelVariant]);
+    paddingTop: compact || labelVariant === 'inside' ? 'var(--space-1)' : 'var(--space-2)',
+    paddingBottom: compact || labelVariant === 'inside' ? 'var(--space-1)' : 'var(--space-2)',
+    paddingLeft: 'var(--space-2)',
+    paddingRight: 'var(--space-2)'
+  }), [compact, labelVariant]);
   return /*#__PURE__*/_jsx(InputStack, _objectSpread({
     ref: ref,
     blendStyles: interactableBlendStyles,
@@ -323,9 +351,11 @@ const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(
     focusedBorderWidth: focusedBorderWidth,
     helperTextNode: helperTextNode,
     inputNode: inputNode,
-    labelNode: shouldShowCompactLabel ? null : labelNode,
+    labelNode: labelNode,
     labelVariant: labelVariant,
-    styles: inputStackStyles,
+    styles: {
+      input: inputStackStyles
+    },
     variant: variant
   }, props));
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
@@ -215,7 +215,7 @@
     "react-dom": "^18.0.0 || ~19.1.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.1.0",
+    "@coinbase/cds-common": "^9.1.1",
     "@coinbase/cds-icons": "^5.17.0",
     "@coinbase/cds-illustrations": "^4.40.1",
     "@coinbase/cds-lottie-files": "^3.3.4",