@dhis2-ui/select 10.16.2 → 10.16.3-alpha.1

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

@@ -0,0 +1,2 @@
+export { useHandleKeyPressOnCombobox } from './use-handle-key-press-on-combobox.js'
+export { useHandleKeyPressOnFilterInput } from './use-handle-key-press-on-filter-input.js'

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

@@ -0,0 +1,24 @@
+import { useCallback } from 'react'
+
+export function useFocusOption(
+    findIndexCallback,
+    { options, focussedOptionIndex, setFocussedOptionIndex }
+) {
+    return useCallback(() => {
+        const nextFocussedIndex = findIndexCallback({
+            options,
+            activeIndex: focussedOptionIndex,
+        })
+
+        if (nextFocussedIndex === -1) {
+            return
+        }
+
+        setFocussedOptionIndex(nextFocussedIndex)
+    }, [
+        findIndexCallback,
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    ])
+}

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

@@ -0,0 +1,259 @@
+import { useCallback } from 'react'
+import { useFocusOption } from './use-focus-option.js'
+import { useHandleTyping } from './use-handle-typing.js'
+import { usePageDown } from './use-page-down.js'
+import { usePageUp } from './use-page-up.js'
+import {
+    findNextOptionIndex,
+    findPrevOptionIndex,
+    findFirstOptionIndex,
+    findLastOptionIndex,
+} from './utils.js'
+
+function isUnmodifiedCharacterKey({ key, altKey, ctrlKey, metaKey }) {
+    return key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey
+}
+
+function useSelectOption(findIndexCallback, { options, onChange, value }) {
+    return 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])
+}
+
+export function useHandleKeyPressOnCombobox({
+    value,
+    disabled,
+    expanded,
+    loading,
+    options,
+    openMenu,
+    closeMenu,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption,
+    onChange,
+    clearable,
+    onClear,
+    filterable,
+    onFilterChange,
+}) {
+    const { onTyping, typing } = useHandleTyping({
+        expanded,
+        options,
+        setFocussedOptionIndex,
+        onChange,
+    })
+
+    const pageDown = usePageDown({
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+        listBoxRef,
+    })
+
+    const pageUp = usePageUp({
+        options,
+        listBoxRef,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const selectNextOption = useSelectOption(findNextOptionIndex, {
+        options,
+        onChange,
+        value,
+    })
+
+    const selectPrevOption = useSelectOption(findPrevOptionIndex, {
+        options,
+        onChange,
+        value,
+    })
+
+    const focusNextOption = useFocusOption(findNextOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const focusPrevOption = useFocusOption(findPrevOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const focusFirstOption = useFocusOption(findFirstOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const focusLastOption = useFocusOption(findLastOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const handleKeyPress = useCallback(
+        (event) => {
+            const { key, altKey } = event
+            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
+            }
+
+            // ! This is necessary for cases where the parent window is scrollable
+            // ! otherwise the ArrowDown/Up would change the combo but also scroll the window
+            if (key === 'ArrowDown' || key === 'ArrowUp' || key === ' ') {
+                event.preventDefault()
+            }
+
+            if (
+                expanded &&
+                (key === 'Escape' ||
+                    key === 'Enter' ||
+                    (key === ' ' && !typing) ||
+                    (key === 'ArrowUp' && altKey) ||
+                    (key === 'ArrowDown' && altKey))
+            ) {
+                if (value !== options[focussedOptionIndex].value) {
+                    selectFocussedOption()
+                }
+
+                closeMenu()
+                return
+            }
+
+            if (!expanded && clearable && key === 'Escape') {
+                onClear?.()
+                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 (filterable && !expanded && isUnmodifiedCharacterKey(event)) {
+                openMenu()
+                onFilterChange?.(key)
+                return
+            }
+
+            if (
+                key === 'Backspace' ||
+                key === 'Clear' ||
+                isUnmodifiedCharacterKey(event) ||
+                (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,
+            filterable,
+            onFilterChange,
+        ]
+    )
+
+    return handleKeyPress
+}

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

@@ -0,0 +1,147 @@
+import { useCallback } from 'react'
+import { useFocusOption } from './use-focus-option.js'
+import { usePageDown } from './use-page-down.js'
+import { usePageUp } from './use-page-up.js'
+import {
+    findNextOptionIndex,
+    findPrevOptionIndex,
+    findFirstOptionIndex,
+    findLastOptionIndex,
+} from './utils.js'
+
+export function useHandleKeyPressOnFilterInput({
+    value,
+    options,
+    loading,
+    closeMenu,
+    listBoxRef,
+    focusComboBox,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption,
+}) {
+    const pageDown = usePageDown({
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+        listBoxRef,
+    })
+
+    const pageUp = usePageUp({
+        options,
+        listBoxRef,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const focusNextOption = useFocusOption(findNextOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const focusPrevOption = useFocusOption(findPrevOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const focusFirstOption = useFocusOption(findFirstOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const focusLastOption = useFocusOption(findLastOptionIndex, {
+        options,
+        focussedOptionIndex,
+        setFocussedOptionIndex,
+    })
+
+    const handleKeyPress = useCallback(
+        (e) => {
+            if (loading) {
+                return
+            }
+
+            const { key, altKey } = e
+
+            // Defer so Tab advances focus before the filter unmounts.
+            if (key === 'Tab') {
+                requestAnimationFrame(closeMenu)
+                return
+            }
+
+            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/src/simple-single-select/use-handle-key-press/use-handle-typing.js

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+const TYPING_DEBOUNCE_TIME = 300 // ms
+
+export function useHandleTyping({
+    expanded,
+    options,
+    setFocussedOptionIndex,
+    onChange,
+}) {
+    const [value, setValue] = useState('')
+    const [typing, setTyping] = useState(false)
+
+    // This will reset the typed value after a given time
+    const timeoutRef = useRef()
+    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 = useRef()
+    useEffect(() => {
+        if (value && value !== prevValueRef.current) {
+            // We only want to do this when the value changed
+            prevValueRef.current = value
+
+            const optionIndex = options.findIndex(
+                ({ disabled, label }) =>
+                    !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 = 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/src/simple-single-select/use-handle-key-press/use-highlight-first-option-on-previous-page.js

@@ -0,0 +1,62 @@
+import { useCallback } from 'react'
+
+export function useHighlightFirstOptionOnPreviousPage({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef,
+}) {
+    return 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/src/simple-single-select/use-handle-key-press/use-highlight-first-visible-option.js

@@ -0,0 +1,38 @@
+import { useCallback } from 'react'
+
+export function useHighlightFirstVisibleOption({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+}) {
+    return 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/src/simple-single-select/use-handle-key-press/use-highlight-last-option-on-next-page.js

@@ -0,0 +1,60 @@
+import { useCallback } from 'react'
+
+export function useHighlightLastOptionOnNextPage({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef,
+}) {
+    return 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])
+}