From af8a22229c5c824b83047056b6d3c533e7e9ab38 Mon Sep 17 00:00:00 2001
From: Mohammer5 <jan-gerke@dhis2.org>
Date: Mon, 21 Oct 2024 18:39:31 +0800
Subject: [PATCH] feat(select a11y): handle pageUp and pageDown keys

---
 .../src/single-select-a11y/menu/index.js      |   1 +
 .../{ => menu}/menu-filter.js                 |   2 +-
 .../{ => menu}/menu-loading.js                |   0
 .../{ => menu}/menu-options-list.js           |  51 ++++-----
 .../src/single-select-a11y/{ => menu}/menu.js |  12 +-
 .../single-select-a11y/{ => menu}/option.js   |   1 +
 .../selected-value/index.js                   |   1 +
 .../selected-value-clear-button.js            |   2 +-
 .../selected-value-container.js               |   0
 .../selected-value-placeholder.js             |   0
 .../selected-value-prefix.js                  |   0
 .../{ => selected-value}/selected-value.js    |   0
 .../single-select-a11y/shared-prop-types.js   |  14 +--
 .../single-select-a11y/single-select-a11y.js  |  16 +--
 .../single-select-a11y.prod.stories.js        |  39 +++++--
 .../use-handle-key-press/index.js             |   1 +
 .../use-handle-key-press.js                   |  90 +++------------
 .../use-handle-key-press/use-handle-typing.js |  74 +++++++++++++
 .../use-handle-key-press/use-page-up-down.js  | 103 ++++++++++++++++++
 19 files changed, 275 insertions(+), 132 deletions(-)
 create mode 100644 components/select/src/single-select-a11y/menu/index.js
 rename components/select/src/single-select-a11y/{ => menu}/menu-filter.js (97%)
 rename components/select/src/single-select-a11y/{ => menu}/menu-loading.js (100%)
 rename components/select/src/single-select-a11y/{ => menu}/menu-options-list.js (78%)
 rename components/select/src/single-select-a11y/{ => menu}/menu.js (91%)
 rename components/select/src/single-select-a11y/{ => menu}/option.js (98%)
 create mode 100644 components/select/src/single-select-a11y/selected-value/index.js
 rename components/select/src/single-select-a11y/{ => selected-value}/selected-value-clear-button.js (98%)
 rename components/select/src/single-select-a11y/{ => selected-value}/selected-value-container.js (100%)
 rename components/select/src/single-select-a11y/{ => selected-value}/selected-value-placeholder.js (100%)
 rename components/select/src/single-select-a11y/{ => selected-value}/selected-value-prefix.js (100%)
 rename components/select/src/single-select-a11y/{ => selected-value}/selected-value.js (100%)
 create mode 100644 components/select/src/single-select-a11y/use-handle-key-press/index.js
 rename components/select/src/single-select-a11y/{ => use-handle-key-press}/use-handle-key-press.js (67%)
 create mode 100644 components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js
 create mode 100644 components/select/src/single-select-a11y/use-handle-key-press/use-page-up-down.js

diff --git a/components/select/src/single-select-a11y/menu/index.js b/components/select/src/single-select-a11y/menu/index.js
new file mode 100644
index 0000000000..bf206853e6
--- /dev/null
+++ b/components/select/src/single-select-a11y/menu/index.js
@@ -0,0 +1 @@
+export { Menu } from './menu.js'
diff --git a/components/select/src/single-select-a11y/menu-filter.js b/components/select/src/single-select-a11y/menu/menu-filter.js
similarity index 97%
rename from components/select/src/single-select-a11y/menu-filter.js
rename to components/select/src/single-select-a11y/menu/menu-filter.js
index 4cc2181882..a4ec8102bc 100644
--- a/components/select/src/single-select-a11y/menu-filter.js
+++ b/components/select/src/single-select-a11y/menu/menu-filter.js
@@ -2,7 +2,7 @@ import { colors, spacers } from '@dhis2/ui-constants'
 import { Input } from '@dhis2-ui/input'
 import PropTypes from 'prop-types'
 import React from 'react'
-import i18n from '../locales/index.js'
+import i18n from '../../locales/index.js'
 
 export function MenuFilter({ value, onChange, dataTest, placeholder, label }) {
     return (
diff --git a/components/select/src/single-select-a11y/menu-loading.js b/components/select/src/single-select-a11y/menu/menu-loading.js
similarity index 100%
rename from components/select/src/single-select-a11y/menu-loading.js
rename to components/select/src/single-select-a11y/menu/menu-loading.js
diff --git a/components/select/src/single-select-a11y/menu-options-list.js b/components/select/src/single-select-a11y/menu/menu-options-list.js
similarity index 78%
rename from components/select/src/single-select-a11y/menu-options-list.js
rename to components/select/src/single-select-a11y/menu/menu-options-list.js
index 5dae04aca3..e690721469 100644
--- a/components/select/src/single-select-a11y/menu-options-list.js
+++ b/components/select/src/single-select-a11y/menu/menu-options-list.js
@@ -1,31 +1,32 @@
 import PropTypes from 'prop-types'
-import React, { useEffect, useRef } from 'react'
-import { isOptionHidden } from './is-option-hidden.js'
+import React, { forwardRef, useEffect } from 'react'
+import { isOptionHidden } from '../is-option-hidden.js'
+import { optionProp } from '../shared-prop-types.js'
 import { Option } from './option.js'
-import { optionsProp } from './shared-prop-types.js'
-
-export function MenuOptionsList({
-    comboBoxId,
-    expanded,
-    focussedOptionIndex,
-    idPrefix,
-    labelledBy,
-    options,
-    selected,
-    dataTest,
-    disabled,
-    loading,
-    onChange,
-    onBlur,
-    onKeyDown,
-}) {
-    const listBoxRef = useRef()
 
+export const MenuOptionsList = forwardRef(function MenuOptionsList(
+    {
+        comboBoxId,
+        expanded,
+        focussedOptionIndex,
+        idPrefix,
+        labelledBy,
+        options,
+        selected,
+        dataTest,
+        disabled,
+        loading,
+        onChange,
+        onBlur,
+        onKeyDown,
+    },
+    ref
+) {
     // scrolls the highlighted option into view when:
     // * the highlighted option changes
     // * the menu opens
     useEffect(() => {
-        const { current: listBox } = listBoxRef
+        const { current: listBox } = ref
         const highlightedOption = expanded
             ? listBox.childNodes[focussedOptionIndex]
             : null
@@ -41,11 +42,11 @@ export function MenuOptionsList({
                 highlightedOption.scrollIntoView()
             }
         }
-    }, [expanded, focussedOptionIndex])
+    }, [expanded, focussedOptionIndex, ref])
 
     return (
         <div
-            ref={listBoxRef}
+            ref={ref}
             role="listbox"
             id={`${idPrefix}-listbox`}
             aria-labelledby={labelledBy}
@@ -84,14 +85,14 @@ export function MenuOptionsList({
             )}
         </div>
     )
-}
+})
 
 MenuOptionsList.propTypes = {
     comboBoxId: PropTypes.string.isRequired,
     expanded: PropTypes.bool.isRequired,
     focussedOptionIndex: PropTypes.number.isRequired,
     idPrefix: PropTypes.string.isRequired,
-    options: optionsProp.isRequired,
+    options: PropTypes.arrayOf(optionProp).isRequired,
     onChange: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
diff --git a/components/select/src/single-select-a11y/menu.js b/components/select/src/single-select-a11y/menu/menu.js
similarity index 91%
rename from components/select/src/single-select-a11y/menu.js
rename to components/select/src/single-select-a11y/menu/menu.js
index 5a4b49064e..aa52c51293 100644
--- a/components/select/src/single-select-a11y/menu.js
+++ b/components/select/src/single-select-a11y/menu/menu.js
@@ -4,10 +4,10 @@ import { Popper } from '@dhis2-ui/popper'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
+import { optionProp } from '../shared-prop-types.js'
 import { MenuFilter } from './menu-filter.js'
 import { MenuLoading } from './menu-loading.js'
 import { MenuOptionsList } from './menu-options-list.js'
-import { optionsProp } from './shared-prop-types.js'
 
 export function Menu({
     comboBoxId,
@@ -24,6 +24,7 @@ export function Menu({
     filterable,
     hidden,
     labelledBy,
+    listBoxRef,
     loading,
     loadingText,
     maxHeight,
@@ -66,6 +67,7 @@ export function Menu({
             {!options.length && <div className="empty-container">{empty}</div>}
 
             <MenuOptionsList
+                ref={listBoxRef}
                 comboBoxId={comboBoxId}
                 dataTest={`${dataTestPrefix}-list`}
                 disabled={disabled}
@@ -91,6 +93,9 @@ export function Menu({
                     border: 1px solid ${colors.grey200};
                     border-radius: 3px;
                     box-shadow: ${elevations.e300};
+
+                    /* We want the provided height to be exact */
+                    box-sizing: content-box;
                 }
 
                 .hidden {
@@ -125,7 +130,10 @@ Menu.propTypes = {
     comboBoxId: PropTypes.string.isRequired,
     focussedOptionIndex: PropTypes.number.isRequired,
     idPrefix: PropTypes.string.isRequired,
-    options: optionsProp.isRequired,
+    listBoxRef: PropTypes.shape({
+        current: PropTypes.instanceOf(HTMLElement),
+    }).isRequired,
+    options: PropTypes.arrayOf(optionProp).isRequired,
     onChange: PropTypes.func.isRequired,
     dataTest: PropTypes.string,
     disabled: PropTypes.bool,
diff --git a/components/select/src/single-select-a11y/option.js b/components/select/src/single-select-a11y/menu/option.js
similarity index 98%
rename from components/select/src/single-select-a11y/option.js
rename to components/select/src/single-select-a11y/menu/option.js
index abe993a6db..4ad2a5ef82 100644
--- a/components/select/src/single-select-a11y/option.js
+++ b/components/select/src/single-select-a11y/menu/option.js
@@ -22,6 +22,7 @@ function DefaultStyle({ label, disabled, highlighted }) {
                     color: ${colors.grey900};
                     padding-block: ${spacers.dp8};
                     padding-inline: ${spacers.dp12};
+                    line-height: ${spacers.dp16};
                 }
 
                 span:hover {
diff --git a/components/select/src/single-select-a11y/selected-value/index.js b/components/select/src/single-select-a11y/selected-value/index.js
new file mode 100644
index 0000000000..2727095a23
--- /dev/null
+++ b/components/select/src/single-select-a11y/selected-value/index.js
@@ -0,0 +1 @@
+export { SelectedValue } from './selected-value.js'
diff --git a/components/select/src/single-select-a11y/selected-value-clear-button.js b/components/select/src/single-select-a11y/selected-value/selected-value-clear-button.js
similarity index 98%
rename from components/select/src/single-select-a11y/selected-value-clear-button.js
rename to components/select/src/single-select-a11y/selected-value/selected-value-clear-button.js
index 35b82add4d..06c17a7023 100644
--- a/components/select/src/single-select-a11y/selected-value-clear-button.js
+++ b/components/select/src/single-select-a11y/selected-value/selected-value-clear-button.js
@@ -2,7 +2,7 @@ import { colors, theme } from '@dhis2/ui-constants'
 import { Tooltip } from '@dhis2-ui/tooltip'
 import PropTypes from 'prop-types'
 import React from 'react'
-import i18n from '../locales/index.js'
+import i18n from '../../locales/index.js'
 
 export const ClearButton = ({ onClear, clearText, dataTest }) => (
     <button
diff --git a/components/select/src/single-select-a11y/selected-value-container.js b/components/select/src/single-select-a11y/selected-value/selected-value-container.js
similarity index 100%
rename from components/select/src/single-select-a11y/selected-value-container.js
rename to components/select/src/single-select-a11y/selected-value/selected-value-container.js
diff --git a/components/select/src/single-select-a11y/selected-value-placeholder.js b/components/select/src/single-select-a11y/selected-value/selected-value-placeholder.js
similarity index 100%
rename from components/select/src/single-select-a11y/selected-value-placeholder.js
rename to components/select/src/single-select-a11y/selected-value/selected-value-placeholder.js
diff --git a/components/select/src/single-select-a11y/selected-value-prefix.js b/components/select/src/single-select-a11y/selected-value/selected-value-prefix.js
similarity index 100%
rename from components/select/src/single-select-a11y/selected-value-prefix.js
rename to components/select/src/single-select-a11y/selected-value/selected-value-prefix.js
diff --git a/components/select/src/single-select-a11y/selected-value.js b/components/select/src/single-select-a11y/selected-value/selected-value.js
similarity index 100%
rename from components/select/src/single-select-a11y/selected-value.js
rename to components/select/src/single-select-a11y/selected-value/selected-value.js
diff --git a/components/select/src/single-select-a11y/shared-prop-types.js b/components/select/src/single-select-a11y/shared-prop-types.js
index 9a4022313b..0bd3bb7e43 100644
--- a/components/select/src/single-select-a11y/shared-prop-types.js
+++ b/components/select/src/single-select-a11y/shared-prop-types.js
@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types'
 
-export const optionsProp = PropTypes.arrayOf(
-    PropTypes.shape({
-        label: PropTypes.string.isRequired,
-        value: PropTypes.string.isRequired,
-        component: PropTypes.elementType,
-        disabled: PropTypes.bool,
-    })
-)
+export const optionProp = PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    component: PropTypes.elementType,
+    disabled: PropTypes.bool,
+})
diff --git a/components/select/src/single-select-a11y/single-select-a11y.js b/components/select/src/single-select-a11y/single-select-a11y.js
index 374cac8c85..ea065ddcea 100644
--- a/components/select/src/single-select-a11y/single-select-a11y.js
+++ b/components/select/src/single-select-a11y/single-select-a11y.js
@@ -4,10 +4,10 @@ import { sharedPropTypes } from '@dhis2/ui-constants'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useCallback, useRef, useState } from 'react'
-import { Menu } from './menu.js'
-import { SelectedValue } from './selected-value.js'
-import { optionsProp } from './shared-prop-types.js'
-import { useHandleKeyPress } from './use-handle-key-press.js'
+import { Menu } from './menu/index.js'
+import { SelectedValue } from './selected-value/index.js'
+import { optionProp } from './shared-prop-types.js'
+import { useHandleKeyPress } from './use-handle-key-press/index.js'
 
 export function SingleSelectA11y({
     options,
@@ -30,7 +30,7 @@ export function SingleSelectA11y({
     labelledBy = '',
     loading = false,
     menuLoadingText = '',
-    menuMaxHeight = '280px',
+    menuMaxHeight = '288px',
     noMatchText = '',
     placeholder = '',
     prefix = '',
@@ -68,6 +68,7 @@ export function SingleSelectA11y({
 
     // Using `useState` here so components get notified when the value changes (from null -> div)
     const comboBoxRef = useRef()
+    const listBoxRef = useRef()
     const [focussedOptionIndex, setFocussedOptionIndex] = useState(0)
     const [selectRef, setSelectRef] = useState()
     const [expanded, setExpanded] = useState(false)
@@ -105,6 +106,7 @@ export function SingleSelectA11y({
         options,
         openMenu,
         closeMenu,
+        listBoxRef,
         focussedOptionIndex,
         setFocussedOptionIndex,
         selectFocussedOption,
@@ -141,7 +143,6 @@ export function SingleSelectA11y({
                 disabled={disabled}
                 error={error}
                 expanded={expanded}
-                handleKeyPress={handleKeyPress}
                 hasSelection={!!value}
                 idPrefix={idPrefix}
                 labelledBy={labelledBy}
@@ -172,6 +173,7 @@ export function SingleSelectA11y({
                 hidden={!expanded}
                 idPrefix={idPrefix}
                 labelledBy={labelledBy}
+                listBoxRef={listBoxRef}
                 loading={loading}
                 loadingText={menuLoadingText}
                 maxHeight={menuMaxHeight}
@@ -196,7 +198,7 @@ SingleSelectA11y.propTypes = {
     idPrefix: PropTypes.string.isRequired,
 
     /** An array of options **/
-    options: optionsProp.isRequired,
+    options: PropTypes.arrayOf(optionProp).isRequired,
 
     /** As of now, this component does not support being uncontrolled */
     value: PropTypes.string.isRequired,
diff --git a/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js b/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js
index 9f87eaeb27..53fe672cdb 100644
--- a/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js
+++ b/components/select/src/single-select-a11y/single-select-a11y.prod.stories.js
@@ -427,20 +427,35 @@ export const WithOptionsAndLoadingText = () => {
 }
 
 export const WithManyOptions = () => {
-    const [value, setValue] = useState('art_entry_point:_no_pmtct')
+    // const [value, setValue] = useState('art_entry_point:_no_pmtct')
+    const [value, setValue] = useState('10')
+    const selectOptions = Array.apply(null, Array(100)).map((x, i) => i)
 
     return (
-        <SingleSelectA11y
-            idPrefix="a11y"
-            value={value}
-            valueLabel={
-                value
-                    ? options.find((option) => option.value === value).label
-                    : ''
-            }
-            onChange={(nextValue) => setValue(nextValue)}
-            options={options}
-        />
+        <>
+            <SingleSelectA11y
+                idPrefix="a11y"
+                value={value}
+                // valueLabel={
+                //     value
+                //         ? options.find((option) => option.value === value).label
+                //         : ''
+                // }
+                onChange={(nextValue) => setValue(nextValue)}
+                options={selectOptions.map((i) => ({
+                    value: i.toString(),
+                    label: `Select option ${i + 1}`,
+                }))}
+            />
+
+            <select onChange={(e) => console.log('> onChange', e)}>
+                {selectOptions.map((i) => (
+                    <option key={i} value={i}>
+                        Select option {i + 1}
+                    </option>
+                ))}
+            </select>
+        </>
     )
 }
 
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/index.js b/components/select/src/single-select-a11y/use-handle-key-press/index.js
new file mode 100644
index 0000000000..a6fb3becff
--- /dev/null
+++ b/components/select/src/single-select-a11y/use-handle-key-press/index.js
@@ -0,0 +1 @@
+export { useHandleKeyPress } from './use-handle-key-press.js'
diff --git a/components/select/src/single-select-a11y/use-handle-key-press.js b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press.js
similarity index 67%
rename from components/select/src/single-select-a11y/use-handle-key-press.js
rename to components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press.js
index 9de5fb8d4f..b69971c838 100644
--- a/components/select/src/single-select-a11y/use-handle-key-press.js
+++ b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-key-press.js
@@ -1,77 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-const TYPING_DEBOUNCE_TIME = 300 // ms
-
-function useHandleTyping({
-    expanded,
-    options,
-    setFocussedOptionIndex,
-    onChange,
-}) {
-    const timeoutRef = useRef()
-    const [value, setValue] = useState('')
-    const [typing, setTyping] = useState(false)
-
-    // This will reset the typed value after a given time
-    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,
-    ])
-
-    const prevValueRef = useRef()
-    useEffect(() => {
-        if (value && value !== prevValueRef.current) {
-            // We only want to do this when the value changed
-            prevValueRef.current = value
-
-            const optionIndex = options.findIndex((option) =>
-                option.label.toLowerCase().startsWith(value.toLowerCase())
-            )
-
-            if (optionIndex !== -1) {
-                if (expanded) {
-                    setFocussedOptionIndex(optionIndex)
-                } else {
-                    const nextSelectedOption = options[optionIndex]
-                    onChange(nextSelectedOption.value)
-                }
-            }
-        }
-    }, [value, options, setFocussedOptionIndex, expanded, onChange])
-
-    const onTyping = useCallback((e) => {
-        const { key } = e
-        setTyping(true)
-
-        if (key === 'Backspace') {
-            setValue((prevValue) => prevValue.slice(0, -1))
-            return
-        }
-
-        if (key === 'Clear') {
-            setValue('')
-            return
-        }
-
-        setValue((prevValue) => `${prevValue}${key}`)
-    }, [])
-
-    return { onTyping, typing }
-}
+import { useCallback } from 'react'
+import { useHandleTyping } from './use-handle-typing.js'
+import { usePageUpDown } from './use-page-up-down.js'
 
 export function useHandleKeyPress({
     value,
@@ -79,6 +8,7 @@ export function useHandleKeyPress({
     options,
     openMenu,
     closeMenu,
+    listBoxRef,
     focussedOptionIndex,
     setFocussedOptionIndex,
     selectFocussedOption,
@@ -91,6 +21,12 @@ export function useHandleKeyPress({
         onChange,
     })
 
+    const { pageDown, pageUp } = usePageUpDown(
+        listBoxRef,
+        focussedOptionIndex,
+        setFocussedOptionIndex
+    )
+
     const selectNextOption = useCallback(() => {
         const currentOptionIndex = options.findIndex(
             (option) => option.value === value
@@ -209,12 +145,12 @@ export function useHandleKeyPress({
             }
 
             if (expanded && key === 'PageUp') {
-                // @TODO: SelectActions.PageUp
+                pageUp()
                 return
             }
 
             if (expanded && key === 'PageDown') {
-                // @TODO: SelectActions.PageDown
+                pageDown()
                 return
             }
 
@@ -235,6 +171,8 @@ export function useHandleKeyPress({
             focusPrevOption,
             focusFirstOption,
             focusLastOption,
+            pageDown,
+            pageUp,
             onTyping,
         ]
     )
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js
new file mode 100644
index 0000000000..e75d8be9d0
--- /dev/null
+++ b/components/select/src/single-select-a11y/use-handle-key-press/use-handle-typing.js
@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const TYPING_DEBOUNCE_TIME = 300 // ms
+
+export function useHandleTyping({
+    expanded,
+    options,
+    setFocussedOptionIndex,
+    onChange,
+}) {
+    const timeoutRef = useRef()
+    const [value, setValue] = useState('')
+    const [typing, setTyping] = useState(false)
+
+    // This will reset the typed value after a given time
+    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,
+    ])
+
+    const prevValueRef = useRef()
+    useEffect(() => {
+        if (value && value !== prevValueRef.current) {
+            // We only want to do this when the value changed
+            prevValueRef.current = value
+
+            const optionIndex = options.findIndex((option) =>
+                option.label.toLowerCase().startsWith(value.toLowerCase())
+            )
+
+            if (optionIndex !== -1) {
+                if (expanded) {
+                    setFocussedOptionIndex(optionIndex)
+                } else {
+                    const nextSelectedOption = options[optionIndex]
+                    onChange(nextSelectedOption.value)
+                }
+            }
+        }
+    }, [value, options, setFocussedOptionIndex, expanded, onChange])
+
+    const onTyping = useCallback((e) => {
+        const { key } = e
+        setTyping(true)
+
+        if (key === 'Backspace') {
+            setValue((prevValue) => prevValue.slice(0, -1))
+            return
+        }
+
+        if (key === 'Clear') {
+            setValue('')
+            return
+        }
+
+        setValue((prevValue) => `${prevValue}${key}`)
+    }, [])
+
+    return { onTyping, typing }
+}
diff --git a/components/select/src/single-select-a11y/use-handle-key-press/use-page-up-down.js b/components/select/src/single-select-a11y/use-handle-key-press/use-page-up-down.js
new file mode 100644
index 0000000000..f667ea7033
--- /dev/null
+++ b/components/select/src/single-select-a11y/use-handle-key-press/use-page-up-down.js
@@ -0,0 +1,103 @@
+import { useCallback } from 'react'
+import { isOptionHidden } from '../is-option-hidden.js'
+
+export function usePageUpDown(
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+) {
+    const pageDown = useCallback(() => {
+        const listBoxParent = listBoxRef.current.parentNode
+        const options = Array.from(listBoxRef.current.childNodes)
+        const highestVisibleIndex = options.reduce(
+            (curIndex, option, index) => {
+                if (
+                    // When option is not visible
+                    isOptionHidden(option, listBoxParent) ||
+                    // When option is not the highest-index one so far
+                    index <= curIndex
+                ) {
+                    return curIndex
+                }
+
+                return index
+            },
+            -1
+        )
+
+        // No visible option (e.g. when menu is empty)
+        if (highestVisibleIndex === -1) {
+            return
+        }
+
+        // Highlight last visible option
+        if (highestVisibleIndex > focussedOptionIndex) {
+            setFocussedOptionIndex(highestVisibleIndex)
+            return
+        }
+
+        const visibleOptionsAmount = options.filter(
+            (option) => !isOptionHidden(option, listBoxParent)
+        ).length
+
+        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
+        }
+
+        const nextTopOptionIndex = Math.min(
+            options.length - 1,
+            focussedOptionIndex + 1
+        )
+
+        const nextTopOption = options[nextTopOptionIndex]
+        const scrollPosition = nextTopOption.offsetTop
+        listBoxParent.scrollTop = scrollPosition
+        setFocussedOptionIndex(nextHighlightedOptionIndex)
+    }, [focussedOptionIndex, setFocussedOptionIndex, listBoxRef])
+
+    const pageUp = useCallback(() => {
+        const listBoxParent = listBoxRef.current.parentNode
+        const options = Array.from(listBoxRef.current.childNodes)
+        const lowestVisibleIndex = options.findIndex(
+            (option) => !isOptionHidden(option, listBoxParent)
+        )
+
+        // No visible option (e.g. when menu is empty)
+        if (lowestVisibleIndex === -1) {
+            return
+        }
+
+        // Highlight last visible option
+        if (lowestVisibleIndex < focussedOptionIndex) {
+            setFocussedOptionIndex(lowestVisibleIndex)
+            return
+        }
+
+        const visibleOptionsAmount = options.filter(
+            (option) => !isOptionHidden(option, listBoxParent)
+        ).length
+
+        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
+        }
+
+        const nextTopOption = options[nextTopOptionIndex]
+        const scrollPosition = nextTopOption.offsetTop
+        listBoxParent.scrollTop = scrollPosition
+        setFocussedOptionIndex(nextTopOptionIndex)
+    }, [focussedOptionIndex, setFocussedOptionIndex, listBoxRef])
+
+    return { pageDown, pageUp }
+}