@basic-ui/core 0.0.43 → 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
@@ -1153,30 +1155,53 @@ function useFocusManagement(lastActionType, inputRef) {
   });
 }
 
-function getNextItem(currentItem, incr, optionsItems, autocomplete) {
+function getNextItem(currentItem, key, optionsItems, autocomplete) {
+  const jumpToStartOrEnd = key === 'Home' || key === 'End';
+  let incr = 1;
+
+  switch (key) {
+    case 'PageUp':
+      incr = -10;
+      break;
+
+    case 'PageDown':
+      incr = 10;
+      break;
+
+    case 'End':
+    case 'ArrowUp':
+      incr = -1;
+      break;
+
+    case 'Home':
+    case 'ArrowDown':
+      incr = 1;
+      break;
+  }
+
   const index = currentItem === '' ? -1 : optionsItems.findIndex(n => String(n.id) === currentItem);
   const optionsLen = optionsItems.length; // Nothing selected, either go to start, or end
 
-  if (index < 0) {
+  if (index < 0 || jumpToStartOrEnd) {
     if (incr > 0) {
       // Go to start
-      return optionsItems[0].id;
+      return optionsItems[0];
     } else {
       // Go to end
-      return optionsItems[optionsLen - 1].id;
+      return optionsItems[optionsLen - 1];
     }
   } else if (autocomplete) {
     const nextIndex = index + incr;
 
     if (nextIndex < 0 || nextIndex >= optionsLen) {
       // Next is outside the bounds of list, return nothing selected
-      return '';
+      return null;
     }
   } // I'm sure it won't be null, we already check optionsLen above
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
 
-  return optionsItems[getCircularIndex(index + incr, optionsLen)].id;
+  return optionsItems[getCircularIndex(index + incr, optionsLen)];
 } // We want the same events when the input or the popup have focus (HOW COOL ARE
 // HOOKS BTW?) This is probably the hairiest piece but it's not bad.
 
@@ -1201,6 +1226,10 @@ function useKeyDown() {
     const optionNodes = listScope.current.queryAllNodes(scopeQuery$1);
 
     switch (event.key) {
+      case 'Home':
+      case 'End':
+      case 'PageUp':
+      case 'PageDown':
       case 'ArrowUp':
       case 'ArrowDown':
         {
@@ -1220,17 +1249,26 @@ function useKeyDown() {
               persistSelection: persistSelectionRef.current
             });
           } else {
-            // ArrowUp decreases index, ArrowDown increases
-            const incr = event.key === 'ArrowUp' ? -1 : 1; // When autocompletting, we'll not cycle through the list directly
-
+            // When autocompletting, we'll not cycle through the list directly
             const autocomplete = autocompletePropRef.current; // Get next selected item
 
-            const nextItem = getNextItem(navigationItem, incr, optionNodes, autocomplete);
-            const value = nextItem !== '' ? optionsRef.current[nextItem].text : null;
-            transition(NAVIGATE, {
-              value,
-              item: nextItem
-            });
+            const nextItem = getNextItem(navigationItem, event.key, optionNodes, autocomplete);
+
+            if (nextItem !== null) {
+              nextItem.scrollIntoView({
+                behavior: 'auto',
+                block: 'nearest'
+              });
+              transition(NAVIGATE, {
+                value: optionsRef.current[nextItem.id].text,
+                item: nextItem.id
+              });
+            } else {
+              transition(NAVIGATE, {
+                value: null,
+                item: ''
+              });
+            }
           }
 
           break;
@@ -1999,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);
         }
@@ -2037,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,
@@ -2093,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;
         }
@@ -2102,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);
 
@@ -2137,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;
               }
@@ -2478,27 +2528,7 @@ const RadioGroup = /*#__PURE__*/react.forwardRef(function RadioGroup(props, forw
   });
 });
 
-/**
- * Welcome to @reach/slider!
- *
- * A UI input component where the user selects a value from within a given
- * range. A Slider has a handle that can be moved along a track to change its
- * value. When the user's mouse or focus is on the Slider's handle, the value
- * can be incremented with keyboard controls.
- *
- * Random thoughts/notes:
- *  - Currently testing this against the behavior of the native input range
- *    element to get our slider on par. We'll explore animated and multi-handle
- *    sliders next.
- *  - We may want to research some use cases for reversed sliders in RTL
- *    languages if that's a thing
- *
- * @see Docs     https://reach.tech/slider
- * @see Source   https://github.com/reach/reach-ui/tree/main/packages/slider
- * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
- * @see Example  https://github.com/Stanko/aria-progress-range-slider
- * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
- */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 
 const noop = () => {
   /* noop */
@@ -2544,6 +2574,7 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
   'aria-labelledby': ariaLabelledBy,
   'aria-valuetext': ariaValueTextProp,
   as: Comp = 'div',
+  innerAs,
   defaultValue,
   disabled = false,
   value: controlledValue,
@@ -2866,6 +2897,8 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
     rangeStyle: rangeStyle,
     updateValue: onChange,
     children: /*#__PURE__*/jsxRuntime.jsxs(Comp, { ...rest,
+      // @ts-ignore
+      as: innerAs,
       ref: assignMultipleRefs(sliderRef, forwardedRef),
       "data-reach-slider-input": "",
       "data-disabled": disabled ? '' : undefined,
@@ -2906,6 +2939,7 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
  */
 const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
   as: Comp = 'div',
+  innerAs,
   children,
   style = {},
   ...props
@@ -2916,7 +2950,9 @@ const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
     trackRef
   } = useSliderContext('SliderTrack');
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: assignMultipleRefs(trackRef, forwardedRef),
+    ref: assignMultipleRefs(trackRef, forwardedRef) // @ts-ignore
+    ,
+    as: innerAs,
     style: { ...style,
       position: 'relative'
     },
@@ -2944,6 +2980,7 @@ const SliderTrack = /*#__PURE__*/react.memo(SliderTrackImpl);
  */
 const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
   as: Comp = 'div',
+  innerAs,
   children,
   style = {},
   ...props
@@ -2954,7 +2991,9 @@ const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
     rangeStyle
   } = useSliderContext('SliderRange');
   return /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
+    ref: forwardedRef // @ts-ignore
+    ,
+    as: innerAs,
     style: {
       position: 'absolute',
       ...rangeStyle,
@@ -2988,6 +3027,7 @@ const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
   // min,
   // max,
   as: Comp = 'div',
+  innerAs,
   onBlur,
   onFocus,
   style = {},
@@ -3009,7 +3049,9 @@ const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
     sliderMax,
     value
   } = useSliderContext('SliderHandle');
-  return /*#__PURE__*/jsxRuntime.jsx(Comp, {
+  return /*#__PURE__*/jsxRuntime.jsx(Comp // @ts-ignore
+  , {
+    as: innerAs,
     "aria-disabled": disabled || undefined // If the slider has a visible label, it is referenced by
     // `aria-labelledby` on the slider element. Otherwise, the slider
     // element has a label provided by `aria-label`.
@@ -3086,6 +3128,7 @@ const SliderHandle = /*#__PURE__*/react.memo(SliderHandleImpl);
  */
 const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
   as: Comp = 'div',
+  innerAs,
   children,
   style = {},
   value,
@@ -3099,11 +3142,13 @@ const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
     sliderMax,
     value: sliderValue
   } = useSliderContext('SliderMarker');
-  const inRange = !(value < sliderMin || value > sliderMax);
+  const inRange = value >= sliderMin && value <= sliderMax;
   const absoluteStartPosition = `${valueToPercent(value, sliderMin, sliderMax)}%`;
   const state = value < sliderValue ? 'under-value' : value === sliderValue ? 'at-value' : 'over-value';
   return inRange ? /*#__PURE__*/jsxRuntime.jsx(Comp, {
-    ref: forwardedRef,
+    ref: forwardedRef // @ts-ignore
+    ,
+    as: innerAs,
     style: {
       position: 'absolute',
       ...(isVertical ? {