@coinbase/cds-mobile 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

@@ -1,4 +1,4 @@
-import { TouchableOpacity } from 'react-native';
+import { type StyleProp, TouchableOpacity, type ViewStyle } from 'react-native';
 import type { SelectControlProps, SelectType } from './Select';
 type DefaultSelectControlComponent = <
   Type extends SelectType,
@@ -44,14 +44,14 @@ export declare const DefaultSelectControlComponent: import('react').NamedExoticC
       removeSelectedOptionAccessibilityLabel?: string;
       blendStyles?: import('../../system').InteractableBlendStyles;
       compact?: boolean;
-      style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+      style?: StyleProp<ViewStyle>;
       styles?: {
-        controlStartNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlInputNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlValueNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlLabelNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlHelperTextNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
-        controlEndNode?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+        controlStartNode?: StyleProp<ViewStyle>;
+        controlInputNode?: StyleProp<ViewStyle>;
+        controlValueNode?: StyleProp<ViewStyle>;
+        controlLabelNode?: StyleProp<ViewStyle>;
+        controlHelperTextNode?: StyleProp<ViewStyle>;
+        controlEndNode?: StyleProp<ViewStyle>;
       };
     } & import('react').RefAttributes<import('react-native').View>
 >;

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":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAe3D,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAY7E,KAAK,6BAA6B,GAAG,CACnC,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,KAAK,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC;CAC9D,KACE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;;wBAsPlC,CAAH;wBAEU,CAAC;wBAIgC,CAAA;wBAC9B,CAAC;6BACK,CAAC;sBAIb,CAAX;;+DAgIA,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAe3F,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAY7E,KAAK,6BAA6B,GAAG,CACnC,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,KAAK,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC,CAAC;CAC9D,KACE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;;wBA8OZ,CAAC;wBACoB,CAAC;wBAE1C,CAAR;wBAIO,CAAA;6BAKD,CAAH;sBAGU,CAAC;;+DA6Jf,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}

package/esm/alpha/select/DefaultSelectControl.js

@@ -37,7 +37,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       variant,
       helperText,
       label,
-      labelVariant,
+      labelVariant: labelVariantProp,
       contentNode,
       startNode,
       endNode: customEndNode,
@@ -57,8 +57,11 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
+  // When compact, labelVariant is ignored
+  const labelVariant = compact ? undefined : labelVariantProp;
   const isMultiSelect = type === 'multi';
   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
@@ -128,18 +131,30 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     style: styles == null ? void 0 : styles.controlHelperTextNode,
     children: helperText
   }) : helperText, [helperText, variant, styles == null ? void 0 : styles.controlHelperTextNode]);
-  const labelNode = useMemo(() => typeof label === 'string' ? /*#__PURE__*/_jsx(Pressable, {
-    disabled: disabled,
-    onPress: () => setOpen(s => !s),
-    style: styles == null ? void 0 : styles.controlLabelNode,
-    children: /*#__PURE__*/_jsx(InputLabel, {
-      color: "fg"
-      // remove default vertical padding when label is the compact/inline version
-      ,
-      paddingY: shouldShowCompactLabel ? 0 : 0.5,
-      children: label
-    })
-  }) : label, [disabled, label, setOpen, shouldShowCompactLabel, styles == null ? void 0 : styles.controlLabelNode]);
+  const labelNode = useMemo(() => {
+    if (shouldShowInsideLabel || shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        color: "fg",
+        paddingY: 0.5,
+        style: styles == null ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, label, styles == null ? void 0 : styles.controlLabelNode]);
+  const inlineLabelNode = useMemo(() => {
+    if (!shouldShowInsideLabel && !shouldShowCompactLabel) return null;
+    if (typeof label === 'string') {
+      return /*#__PURE__*/_jsx(InputLabel, {
+        color: "fg",
+        paddingY: 0,
+        style: styles == null ? void 0 : styles.controlLabelNode,
+        children: label
+      });
+    }
+    return label;
+  }, [shouldShowInsideLabel, shouldShowCompactLabel, label, styles == null ? void 0 : styles.controlLabelNode]);
   const valueAlignment = useMemo(() => align === 'end' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start', [align]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
@@ -221,8 +236,20 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
           alignItems: "center",
           maxWidth: "40%",
           paddingEnd: 1,
-          children: labelNode
-        }) : null, /*#__PURE__*/_jsxs(VStack, {
+          children: inlineLabelNode
+        }) : null, shouldShowInsideLabel ? /*#__PURE__*/_jsxs(VStack, {
+          flexGrow: 1,
+          minWidth: 0,
+          width: "100%",
+          children: [inlineLabelNode, /*#__PURE__*/_jsxs(VStack, {
+            alignItems: valueAlignment,
+            flexGrow: 1,
+            flexShrink: 1,
+            minWidth: 0,
+            style: styles == null ? void 0 : styles.controlValueNode,
+            children: [valueNode, contentNode]
+          })]
+        }) : /*#__PURE__*/_jsxs(VStack, {
           alignItems: valueAlignment,
           flexGrow: 1,
           flexShrink: 1,
@@ -232,7 +259,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         })]
       })
     })
-  })), [ref, computedControlAccessibilityLabel, disabled, onBlur, onFocus, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, startNode, shouldShowCompactLabel, labelNode, valueAlignment, valueNode, contentNode, setOpen]);
+  })), [ref, computedControlAccessibilityLabel, disabled, onBlur, onFocus, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, startNode, shouldShowCompactLabel, shouldShowInsideLabel, inlineLabelNode, valueAlignment, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     accessible: customEndNode ? true : false,
     disabled: disabled,
@@ -249,13 +276,11 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     })
   }), [styles == null ? void 0 : styles.controlEndNode, disabled, 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, labelVariant]);
+    paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+    paddingBottom: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
+    paddingLeft: theme.space[2],
+    paddingRight: theme.space[2]
+  }), [compact, labelVariant, theme.space]);
   return /*#__PURE__*/_jsx(InputStack, _extends({
     borderFocusedStyle: borderFocusedStyle,
     borderStyle: borderUnfocusedStyle,
@@ -266,11 +291,13 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     focusedBorderWidth: focusedBorderWidth,
     helperTextNode: helperTextNode,
     inputNode: inputNode,
-    labelNode: shouldShowCompactLabel ? null : labelNode,
+    labelNode: labelNode,
     labelVariant: labelVariant,
     onBlur: onBlur,
     onFocus: onFocus,
-    styles: inputStackStyles,
+    styles: {
+      input: inputStackStyles
+    },
     variant: variant
   }, props));
 }));

package/esm/system/__stories__/componentConfigStickerSheet/examples/Select.js

@@ -1,24 +1,41 @@
-import React, { memo, useState } from 'react';
+import { memo, useState } from 'react';
 import { Select } from '../../../../alpha/select/Select';
 import { VStack } from '../../../../layout/VStack';
 import { stickerSheetSelectOptions } from './constants';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SelectExample = /*#__PURE__*/memo(() => {
-  const [value, setValue] = useState('btc');
-  const [secondaryValue, setSecondaryValue] = useState(null);
+  const [selectValue, setSelectValue] = useState(null);
   return /*#__PURE__*/_jsxs(VStack, {
     gap: 1,
     width: "100%",
     children: [/*#__PURE__*/_jsx(Select, {
-      label: "Asset",
-      onChange: setValue,
+      label: "Label",
+      onChange: setSelectValue,
       options: stickerSheetSelectOptions,
-      value: value
+      placeholder: "Outside label",
+      value: selectValue
     }), /*#__PURE__*/_jsx(Select, {
-      label: "Asset (empty)",
-      onChange: setSecondaryValue,
+      label: "Label",
+      labelVariant: "inside",
+      onChange: setSelectValue,
       options: stickerSheetSelectOptions,
-      value: secondaryValue
+      placeholder: "Inside label",
+      value: selectValue
+    }), /*#__PURE__*/_jsx(Select, {
+      compact: true,
+      label: "Label",
+      onChange: setSelectValue,
+      options: stickerSheetSelectOptions,
+      placeholder: "Compact input",
+      value: selectValue
+    }), /*#__PURE__*/_jsx(Select, {
+      compact: true,
+      align: "end",
+      label: "Label",
+      onChange: setSelectValue,
+      options: stickerSheetSelectOptions,
+      placeholder: "Compact end align",
+      value: selectValue
     })]
   });
 });

package/esm/system/__stories__/componentConfigStickerSheet/examples/SelectChip.js

@@ -1,22 +1,26 @@
-import React, { memo, useState } from 'react';
-import { SelectChip } from '../../../../chips/SelectChip';
-import { SelectOption } from '../../../../controls/SelectOption';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { SelectChip } from '../../../../alpha/select-chip/SelectChip';
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectChipOptions = [{
+  value: 'USD',
+  label: 'USD'
+}, {
+  value: 'CAD',
+  label: 'CAD'
+}, {
+  value: 'GBP',
+  label: 'GBP'
+}, {
+  value: 'JPY',
+  label: 'JPY'
+}];
 export const SelectChipExample = /*#__PURE__*/memo(() => {
-  const [value, setValue] = useState('Balance');
-  return /*#__PURE__*/_jsxs(SelectChip, {
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select a currency",
     onChange: setValue,
-    placeholder: "Sort",
-    value: value,
-    children: [/*#__PURE__*/_jsx(SelectOption, {
-      title: "Balance",
-      value: "Balance"
-    }), /*#__PURE__*/_jsx(SelectOption, {
-      title: "Name",
-      value: "Name"
-    }), /*#__PURE__*/_jsx(SelectOption, {
-      title: "Asset Value",
-      value: "Asset Value"
-    })]
+    options: selectChipOptions,
+    placeholder: "Currency",
+    value: value
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -202,7 +202,7 @@
     "react-native-worklets": "0.5.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",