@dhis2-ui/select 10.9.2 → 10.10.0-alpha.2

package/build/es/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/build/es/simple-single-select/use-handle-key-press/use-focus-option.js

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

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

@@ -0,0 +1,177 @@
+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 useSelectOption(findIndexCallback, _ref) {
+  let {
+    options,
+    onChange,
+    value
+  } = _ref;
+  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(_ref2) {
+  let {
+    value,
+    disabled,
+    expanded,
+    loading,
+    options,
+    openMenu,
+    closeMenu,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption,
+    onChange
+  } = _ref2;
+  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,
+      ctrlKey,
+      metaKey
+    } = 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 && (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/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js

@@ -0,0 +1,100 @@
+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(_ref) {
+  let {
+    value,
+    options,
+    loading,
+    closeMenu,
+    listBoxRef,
+    focusComboBox,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption
+  } = _ref;
+  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;
+    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/es/simple-single-select/use-handle-key-press/use-handle-typing.js

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+const TYPING_DEBOUNCE_TIME = 300; // ms
+
+export function useHandleTyping(_ref) {
+  let {
+    expanded,
+    options,
+    setFocussedOptionIndex,
+    onChange
+  } = _ref;
+  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(_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 = 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/es/simple-single-select/use-handle-key-press/use-highlight-first-option-on-previous-page.js

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

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

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

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

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+export function useHighlightLastVisibleOption(_ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  } = _ref;
+  return 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/es/simple-single-select/use-handle-key-press/use-page-down.js

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+import { isOptionHidden } from '../is-option-hidden.js';
+import { useHighlightLastOptionOnNextPage } from './use-highlight-last-option-on-next-page.js';
+import { useHighlightLastVisibleOption } from './use-highlight-last-visible-option.js';
+export function usePageDown(_ref) {
+  let {
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  } = _ref;
+  const highlightLastVisibleOption = useHighlightLastVisibleOption({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const highlightLastOptionOnNextPage = useHighlightLastOptionOnNextPage({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  });
+  return useCallback(() => {
+    const listBoxParent = listBoxRef.current.parentNode;
+    const options = Array.from(listBoxRef.current.childNodes);
+    const highestVisibleIndex = options.findLastIndex(option => !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/es/simple-single-select/use-handle-key-press/use-page-up.js

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import { isOptionHidden } from '../is-option-hidden.js';
+import { useHighlightFirstOptionOnPreviousPage } from './use-highlight-first-option-on-previous-page.js';
+import { useHighlightFirstVisibleOption } from './use-highlight-first-visible-option.js';
+export function usePageUp(_ref) {
+  let {
+    options,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  } = _ref;
+  const highlightFirstVisibleOption = useHighlightFirstVisibleOption({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex
+  });
+  const highlightFirstOptionOnPreviousPage = useHighlightFirstOptionOnPreviousPage({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef
+  });
+  return useCallback(() => {
+    const listBoxParent = listBoxRef.current.parentNode;
+    const optionElements = Array.from(listBoxRef.current.childNodes);
+    const lowestVisibleIndex = optionElements.findIndex(optionElement => !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]);
+}

package/build/es/simple-single-select/use-handle-key-press/utils.js

@@ -0,0 +1,36 @@
+export function isEnabled(_ref) {
+  let {
+    disabled
+  } = _ref;
+  return !disabled;
+}
+export function findNextOptionIndex(_ref2) {
+  let {
+    options,
+    activeIndex
+  } = _ref2;
+  const startIndex = activeIndex + 1;
+  const optionsToSearch = options.slice(startIndex);
+
+  // Need to add back the count we removed by slicing the options array
+  return startIndex + optionsToSearch.findIndex(isEnabled);
+}
+export function findPrevOptionIndex(_ref3) {
+  let {
+    options,
+    activeIndex
+  } = _ref3;
+  return options.slice(0, activeIndex).findLastIndex(isEnabled);
+}
+export function findFirstOptionIndex(_ref4) {
+  let {
+    options
+  } = _ref4;
+  return options.findIndex(isEnabled);
+}
+export function findLastOptionIndex(_ref5) {
+  let {
+    options
+  } = _ref5;
+  return options.findLastIndex(isEnabled);
+}

package/build/es/simple-single-select-field/index.js

@@ -0,0 +1 @@
+export { SimpleSingleSelectField } from './simple-single-select-field.js';