@coinbase/cds-web 8.62.1 → 8.66.1

package/esm/alpha/select/Select.js

@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { autoUpdate, flip, useFloating } from '@floating-ui/react-dom';
 import { cx } from '../../cx';
 import { useClickOutside } from '../../hooks/useClickOutside';
@@ -93,6 +93,34 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
     ref: refs.floating,
     excludeRefs: [refs.reference]
   });
+  const pendingTypeAheadKeyRef = useRef(null);
+  const handleControlKeyDown = useCallback(event => {
+    if (disabled || open) return;
+    if (event.ctrlKey || event.metaKey || event.altKey) return;
+    const key = event.key;
+    if (/^[a-z]$/.test(key)) {
+      pendingTypeAheadKeyRef.current = key;
+      setOpen(true);
+    }
+  }, [disabled, open, setOpen]);
+  useEffect(() => {
+    var _accessibilityRoles$o;
+    if (!open || !pendingTypeAheadKeyRef.current) return;
+    const key = pendingTypeAheadKeyRef.current;
+    pendingTypeAheadKeyRef.current = null;
+    const floatingEl = refs.floating.current;
+    if (!floatingEl) return;
+    const optionRole = (_accessibilityRoles$o = accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option) !== null && _accessibilityRoles$o !== void 0 ? _accessibilityRoles$o : 'option';
+    const options = floatingEl.querySelectorAll("[role=\"".concat(optionRole, "\"]"));
+    const matchingOption = Array.from(options).find(option => {
+      var _option$textContent, _firstLetterMatch$;
+      const firstLetterMatch = (_option$textContent = option.textContent) === null || _option$textContent === void 0 ? void 0 : _option$textContent.match(/[a-z]/i);
+      return (firstLetterMatch === null || firstLetterMatch === void 0 || (_firstLetterMatch$ = firstLetterMatch[0]) === null || _firstLetterMatch$ === void 0 ? void 0 : _firstLetterMatch$.toLowerCase()) === key;
+    });
+    if (matchingOption) {
+      matchingOption.focus();
+    }
+  }, [open, refs.floating, accessibilityRoles === null || accessibilityRoles === void 0 ? void 0 : accessibilityRoles.option]);
   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,
@@ -165,6 +193,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       labelVariant: labelVariant,
       maxSelectedOptionsToShow: maxSelectedOptionsToShow,
       onChange: onChange,
+      onKeyDown: handleControlKeyDown,
       open: open,
       options: options,
       placeholder: placeholder,

package/esm/dropdown/Dropdown.js

@@ -170,6 +170,11 @@ const PopoverDropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =
     }))
   });
 }));
+
+/**
+ * @deprecated Use PopoverPanel for interactive overlays with arbitrary content, or Select / SelectChip when presenting a list of selectable options. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   const mergedProps = useComponentConfig('Dropdown', _props);
   const {

package/esm/dropdown/DropdownContent.js

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 } from 'react';
+import { forwardRef, memo } from 'react';
 import { animateDropdownOpacityInConfig, animateDropdownOpacityOutConfig, animateDropdownTransformInConfig, animateDropdownTransformOutConfig } from '@coinbase/cds-common/animation/dropdown';
 import { zIndex } from '@coinbase/cds-common/tokens/zIndex';
 import { m as motion } from 'framer-motion';
@@ -14,7 +14,18 @@ import { VStack } from '../layout/VStack';
 import { useMotionProps } from '../motion/useMotionProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const dropdownStaticClassName = 'cds-dropdown';
+
+/**
+ * @deprecated Use PopoverPanelContent within a PopoverPanel for interactive overlay content, or Select / SelectChip when presenting a list of selectable options. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
 const MotionVStack = motion(VStack);
+
+/**
+ * @deprecated Use PopoverPanelContent within a PopoverPanel for interactive overlay content, or Select / SelectChip when presenting a list of selectable options. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const DropdownContent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       children,

package/esm/dropdown/useResponsiveHeight.js

@@ -3,6 +3,11 @@ import { useIsoEffect } from '../hooks/useIsoEffect';
 import { useTheme } from '../hooks/useTheme';
 import { getBrowserGlobals, isSSR } from '../utils/browser';
 const BOTTOM_GUTTER_SPACE = 2;
+
+/**
+ * @deprecated Import `useResponsivePanelMaxHeight` from `@coinbase/cds-web/popover` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export function useResponsiveHeight(_ref) {
   var _getBrowserGlobals;
   let {