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

package/src/simple-single-select/menu/option.js

@@ -0,0 +1,161 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useEffect, useRef } from 'react'
+
+const VISIBILE_INTERSECTION_RATIO = 0.99
+
+function DefaultStyle({ label, disabled, highlighted }) {
+    return (
+        <span
+            className={cx('option', {
+                disabled,
+                active: highlighted,
+            })}
+        >
+            {label}
+
+            <style jsx>{`
+                span {
+                    display: block;
+                    cursor: pointer;
+                    font-size: 14px;
+                    text-decoration: none;
+                    color: ${colors.grey900};
+                    padding-block: ${spacers.dp8};
+                    padding-inline: ${spacers.dp12};
+                    line-height: ${spacers.dp16};
+                }
+
+                span:hover {
+                    background-color: ${colors.grey200};
+                }
+
+                span:active,
+                span.active {
+                    background-color: ${colors.teal700};
+                    color: ${colors.white};
+                    cursor: auto;
+                }
+
+                span.disabled {
+                    color: ${colors.grey500};
+                    cursor: not-allowed;
+                    user-select: none;
+                }
+
+                span.disabled:hover {
+                    background-color: initial;
+                }
+            `}</style>
+        </span>
+    )
+}
+
+DefaultStyle.propTypes = {
+    label: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    highlighted: PropTypes.bool,
+}
+
+export function Option({
+    comboBoxId,
+    index,
+    label,
+    value,
+    onClick,
+    component: StyleComponent = DefaultStyle,
+    dataTest,
+    disabled,
+    highlighted,
+    listBoxRef,
+    onBecameVisible,
+    ...rest
+}) {
+    const buttonRef = useRef()
+
+    useEffect(() => {
+        if (onBecameVisible) {
+            const scrollableContainer = listBoxRef.current.parentNode
+
+            const intersectionOptions = {
+                root: scrollableContainer,
+                threshold: VISIBILE_INTERSECTION_RATIO,
+            }
+
+            const intersectionHandler = (entries) => {
+                entries.forEach((result) => {
+                    const { intersectionRatio } = result
+                    if (intersectionRatio >= VISIBILE_INTERSECTION_RATIO) {
+                        onBecameVisible()
+                    }
+                })
+            }
+
+            const observer = new IntersectionObserver(
+                intersectionHandler,
+                intersectionOptions
+            )
+
+            observer.observe(buttonRef.current)
+            return () => observer.disconnect()
+        }
+    }, [onBecameVisible, listBoxRef])
+
+    return (
+        <button
+            ref={buttonRef}
+            id={`${comboBoxId}-${index}`}
+            data-test={dataTest}
+            disabled={disabled}
+            role="option"
+            aria-selected={highlighted || 'false'}
+            aria-disabled={disabled}
+            aria-label={label}
+            onClick={() => {
+                if (!disabled) {
+                    onClick({ value, label })
+                }
+            }}
+        >
+            <StyleComponent
+                value={value}
+                label={label}
+                index={index}
+                disabled={disabled}
+                highlighted={highlighted}
+                {...rest}
+            >
+                {label}
+            </StyleComponent>
+
+            <style jsx>{`
+                button {
+                    display: block;
+                    width: 100%;
+                    padding: 0;
+                    border: 0;
+                    background: 0;
+                    outline: 0;
+                    text-align: start;
+                }
+            `}</style>
+        </button>
+    )
+}
+
+Option.propTypes = {
+    comboBoxId: PropTypes.string.isRequired,
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    component: PropTypes.elementType,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    highlighted: PropTypes.bool,
+    listBoxRef: PropTypes.shape({
+        current: PropTypes.instanceOf(HTMLElement),
+    }),
+    onBecameVisible: PropTypes.func,
+}

package/src/simple-single-select/menu/options-list.js

@@ -0,0 +1,107 @@
+import PropTypes from 'prop-types'
+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'
+
+export const OptionsList = forwardRef(function OptionsList(
+    {
+        comboBoxId,
+        optionComponent,
+        focussedOptionIndex,
+        id,
+        labelledBy,
+        optionUpdateStrategy,
+        options,
+        selectedValue,
+        dataTest,
+        disabled,
+        loading,
+        onChange,
+        onBlur,
+        onEndReached,
+    },
+    ref
+) {
+    // scrolls the highlighted option into view when:
+    // * the highlighted option changes
+    // * the menu opens
+    useEffect(() => {
+        const { current: listBox } = ref
+        const highlightedOption = listBox.childNodes[focussedOptionIndex]
+
+        if (highlightedOption) {
+            const listBoxParent = listBox.parentNode
+            const optionHidden = isOptionHidden(
+                highlightedOption,
+                listBoxParent
+            )
+
+            if (optionHidden) {
+                highlightedOption.scrollIntoView()
+            }
+        }
+    }, [focussedOptionIndex, ref])
+
+    return (
+        <div
+            ref={ref}
+            role="listbox"
+            id={id}
+            aria-labelledby={labelledBy}
+            aria-live={optionUpdateStrategy}
+            aria-busy={loading.toString()}
+            data-test={dataTest}
+            onBlur={onBlur}
+        >
+            {options.map(
+                (
+                    {
+                        value,
+                        label,
+                        component,
+                        disabled: optionDisabled = false,
+                    },
+                    index
+                ) => {
+                    const isSelected = value === selectedValue
+                    const isLast = index === options.length - 1
+
+                    return (
+                        <Option
+                            listBoxRef={ref}
+                            dataTest={`${dataTest}-option`}
+                            highlighted={focussedOptionIndex === index}
+                            key={value}
+                            value={value}
+                            label={label}
+                            index={index}
+                            comboBoxId={comboBoxId}
+                            disabled={disabled || optionDisabled}
+                            onClick={isSelected ? () => null : onChange}
+                            component={component || optionComponent}
+                            onBecameVisible={isLast ? onEndReached : undefined}
+                        />
+                    )
+                }
+            )}
+        </div>
+    )
+})
+
+OptionsList.propTypes = {
+    comboBoxId: PropTypes.string.isRequired,
+    focussedOptionIndex: PropTypes.number.isRequired,
+    id: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(optionProp).isRequired,
+    onChange: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    labelledBy: PropTypes.string,
+    loading: PropTypes.bool,
+    optionComponent: PropTypes.elementType,
+    optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
+    selectedValue: PropTypes.string,
+    onBlur: PropTypes.func,
+    onEndReached: PropTypes.func,
+}

package/src/simple-single-select/selected-value/clear-button.js

@@ -0,0 +1,71 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../../locales/index.js'
+
+function ClearButton({ onClear, clearText, dataTest }) {
+    return (
+        <button
+            aria-label={i18n.t('{{clearText}}', { clearText })}
+            title={i18n.t('{{clearText}}', { clearText })}
+            data-test={dataTest}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === 'space') {
+                    // otherwise, Enter propagates to parent menu and opens the combo
+                    e.stopPropagation()
+                }
+            }}
+            onClick={(e) => {
+                e.stopPropagation()
+                onClear()
+            }}
+            tabIndex="-1"
+        >
+            <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z"
+                    fill="none"
+                />
+            </svg>
+            <style jsx>{`
+                button {
+                    background: none;
+                    border: none;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    height: 24px;
+                    width: 24px;
+                    border-radius: 3px;
+                }
+                button svg path {
+                    fill: ${colors.grey500};
+                }
+                button:hover svg path {
+                    fill: ${colors.grey800};
+                }
+                button:hover {
+                    background: ${colors.grey200};
+                }
+                button:focus {
+                    outline: 2px solid ${theme.focus};
+                }
+            `}</style>
+        </button>
+    )
+}
+
+ClearButton.propTypes = {
+    clearText: PropTypes.string.isRequired,
+    onClear: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+}
+
+export { ClearButton }

package/src/simple-single-select/selected-value/container.js

@@ -0,0 +1,146 @@
+import { colors, theme } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef, useCallback, useEffect } from 'react'
+
+export const Container = forwardRef(function Container(
+    {
+        children,
+        comboBoxId,
+        autoFocus,
+        dataTest,
+        dense,
+        disabled,
+        error,
+        expanded,
+        labelledBy,
+        name,
+        placeholder,
+        tabIndex,
+        valid,
+        warning,
+        onBlur,
+        onClick: _onClick,
+        onFocus,
+        onKeyDown,
+    },
+    ref
+) {
+    // Using useEffect so we have access to the ref, which will be set before
+    // the first call to the useEffect's callback
+    useEffect(
+        () => {
+            if (autoFocus) {
+                ref.current.focus()
+            }
+        },
+        // We want to run this only once:
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    )
+
+    const onClick = useCallback(
+        (...args) => {
+            if (!disabled) {
+                _onClick(...args)
+            }
+        },
+        [disabled, _onClick]
+    )
+
+    return (
+        <div
+            className={cx({ error, warning, valid, disabled, dense })}
+            data-test={dataTest}
+            ref={ref}
+            aria-controls={`${name}-listbox`}
+            aria-expanded={expanded.toString()}
+            aria-haspopup="listbox"
+            aria-labelledby={labelledBy}
+            aria-placeholder={placeholder}
+            id={comboBoxId}
+            role="combobox"
+            tabIndex={tabIndex}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onClick={onClick}
+            onKeyDown={(e) => {
+                e.stopPropagation()
+                onKeyDown(e)
+            }}
+        >
+            {children}
+
+            <style jsx>{`
+                div {
+                    background-color: white;
+                    border-radius: 3px;
+                    border: 1px solid ${colors.grey500};
+                    box-sizing: border-box;
+                    min-height: 40px;
+                    padding-block: 6px;
+                    padding-inline: 12px;
+                    box-shadow: inset 0 0 1px 0 rgba(48, 54, 60, 0.1);
+                    display: flex;
+                    align-items: center;
+                    color: ${colors.grey900};
+                    font-size: 14px;
+                    line-height: 16px;
+                }
+
+                div:not(.disabled):focus,
+                div:not(.disabled):active {
+                    outline: none;
+                    box-shadow: inset 0 0 0 2px ${theme.focus};
+                    border-color: ${theme.focus};
+                }
+
+                div.valid {
+                    border-color: ${theme.valid};
+                }
+
+                div.warning {
+                    border-color: ${theme.warning};
+                }
+
+                div.error {
+                    border-color: ${theme.error};
+                }
+
+                div.disabled {
+                    background-color: ${colors.grey100};
+                    border-color: ${colors.grey500};
+                    color: ${theme.disabled};
+                    cursor: not-allowed;
+                }
+
+                div.dense {
+                    padding-block: 2px;
+                    padding-inline: 8px;
+                    min-height: 32px;
+                }
+            `}</style>
+        </div>
+    )
+})
+
+Container.propTypes = {
+    children: PropTypes.any.isRequired,
+    comboBoxId: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    onKeyDown: PropTypes.func.isRequired,
+    autoFocus: PropTypes.bool,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    disabled: PropTypes.bool,
+    error: PropTypes.bool,
+    expanded: PropTypes.bool,
+    labelledBy: PropTypes.string,
+    placeholder: PropTypes.string,
+    tabIndex: PropTypes.string,
+    valid: PropTypes.bool,
+    warning: PropTypes.bool,
+    onBlur: PropTypes.func,
+    onClick: PropTypes.func,
+    onFocus: PropTypes.func,
+}

package/src/simple-single-select/selected-value/index.js

@@ -0,0 +1 @@
+export { SelectedValue } from './selected-value.js'

package/src/simple-single-select/selected-value/placeholder.js

@@ -0,0 +1,24 @@
+import { colors } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export function Placeholder({ placeholder, className, dataTest }) {
+    return (
+        <div className={className} data-test={dataTest}>
+            {placeholder}
+
+            <style jsx>{`
+                div {
+                    color: ${colors.grey600};
+                    user-select: none;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Placeholder.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+}

package/src/simple-single-select/selected-value/prefix.js

@@ -0,0 +1,26 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export function Prefix({ prefix, className, dataTest }) {
+    return (
+        <div className={className} data-test={dataTest}>
+            {prefix}
+
+            <style jsx>{`
+                div {
+                    color: ${colors.grey600};
+                    padding-inline-end: ${spacers.dp12};
+                    font-size: 14px;
+                    user-select: none;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Prefix.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    prefix: PropTypes.string,
+}