@basic-ui/core 0.0.45 → 0.0.46

package/build/cjs/index.js

@@ -216,11 +216,13 @@ function wrapEvent(theirHandler, ourHandler) {
 function useControlledState(valueProp, onChangeProp, defaultValue, defaultOnChange) {
   const isControlled = valueProp !== undefined;
   const wasControlled = react.useRef(isControlled);
+  const hasWarned = react.useRef(false);
   const [valueState, setValueState] = react.useState(defaultValue);
 
   if (isControlled) {
-    if (wasControlled.current && process.env.NODE_ENV !== 'production') {
+    if (wasControlled.current && process.env.NODE_ENV !== 'production' && !hasWarned.current) {
       console.warn('Trying to change from controlled to uncontrolled.');
+      hasWarned.current = true;
     }
 
     return [// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -2035,7 +2037,6 @@ const MenuItem = /*#__PURE__*/react.forwardRef(function MenuItem(props, forwarde
   const handleKeyDown = e => {
     switch (e.key) {
       case 'Enter':
-      case ' ':
         if (!disabled) {
           handleSelect(e);
         }
@@ -2073,6 +2074,8 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
     defaultActiveItemValue,
     ...otherProps
   } = props;
+  const itemSearchStr = react.useRef('');
+  const itemSearchClearTimeout = react.useRef();
   const {
     menuListIdRef,
     buttonRef,
@@ -2129,6 +2132,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
           onChange && onChange(e, false);
           e.preventDefault(); // prevents focusing on next element, because we will be handling it
 
+          itemSearchStr.current = '';
           buttonRef.current?.focus();
           break;
         }
@@ -2138,6 +2142,7 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
       case 'ArrowDown':
       case 'ArrowUp':
         e.preventDefault();
+        itemSearchStr.current = '';
         const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
         const currentIndex = allItems.findIndex(e => e === navigationItem);
 
@@ -2173,21 +2178,30 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(props, forwarde
 
       default:
         {
-          if (e.key.length === 1) {
+          if (e.key.length === 1 && !e.ctrlKey && !e.altKey) {
             // A-Z
             e.preventDefault();
+
+            if (itemSearchStr.current.length === 0 || itemSearchStr.current.slice(-1) !== e.key) {
+              itemSearchStr.current = itemSearchStr.current + e.key;
+            }
+
+            clearTimeout(itemSearchClearTimeout.current);
+            itemSearchClearTimeout.current = setTimeout(() => {
+              itemSearchStr.current = '';
+            }, 500);
             const allItems = scope ? scope.current.queryAllNodes(queryScope) : [];
             const currentIndex = allItems.findIndex(e => e === navigationItem);
-            const firstLetter = e.key.toLowerCase();
+            const searchStr = itemSearchStr.current;
             let nextIndex = -1;
 
-            for (let i = 1; i < allItems.length; i++) {
+            for (let i = searchStr.length === 1 ? 1 : 0; i < allItems.length; i++) {
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               const idx = getCircularIndex(currentIndex + i, allItems.length);
               const dom = allItems[idx];
               const domText = dom.innerText.toLowerCase();
 
-              if (domText.length > 0 && domText.charAt(0) === firstLetter) {
+              if (domText.length > 0 && domText.startsWith(searchStr)) {
                 nextIndex = idx;
                 break;
               }