@coinbase/cds-web 8.19.0 → 8.20.0

package/esm/alpha/select/DefaultSelectControl.js

@@ -0,0 +1,234 @@
+const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "startNode", "endNode", "compact", "blendStyles", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessibilityLabel", "ariaHaspopup", "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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
+import { Chip } from '../../chips/Chip';
+import { InputChip } from '../../chips/InputChip';
+import { HelperText } from '../../controls/HelperText';
+import { InputLabel } from '../../controls/InputLabel';
+import { InputStack } from '../../controls/InputStack';
+import { cx } from '../../cx';
+import { HStack } from '../../layout/HStack';
+import { AnimatedCaret } from '../../motion/AnimatedCaret';
+import { Pressable } from '../../system/Pressable';
+import { Text } from '../../typography/Text';
+import { findClosestNonDisabledNodeIndex } from '../../utils/findClosestNonDisabledNodeIndex';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noFocusOutlineCss = "noFocusOutlineCss-n1gl6kcn";
+const variantColor = {
+  foreground: 'fg',
+  positive: 'fgPositive',
+  negative: 'fgNegative',
+  primary: 'fgPrimary',
+  foregroundMuted: 'fgMuted',
+  secondary: 'fgMuted'
+};
+const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      type,
+      options,
+      value,
+      onChange,
+      open,
+      placeholder,
+      disabled,
+      setOpen,
+      variant,
+      helperText,
+      label,
+      labelVariant,
+      startNode,
+      endNode: customEndNode,
+      compact,
+      blendStyles,
+      maxSelectedOptionsToShow = 6,
+      hiddenSelectedOptionsLabel = 'more',
+      removeSelectedOptionAccessibilityLabel = 'Remove',
+      accessibilityLabel,
+      ariaHaspopup,
+      styles,
+      classNames
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const shouldShowCompactLabel = compact && label;
+  const isMultiSelect = type === 'multi';
+  const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
+  const controlPressableRef = useRef(null);
+  const valueNodeContainerRef = useRef(null);
+  const handleUnselectValue = useCallback((event, index) => {
+    var _controlPressableRef$, _controlPressableRef$2, _valueNodes$focusInde;
+    // Unselect the value
+    event.stopPropagation();
+    const currentValue = [...value];
+    const changedValue = currentValue[index];
+    onChange === null || onChange === void 0 || onChange(changedValue);
+
+    // Shift focus from the valueNode that will be removed
+    // If there will be no values left after removing, focus the control
+    if (currentValue.length === 1) return (_controlPressableRef$ = controlPressableRef.current) === null || _controlPressableRef$ === void 0 ? void 0 : _controlPressableRef$.focus();
+    if (!valueNodeContainerRef.current) return;
+    // Otherwise focus the next value
+    const valueNodes = Array.from(valueNodeContainerRef.current.querySelectorAll('[data-selected-value]'));
+    const focusIndex = findClosestNonDisabledNodeIndex(valueNodes, index);
+    if (focusIndex === null) return (_controlPressableRef$2 = controlPressableRef.current) === null || _controlPressableRef$2 === void 0 ? void 0 : _controlPressableRef$2.focus();
+    (_valueNodes$focusInde = valueNodes[focusIndex]) === null || _valueNodes$focusInde === void 0 || _valueNodes$focusInde.focus();
+  }, [onChange, value]);
+  const interactableBlendStyles = useMemo(() => isMultiSelect ? _objectSpread({
+    hoveredBackground: 'rgba(0, 0, 0, 0)',
+    hoveredOpacity: 1,
+    pressedBackground: 'rgba(0, 0, 0, 0)'
+  }, blendStyles) : blendStyles, [isMultiSelect, blendStyles]);
+  const helperTextNode = useMemo(() => typeof helperText === 'string' ? /*#__PURE__*/_jsx(HelperText, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.controlHelperTextNode,
+    color: variant ? variantColor[variant] : 'fgMuted',
+    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(() => typeof label === 'string' && labelVariant === 'inside' ? /*#__PURE__*/_jsx(Pressable, {
+    noScaleOnPress: true,
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
+    disabled: disabled,
+    onClick: () => setOpen(s => !s),
+    style: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
+    tabIndex: -1,
+    children: /*#__PURE__*/_jsx(InputLabel, {
+      color: "fg",
+      paddingBottom: 0,
+      paddingTop: 1,
+      paddingX: 2,
+      children: label
+    })
+  }) : label, [label, labelVariant, disabled, setOpen, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode]);
+  const valueNode = useMemo(() => {
+    var _ref4, _ref5, _option$label2;
+    if (hasValue && isMultiSelect) {
+      const valuesToShow = value.length <= maxSelectedOptionsToShow ? value : value.slice(0, maxSelectedOptionsToShow);
+      const optionsToShow = valuesToShow.map(value => options.find(option => option.value === value)).filter(Boolean);
+      return /*#__PURE__*/_jsxs(HStack, {
+        flexWrap: "wrap",
+        gap: 1,
+        children: [optionsToShow.map((option, index) => {
+          var _option$value, _ref2, _ref3, _option$label;
+          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, {
+            "data-selected-value": true,
+            accessibilityLabel: "".concat(removeSelectedOptionAccessibilityLabel, " ").concat(accessibilityLabel),
+            disabled: option.disabled,
+            invertColorScheme: false,
+            maxWidth: 200,
+            onClick: event => handleUnselectValue(event, index),
+            children: (_ref2 = (_ref3 = (_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.description) !== null && _ref3 !== void 0 ? _ref3 : option.value) !== null && _ref2 !== void 0 ? _ref2 : ''
+          }, option.value);
+        }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(Chip, {
+          children: "+".concat(value.length - maxSelectedOptionsToShow, " ").concat(hiddenSelectedOptionsLabel)
+        })]
+      });
+    }
+    const option = options.find(option => option.value === value);
+    const label = (_ref4 = (_ref5 = (_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 && _ref5 !== void 0 ? _ref5 : option === null || option === void 0 ? void 0 : option.value) !== null && _ref4 !== void 0 ? _ref4 : placeholder;
+    const content = hasValue ? label : placeholder;
+    return typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+      as: "p",
+      color: hasValue ? 'fg' : 'fgMuted',
+      display: "block",
+      font: "body",
+      overflow: "truncate",
+      children: content
+    }) : content;
+  }, [hasValue, isMultiSelect, options, placeholder, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, handleUnselectValue]);
+  const inputNode = useMemo(() =>
+  /*#__PURE__*/
+  // We don't offer control over setting the role since this must always be a button
+  _jsxs(Pressable, {
+    ref: controlPressableRef,
+    noScaleOnPress: true,
+    accessibilityLabel: accessibilityLabel,
+    "aria-haspopup": ariaHaspopup,
+    background: "transparent",
+    blendStyles: interactableBlendStyles,
+    className: cx(noFocusOutlineCss, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode),
+    disabled: disabled,
+    focusable: false,
+    minHeight: isMultiSelect ? 76 : undefined,
+    onClick: () => setOpen(s => !s),
+    paddingStart: 1,
+    style: styles === null || styles === void 0 ? void 0 : styles.controlInputNode,
+    width: "100%",
+    children: [!!startNode && /*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode,
+      height: "100%",
+      justifyContent: "center",
+      minWidth: 0,
+      paddingX: 1,
+      style: styles === null || styles === void 0 ? void 0 : styles.controlStartNode,
+      children: startNode
+    }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      height: "100%",
+      maxWidth: "40%",
+      padding: 1,
+      children: /*#__PURE__*/_jsx(InputLabel, {
+        color: "fg",
+        overflow: "truncate",
+        children: label
+      })
+    }) : null, /*#__PURE__*/_jsx(HStack, {
+      alignItems: "center",
+      borderRadius: 200,
+      height: "100%",
+      justifyContent: "space-between",
+      width: "100%",
+      children: /*#__PURE__*/_jsx(HStack, {
+        ref: valueNodeContainerRef,
+        alignItems: "center",
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode,
+        flexGrow: 1,
+        flexShrink: 1,
+        flexWrap: "wrap",
+        gap: 1,
+        height: "100%",
+        justifyContent: shouldShowCompactLabel ? 'flex-end' : 'flex-start',
+        overflow: "auto",
+        paddingTop: labelVariant === 'inside' ? 0 : compact ? 1 : 2,
+        paddingX: 1,
+        paddingY: labelVariant === 'inside' || compact ? 1 : 2,
+        style: styles === null || styles === void 0 ? void 0 : styles.controlValueNode,
+        children: valueNode
+      })
+    })]
+  }), [accessibilityLabel, 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, isMultiSelect, 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, startNode, shouldShowCompactLabel, label, labelVariant, compact, valueNode, setOpen]);
+  const endNode = useMemo(() => /*#__PURE__*/_jsx(HStack, {
+    alignItems: "center",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode,
+    paddingX: 2,
+    style: styles === null || styles === void 0 ? void 0 : styles.controlEndNode,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      "aria-hidden": true,
+      onClick: () => setOpen(s => !s),
+      tabIndex: -1,
+      children: customEndNode ? customEndNode : /*#__PURE__*/_jsx(AnimatedCaret, {
+        color: !open ? 'fg' : variant ? variantColor[variant] : 'fgPrimary',
+        rotate: open ? 0 : 180
+      })
+    })
+  }), [open, variant, setOpen, customEndNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode, styles === null || styles === void 0 ? void 0 : styles.controlEndNode]);
+  return /*#__PURE__*/_jsx(InputStack, _objectSpread({
+    ref: ref,
+    blendStyles: interactableBlendStyles,
+    disabled: disabled,
+    endNode: endNode,
+    helperTextNode: helperTextNode,
+    inputNode: inputNode,
+    labelNode: shouldShowCompactLabel ? null : labelNode,
+    labelVariant: labelVariant,
+    variant: variant
+  }, props));
+}));
+export const DefaultSelectControl = DefaultSelectControlComponent;
+import "./DefaultSelectControl.css";

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -0,0 +1,233 @@
+const _excluded = ["type", "options", "value", "onChange", "open", "setOpen", "controlRef", "disabled", "style", "styles", "className", "classNames", "compact", "label", "end", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "accessory", "media", "SelectOptionComponent", "SelectAllOptionComponent", "SelectEmptyDropdownContentsComponent", "accessibilityLabel", "accessibilityRoles"],
+  _excluded2 = ["Component", "media", "accessory", "end"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { AnimatePresence, m as motion } from 'framer-motion';
+import { Button } from '../../buttons';
+import { Checkbox } from '../../controls/Checkbox';
+import { Radio } from '../../controls/Radio';
+import { cx } from '../../cx';
+import { Box } from '../../layout/Box';
+import { FocusTrap } from '../../overlays/FocusTrap';
+import { DefaultSelectAllOption } from './DefaultSelectAllOption';
+import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdownContents';
+import { DefaultSelectOption } from './DefaultSelectOption';
+import { defaultAccessibilityRoles } from './Select';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const initialStyle = {
+  opacity: 0,
+  y: 0
+};
+const animateStyle = {
+  opacity: 1,
+  y: 4
+};
+const DefaultSelectDropdownComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      type,
+      options,
+      value,
+      onChange,
+      open,
+      setOpen,
+      controlRef,
+      disabled,
+      style,
+      styles,
+      className,
+      classNames,
+      compact,
+      label,
+      end,
+      selectAllLabel = 'Select all',
+      emptyOptionsLabel = 'No options available',
+      clearAllLabel = 'Clear all',
+      hideSelectAll,
+      accessory,
+      media,
+      SelectOptionComponent = DefaultSelectOption,
+      SelectAllOptionComponent = DefaultSelectAllOption,
+      SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
+      accessibilityLabel = 'Select dropdown',
+      accessibilityRoles = defaultAccessibilityRoles
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const [containerWidth, setContainerWidth] = useState(null);
+  const dropdownStyles = useMemo(() => {
+    var _controlRef$current;
+    return _objectSpread(_objectSpread({
+      width: containerWidth !== null ? containerWidth : (_controlRef$current = controlRef.current) === null || _controlRef$current === void 0 ? void 0 : _controlRef$current.getBoundingClientRect().width
+    }, style), styles === null || styles === void 0 ? void 0 : styles.root);
+  }, [styles === null || styles === void 0 ? void 0 : styles.root, containerWidth, controlRef, style]);
+  const optionStyles = useMemo(() => ({
+    optionCell: styles === null || styles === void 0 ? void 0 : styles.optionCell,
+    optionContent: styles === null || styles === void 0 ? void 0 : styles.optionContent,
+    optionLabel: styles === null || styles === void 0 ? void 0 : styles.optionLabel,
+    optionDescription: styles === null || styles === void 0 ? void 0 : styles.optionDescription,
+    selectAllDivider: styles === null || styles === void 0 ? void 0 : styles.selectAllDivider
+  }), [styles === null || styles === void 0 ? void 0 : styles.optionCell, styles === null || styles === void 0 ? void 0 : styles.optionContent, styles === null || styles === void 0 ? void 0 : styles.optionLabel, styles === null || styles === void 0 ? void 0 : styles.optionDescription, styles === null || styles === void 0 ? void 0 : styles.selectAllDivider]);
+  const optionClassNames = useMemo(() => ({
+    optionCell: classNames === null || classNames === void 0 ? void 0 : classNames.optionCell,
+    optionContent: classNames === null || classNames === void 0 ? void 0 : classNames.optionContent,
+    optionLabel: classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel,
+    optionDescription: classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription,
+    selectAllDivider: classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.optionCell, classNames === null || classNames === void 0 ? void 0 : classNames.optionContent, classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel, classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription, classNames === null || classNames === void 0 ? void 0 : classNames.selectAllDivider]);
+  const emptyDropdownContentsStyles = useMemo(() => ({
+    emptyContentsContainer: styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer,
+    emptyContentsText: styles === null || styles === void 0 ? void 0 : styles.emptyContentsText
+  }), [styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer, styles === null || styles === void 0 ? void 0 : styles.emptyContentsText]);
+  const emptyDropdownContentsClassNames = useMemo(() => ({
+    emptyContentsContainer: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer,
+    emptyContentsText: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText]);
+  const isMultiSelect = type === 'multi';
+  const isSomeOptionsSelected = isMultiSelect ? value.length > 0 : false;
+  const isAllOptionsSelected = isMultiSelect ? value.length === options.filter(o => o.value !== null).length : false;
+  const toggleSelectAll = useCallback(() => {
+    if (isAllOptionsSelected) onChange(null);else onChange(options.map(o => o.value).filter(o => o !== null && !(value !== null && value !== void 0 && value.includes(o))));
+  }, [isAllOptionsSelected, onChange, options, value]);
+  const handleClearAll = useCallback(event => {
+    event.stopPropagation();
+    onChange(null);
+  }, [onChange]);
+  const handleEscPress = useCallback(() => setOpen(false), [setOpen]);
+  useEffect(() => {
+    if (!controlRef.current) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      setContainerWidth(entries[0].contentRect.width);
+    });
+    resizeObserver.observe(controlRef.current);
+    return () => resizeObserver.disconnect();
+  }, [controlRef]);
+  const indeterminate = !isAllOptionsSelected && isSomeOptionsSelected ? true : false;
+  const SelectAllOption = useMemo(() => /*#__PURE__*/_jsx(SelectAllOptionComponent, {
+    accessibilityRole: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option,
+    accessory: accessory,
+    blendStyles: styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles,
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.option,
+    classNames: optionClassNames,
+    compact: compact,
+    disabled: disabled,
+    end: end !== null && end !== void 0 ? end : /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      transparent: true,
+      onClick: handleClearAll,
+      role: "option",
+      style: {
+        margin: 'var(--space-0_5)'
+      },
+      width: "fit-content",
+      children: clearAllLabel
+    }),
+    indeterminate: indeterminate,
+    label: "".concat(selectAllLabel, " (").concat(options.filter(o => o.value !== null).length, ")"),
+    media: media !== null && media !== void 0 ? media : /*#__PURE__*/_jsx(Checkbox, {
+      readOnly: true,
+      checked: isAllOptionsSelected,
+      iconStyle: {
+        opacity: 1
+      },
+      indeterminate: indeterminate,
+      tabIndex: -1
+    }),
+    onClick: toggleSelectAll,
+    selected: isAllOptionsSelected || isSomeOptionsSelected,
+    style: styles === null || styles === void 0 ? void 0 : styles.option,
+    styles: optionStyles,
+    type: type,
+    value: 'select-all'
+  }, "select-all"), [SelectAllOptionComponent, accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option, accessory, styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles, styles === null || styles === void 0 ? void 0 : styles.option, classNames === null || classNames === void 0 ? void 0 : classNames.option, optionClassNames, compact, disabled, end, handleClearAll, clearAllLabel, indeterminate, selectAllLabel, options, media, isAllOptionsSelected, toggleSelectAll, isSomeOptionsSelected, optionStyles, type]);
+  return /*#__PURE__*/_jsx(AnimatePresence, {
+    children: open && /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+      ref: ref,
+      "aria-label": accessibilityLabel,
+      "aria-multiselectable": isMultiSelect,
+      className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.root, className),
+      display: "block",
+      role: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.dropdown,
+      style: dropdownStyles
+    }, props), {}, {
+      children: /*#__PURE__*/_jsx(FocusTrap, {
+        disableAutoFocus: true,
+        focusTabIndexElements: true,
+        includeTriggerInFocusTrap: true,
+        respectNegativeTabIndex: true,
+        restoreFocusOnUnmount: true,
+        onEscPress: handleEscPress,
+        children: /*#__PURE__*/_jsx(motion.div, {
+          animate: animateStyle,
+          exit: initialStyle,
+          initial: initialStyle,
+          children: /*#__PURE__*/_jsxs(Box, {
+            bordered: true,
+            borderRadius: 400,
+            elevation: 2,
+            flexDirection: "column",
+            maxHeight: 252,
+            overflow: "auto",
+            children: [!hideSelectAll && isMultiSelect && options.length > 0 && SelectAllOption, options.length > 0 ? options.map(_ref2 => {
+              var _ref3;
+              let {
+                  Component,
+                  media: optionMedia,
+                  accessory: optionAccessory,
+                  end: optionEnd
+                } = _ref2,
+                option = _objectWithoutProperties(_ref2, _excluded2);
+              const RenderedSelectOption = Component !== null && Component !== void 0 ? Component : SelectOptionComponent;
+              const selected = option.value !== null && isMultiSelect ? value.includes(option.value) : value === option.value;
+              const defaultMedia = isMultiSelect ? /*#__PURE__*/_jsx(Checkbox, {
+                "aria-hidden": true,
+                readOnly: true,
+                checked: selected,
+                iconStyle: {
+                  opacity: 1
+                },
+                tabIndex: -1
+              }) : /*#__PURE__*/_jsx(Radio, {
+                "aria-hidden": true,
+                readOnly: true,
+                checked: selected,
+                iconStyle: {
+                  opacity: 1
+                },
+                tabIndex: -1
+              });
+              return /*#__PURE__*/_jsx(RenderedSelectOption, _objectSpread({
+                accessibilityRole: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option,
+                accessory: optionAccessory !== null && optionAccessory !== void 0 ? optionAccessory : accessory,
+                blendStyles: styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles,
+                className: classNames === null || classNames === void 0 ? void 0 : classNames.option,
+                classNames: optionClassNames,
+                compact: compact,
+                disabled: option.disabled || disabled,
+                end: optionEnd !== null && optionEnd !== void 0 ? optionEnd : end,
+                media: (_ref3 = optionMedia !== null && optionMedia !== void 0 ? optionMedia : media) !== null && _ref3 !== void 0 ? _ref3 : defaultMedia,
+                onClick: newValue => {
+                  onChange(newValue);
+                  if (!isMultiSelect) setOpen(false);
+                },
+                selected: selected,
+                style: styles === null || styles === void 0 ? void 0 : styles.option,
+                styles: optionStyles,
+                type: type
+              }, option), option.value);
+            }) : /*#__PURE__*/_jsx(SelectEmptyDropdownContentsComponent, {
+              classNames: emptyDropdownContentsClassNames,
+              label: emptyOptionsLabel,
+              styles: emptyDropdownContentsStyles
+            })]
+          })
+        })
+      })
+    }))
+  });
+}));
+export const DefaultSelectDropdown = DefaultSelectDropdownComponent;

package/esm/alpha/select/DefaultSelectEmptyDropdownContents.js

@@ -0,0 +1,23 @@
+import { forwardRef, memo } from 'react';
+import { Box } from '../../layout/Box';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultSelectEmptyDropdownContents = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    label,
+    styles,
+    classNames
+  } = _ref;
+  return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer,
+    padding: 2,
+    style: styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer,
+    children: /*#__PURE__*/_jsx(Text, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText,
+      font: "body",
+      style: styles === null || styles === void 0 ? void 0 : styles.emptyContentsText,
+      children: label
+    })
+  });
+}));

package/esm/alpha/select/DefaultSelectOption.css

@@ -0,0 +1,2 @@
+@layer cds{.selectOptionCss-s1n0butf{--bookendRadius:var(--borderRadius-400);position:relative;padding:0;margin:0;border:none;}.selectOptionCss-s1n0butf:first-child{border-top-right-radius:var(--bookendRadius);border-top-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:last-child{border-bottom-right-radius:var(--bookendRadius);border-bottom-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:focus{outline:none;}.selectOptionCss-s1n0butf:focus-visible{outline:none;}.selectOptionCss-s1n0butf:focus-visible::after{content:'';position:absolute;inset:0;border-radius:var(--bookendRadius);border:2px solid var(--color-bgLinePrimary);}.selectOptionCss-s1n0butf:focus-visible:first-child::after{border-top-right-radius:var(--bookendRadius);border-top-left-radius:var(--bookendRadius);}.selectOptionCss-s1n0butf:focus-visible:last-child::after{border-bottom-right-radius:var(--bookendRadius);border-bottom-left-radius:var(--bookendRadius);}
+.multilineTextCss-m1dfwwjg{overflow:auto;text-overflow:unset;white-space:normal;}}

package/esm/alpha/select/DefaultSelectOption.js

@@ -0,0 +1,103 @@
+const _excluded = ["value", "label", "onClick", "disabled", "selected", "compact", "description", "multiline", "styles", "className", "classNames", "accessory", "media", "end", "type", "accessibilityRole", "background"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { forwardRef, memo, useCallback, useMemo } from 'react';
+import { selectCellSpacingConfig } from '@coinbase/cds-common/tokens/select';
+import { Cell } from '../../cells/Cell';
+import { cx } from '../../cx';
+import { VStack } from '../../layout/VStack';
+import { Pressable } from '../../system/Pressable';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const selectOptionCss = "selectOptionCss-s1n0butf";
+const multilineTextCss = "multilineTextCss-m1dfwwjg";
+const DefaultSelectOptionComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      value,
+      label,
+      onClick,
+      disabled,
+      selected,
+      compact,
+      description,
+      multiline,
+      styles,
+      className,
+      classNames,
+      accessory,
+      media,
+      end,
+      type,
+      accessibilityRole = 'option',
+      background = type === 'single' && selected && value !== null ? 'bgAlternate' : 'bg'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const labelNode = useMemo(() => typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+    as: "div",
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel,
+    font: "headline",
+    overflow: "truncate",
+    style: styles === null || styles === void 0 ? void 0 : styles.optionLabel,
+    children: label
+  }) : label, [label, classNames === null || classNames === void 0 ? void 0 : classNames.optionLabel, styles === null || styles === void 0 ? void 0 : styles.optionLabel]);
+  const descriptionNode = useMemo(() => typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+    as: "div",
+    className: cx(multiline ? multilineTextCss : undefined, classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription),
+    color: "fgMuted",
+    font: "body",
+    overflow: multiline ? undefined : 'truncate',
+    style: styles === null || styles === void 0 ? void 0 : styles.optionDescription,
+    children: description
+  }) : description, [description, multiline, classNames === null || classNames === void 0 ? void 0 : classNames.optionDescription, styles === null || styles === void 0 ? void 0 : styles.optionDescription]);
+  const handleClick = useCallback(() => onClick === null || onClick === void 0 ? void 0 : onClick(value), [onClick, value]);
+
+  // Since Cell's ref prop is type HTMLDivElement, we need to wrap it in a Pressable to get ref forwarding.
+  // On web, the option role doesn't work well with ara-checked and screen readers
+  // so we use aria-selected regardless of the option type.
+  return /*#__PURE__*/_jsx(Pressable, _objectSpread(_objectSpread({
+    ref: ref,
+    noScaleOnPress: true,
+    "aria-selected": selected,
+    background: background,
+    className: cx(selectOptionCss, className),
+    disabled: disabled,
+    onClick: handleClick,
+    role: accessibilityRole
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Cell, {
+      accessory: accessory,
+      background: type === 'multi' || disabled || value === null ? 'transparent' : undefined,
+      borderRadius: 0,
+      className: cx(multiline ? multilineTextCss : undefined, classNames === null || classNames === void 0 ? void 0 : classNames.optionCell),
+      end: end,
+      innerSpacing: selectCellSpacingConfig.innerSpacing,
+      maxHeight: compact ? 56 : 64,
+      media: media,
+      minHeight: compact ? 40 : 56,
+      outerSpacing: selectCellSpacingConfig.outerSpacing,
+      priority: "end",
+      selected: selected,
+      style: styles === null || styles === void 0 ? void 0 : styles.optionCell
+      // This is a workaround to ensure the end element is displayed correctly
+      ,
+      styles: {
+        end: {
+          width: 'fit-content'
+        }
+      },
+      children: /*#__PURE__*/_jsxs(VStack, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.optionContent,
+        justifyContent: "center",
+        style: styles === null || styles === void 0 ? void 0 : styles.optionContent,
+        children: [labelNode, descriptionNode]
+      })
+    })
+  }));
+}));
+export const DefaultSelectOption = DefaultSelectOptionComponent;
+import "./DefaultSelectOption.css";