@dhis2-ui/select 10.9.1 → 10.10.0-alpha.1

package/build/cjs/simple-single-select/use-handle-key-press/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useHandleKeyPressOnCombobox", {
+  enumerable: true,
+  get: function () {
+    return _useHandleKeyPressOnCombobox.useHandleKeyPressOnCombobox;
+  }
+});
+Object.defineProperty(exports, "useHandleKeyPressOnFilterInput", {
+  enumerable: true,
+  get: function () {
+    return _useHandleKeyPressOnFilterInput.useHandleKeyPressOnFilterInput;
+  }
+});
+var _useHandleKeyPressOnCombobox = require("./use-handle-key-press-on-combobox.js");
+var _useHandleKeyPressOnFilterInput = require("./use-handle-key-press-on-filter-input.js");

package/build/cjs/simple-single-select/use-handle-key-press/use-focus-option.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusOption = useFocusOption;
+var _react = require("react");
+function useFocusOption(findIndexCallback, _ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  } = _ref;
+  return (0, _react.useCallback)(() => {
+    const nextFocussedIndex = findIndexCallback({
+      options,
+      activeIndex: focussedOptionIndex
+    });
+    if (nextFocussedIndex === -1) {
+      return;
+    }
+    setFocussedOptionIndex(nextFocussedIndex);
+  }, [findIndexCallback, options, focussedOptionIndex, setFocussedOptionIndex]);
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js

@@ -0,0 +1,177 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHandleKeyPressOnCombobox = useHandleKeyPressOnCombobox;
+var _react = require("react");
+var _useFocusOption = require("./use-focus-option.js");
+var _useHandleTyping = require("./use-handle-typing.js");
+var _usePageDown = require("./use-page-down.js");
+var _usePageUp = require("./use-page-up.js");
+var _utils = require("./utils.js");
+function useSelectOption(findIndexCallback, _ref) {
+  let {
+    options,
+    onChange,
+    value
+  } = _ref;
+  return (0, _react.useCallback)(() => {
+    const currentOptionIndex = options.findIndex(option => option.value === value);
+    const nextSelectedOptionIndex = findIndexCallback({
+      options,
+      activeIndex: currentOptionIndex
+    });
+    if (nextSelectedOptionIndex === -1) {
+      return;
+    }
+    const nextOption = options[nextSelectedOptionIndex];
+    onChange({
+      label: nextOption.label,
+      value: nextOption.value
+    });
+  }, [findIndexCallback, options, onChange, value]);
+}
+function useHandleKeyPressOnCombobox(_ref2) {
+  let {
+    value,
+    disabled,
+    expanded,
+    loading,
+    options,
+    openMenu,
+    closeMenu,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption,
+    onChange
+  } = _ref2;
+  const {
+    onTyping,
+    typing
+  } = (0, _useHandleTyping.useHandleTyping)({
+    expanded,
+    options,
+    setFocussedOptionIndex,
+    onChange
+  });
+  const pageDown = (0, _usePageDown.usePageDown)({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  });
+  const pageUp = (0, _usePageUp.usePageUp)({
+    options,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const selectNextOption = useSelectOption(_utils.findNextOptionIndex, {
+    options,
+    onChange,
+    value
+  });
+  const selectPrevOption = useSelectOption(_utils.findPrevOptionIndex, {
+    options,
+    onChange,
+    value
+  });
+  const focusNextOption = (0, _useFocusOption.useFocusOption)(_utils.findNextOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const focusPrevOption = (0, _useFocusOption.useFocusOption)(_utils.findPrevOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const focusFirstOption = (0, _useFocusOption.useFocusOption)(_utils.findFirstOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const focusLastOption = (0, _useFocusOption.useFocusOption)(_utils.findLastOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const handleKeyPress = (0, _react.useCallback)(_ref3 => {
+    let {
+      key,
+      altKey,
+      ctrlKey,
+      metaKey
+    } = _ref3;
+    if (disabled || loading) {
+      return;
+    }
+
+    /*
+     * The menu won't be an ancestor / sibling of the combobox,
+     * so when pressing tab, it's highly unlikely that any element
+     * in the menu would receive focus (happens only in storybook,
+     * where there's no other focussable element).
+     *
+     * Assistive technology will know about the menu as the combobox
+     * has the appropriate aria attributes that will point to the
+     * correct HTML elements.
+     */
+    if (expanded && key === 'Tab') {
+      closeMenu();
+      return;
+    }
+    if (expanded && (key === 'Escape' || key === 'Enter' || key === ' ' && !typing || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
+      if (value !== options[focussedOptionIndex].value) {
+        selectFocussedOption();
+      }
+      closeMenu();
+      return;
+    }
+    if (!expanded && (key === ' ' && !typing || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
+      openMenu();
+      return;
+    }
+    if (key === 'ArrowDown' && !expanded) {
+      selectNextOption();
+      return;
+    }
+    if (key === 'ArrowDown') {
+      focusNextOption();
+      return;
+    }
+    if (key === 'ArrowUp' && !expanded) {
+      selectPrevOption();
+      return;
+    }
+    if (key === 'ArrowUp') {
+      focusPrevOption();
+      return;
+    }
+    if (key === 'Home') {
+      focusFirstOption();
+      return;
+    }
+    if (key === 'End') {
+      focusLastOption();
+      return;
+    }
+    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey || key === ' ' && typing) {
+      onTyping(key);
+      return;
+    }
+    if (expanded && key === 'PageUp') {
+      pageUp();
+      return;
+    }
+    if (expanded && key === 'PageDown') {
+      pageDown();
+      return;
+    }
+
+    // Do nothing
+  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping]);
+  return handleKeyPress;
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHandleKeyPressOnFilterInput = useHandleKeyPressOnFilterInput;
+var _react = require("react");
+var _useFocusOption = require("./use-focus-option.js");
+var _usePageDown = require("./use-page-down.js");
+var _usePageUp = require("./use-page-up.js");
+var _utils = require("./utils.js");
+function useHandleKeyPressOnFilterInput(_ref) {
+  let {
+    value,
+    options,
+    loading,
+    closeMenu,
+    listBoxRef,
+    focusComboBox,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption
+  } = _ref;
+  const pageDown = (0, _usePageDown.usePageDown)({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  });
+  const pageUp = (0, _usePageUp.usePageUp)({
+    options,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const focusNextOption = (0, _useFocusOption.useFocusOption)(_utils.findNextOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const focusPrevOption = (0, _useFocusOption.useFocusOption)(_utils.findPrevOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const focusFirstOption = (0, _useFocusOption.useFocusOption)(_utils.findFirstOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const focusLastOption = (0, _useFocusOption.useFocusOption)(_utils.findLastOptionIndex, {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const handleKeyPress = (0, _react.useCallback)(e => {
+    if (loading) {
+      return;
+    }
+    const {
+      key,
+      altKey
+    } = e;
+    if (key === 'Escape' || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey) {
+      if (value !== options[focussedOptionIndex].value) {
+        selectFocussedOption();
+      }
+      closeMenu();
+
+      // As the filter is being focused, we want to move focus back to the combobox
+      focusComboBox();
+      return;
+    }
+    if (key === 'ArrowDown') {
+      e.preventDefault(); // Disable moving cursor to end
+      focusNextOption();
+      return;
+    }
+    if (key === 'ArrowUp') {
+      e.preventDefault(); // Disable moving cursor to start
+      focusPrevOption();
+      return;
+    }
+    if (key === 'Home') {
+      e.preventDefault(); // Disable moving cursor to start
+      focusFirstOption();
+      return;
+    }
+    if (key === 'End') {
+      e.preventDefault(); // Disable moving cursor to end
+      focusLastOption();
+      return;
+    }
+    if (key === 'PageUp') {
+      pageUp();
+      return;
+    }
+    if (key === 'PageDown') {
+      pageDown();
+      return;
+    }
+
+    // Do nothing
+  }, [closeMenu, options, value, loading, focussedOptionIndex, selectFocussedOption, focusComboBox, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp]);
+  return handleKeyPress;
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-typing.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHandleTyping = useHandleTyping;
+var _react = require("react");
+const TYPING_DEBOUNCE_TIME = 300; // ms
+
+function useHandleTyping(_ref) {
+  let {
+    expanded,
+    options,
+    setFocussedOptionIndex,
+    onChange
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)('');
+  const [typing, setTyping] = (0, _react.useState)(false);
+
+  // This will reset the typed value after a given time
+  const timeoutRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (value) {
+      timeoutRef.current = setTimeout(() => {
+        setValue('');
+        setTyping(false);
+      }, TYPING_DEBOUNCE_TIME);
+    } else {
+      setTyping(false);
+    }
+  }, [
+  // adding value to the dependencies array so that the hooks runs every time the value changes
+  value]);
+
+  // This will focus the first option with a label starting with the typed sequence
+  const prevValueRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (value && value !== prevValueRef.current) {
+      // We only want to do this when the value changed
+      prevValueRef.current = value;
+      const optionIndex = options.findIndex(_ref2 => {
+        let {
+          disabled,
+          label
+        } = _ref2;
+        return !disabled && label.toLowerCase().startsWith(value.toLowerCase());
+      });
+      if (optionIndex !== -1) {
+        if (expanded) {
+          setFocussedOptionIndex(optionIndex);
+        } else {
+          const nextSelectedOption = options[optionIndex];
+          onChange({
+            label: nextSelectedOption.label,
+            value: nextSelectedOption.value
+          });
+        }
+      }
+    }
+  }, [value, options, setFocussedOptionIndex, expanded, onChange]);
+  const onTyping = (0, _react.useCallback)(key => {
+    setTyping(true);
+    if (key === 'Backspace') {
+      setValue(prevValue => prevValue.slice(0, -1));
+      return;
+    }
+    if (key === 'Clear') {
+      setValue('');
+      return;
+    }
+    setValue(prevValue => `${prevValue}${key}`);
+  }, []);
+  return {
+    onTyping,
+    typing
+  };
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-first-option-on-previous-page.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlightFirstOptionOnPreviousPage = useHighlightFirstOptionOnPreviousPage;
+var _react = require("react");
+function useHighlightFirstOptionOnPreviousPage(_ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  } = _ref;
+  return (0, _react.useCallback)(() => {
+    const listBoxParent = listBoxRef.current.parentNode;
+    const optionElements = Array.from(listBoxRef.current.childNodes);
+    const visibleOptionsAmount = Math.floor(listBoxParent.offsetHeight / optionElements[0].offsetHeight);
+    const nextTopOptionIndex = Math.max(0, focussedOptionIndex - visibleOptionsAmount);
+
+    // If there's no next option and we already have the last option in the list highlighted
+    if (!options[nextTopOptionIndex]) {
+      return;
+    }
+    if (!options[nextTopOptionIndex].disabled) {
+      const nextTopOption = optionElements[nextTopOptionIndex];
+      const scrollPosition = nextTopOption.offsetTop;
+      listBoxParent.scrollTop = scrollPosition;
+      setFocussedOptionIndex(nextTopOptionIndex);
+      return;
+    }
+    const lowerEnabledOptionIndex = options.slice(0, nextTopOptionIndex).findLastIndex(option => !option.disabled);
+    if (lowerEnabledOptionIndex !== -1) {
+      const lowerEnabledOption = optionElements[lowerEnabledOptionIndex];
+      const lowerScrollPosition = lowerEnabledOption.offsetTop;
+      listBoxParent.scrollTop = lowerScrollPosition;
+      setFocussedOptionIndex(lowerEnabledOptionIndex);
+      return;
+    }
+    const inbetweenEnabledOptionIndex = nextTopOptionIndex + options.slice(nextTopOptionIndex, focussedOptionIndex).findIndex(option => !option.disabled);
+    if (inbetweenEnabledOptionIndex === -1) {
+      // We're already on the first enabled option
+      return;
+    }
+    const inbetweenTopOption = optionElements[inbetweenEnabledOptionIndex];
+    const scrollPosition = inbetweenTopOption.offsetTop;
+    listBoxParent.scrollTop = scrollPosition;
+    setFocussedOptionIndex(inbetweenEnabledOptionIndex);
+  }, [options, focussedOptionIndex, setFocussedOptionIndex, listBoxRef]);
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-first-visible-option.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlightFirstVisibleOption = useHighlightFirstVisibleOption;
+var _react = require("react");
+function useHighlightFirstVisibleOption(_ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  } = _ref;
+  return (0, _react.useCallback)(lowestVisibleIndex => {
+    if (!options[lowestVisibleIndex].disabled) {
+      setFocussedOptionIndex(lowestVisibleIndex);
+      return;
+    }
+    const previousEnabledOptionIndex = options.slice(0, lowestVisibleIndex).findLastIndex(option => !option.disabled);
+    if (previousEnabledOptionIndex !== -1) {
+      setFocussedOptionIndex(previousEnabledOptionIndex);
+      return;
+    }
+    const nextEnabledOptionIndex = lowestVisibleIndex + options.slice(lowestVisibleIndex, focussedOptionIndex).findIndex(option => !option.disabled);
+    if (nextEnabledOptionIndex !== -1) {
+      return;
+    }
+    setFocussedOptionIndex(nextEnabledOptionIndex);
+  }, [options, focussedOptionIndex, setFocussedOptionIndex]);
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-last-option-on-next-page.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlightLastOptionOnNextPage = useHighlightLastOptionOnNextPage;
+var _react = require("react");
+function useHighlightLastOptionOnNextPage(_ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  } = _ref;
+  return (0, _react.useCallback)(() => {
+    const listBoxParent = listBoxRef.current.parentNode;
+    const optionElements = Array.from(listBoxRef.current.childNodes);
+    const visibleOptionsAmount = Math.floor(listBoxParent.offsetHeight / optionElements[0].offsetHeight);
+    const nextHighlightedOptionIndex = Math.min(options.length - 1, focussedOptionIndex + visibleOptionsAmount);
+
+    // If there's no next option and we already have the last option in the list highlighted
+    if (!options[nextHighlightedOptionIndex]) {
+      return;
+    }
+    if (!options[nextHighlightedOptionIndex].disabled) {
+      // This will be the first option in the list
+      const {
+        offsetTop: scrollPosition
+      } = optionElements[nextHighlightedOptionIndex - visibleOptionsAmount + 1];
+      listBoxParent.scrollTop = scrollPosition;
+      setFocussedOptionIndex(nextHighlightedOptionIndex);
+      return;
+    }
+    const followingEnabledOptionIndex = nextHighlightedOptionIndex + options.slice(nextHighlightedOptionIndex).findIndex(option => !option.disabled);
+
+    // There is no enabled option after the disabled option that's at the end of the next page
+    // So we stay where we are
+    if (followingEnabledOptionIndex === -1) {
+      return;
+    }
+
+    // There is an enabled option after the disabled option that's at the end of the next page
+    // So that'll be the new highlighted option and the bottom of the next displayed page
+    const {
+      offsetTop: adjustedScrollPosition
+    } = optionElements[followingEnabledOptionIndex - visibleOptionsAmount + 1];
+    listBoxParent.scrollTop = adjustedScrollPosition;
+    setFocussedOptionIndex(followingEnabledOptionIndex);
+  }, [options, focussedOptionIndex, setFocussedOptionIndex, listBoxRef]);
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-highlight-last-visible-option.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlightLastVisibleOption = useHighlightLastVisibleOption;
+var _react = require("react");
+function useHighlightLastVisibleOption(_ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  } = _ref;
+  return (0, _react.useCallback)(highestVisibleIndex => {
+    if (!options[highestVisibleIndex].disabled) {
+      setFocussedOptionIndex(highestVisibleIndex);
+      return;
+    }
+
+    // Last option on page is disabled, find next option that's not disabled
+    const followingEnabledOptionIndex = options.slice(highestVisibleIndex).findIndex(option => !option.disabled);
+    if (followingEnabledOptionIndex >= 0) {
+      // We need to add the highest visible index because the index is lower due to slicing the array
+      setFocussedOptionIndex(followingEnabledOptionIndex + highestVisibleIndex);
+      return;
+    }
+
+    // No following enabled option, trying to find the closest previous sibling of the last option on the current page
+    const closestToEndOfPageEnabledOptionIndex = options.slice(
+    // We don't include the currently highlighted option
+    focussedOptionIndex + 1, highestVisibleIndex).findLastIndex(option => !option.disabled);
+    if (closestToEndOfPageEnabledOptionIndex >= 0) {
+      setFocussedOptionIndex(closestToEndOfPageEnabledOptionIndex +
+      // We need to add the focused index and 1 because the index is lower due to slicing the array
+      focussedOptionIndex + 1);
+      return;
+    }
+
+    // The currently highlighted option is the last enabled option
+    return;
+  }, [options, focussedOptionIndex, setFocussedOptionIndex]);
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-page-down.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePageDown = usePageDown;
+var _react = require("react");
+var _isOptionHidden = require("../is-option-hidden.js");
+var _useHighlightLastOptionOnNextPage = require("./use-highlight-last-option-on-next-page.js");
+var _useHighlightLastVisibleOption = require("./use-highlight-last-visible-option.js");
+function usePageDown(_ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  } = _ref;
+  const highlightLastVisibleOption = (0, _useHighlightLastVisibleOption.useHighlightLastVisibleOption)({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const highlightLastOptionOnNextPage = (0, _useHighlightLastOptionOnNextPage.useHighlightLastOptionOnNextPage)({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  });
+  return (0, _react.useCallback)(() => {
+    const listBoxParent = listBoxRef.current.parentNode;
+    const options = Array.from(listBoxRef.current.childNodes);
+    const highestVisibleIndex = options.findLastIndex(option => !(0, _isOptionHidden.isOptionHidden)(option, listBoxParent));
+    if (highestVisibleIndex > focussedOptionIndex) {
+      highlightLastVisibleOption(highestVisibleIndex);
+      return;
+    }
+    if (highestVisibleIndex > -1) {
+      highlightLastOptionOnNextPage();
+      return;
+    }
+
+    // No visible option (e.g. when menu is empty)
+    return;
+  }, [focussedOptionIndex, listBoxRef, highlightLastVisibleOption, highlightLastOptionOnNextPage]);
+}

package/build/cjs/simple-single-select/use-handle-key-press/use-page-up.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePageUp = usePageUp;
+var _react = require("react");
+var _isOptionHidden = require("../is-option-hidden.js");
+var _useHighlightFirstOptionOnPreviousPage = require("./use-highlight-first-option-on-previous-page.js");
+var _useHighlightFirstVisibleOption = require("./use-highlight-first-visible-option.js");
+function usePageUp(_ref) {
+  let {
+    options,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  } = _ref;
+  const highlightFirstVisibleOption = (0, _useHighlightFirstVisibleOption.useHighlightFirstVisibleOption)({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const highlightFirstOptionOnPreviousPage = (0, _useHighlightFirstOptionOnPreviousPage.useHighlightFirstOptionOnPreviousPage)({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  });
+  return (0, _react.useCallback)(() => {
+    const listBoxParent = listBoxRef.current.parentNode;
+    const optionElements = Array.from(listBoxRef.current.childNodes);
+    const lowestVisibleIndex = optionElements.findIndex(optionElement => !(0, _isOptionHidden.isOptionHidden)(optionElement, listBoxParent));
+
+    // No visible option (e.g. when menu is empty)
+    if (lowestVisibleIndex === -1) {
+      return;
+    }
+    if (lowestVisibleIndex < focussedOptionIndex) {
+      highlightFirstVisibleOption(lowestVisibleIndex);
+      return;
+    }
+    highlightFirstOptionOnPreviousPage();
+  }, [focussedOptionIndex, listBoxRef, highlightFirstOptionOnPreviousPage, highlightFirstVisibleOption]);
+}