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

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

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

@@ -0,0 +1,50 @@
+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({
+    options,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    listBoxRef,
+}) {
+    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/src/simple-single-select/use-handle-key-press/use-page-up.js

@@ -0,0 +1,50 @@
+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({
+    options,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+}) {
+    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/src/simple-single-select/use-handle-key-press/utils.js

@@ -0,0 +1,23 @@
+export function isEnabled({ disabled }) {
+    return !disabled
+}
+
+export function findNextOptionIndex({ options, activeIndex }) {
+    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({ options, activeIndex }) {
+    return options.slice(0, activeIndex).findLastIndex(isEnabled)
+}
+
+export function findFirstOptionIndex({ options }) {
+    return options.findIndex(isEnabled)
+}
+
+export function findLastOptionIndex({ options }) {
+    return options.findLastIndex(isEnabled)
+}

package/src/simple-single-select-field/index.js

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

package/src/simple-single-select-field/simple-single-select-field.js

@@ -0,0 +1,198 @@
+import { requiredIf } from '@dhis2/prop-types'
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Field } from '@dhis2-ui/field'
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    SimpleSingleSelect,
+    optionProp,
+} from '../simple-single-select/index.js'
+
+export function SimpleSingleSelectField(props) {
+    const {
+        className,
+        dataTest,
+        disabled,
+        error,
+        helpText,
+        label,
+        name,
+        onChange,
+        options,
+        required,
+        valid,
+        validationText,
+        value,
+        valueLabel,
+        warning,
+    } = props
+    const labelId = `${name}-label`
+
+    const selectedOption = options.find((opt) => opt.value === value)
+    const selected =
+        value != null && value !== ''
+            ? {
+                  value,
+                  label: selectedOption?.label ?? valueLabel ?? '',
+              }
+            : undefined
+
+    const handleChange = (option) => {
+        onChange(option?.value ?? '')
+    }
+
+    const handleClear = () => {
+        onChange('')
+    }
+
+    return (
+        <Field
+            className={className}
+            dataTest={dataTest}
+            disabled={disabled}
+            required={required}
+            labelId={labelId}
+            label={label}
+            helpText={helpText}
+            validationText={validationText}
+            error={error}
+            warning={warning}
+            valid={valid}
+        >
+            <SimpleSingleSelect
+                {...props}
+                labelledBy={labelId}
+                selected={selected}
+                onChange={handleChange}
+                onClear={handleClear}
+            />
+        </Field>
+    )
+}
+
+SimpleSingleSelectField.propTypes = {
+    /** Label displayed above the input **/
+    label: PropTypes.string.isRequired,
+
+    /** necessary for IDs that are required for accessibility **/
+    name: PropTypes.string.isRequired,
+
+    /** An array of options **/
+    options: PropTypes.arrayOf(optionProp).isRequired,
+
+    /** A callback that will be called with the new value or an empty string **/
+    onChange: PropTypes.func.isRequired,
+
+    /** Will focus the select initially **/
+    autoFocus: PropTypes.bool,
+
+    /** Additional class names that will be applied to the root element **/
+    className: PropTypes.string,
+
+    /** This will allow us to put an aria-label on the clear button **/
+    clearText: requiredIf((props) => props.clearable, PropTypes.string),
+
+    /** Whether a clear button should be displayed or not **/
+    clearable: PropTypes.bool,
+
+    /** A value for a `data-test` attribute on the root element **/
+    dataTest: PropTypes.string,
+
+    /** Renders a select with lower height **/
+    dense: PropTypes.bool,
+
+    /** Disables all interactions with the select (except focussing) **/
+    disabled: PropTypes.bool,
+
+    /** Text or component to display when there are no options **/
+    empty: PropTypes.node,
+
+    /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+    error: sharedPropTypes.statusPropType,
+
+    /** Help text that will be displayed below the input **/
+    filterHelpText: PropTypes.string,
+
+    /** Value will be used as aria-label attribute on the filter input **/
+    filterLabel: PropTypes.string,
+
+    /** Placeholder for the filter input **/
+    filterPlaceholder: PropTypes.string,
+
+    /** Value of the filter input **/
+    filterValue: PropTypes.string,
+
+    /** Whether the select should display a filter input **/
+    filterable: PropTypes.bool,
+
+    /** Help text, displayed below the input **/
+    helpText: PropTypes.string,
+
+    /** Will show a loading indicator at the end of the options-list **/
+    loading: PropTypes.bool,
+
+    /** Text that will be displayed next to the loading indicator **/
+    menuLoadingText: PropTypes.string,
+
+    /** Allows to modify the max height of the menu **/
+    menuMaxHeight: PropTypes.string,
+
+    /** String that will be displayed when the select is being filtered but the options array is empty **/
+    noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
+
+    /** Allows to override what's rendered inside the `button[role="option"]`.
+     * Can be overriden on an individual option basis **/
+    optionComponent: PropTypes.elementType,
+
+    /** For a11y: How aggressively the user should be updated about changes in options **/
+    optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
+
+    /** String to show when there's no value and no valueLabel **/
+    placeholder: PropTypes.string,
+
+    /** String that will be displayed before the label of the selected option **/
+    prefix: PropTypes.string,
+
+    /** Whether a value is required or not **/
+    required: PropTypes.bool,
+
+    /** Standard HTML tab-index attribute that will be put on the combobox's root element **/
+    tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+    /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+    valid: sharedPropTypes.statusPropType,
+
+    /** Text shown below input when `props.error` is true **/
+    validationText: PropTypes.string,
+
+    /** As of now, this component does not support being uncontrolled **/
+    value: PropTypes.string,
+
+    /**
+     * When the option is not in the options list (e.g. not loaded or list is
+     * filtered), but a selected value needs to be displayed, then this prop can
+     * be used to supply the text to be shown.
+     **/
+    valueLabel: requiredIf((props) => {
+        if (props.options.find(({ value }) => props.value === value)) {
+            return false
+        }
+
+        return props.value
+    }, PropTypes.string),
+
+    /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+    warning: sharedPropTypes.statusPropType,
+
+    /** Will be called when the combobox is loses focus **/
+    onBlur: PropTypes.func,
+
+    /** Will be called when the last option is scrolled into the visible area **/
+    onEndReached: PropTypes.func,
+
+    /** Will be called when the filter value changes **/
+    onFilterChange: PropTypes.func,
+
+    /** Will be called when the combobox is being focused **/
+    onFocus: PropTypes.func,
+}

package/src/simple-single-select-field/simple-single-select-field.prod.stories.js

@@ -0,0 +1,188 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelectField } from './index.js'
+
+const description = `
+\`SimpleSingleSelectField\` is a wrapper around a \`SimpleSingleSelect\` component that adds a label, help text, validation text, and other features.
+
+See the SimpleSingleSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
+
+\`\`\`js
+import { SimpleSingleSelectField, SingleSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
+`
+
+const options = [
+    { value: '1', label: 'one' },
+    { value: '2', label: 'two' },
+    { value: '3', label: 'three' },
+    { value: '4', label: 'four' },
+    { value: '5', label: 'five' },
+    { value: '6', label: 'six' },
+    { value: '7', label: 'seven' },
+    { value: '8', label: 'eight' },
+    { value: '9', label: 'nine' },
+    { value: '10', label: 'ten' },
+]
+
+export default {
+    title: 'SimpleSingleSelectField',
+    component: SimpleSingleSelectField,
+    parameters: { docs: { description: { component: description } } },
+}
+
+export const Default = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <SimpleSingleSelectField
+            name="simple"
+            label="This is the label"
+            value={value}
+            valueLabel={valueLabel}
+            onChange={(nextValue) => setValue(nextValue)}
+            options={options}
+        />
+    )
+}
+
+export const WithHelpText = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <SimpleSingleSelectField
+            name="simple"
+            label="This is the label"
+            helpText="This is the help text"
+            value={value}
+            valueLabel={valueLabel}
+            onChange={(nextValue) => setValue(nextValue)}
+            options={options}
+        />
+    )
+}
+
+export const StatusValid = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <SimpleSingleSelectField
+            valid
+            name="simple"
+            label="This is the label"
+            value={value}
+            valueLabel={valueLabel}
+            validationText="Totally valid!"
+            onChange={(nextValue) => setValue(nextValue)}
+            options={options}
+        />
+    )
+}
+
+export const StatusWarning = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <SimpleSingleSelectField
+            warning
+            name="simple"
+            label="This is the label"
+            value={value}
+            valueLabel={valueLabel}
+            validationText="Hm, not quite, I warn thee!"
+            onChange={(nextValue) => setValue(nextValue)}
+            options={options}
+        />
+    )
+}
+
+export const StatusError = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <SimpleSingleSelectField
+            error
+            name="simple"
+            label="This is the label"
+            value={value}
+            valueLabel={valueLabel}
+            validationText="That value is wrong. Sorry!"
+            onChange={(nextValue) => setValue(nextValue)}
+            options={options}
+        />
+    )
+}
+
+export const StatusDisabled = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <SimpleSingleSelectField
+            disabled
+            name="simple"
+            label="This is the label"
+            value={value}
+            valueLabel={valueLabel}
+            onChange={(nextValue) => setValue(nextValue)}
+            options={options}
+        />
+    )
+}
+
+export const Required = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <SimpleSingleSelectField
+            required
+            name="simple"
+            label="This is the label"
+            value={value}
+            valueLabel={valueLabel}
+            onChange={(nextValue) => setValue(nextValue)}
+            options={options}
+        />
+    )
+}
+
+export const InputWidth = () => {
+    const [value, setValue] = useState('3')
+    const valueLabel = value
+        ? options.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <div style={{ width: 200 }}>
+            <SimpleSingleSelectField
+                name="simple"
+                label="A very long label indeed, well at least longer than the input field to show how it looks and works and stuff"
+                value={value}
+                valueLabel={valueLabel}
+                onChange={(nextValue) => setValue(nextValue)}
+                options={options}
+            />
+        </div>
+    )
+}