@basic-ui/core 0.0.44 → 0.0.45

package/build/cjs/index.js

@@ -1153,30 +1153,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 +1224,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 +1247,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;
@@ -2478,27 +2514,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 +2560,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 +2883,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 +2925,7 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
  */
 const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
   as: Comp = 'div',
+  innerAs,
   children,
   style = {},
   ...props
@@ -2916,7 +2936,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 +2966,7 @@ const SliderTrack = /*#__PURE__*/react.memo(SliderTrackImpl);
  */
 const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
   as: Comp = 'div',
+  innerAs,
   children,
   style = {},
   ...props
@@ -2954,7 +2977,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 +3013,7 @@ const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
   // min,
   // max,
   as: Comp = 'div',
+  innerAs,
   onBlur,
   onFocus,
   style = {},
@@ -3009,7 +3035,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 +3114,7 @@ const SliderHandle = /*#__PURE__*/react.memo(SliderHandleImpl);
  */
 const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
   as: Comp = 'div',
+  innerAs,
   children,
   style = {},
   value,
@@ -3099,11 +3128,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 ? {