@coinbase/cds-web 8.19.0 → 8.20.0

package/esm/alpha/select/Select.js

@@ -0,0 +1,222 @@
+const _excluded = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "disableClickOutsideClose", "placeholder", "helperText", "compact", "label", "labelVariant", "accessibilityLabel", "accessibilityRoles", "controlAccessibilityLabel", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "style", "styles", "className", "classNames", "testID"];
+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, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { flip, useFloating } from '@floating-ui/react-dom';
+import { cx } from '../../cx';
+import { useClickOutside } from '../../hooks/useClickOutside';
+import { useHasMounted } from '../../hooks/useHasMounted';
+import { Box } from '../../layout/Box';
+import { Portal } from '../../overlays/Portal';
+import { modalContainerId } from '../../overlays/PortalProvider';
+import { DefaultSelectAllOption } from './DefaultSelectAllOption';
+import { DefaultSelectControl } from './DefaultSelectControl';
+import { DefaultSelectDropdown } from './DefaultSelectDropdown';
+import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdownContents';
+import { DefaultSelectOption } from './DefaultSelectOption';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const defaultAccessibilityRoles = {
+  dropdown: 'listbox',
+  option: 'option'
+};
+
+/**
+ * Configuration for a single option in the Select component
+ */
+
+/**
+ * Props for individual option components within the Select dropdown
+ */
+
+/**
+ * Custom UI to render for an option in the Select component options array
+ */
+
+/**
+ * Props for the select control component (the clickable input that opens the dropdown)
+ */
+
+/**
+ * Props for the dropdown component that contains the list of options
+ */
+
+/**
+ * Props for the Select component
+ */
+
+const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      value,
+      type = 'single',
+      options,
+      onChange,
+      open: openProp,
+      setOpen: setOpenProp,
+      disabled,
+      disableClickOutsideClose,
+      placeholder,
+      helperText,
+      compact,
+      label,
+      labelVariant,
+      accessibilityLabel = 'Select control',
+      accessibilityRoles = defaultAccessibilityRoles,
+      controlAccessibilityLabel,
+      selectAllLabel,
+      emptyOptionsLabel,
+      clearAllLabel,
+      hideSelectAll,
+      defaultOpen,
+      startNode,
+      endNode,
+      variant,
+      maxSelectedOptionsToShow,
+      hiddenSelectedOptionsLabel,
+      removeSelectedOptionAccessibilityLabel,
+      accessory,
+      media,
+      end,
+      SelectOptionComponent = DefaultSelectOption,
+      SelectAllOptionComponent = DefaultSelectAllOption,
+      SelectDropdownComponent = DefaultSelectDropdown,
+      SelectControlComponent = DefaultSelectControl,
+      SelectEmptyDropdownContentsComponent = DefaultSelectEmptyDropdownContents,
+      style,
+      styles,
+      className,
+      classNames,
+      testID
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const hasMounted = useHasMounted();
+  const [openInternal, setOpenInternal] = useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
+  const open = openProp !== null && openProp !== void 0 ? openProp : openInternal;
+  const setOpen = setOpenProp !== null && setOpenProp !== void 0 ? setOpenProp : setOpenInternal;
+  if (typeof openProp === 'undefined' && typeof setOpenProp !== 'undefined' || typeof openProp !== 'undefined' && typeof setOpenProp === 'undefined') throw Error('Select component must be fully controlled or uncontrolled: "open" and "setOpen" props must be provided together or not at all');
+  const {
+    refs,
+    floatingStyles
+  } = useFloating({
+    open,
+    middleware: [flip()]
+  });
+  useClickOutside(() => !disableClickOutsideClose && setOpen(false), {
+    ref: refs.floating,
+    excludeRefs: [refs.reference]
+  });
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  const controlStyles = useMemo(() => ({
+    controlStartNode: styles === null || styles === void 0 ? void 0 : styles.controlStartNode,
+    controlInputNode: styles === null || styles === void 0 ? void 0 : styles.controlInputNode,
+    controlValueNode: styles === null || styles === void 0 ? void 0 : styles.controlValueNode,
+    controlLabelNode: styles === null || styles === void 0 ? void 0 : styles.controlLabelNode,
+    controlHelperTextNode: styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode,
+    controlEndNode: styles === null || styles === void 0 ? void 0 : styles.controlEndNode
+  }), [styles === null || styles === void 0 ? void 0 : styles.controlStartNode, styles === null || styles === void 0 ? void 0 : styles.controlInputNode, styles === null || styles === void 0 ? void 0 : styles.controlValueNode, styles === null || styles === void 0 ? void 0 : styles.controlLabelNode, styles === null || styles === void 0 ? void 0 : styles.controlHelperTextNode, styles === null || styles === void 0 ? void 0 : styles.controlEndNode]);
+  const controlClassNames = useMemo(() => ({
+    controlStartNode: classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode,
+    controlInputNode: classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode,
+    controlValueNode: classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode,
+    controlLabelNode: classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode,
+    controlHelperTextNode: classNames === null || classNames === void 0 ? void 0 : classNames.controlHelperTextNode,
+    controlEndNode: classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode
+  }), [classNames === null || classNames === void 0 ? void 0 : classNames.controlStartNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlInputNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlValueNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlLabelNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlHelperTextNode, classNames === null || classNames === void 0 ? void 0 : classNames.controlEndNode]);
+  const dropdownStyles = useMemo(() => ({
+    root: _objectSpread(_objectSpread({}, floatingStyles), styles === null || styles === void 0 ? void 0 : styles.dropdown),
+    option: styles === null || styles === void 0 ? void 0 : styles.option,
+    optionBlendStyles: styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles,
+    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,
+    emptyContentsContainer: styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer,
+    emptyContentsText: styles === null || styles === void 0 ? void 0 : styles.emptyContentsText
+  }), [floatingStyles, styles === null || styles === void 0 ? void 0 : styles.dropdown, styles === null || styles === void 0 ? void 0 : styles.option, styles === null || styles === void 0 ? void 0 : styles.optionBlendStyles, 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, styles === null || styles === void 0 ? void 0 : styles.emptyContentsContainer, styles === null || styles === void 0 ? void 0 : styles.emptyContentsText]);
+  const dropdownClassNames = useMemo(() => ({
+    root: classNames === null || classNames === void 0 ? void 0 : classNames.dropdown,
+    option: classNames === null || classNames === void 0 ? void 0 : classNames.option,
+    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,
+    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.dropdown, classNames === null || classNames === void 0 ? void 0 : classNames.option, 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, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsContainer, classNames === null || classNames === void 0 ? void 0 : classNames.emptyContentsText]);
+  const containerRef = useRef(null);
+  useImperativeHandle(ref, () => Object.assign(containerRef.current, {
+    open,
+    setOpen,
+    refs
+  }));
+  return /*#__PURE__*/_jsxs(Box, {
+    ref: containerRef,
+    className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.root, className),
+    "data-testid": testID,
+    style: rootStyles,
+    children: [/*#__PURE__*/_jsx(SelectControlComponent, {
+      ref: refs.setReference,
+      accessibilityLabel: controlAccessibilityLabel,
+      ariaHaspopup: accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.dropdown,
+      blendStyles: styles === null || styles === void 0 ? void 0 : styles.controlBlendStyles,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.control,
+      classNames: controlClassNames,
+      compact: compact,
+      disabled: disabled,
+      endNode: endNode,
+      helperText: helperText,
+      hiddenSelectedOptionsLabel: hiddenSelectedOptionsLabel,
+      label: label,
+      labelVariant: labelVariant,
+      maxSelectedOptionsToShow: maxSelectedOptionsToShow,
+      onChange: onChange,
+      open: open,
+      options: options,
+      placeholder: placeholder,
+      removeSelectedOptionAccessibilityLabel: removeSelectedOptionAccessibilityLabel,
+      setOpen: setOpen,
+      startNode: startNode,
+      style: styles === null || styles === void 0 ? void 0 : styles.control,
+      styles: controlStyles,
+      type: type,
+      value: value,
+      variant: variant
+    }), /*#__PURE__*/_jsx(Portal, {
+      containerId: modalContainerId,
+      children: /*#__PURE__*/_jsx(SelectDropdownComponent, {
+        ref: refs.setFloating,
+        SelectAllOptionComponent: SelectAllOptionComponent,
+        SelectEmptyDropdownContentsComponent: SelectEmptyDropdownContentsComponent,
+        SelectOptionComponent: SelectOptionComponent,
+        accessibilityLabel: accessibilityLabel,
+        accessibilityRoles: accessibilityRoles,
+        accessory: accessory,
+        classNames: dropdownClassNames,
+        clearAllLabel: clearAllLabel,
+        compact: compact,
+        controlRef: refs.reference,
+        disabled: disabled,
+        emptyOptionsLabel: emptyOptionsLabel,
+        end: end,
+        hideSelectAll: hideSelectAll,
+        label: label,
+        media: media,
+        onChange: onChange,
+        open: hasMounted && open,
+        options: options,
+        selectAllLabel: selectAllLabel,
+        setOpen: setOpen,
+        styles: dropdownStyles,
+        type: type,
+        value: value
+      })
+    })]
+  });
+}));
+export const Select = SelectBase;

package/esm/alpha/select/index.js

@@ -0,0 +1,6 @@
+export * from './DefaultSelectAllOption';
+export * from './DefaultSelectControl';
+export * from './DefaultSelectDropdown';
+export * from './DefaultSelectEmptyDropdownContents';
+export * from './DefaultSelectOption';
+export * from './Select';

package/esm/cells/Cell.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "accessory", "accessoryNode", "alignItems", "borderRadius", "children", "style", "styles", "classNames", "className", "contentClassName", "end", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "shouldTruncate", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent"],
+const _excluded = ["as", "accessory", "accessoryNode", "alignItems", "borderRadius", "children", "style", "styles", "classNames", "className", "contentClassName", "end", "detail", "detailWidth", "disabled", "gap", "columnGap", "rowGap", "intermediary", "media", "minHeight", "maxHeight", "onClick", "onKeyDown", "onKeyUp", "priority", "selected", "testID", "target", "href", "tabIndex", "shouldOverflow", "shouldTruncate", "accessibilityLabel", "accessibilityLabelledBy", "accessibilityHint", "innerSpacing", "outerSpacing", "bottomContent", "background"],
   _excluded2 = ["marginX"];
 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; }
@@ -71,7 +71,8 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       accessibilityHint,
       innerSpacing: innerSpacingProp,
       outerSpacing: outerSpacingProp,
-      bottomContent: bottom
+      bottomContent: bottom,
+      background = 'bgAlternate'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : cellDefaultElement;
@@ -99,7 +100,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       className: cx(contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer),
       testID
     }, selected ? {
-      background: 'bgAlternate'
+      background
     } : {}), linkable ? innerSpacingWithoutMarginX : innerSpacing), {}, {
       style: styles === null || styles === void 0 ? void 0 : styles.contentContainer
     });
@@ -173,7 +174,7 @@ export const Cell = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
         children: bottom
       })]
     }));
-  }, [borderRadius, contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.topContent, classNames === null || classNames === void 0 ? void 0 : classNames.media, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary, classNames === null || classNames === void 0 ? void 0 : classNames.end, classNames === null || classNames === void 0 ? void 0 : classNames.accessory, classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent, testID, selected, linkable, innerSpacingWithoutMarginX, innerSpacing, styles === null || styles === void 0 ? void 0 : styles.contentContainer, styles === null || styles === void 0 ? void 0 : styles.topContent, styles === null || styles === void 0 ? void 0 : styles.media, styles === null || styles === void 0 ? void 0 : styles.intermediary, styles === null || styles === void 0 ? void 0 : styles.end, styles === null || styles === void 0 ? void 0 : styles.accessory, styles === null || styles === void 0 ? void 0 : styles.bottomContent, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, end, detail, detailWidth, accessory, accessoryNode, bottom, rowGap]);
+  }, [borderRadius, contentClassName, classNames === null || classNames === void 0 ? void 0 : classNames.contentContainer, classNames === null || classNames === void 0 ? void 0 : classNames.topContent, classNames === null || classNames === void 0 ? void 0 : classNames.media, classNames === null || classNames === void 0 ? void 0 : classNames.intermediary, classNames === null || classNames === void 0 ? void 0 : classNames.end, classNames === null || classNames === void 0 ? void 0 : classNames.accessory, classNames === null || classNames === void 0 ? void 0 : classNames.bottomContent, testID, selected, background, linkable, innerSpacingWithoutMarginX, innerSpacing, styles === null || styles === void 0 ? void 0 : styles.contentContainer, styles === null || styles === void 0 ? void 0 : styles.topContent, styles === null || styles === void 0 ? void 0 : styles.media, styles === null || styles === void 0 ? void 0 : styles.intermediary, styles === null || styles === void 0 ? void 0 : styles.end, styles === null || styles === void 0 ? void 0 : styles.accessory, styles === null || styles === void 0 ? void 0 : styles.bottomContent, alignItems, columnGap, gap, media, contentTruncationStyle, priority, children, intermediary, end, detail, detailWidth, accessory, accessoryNode, bottom, rowGap]);
   const pressableWrappedContent = useMemo(() => {
     const pressableSharedProps = {
       noScaleOnPress: true,

package/esm/chips/Chip.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "alignItems", "width", "height", "compact", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "onClick"];
+const _excluded = ["as", "alignItems", "width", "height", "compact", "gap", "start", "end", "paddingX", "paddingY", "padding", "paddingTop", "paddingBottom", "paddingStart", "paddingEnd", "justifyContent", "children", "maxWidth", "invertColorScheme", "inverted", "numberOfLines", "testID", "contentStyle", "borderRadius", "background", "style", "className", "styles", "classNames", "font", "onClick"];
 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; }
@@ -41,6 +41,7 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
       justifyContent,
       children,
       maxWidth = chipMaxWidth,
+      invertColorScheme,
       inverted,
       numberOfLines = 1,
       testID,
@@ -55,7 +56,7 @@ export const Chip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Chip(_ref
       onClick
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const WrapperComponent = inverted ? InvertedThemeProvider : Fragment;
+  const WrapperComponent = (invertColorScheme !== null && invertColorScheme !== void 0 ? invertColorScheme : inverted) ? InvertedThemeProvider : Fragment;
   const containerProps = {
     background,
     borderRadius,

package/esm/chips/InputChip.js

@@ -1,4 +1,4 @@
-const _excluded = ["value", "accessibilityLabel", "testID"];
+const _excluded = ["value", "children", "accessibilityLabel", "invertColorScheme", "testID"];
 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; }
@@ -13,13 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function InputChip(_ref, ref) {
   let {
       value,
-      accessibilityLabel = typeof value === 'string' ? "Remove ".concat(value) : 'Remove option',
+      children = value,
+      accessibilityLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove option',
+      invertColorScheme = true,
       testID = 'input-chip'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(MediaChip, _objectSpread(_objectSpread({
     ref: ref,
-    inverted: true,
     accessibilityLabel: accessibilityLabel,
     end: /*#__PURE__*/_jsx(Icon, {
       active: true,
@@ -27,8 +28,9 @@ export const InputChip = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Inpu
       name: "close",
       size: "xs",
       testID: testID ? "".concat(testID, "-close-icon") : 'input-chip-close-icon'
-    })
+    }),
+    invertColorScheme: invertColorScheme
   }, props), {}, {
-    children: value
+    children: children
   }));
 }));

package/esm/chips/__figma__/InputChip.figma.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(InputChip, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=10177-5161&m=dev', {
   imports: ["import { InputChip } from '@coinbase/cds-web/chips/InputChip'"],
   props: {
-    value: figma.string('value'),
+    children: figma.string('value'),
     start: figma.boolean('show start', {
       true: figma.instance('start'),
       false: undefined

package/esm/controls/InputStack.js

@@ -1,4 +1,4 @@
-const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant"];
+const _excluded = ["width", "prependNode", "endNode", "appendNode", "startNode", "disabled", "inputNode", "helperTextNode", "borderWidth", "variant", "labelNode", "testID", "focused", "borderRadius", "height", "disableFocusedStyle", "enableColorSurge", "labelVariant", "blendStyles"];
 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; }
@@ -54,7 +54,8 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
       height,
       disableFocusedStyle = false,
       enableColorSurge,
-      labelVariant = 'outside'
+      labelVariant = 'outside',
+      blendStyles
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const focusedVariant = useMemo(() => focused && variant !== 'positive' && variant !== 'negative' ? 'primary' : variant, [focused, variant]);
@@ -108,6 +109,7 @@ export const InputStack = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref)
           ref: ref,
           as: "span",
           background: variant === 'secondary' ? 'bgSecondary' : 'bg',
+          blendStyles: blendStyles,
           borderRadius: borderRadius,
           borderWidth: borderWidth,
           className: cx(baseCss, focused && persistedFocusCss),

package/esm/hooks/useClickOutside.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Options for configuring the useClickOutside hook
+ */
+
+/**
+ * Hook that detects clicks outside of a specified element and triggers a callback
+ * @param callback - Function to call when a click outside is detected
+ * @param options - Configuration options for the hook
+ * @returns A ref to attach to the element you want to detect clicks outside of
+ */
+export const useClickOutside = function (callback) {
+  let {
+    ref,
+    excludeRefs
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const internalRef = useRef(null);
+  const containerRef = ref !== null && ref !== void 0 ? ref : internalRef;
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const target = event.target;
+      if (!containerRef.current) return;
+      if (containerRef.current && containerRef.current.contains(target)) return;
+      if (excludeRefs && excludeRefs.some(ref => {
+        var _ref$current;
+        return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(target);
+      })) return;
+      callback();
+    };
+    window.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      window.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [callback, containerRef, excludeRefs]);
+  return containerRef;
+};

package/esm/overlays/FocusTrap.js

@@ -14,6 +14,7 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
     onEscPress,
     disableTypeFocus,
     disableFocusTrap,
+    includeTriggerInFocusTrap,
     disableAutoFocus,
     respectNegativeTabIndex,
     focusTabIndexElements,
@@ -55,32 +56,40 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
     const activeElement = document === null || document === void 0 ? void 0 : document.activeElement;
     if (!element || !document) return;
     let focusableElements = Array.from(element.querySelectorAll(focusTabIndexElements ? FOCUSABLE_ELEMENTS_INCLUDING_TABINDEX : FOCUSABLE_ELEMENTS));
+    if (includeTriggerInFocusTrap && previouslyFocusedElement.current) {
+      focusableElements = [previouslyFocusedElement.current, ...focusableElements];
+    }
     if (respectNegativeTabIndex) {
       focusableElements = focusableElements.filter(element => !((element === null || element === void 0 ? void 0 : element.tabIndex) < 0));
     }
     const menuItems = element.querySelectorAll('[role="menuitem"]');
-    const isMenuItem = activeElement && Array.from(menuItems).includes(activeElement);
+    const optionItems = element.querySelectorAll('[role="option"]');
+    const activeElementIsMenuItem = activeElement && Array.from(menuItems).includes(activeElement);
+    const activeElementIsOption = activeElement && Array.from(optionItems).includes(activeElement);
+    const activeElementIsMenuItemOrOption = activeElementIsMenuItem || activeElementIsOption;
     if (focusableElements.length === 0) return;
     const firstElement = focusableElements[0];
+    const secondElement = focusableElements[1];
     const lastElement = focusableElements[focusableElements.length - 1];
     const activeElementIndex = activeElement ? focusableElements.indexOf(activeElement) : undefined;
+    const secondElementIsMenuItemOrOption = secondElement.role === 'menuitem' || secondElement.role === 'option';
 
     // bring focus inside modal
     if (!isFocused.current &&
     // check if focus is inside modal
     !focusableElements.includes(activeElement)) {
       // don't focus if arrow keys are used, instead allow scroll via keyboard
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && !includeTriggerInFocusTrap) {
         return;
       }
+      event.preventDefault();
       firstElement.focus();
       isFocused.current = true;
-      event.preventDefault();
     }
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (isMenuItem && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+    if (activeElementIsMenuItemOrOption || secondElementIsMenuItemOrOption || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
       event.preventDefault();
     }
     const focusPrevElement = () => {
@@ -92,22 +101,22 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
 
     // force active element to loop back to beginning of list
     const handleLastElement = () => {
-      if (!event.shiftKey && event.key === 'Tab' || event.key === 'ArrowDown' && isMenuItem) {
+      if (!event.shiftKey && event.key === 'Tab' || event.key === 'ArrowDown' && activeElementIsMenuItemOrOption) {
         firstElement.focus();
         return;
       }
-      if (event.key === 'ArrowUp' && isMenuItem || event.shiftKey && event.key === 'Tab') {
+      if (event.shiftKey && event.key === 'Tab' || event.key === 'ArrowUp' && activeElementIsMenuItemOrOption) {
         focusPrevElement();
       }
     };
     const handleFirstElement = () => {
       // force active element to loop back to end of list
-      if (event.shiftKey && event.key === 'Tab' || event.key === 'ArrowUp' && isMenuItem) {
+      if (event.shiftKey && event.key === 'Tab' || event.key === 'ArrowUp' && (activeElementIsMenuItemOrOption || secondElementIsMenuItemOrOption)) {
         lastElement.focus();
         return;
       }
-      if (event.key === 'ArrowDown' && isMenuItem || event.key === 'Tab') {
-        focusableElements[1].focus();
+      if (event.key === 'Tab' || event.key === 'ArrowDown' && (activeElementIsMenuItemOrOption || secondElementIsMenuItemOrOption)) {
+        secondElement.focus();
       }
     };
     if (event.key === 'Home') {
@@ -120,7 +129,7 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
       lastElement.focus();
       return;
     }
-    if (!disableTypeFocus && isMenuItem && ALPHABET_KEYS.includes(event.key)) {
+    if (!disableTypeFocus && activeElementIsMenuItemOrOption && ALPHABET_KEYS.includes(event.key)) {
       event.preventDefault();
       const elementWithMatchingFirstLetter = focusableElements.find(el => {
         var _el$textContent;
@@ -140,14 +149,14 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
       handleFirstElement();
       return;
     }
-    if ((event.key === 'ArrowDown' && isMenuItem || event.key === 'Tab') && activeElementIndex) {
+    if ((event.key === 'ArrowDown' && activeElementIsMenuItemOrOption || event.key === 'Tab') && activeElementIndex) {
       const nextElement = focusableElements[activeElementIndex + 1];
       nextElement.focus();
     }
-    if ((event.key === 'ArrowUp' && isMenuItem || event.key === 'Tab' && event.shiftKey) && activeElementIndex) {
+    if ((event.key === 'ArrowUp' && activeElementIsMenuItemOrOption || event.key === 'Tab' && event.shiftKey) && activeElementIndex) {
       focusPrevElement();
     }
-  }, [focusTabIndexElements, disableTypeFocus, respectNegativeTabIndex]);
+  }, [focusTabIndexElements, disableTypeFocus, respectNegativeTabIndex, includeTriggerInFocusTrap]);
   const handleKeyDown = useCallback(event => {
     // Update the keystroke history
     updateKeystrokeHistory(event.key);
@@ -186,7 +195,7 @@ export const FocusTrap = /*#__PURE__*/memo(function FocusTrap(_ref) {
       const elementToAutoFocus = focusableElements[0];
       if (typeof autoFocusDelay !== 'number') elementToAutoFocus.focus();else setTimeout(() => elementToAutoFocus.focus(), autoFocusDelay);
     }
-  }, [disableAutoFocus, autoFocusDelay]);
+  }, [disableAutoFocus, autoFocusDelay, includeTriggerInFocusTrap]);
 
   // only works for single child
   const onlyChild = React.Children.only(children);

package/esm/system/Interactable.js

@@ -19,6 +19,26 @@ const blockCss = "blockCss-b1ytinjt";
 const transparentActiveCss = "transparentActiveCss-t10ei5ro";
 const transparentWhileInactiveCss = "transparentWhileInactiveCss-te5q23s";
 export const interactableDefaultElement = 'button';
+
+/**
+ * Custom color overrides for different interaction states.
+ * Base colors (background, borderColor) are used directly, while interaction
+ * state colors (hovered, pressed, disabled) are used as alternative base colors
+ * for blending calculations with blend strength and color scheme considerations.
+ *
+ * @example
+ * ```tsx
+ * <Interactable
+ *   blendStyles={{
+ *     background: '#ffffff',
+ *     hoveredBackground: '#f5f5f5',
+ *     pressedBackground: '#e0e0e0',
+ *     borderColor: '#cccccc'
+ *   }}
+ * />
+ * ```
+ */
+
 export const Interactable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       as,
@@ -57,7 +77,7 @@ export const Interactable = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, props));
 });
 export const getInteractableStyles = _ref2 => {
-  var _blendStyles$backgrou, _blendStyles$borderCo, _blendStyles$backgrou2, _blendStyles$borderCo2, _blendStyles$hoveredB, _blendStyles$hoveredB2, _blendStyles$pressedB, _blendStyles$pressedB2, _blendStyles$disabled, _blendStyles$disabled2;
+  var _blendStyles$backgrou, _blendStyles$borderCo, _blendStyles$hoveredO, _blendStyles$pressedO, _blendStyles$disabled, _blendStyles$backgrou2, _blendStyles$borderCo2, _blendStyles$hoveredB, _blendStyles$hoveredB2, _blendStyles$pressedB, _blendStyles$pressedB2, _blendStyles$disabled2, _blendStyles$disabled3;
   let {
     theme,
     background = 'transparent',
@@ -66,6 +86,9 @@ export const getInteractableStyles = _ref2 => {
   } = _ref2;
   const backgroundColor = (_blendStyles$backgrou = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.background) !== null && _blendStyles$backgrou !== void 0 ? _blendStyles$backgrou : theme.color[background];
   const borderColorValue = (_blendStyles$borderCo = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.borderColor) !== null && _blendStyles$borderCo !== void 0 ? _blendStyles$borderCo : theme.color[borderColor];
+  const hoveredOpacity = (_blendStyles$hoveredO = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.hoveredOpacity) !== null && _blendStyles$hoveredO !== void 0 ? _blendStyles$hoveredO : opacityHovered;
+  const pressedOpacity = (_blendStyles$pressedO = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.pressedOpacity) !== null && _blendStyles$pressedO !== void 0 ? _blendStyles$pressedO : opacityPressed;
+  const disabledOpacity = (_blendStyles$disabled = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.disabledOpacity) !== null && _blendStyles$disabled !== void 0 ? _blendStyles$disabled : opacityDisabled;
   return {
     [interactableBackground]: (_blendStyles$backgrou2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.background) !== null && _blendStyles$backgrou2 !== void 0 ? _blendStyles$backgrou2 : "var(--color-".concat(background, ")"),
     [interactableBorderColor]: (_blendStyles$borderCo2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.borderColor) !== null && _blendStyles$borderCo2 !== void 0 ? _blendStyles$borderCo2 : "var(--color-".concat(borderColor, ")"),
@@ -75,37 +98,37 @@ export const getInteractableStyles = _ref2 => {
     // Hover:
     [interactableHoveredBackground]: getBlendedColor({
       overlayColor: (_blendStyles$hoveredB = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.hoveredBackground) !== null && _blendStyles$hoveredB !== void 0 ? _blendStyles$hoveredB : backgroundColor,
-      blendOpacity: opacityHovered,
+      blendOpacity: hoveredOpacity,
       colorScheme: theme.activeColorScheme
     }),
     [interactableHoveredBorderColor]: getBlendedColor({
       overlayColor: (_blendStyles$hoveredB2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.hoveredBorderColor) !== null && _blendStyles$hoveredB2 !== void 0 ? _blendStyles$hoveredB2 : borderColorValue,
-      blendOpacity: opacityHovered,
+      blendOpacity: hoveredOpacity,
       colorScheme: theme.activeColorScheme
     }),
-    [interactableHoveredOpacity]: opacityHovered,
+    [interactableHoveredOpacity]: hoveredOpacity,
     // Pressed:
     [interactablePressedBackground]: getBlendedColor({
       overlayColor: (_blendStyles$pressedB = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.pressedBackground) !== null && _blendStyles$pressedB !== void 0 ? _blendStyles$pressedB : backgroundColor,
-      blendOpacity: opacityPressed,
+      blendOpacity: pressedOpacity,
       colorScheme: theme.activeColorScheme
     }),
     [interactablePressedBorderColor]: getBlendedColor({
       overlayColor: (_blendStyles$pressedB2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.pressedBorderColor) !== null && _blendStyles$pressedB2 !== void 0 ? _blendStyles$pressedB2 : borderColorValue,
-      blendOpacity: opacityPressed,
+      blendOpacity: pressedOpacity,
       colorScheme: theme.activeColorScheme
     }),
-    [interactablePressedOpacity]: opacityPressed,
+    [interactablePressedOpacity]: pressedOpacity,
     // Disabled:
     [interactableDisabledBackground]: getBlendedColor({
-      overlayColor: (_blendStyles$disabled = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.disabledBackground) !== null && _blendStyles$disabled !== void 0 ? _blendStyles$disabled : backgroundColor,
-      blendOpacity: opacityDisabled,
+      overlayColor: (_blendStyles$disabled2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.disabledBackground) !== null && _blendStyles$disabled2 !== void 0 ? _blendStyles$disabled2 : backgroundColor,
+      blendOpacity: disabledOpacity,
       colorScheme: theme.activeColorScheme,
       skipContrastOptimization: true
     }),
     [interactableDisabledBorderColor]: getBlendedColor({
-      overlayColor: (_blendStyles$disabled2 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.disabledBorderColor) !== null && _blendStyles$disabled2 !== void 0 ? _blendStyles$disabled2 : borderColorValue,
-      blendOpacity: opacityDisabled,
+      overlayColor: (_blendStyles$disabled3 = blendStyles === null || blendStyles === void 0 ? void 0 : blendStyles.disabledBorderColor) !== null && _blendStyles$disabled3 !== void 0 ? _blendStyles$disabled3 : borderColorValue,
+      blendOpacity: disabledOpacity,
       colorScheme: theme.activeColorScheme,
       skipContrastOptimization: true
     })