@kaizen/components 0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-20250120225815 → 0.0.0-canary-fix-filter-select-jump-issue-useHasStableYPosition-test-20250129223936

package/dist/cjs/__rc__/Select/hooks/{useHasStableYPosition.cjs → useHasCalculatedListboxPosition.cjs}

@@ -6,10 +6,10 @@ var React = require('react');
  * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
  * This now polls to check if the element's position is stable by comparing the first and last position.
  */
-var useHasStableYPosition = function (ref) {
+var useHasCalculatedListboxPosition = function (ref) {
   var _a = React.useState(false),
-    isStable = _a[0],
-    setIsStable = _a[1];
+    hasStablePosition = _a[0],
+    setHasStablePosition = _a[1];
   var _b = React.useState(null),
     lastYPosition = _b[0],
     setLastYPosition = _b[1];
@@ -19,18 +19,24 @@ var useHasStableYPosition = function (ref) {
         var y = ref.current.getBoundingClientRect().y;
         if (lastYPosition === null) {
           setLastYPosition(y);
-        } else if (y === lastYPosition) {
-          setIsStable(true);
+        } else if (y === lastYPosition && y >= 0) {
+          setHasStablePosition(true);
         } else {
           setLastYPosition(y);
         }
       }
     };
-    var intervalId = setInterval(checkPosition, 1);
+    var intervalId = setInterval(function () {
+      if (hasStablePosition) {
+        clearInterval(intervalId);
+        return;
+      }
+      checkPosition();
+    }, 1);
     return function () {
       return clearInterval(intervalId);
     };
-  }, [ref, lastYPosition]);
-  return isStable;
+  }, [ref, lastYPosition, hasStablePosition]);
+  return hasStablePosition;
 };
-exports.useHasStableYPosition = useHasStableYPosition;
+exports.useHasCalculatedListboxPosition = useHasCalculatedListboxPosition;

package/dist/cjs/__rc__/Select/subcomponents/ListBox/ListBox.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var listbox = require('@react-aria/listbox');
 var classnames = require('classnames');
 var SelectContext = require('../../context/SelectContext.cjs');
-var useHasStableYPosition = require('../../hooks/useHasStableYPosition.cjs');
+var useHasCalculatedListboxPosition = require('../../hooks/useHasCalculatedListboxPosition.cjs');
 var ListBox_module = require('./ListBox.module.scss.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
@@ -15,17 +15,30 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 
-/** A util to retrieve the key of the correct focusable items based of the focus strategy
+/** determines is the first or last key passed in is a section. If not it will return the key, otherwise will return the first option key of that section */
+var getOptionOrSectionKey = function (optionKey, state) {
+  var _a, _b;
+  if (!optionKey) return null;
+  var option = state.collection.getItem(optionKey);
+  var optionType = option === null || option === undefined ? undefined : option.type;
+  if (optionType === 'section') {
+    var sectionOptions = (_a = option === null || option === undefined ? undefined : option.value) === null || _a === undefined ? undefined : _a.options;
+    return sectionOptions ? (_b = Array.from(sectionOptions)[0]) === null || _b === undefined ? undefined : _b.value : null;
+  }
+  return optionKey;
+};
+/** A util to retrieve the key of the correct focusable option based of the focus strategy
  * This is used to determine which element from the collection to focus to on open base on the keyboard event
  * ie: UpArrow will set the focusStrategy to "last"
  */
 var getOptionKeyFromCollection = function (state) {
   if (state.selectedItem) {
     return state.selectedItem.key;
-  } else if (state.focusStrategy === 'last') {
-    return state.collection.getLastKey();
   }
-  return state.collection.getFirstKey();
+  if (state.focusStrategy === 'last') {
+    return getOptionOrSectionKey(state.collection.getLastKey(), state);
+  }
+  return getOptionOrSectionKey(state.collection.getFirstKey(), state);
 };
 /** This makes the use of query selector less brittle in instances where a failed selector is passed in
  */
@@ -45,18 +58,18 @@ var ListBox = function (_a) {
     restProps = tslib.__rest(_a, ["children", "menuProps", "classNameOverride"]);
   var state = SelectContext.useSelectContext().state;
   var ref = React.useRef(null);
-  var hasStableYPosition = useHasStableYPosition.useHasStableYPosition(ref);
+  var hasCalculatedListboxPosition = useHasCalculatedListboxPosition.useHasCalculatedListboxPosition(ref);
   var listBoxProps = listbox.useListBox(tslib.__assign(tslib.__assign({}, menuProps), {
     disallowEmptySelection: true,
     // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
     autoFocus: false
   }), state, ref).listBoxProps;
   /**
-   * This uses the hasStableYPosition to determine if the position is stable within the window
+   * When the Listbox is opened the initial position starts above the window, which can cause the out of the box behaviour in react-aria's listbox to jump a user to the top of the page.
    */
   React.useEffect(function () {
     var _a;
-    if (hasStableYPosition) {
+    if (hasCalculatedListboxPosition) {
       var optionKey = getOptionKeyFromCollection(state);
       var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
       if (focusToElement) {
@@ -67,7 +80,7 @@ var ListBox = function (_a) {
     }
     // Only run this effect for checking the first successful render
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasStableYPosition]);
+  }, [hasCalculatedListboxPosition]);
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,
     className: classnames__default.default(ListBox_module.listBox, classNameOverride)

package/dist/esm/__rc__/Select/hooks/{useHasStableYPosition.mjs → useHasCalculatedListboxPosition.mjs}

@@ -4,10 +4,10 @@ import { useState, useEffect } from 'react';
  * Due to the floating element's position starting as a negative value on render and then jumping to the correct position, this caused the focus to jump to the top of the page.
  * This now polls to check if the element's position is stable by comparing the first and last position.
  */
-var useHasStableYPosition = function (ref) {
+var useHasCalculatedListboxPosition = function (ref) {
   var _a = useState(false),
-    isStable = _a[0],
-    setIsStable = _a[1];
+    hasStablePosition = _a[0],
+    setHasStablePosition = _a[1];
   var _b = useState(null),
     lastYPosition = _b[0],
     setLastYPosition = _b[1];
@@ -17,18 +17,24 @@ var useHasStableYPosition = function (ref) {
         var y = ref.current.getBoundingClientRect().y;
         if (lastYPosition === null) {
           setLastYPosition(y);
-        } else if (y === lastYPosition) {
-          setIsStable(true);
+        } else if (y === lastYPosition && y >= 0) {
+          setHasStablePosition(true);
         } else {
           setLastYPosition(y);
         }
       }
     };
-    var intervalId = setInterval(checkPosition, 1);
+    var intervalId = setInterval(function () {
+      if (hasStablePosition) {
+        clearInterval(intervalId);
+        return;
+      }
+      checkPosition();
+    }, 1);
     return function () {
       return clearInterval(intervalId);
     };
-  }, [ref, lastYPosition]);
-  return isStable;
+  }, [ref, lastYPosition, hasStablePosition]);
+  return hasStablePosition;
 };
-export { useHasStableYPosition };
+export { useHasCalculatedListboxPosition };

package/dist/esm/__rc__/Select/subcomponents/ListBox/ListBox.mjs

@@ -3,20 +3,33 @@ import React, { useRef, useEffect } from 'react';
 import { useListBox } from '@react-aria/listbox';
 import classnames from 'classnames';
 import { useSelectContext } from '../../context/SelectContext.mjs';
-import { useHasStableYPosition } from '../../hooks/useHasStableYPosition.mjs';
+import { useHasCalculatedListboxPosition } from '../../hooks/useHasCalculatedListboxPosition.mjs';
 import styles from './ListBox.module.scss.mjs';
 
-/** A util to retrieve the key of the correct focusable items based of the focus strategy
+/** determines is the first or last key passed in is a section. If not it will return the key, otherwise will return the first option key of that section */
+var getOptionOrSectionKey = function (optionKey, state) {
+  var _a, _b;
+  if (!optionKey) return null;
+  var option = state.collection.getItem(optionKey);
+  var optionType = option === null || option === undefined ? undefined : option.type;
+  if (optionType === 'section') {
+    var sectionOptions = (_a = option === null || option === undefined ? undefined : option.value) === null || _a === undefined ? undefined : _a.options;
+    return sectionOptions ? (_b = Array.from(sectionOptions)[0]) === null || _b === undefined ? undefined : _b.value : null;
+  }
+  return optionKey;
+};
+/** A util to retrieve the key of the correct focusable option based of the focus strategy
  * This is used to determine which element from the collection to focus to on open base on the keyboard event
  * ie: UpArrow will set the focusStrategy to "last"
  */
 var getOptionKeyFromCollection = function (state) {
   if (state.selectedItem) {
     return state.selectedItem.key;
-  } else if (state.focusStrategy === 'last') {
-    return state.collection.getLastKey();
   }
-  return state.collection.getFirstKey();
+  if (state.focusStrategy === 'last') {
+    return getOptionOrSectionKey(state.collection.getLastKey(), state);
+  }
+  return getOptionOrSectionKey(state.collection.getFirstKey(), state);
 };
 /** This makes the use of query selector less brittle in instances where a failed selector is passed in
  */
@@ -37,18 +50,18 @@ const ListBox = /*#__PURE__*/function () {
       restProps = __rest(_a, ["children", "menuProps", "classNameOverride"]);
     var state = useSelectContext().state;
     var ref = useRef(null);
-    var hasStableYPosition = useHasStableYPosition(ref);
+    var hasCalculatedListboxPosition = useHasCalculatedListboxPosition(ref);
     var listBoxProps = useListBox(__assign(__assign({}, menuProps), {
       disallowEmptySelection: true,
       // This is to ensure that the listbox doesn't use React Aria's auto focus feature for Listbox, which creates a visual bug
       autoFocus: false
     }), state, ref).listBoxProps;
     /**
-     * This uses the hasStableYPosition to determine if the position is stable within the window
+     * When the Listbox is opened the initial position starts above the window, which can cause the out of the box behaviour in react-aria's listbox to jump a user to the top of the page.
      */
     useEffect(function () {
       var _a;
-      if (hasStableYPosition) {
+      if (hasCalculatedListboxPosition) {
         var optionKey = getOptionKeyFromCollection(state);
         var focusToElement = safeQuerySelector("[data-key='".concat(optionKey, "']"));
         if (focusToElement) {
@@ -59,7 +72,7 @@ const ListBox = /*#__PURE__*/function () {
       }
       // Only run this effect for checking the first successful render
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hasStableYPosition]);
+    }, [hasCalculatedListboxPosition]);
     return /*#__PURE__*/React.createElement("ul", __assign({
       ref: ref,
       className: classnames(styles.listBox, classNameOverride)