@coinbase/cds-mobile 8.25.1 → 8.26.0

package/esm/alpha/select-chip/SelectChipControl.js

@@ -0,0 +1,111 @@
+import React, { forwardRef, memo, useMemo } from 'react';
+import { MediaChip } from '../../chips/MediaChip';
+import { AnimatedCaret } from '../../motion/AnimatedCaret';
+import { isSelectOptionGroup } from '../select/types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SelectChipControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    type,
+    options,
+    value,
+    placeholder,
+    setOpen,
+    startNode,
+    endNode: customEndNode,
+    open,
+    accessibilityLabel,
+    accessibilityHint,
+    disabled,
+    maxSelectedOptionsToShow = 2,
+    hiddenSelectedOptionsLabel = 'more',
+    label,
+    compact,
+    invertColorScheme,
+    numberOfLines
+  } = _ref;
+  const isMultiSelect = type === 'multi';
+  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(() => {
+    const map = new Map();
+    const isDev = process.env.NODE_ENV !== 'production';
+    options.forEach((option, optionIndex) => {
+      if (isSelectOptionGroup(option)) {
+        option.options.forEach((groupOption, groupOptionIndex) => {
+          if (groupOption.value !== null) {
+            const optionValue = groupOption.value;
+            // Only set if not already present (first wins)
+            if (!map.has(optionValue)) {
+              map.set(optionValue, groupOption);
+            } else if (isDev) {
+              console.warn("[Select] Duplicate option value detected: \"" + optionValue + "\". " + "The first occurrence will be used for display. " + ("Found duplicate in group \"" + option.label + "\" at index " + groupOptionIndex + ". ") + ("First occurrence was at option index " + optionIndex + "."));
+            }
+          }
+        });
+      } else {
+        const singleOption = option;
+        if (singleOption.value !== null) {
+          const optionValue = singleOption.value;
+          // Only set if not already present (first wins)
+          if (!map.has(optionValue)) {
+            map.set(optionValue, singleOption);
+          } else if (isDev) {
+            var _ref2, _existingOption$label;
+            const existingOption = map.get(optionValue);
+            console.warn("[Select] Duplicate option value detected: \"" + optionValue + "\". " + "The first occurrence will be used for display. " + ("Found duplicate at option index " + optionIndex + ". ") + ("First occurrence label: \"" + ((_ref2 = (_existingOption$label = existingOption == null ? void 0 : existingOption.label) != null ? _existingOption$label : existingOption == null ? void 0 : existingOption.value) != null ? _ref2 : 'unknown') + "\"."));
+          }
+        }
+      }
+    });
+    return map;
+  }, [options]);
+  const labelContent = useMemo(() => {
+    var _ref3, _ref6, _ref7, _ref8, _opt$label2;
+    if (!hasValue) return (_ref3 = label != null ? label : placeholder) != null ? _ref3 : null;
+    if (isMultiSelect) {
+      const values = value;
+      const visible = values.slice(0, maxSelectedOptionsToShow);
+      const labels = visible.map(v => {
+        var _ref4, _ref5, _opt$label;
+        const opt = optionsMap.get(v);
+        return (_ref4 = (_ref5 = (_opt$label = opt == null ? void 0 : opt.label) != null ? _opt$label : opt == null ? void 0 : opt.description) != null ? _ref5 : opt == null ? void 0 : opt.value) != null ? _ref4 : '';
+      }).filter(Boolean);
+      const hiddenCount = values.length - visible.length;
+      return hiddenCount > 0 ? labels.join(', ') + " +" + hiddenCount + " " + hiddenSelectedOptionsLabel : labels.join(', ');
+    }
+    const opt = optionsMap.get(value);
+    return (_ref6 = (_ref7 = (_ref8 = (_opt$label2 = opt == null ? void 0 : opt.label) != null ? _opt$label2 : opt == null ? void 0 : opt.description) != null ? _ref8 : opt == null ? void 0 : opt.value) != null ? _ref7 : placeholder) != null ? _ref6 : null;
+  }, [hasValue, label, placeholder, isMultiSelect, optionsMap, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel]);
+  const endNode = useMemo(() => {
+    return customEndNode != null ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
+      active: true,
+      color: hasValue ? 'fgInverse' : 'fg',
+      rotate: open ? 0 : 180,
+      size: "xs"
+    });
+  }, [customEndNode, open, hasValue]);
+  const color = useMemo(() => {
+    return hasValue ? 'fgInverse' : 'fg';
+  }, [hasValue]);
+  const background = useMemo(() => {
+    return hasValue ? 'bgInverse' : 'bgSecondary';
+  }, [hasValue]);
+  return /*#__PURE__*/_jsx(MediaChip, {
+    ref: ref,
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    background: background,
+    color: color,
+    compact: compact,
+    disabled: disabled,
+    end: endNode,
+    invertColorScheme: invertColorScheme,
+    numberOfLines: numberOfLines,
+    onPress: () => setOpen(s => !s),
+    start: startNode,
+    children: labelContent
+  });
+}));
+export const SelectChipControl = SelectChipControlComponent;

package/esm/alpha/select-chip/__stories__/SelectChip.stories.js

@@ -0,0 +1,538 @@
+import { useState } from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { useMultiSelect } from '@coinbase/cds-common/select/useMultiSelect';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { HStack } from '../../../layout/HStack';
+import { VStack } from '../../../layout/VStack';
+import { RemoteImage } from '../../../media';
+import { Text } from '../../../typography/Text';
+import { SelectChip } from '../SelectChip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultSingle = () => {
+  const exampleOptions = [{
+    value: null,
+    label: 'Clear selection'
+  }, {
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4'
+  }];
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select a value",
+    label: "Select a value",
+    onChange: setValue,
+    options: exampleOptions,
+    placeholder: "Choose an option",
+    value: value
+  });
+};
+export const DefaultMulti = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4'
+  }, {
+    value: '5',
+    label: 'Option 5'
+  }];
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select multiple values",
+    label: "Select multiple values",
+    onChange: onChange,
+    options: exampleOptions,
+    placeholder: "Choose options",
+    type: "multi",
+    value: value
+  });
+};
+export const Compact = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4'
+  }];
+  const [value, setValue] = useState('1');
+  return /*#__PURE__*/_jsx(SelectChip, {
+    compact: true,
+    onChange: setValue,
+    options: exampleOptions,
+    placeholder: "Choose an option",
+    value: value
+  });
+};
+export const WithStartEndNodes = () => {
+  const exampleOptions = [{
+    value: 'btc',
+    label: assets.btc.name
+  }, {
+    value: 'eth',
+    label: assets.eth.name
+  }, {
+    value: 'dai',
+    label: assets.dai.name
+  }];
+  const [value, setValue] = useState('eth');
+
+  // Map each option value to a different asset
+  const getStartNode = selectedValue => {
+    if (!selectedValue) return null;
+    const assetMap = {
+      btc: assets.btc.imageUrl,
+      eth: assets.eth.imageUrl,
+      dai: assets.dai.imageUrl
+    };
+    const imageUrl = assetMap[selectedValue];
+    if (!imageUrl) return null;
+    return /*#__PURE__*/_jsx(RemoteImage, {
+      height: 24,
+      shape: "circle",
+      source: imageUrl,
+      width: 24
+    });
+  };
+  return /*#__PURE__*/_jsx(SelectChip, {
+    onChange: setValue,
+    options: exampleOptions,
+    placeholder: "Choose an asset",
+    startNode: getStartNode(value),
+    value: value
+  });
+};
+
+// Map asset symbols to their image URLs
+const assetImageMap = {
+  btc: assets.btc.imageUrl,
+  eth: assets.eth.imageUrl,
+  dai: assets.dai.imageUrl,
+  ltc: assets.ltc.imageUrl,
+  xrp: assets.xrp.imageUrl
+};
+
+// TODO: Add multi-select with assets story when RemoteImageGroup is fixed
+// export const MultiSelectWithAssets = () => {
+//   const exampleOptions = [
+//     { value: 'btc', label: assets.btc.name },
+//     { value: 'eth', label: assets.eth.name },
+//     { value: 'dai', label: assets.dai.name },
+//     { value: 'ltc', label: assets.ltc.name },
+//     { value: 'xrp', label: assets.xrp.name },
+//   ];
+//   const { value, onChange } = useMultiSelect({
+//     initialValue: ['eth', 'btc'],
+//   });
+
+//   // Get startNode based on selected assets
+//   const startNode = useMemo(() => {
+//     if (value.length === 0) return null;
+
+//     // Multiple assets selected - use RemoteImageGroup
+//     return (
+//       <RemoteImageGroup shape="circle" size={24}>
+//         {value.map((assetValue) => {
+//           const imageUrl = assetImageMap[assetValue];
+//           if (!imageUrl) return null;
+//           return <RemoteImage key={assetValue} source={imageUrl} />;
+//         })}
+//       </RemoteImageGroup>
+//     );
+//   }, [value]);
+
+//   return (
+//     <SelectChip
+//       accessibilityLabel="Select multiple assets"
+//       onChange={onChange}
+//       options={exampleOptions}
+//       placeholder="Choose assets"
+//       startNode={startNode}
+//       type="multi"
+//       value={value}
+//     />
+//   );
+// };
+
+export const InvertColorScheme = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }];
+  const [value, setValue] = useState('1');
+  return /*#__PURE__*/_jsx(VStack, {
+    background: "bgAlternate",
+    borderRadius: 200,
+    padding: 2,
+    children: /*#__PURE__*/_jsx(SelectChip, {
+      invertColorScheme: true,
+      onChange: setValue,
+      options: exampleOptions,
+      placeholder: "Choose an option",
+      value: value
+    })
+  });
+};
+export const EmptyOptions = () => {
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    onChange: setValue,
+    options: [],
+    placeholder: "No options available",
+    value: value
+  });
+};
+export const WithGroups = () => {
+  const exampleOptions = [{
+    label: 'Group A',
+    options: [{
+      value: '1',
+      label: 'Option 1'
+    }, {
+      value: '2',
+      label: 'Option 2'
+    }, {
+      value: '3',
+      label: 'Option 3'
+    }]
+  }, {
+    label: 'Group B',
+    options: [{
+      value: '4',
+      label: 'Option 4'
+    }, {
+      value: '5',
+      label: 'Option 5'
+    }]
+  }, {
+    label: 'Group C',
+    options: [{
+      value: '6',
+      label: 'Option 6'
+    }]
+  }];
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select a value",
+    onChange: setValue,
+    options: exampleOptions,
+    placeholder: "Choose an option",
+    value: value
+  });
+};
+export const MultiWithGroups = () => {
+  const exampleOptions = [{
+    label: 'Group A',
+    options: [{
+      value: '1',
+      label: 'Option 1'
+    }, {
+      value: '2',
+      label: 'Option 2'
+    }, {
+      value: '3',
+      label: 'Option 3'
+    }]
+  }, {
+    label: 'Group B',
+    options: [{
+      value: '4',
+      label: 'Option 4'
+    }, {
+      value: '5',
+      label: 'Option 5'
+    }]
+  }, {
+    label: 'Group C',
+    options: [{
+      value: '6',
+      label: 'Option 6'
+    }]
+  }];
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select multiple values",
+    onChange: onChange,
+    options: exampleOptions,
+    placeholder: "Choose options",
+    type: "multi",
+    value: value
+  });
+};
+export const WithDisabledGroup = () => {
+  const exampleOptions = [{
+    label: 'Available Options',
+    options: [{
+      value: '1',
+      label: 'Option 1'
+    }, {
+      value: '2',
+      label: 'Option 2'
+    }, {
+      value: '3',
+      label: 'Option 3'
+    }]
+  }, {
+    label: 'Unavailable Options (Group Disabled)',
+    disabled: true,
+    options: [{
+      value: '4',
+      label: 'Option 4'
+    }, {
+      value: '5',
+      label: 'Option 5'
+    }, {
+      value: '6',
+      label: 'Option 6'
+    }]
+  }, {
+    label: 'More Available Options',
+    options: [{
+      value: '7',
+      label: 'Option 7'
+    }, {
+      value: '8',
+      label: 'Option 8'
+    }]
+  }];
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select a value",
+    onChange: setValue,
+    options: exampleOptions,
+    placeholder: "Choose an option",
+    value: value
+  });
+};
+export const MultiWithDisabledGroup = () => {
+  const exampleOptions = [{
+    label: 'Available Options',
+    options: [{
+      value: '1',
+      label: 'Option 1'
+    }, {
+      value: '2',
+      label: 'Option 2'
+    }, {
+      value: '3',
+      label: 'Option 3'
+    }]
+  }, {
+    label: 'Unavailable Options (Group Disabled)',
+    disabled: true,
+    options: [{
+      value: '4',
+      label: 'Option 4'
+    }, {
+      value: '5',
+      label: 'Option 5'
+    }, {
+      value: '6',
+      label: 'Option 6'
+    }]
+  }, {
+    label: 'More Available Options',
+    options: [{
+      value: '7',
+      label: 'Option 7'
+    }, {
+      value: '8',
+      label: 'Option 8'
+    }]
+  }];
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(SelectChip, {
+    accessibilityLabel: "Select multiple values",
+    onChange: onChange,
+    options: exampleOptions,
+    placeholder: "Choose options",
+    type: "multi",
+    value: value
+  });
+};
+export const FullyDisabled = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2'
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4'
+  }];
+  const [value, setValue] = useState('1');
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: "Disabled select chip:"
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(SelectChip, {
+        disabled: true,
+        accessibilityLabel: "Select a value",
+        onChange: setValue,
+        options: exampleOptions,
+        placeholder: "Choose an option",
+        value: null
+      }), /*#__PURE__*/_jsx(SelectChip, {
+        disabled: true,
+        accessibilityLabel: "Select a value",
+        onChange: setValue,
+        options: exampleOptions,
+        placeholder: "Choose an option",
+        value: value
+      })]
+    })]
+  });
+};
+export const WithDisabledOptions = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1'
+  }, {
+    value: '2',
+    label: 'Option 2',
+    disabled: true
+  }, {
+    value: '3',
+    label: 'Option 3'
+  }, {
+    value: '4',
+    label: 'Option 4',
+    disabled: true
+  }];
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: "Select with disabled options:"
+    }), /*#__PURE__*/_jsx(SelectChip, {
+      accessibilityLabel: "Select a value",
+      onChange: setValue,
+      options: exampleOptions,
+      placeholder: "Choose an option",
+      value: value
+    })]
+  });
+};
+export const WithDescriptions = () => {
+  const exampleOptions = [{
+    value: '1',
+    label: 'Option 1',
+    description: 'First option description'
+  }, {
+    value: '2',
+    label: 'Option 2',
+    description: 'Second option description'
+  }, {
+    value: '3',
+    label: 'Option 3',
+    description: 'Third option description'
+  }, {
+    value: '4',
+    label: 'Option 4',
+    description: 'Fourth option description'
+  }];
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      children: "Select with option descriptions:"
+    }), /*#__PURE__*/_jsx(SelectChip, {
+      accessibilityLabel: "Select a value",
+      onChange: setValue,
+      options: exampleOptions,
+      placeholder: "Choose an option",
+      value: value
+    })]
+  });
+};
+const SelectChipScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(DefaultSingle, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Default Multi",
+      children: /*#__PURE__*/_jsx(DefaultMulti, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact",
+      children: /*#__PURE__*/_jsx(Compact, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Start End Nodes",
+      children: /*#__PURE__*/_jsx(WithStartEndNodes, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Invert Color Scheme",
+      children: /*#__PURE__*/_jsx(InvertColorScheme, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Empty Options",
+      children: /*#__PURE__*/_jsx(EmptyOptions, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Groups",
+      children: /*#__PURE__*/_jsx(WithGroups, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi With Groups",
+      children: /*#__PURE__*/_jsx(MultiWithGroups, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Disabled Group",
+      children: /*#__PURE__*/_jsx(WithDisabledGroup, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multi With Disabled Group",
+      children: /*#__PURE__*/_jsx(MultiWithDisabledGroup, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Fully Disabled",
+      children: /*#__PURE__*/_jsx(FullyDisabled, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Disabled Options",
+      children: /*#__PURE__*/_jsx(WithDisabledOptions, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With Descriptions",
+      children: /*#__PURE__*/_jsx(WithDescriptions, {})
+    })]
+  });
+};
+export default SelectChipScreen;

package/esm/alpha/select-chip/index.js

@@ -0,0 +1,2 @@
+export * from './SelectChip';
+export * from './SelectChipControl';