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

package/src/multi-select-field/features/has_default_filter_placeholder/index.js

@@ -0,0 +1,15 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a filterable MultiSelectField is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With filterable')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+Then('the filter placeholder exists', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-multiselect-filterinput"] [placeholder="Type to filter options"]'
+    ).should('exist')
+})

package/src/multi-select-field/features/has_default_filter_placeholder.feature

@@ -0,0 +1,6 @@
+Feature: Filter placeholder for the MultiSelectField
+
+    Scenario: Rendering a filterable MultiSelectField
+        Given a filterable MultiSelectField is rendered
+        When the Select is opened
+        Then the filter placeholder exists

package/src/multi-select-field/features/has_default_loading_text/index.js

@@ -0,0 +1,13 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a loading MultiSelectField is rendered', () => {
+    cy.visitStory('MultiSelectField', 'With loading')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+Then('the loading text is visible', () => {
+    cy.contains('Loading options').should('be.visible')
+})

package/src/multi-select-field/features/has_default_loading_text.feature

@@ -0,0 +1,6 @@
+Feature: Filter placeholder for the MultiSelectField
+
+    Scenario: Rendering a filterable MultiSelectField
+        Given a loading MultiSelectField is rendered
+        When the Select is opened
+        Then the loading text is visible

package/src/multi-select-field/index.js

@@ -0,0 +1 @@
+export { MultiSelectField } from './multi-select-field.js'

package/src/multi-select-field/multi-select-field.e2e.stories.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { MultiSelectOption } from '../index.js'
+import { MultiSelectField } from './index.js'
+
+export default { title: 'MultiSelectField' }
+export const WithLabel = () => (
+    <MultiSelectField label="The label">
+        <MultiSelectOption value="1" label="one" />
+        <MultiSelectOption value="2" label="two" />
+        <MultiSelectOption value="3" label="three" />
+    </MultiSelectField>
+)
+export const WithHelpText = () => (
+    <MultiSelectField helpText="The help text">
+        <MultiSelectOption value="1" label="one" />
+        <MultiSelectOption value="2" label="two" />
+        <MultiSelectOption value="3" label="three" />
+    </MultiSelectField>
+)
+export const WithValidationText = () => (
+    <MultiSelectField validationText="The validation text">
+        <MultiSelectOption value="1" label="one" />
+        <MultiSelectOption value="2" label="two" />
+        <MultiSelectOption value="3" label="three" />
+    </MultiSelectField>
+)
+export const WithLabelAndRequiredStatus = () => (
+    <MultiSelectField label="The label" required>
+        <MultiSelectOption value="1" label="one" />
+        <MultiSelectOption value="2" label="two" />
+        <MultiSelectOption value="3" label="three" />
+    </MultiSelectField>
+)
+export const WithClearableAndSelectedOption = () => (
+    <MultiSelectField selected={['1']} clearable>
+        <MultiSelectOption key="1" value="1" label="One" />
+    </MultiSelectField>
+)
+export const WithFilterable = () => (
+    <MultiSelectField filterable>
+        <MultiSelectOption key="1" value="1" label="One" />
+    </MultiSelectField>
+)
+export const WithLoading = () => <MultiSelectField loading />
+export const WithoutOptions = () => <MultiSelectField />

package/src/multi-select-field/multi-select-field.js

@@ -0,0 +1,178 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import { Box } from '@dhis2-ui/box'
+import { Field } from '@dhis2-ui/field'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+import { MultiSelect } from '../multi-select/index.js'
+
+// TODO: translate
+const translate = (prop, interpolationObject) => {
+    if (typeof prop === 'function') {
+        return prop(interpolationObject)
+    }
+
+    return prop
+}
+
+class MultiSelectField extends React.Component {
+    static defaultProps = {
+        selected: [],
+        dataTest: 'dhis2-uiwidgets-multiselectfield',
+
+        clearText: () => i18n.t('Clear'),
+        empty: () => i18n.t('No data found'),
+        filterPlaceholder: () => i18n.t('Type to filter options'),
+        loadingText: () => i18n.t('Loading options'),
+        noMatchText: () => i18n.t('No options found'),
+    }
+
+    render() {
+        const {
+            className,
+            onChange,
+            onFocus,
+            onKeyDown,
+            onBlur,
+            required,
+            label,
+            valid,
+            error,
+            disabled,
+            warning,
+            loading,
+            selected = MultiSelectField.defaultProps.selected,
+            tabIndex,
+            helpText,
+            validationText,
+            maxHeight,
+            inputMaxHeight,
+            inputWidth,
+            children,
+            clearable,
+            clearText = MultiSelectField.defaultProps.clearText,
+            filterable,
+            filterPlaceholder = MultiSelectField.defaultProps.filterPlaceholder,
+            placeholder,
+            prefix,
+            empty = MultiSelectField.defaultProps.empty,
+            loadingText = MultiSelectField.defaultProps.loadingText,
+            noMatchText = MultiSelectField.defaultProps.noMatchText,
+            initialFocus,
+            dense,
+            dataTest = MultiSelectField.defaultProps.dataTest,
+        } = this.props
+
+        return (
+            <Field
+                className={className}
+                dataTest={dataTest}
+                disabled={disabled}
+                required={required}
+                label={label}
+                helpText={helpText}
+                validationText={validationText}
+                error={error}
+                warning={warning}
+                valid={valid}
+            >
+                <Box width={inputWidth} minWidth="100px">
+                    <MultiSelect
+                        selected={selected}
+                        tabIndex={tabIndex}
+                        maxHeight={maxHeight}
+                        inputMaxHeight={inputMaxHeight}
+                        onChange={onChange}
+                        onFocus={onFocus}
+                        onKeyDown={onKeyDown}
+                        onBlur={onBlur}
+                        loading={loading}
+                        error={error}
+                        warning={warning}
+                        valid={valid}
+                        disabled={disabled}
+                        clearable={clearable}
+                        clearText={translate(clearText)}
+                        filterable={filterable}
+                        filterPlaceholder={translate(filterPlaceholder)}
+                        placeholder={placeholder}
+                        prefix={prefix}
+                        empty={translate(empty)}
+                        loadingText={translate(loadingText)}
+                        noMatchText={translate(noMatchText)}
+                        initialFocus={initialFocus}
+                        dense={dense}
+                    >
+                        {children}
+                    </MultiSelect>
+                </Box>
+            </Field>
+        )
+    }
+}
+
+MultiSelectField.propTypes = {
+    /** Should be `MultiSelectOption` components */
+    children: PropTypes.node,
+    className: PropTypes.string,
+    /** Label for the button that clears selections */
+    clearText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Adds a button to the MultiSelect that clears selections when pressed */
+    clearable: PropTypes.bool,
+    dataTest: PropTypes.string,
+    /** Makes the MultiSelect smaller */
+    dense: PropTypes.bool,
+    /** Disables the MultiSelect */
+    disabled: PropTypes.bool,
+    /** Text to display when there are no options */
+    empty: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /** Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props */
+    error: sharedPropTypes.statusPropType,
+    /** Placeholder text to show in the filter field when it is empty */
+    filterPlaceholder: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    /** Adds a field to filter options */
+    filterable: PropTypes.bool,
+    /** Useful guiding text to display below the MultiSelect */
+    helpText: PropTypes.string,
+    /** Grabs initial focus on the page */
+    initialFocus: PropTypes.bool,
+    /** Constrains the height of the input */
+    inputMaxHeight: PropTypes.string,
+    /** Sets the width of the input. Can be any valid CSS measurement */
+    inputWidth: PropTypes.string,
+    /** Text for the label above the MultiSelect */
+    label: PropTypes.string,
+    /** Applies a loading appearance to the dropdown options */
+    loading: PropTypes.bool,
+    /** Text to display when `loading` is true */
+    loadingText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Constrains height of the MultiSelect */
+    maxHeight: PropTypes.string,
+    /** Text to display when there are no filter results */
+    noMatchText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    /** Placeholder text when the MultiSelect is empty */
+    placeholder: PropTypes.string,
+    /** Leading text to prefix selections */
+    prefix: PropTypes.string,
+    /** Indicates that a selection is required */
+    required: PropTypes.bool,
+    /** Selected items in the MultiSelect (each string should refer to the item's `value` attribute) */
+    selected: PropTypes.arrayOf(PropTypes.string),
+    tabIndex: PropTypes.string,
+    /** Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props */
+    valid: sharedPropTypes.statusPropType,
+    /** Text to provide form validation feedback. Receives styles according to validation status */
+    validationText: PropTypes.string,
+    /** Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props */
+    warning: sharedPropTypes.statusPropType,
+    /** Called with signature `({ selected: [String] }, event)` */
+    onBlur: PropTypes.func,
+    /** Called with signature `({ selected: [String] }, event)` */
+    onChange: PropTypes.func,
+    /** Called with signature `({ selected: [String] }, event)` */
+    onFocus: PropTypes.func,
+    /** Called with signature `({ selected: [String] }, event)` */
+    onKeyDown: PropTypes.func,
+}
+
+export { MultiSelectField }

package/src/multi-select-field/multi-select-field.prod.stories.js

@@ -0,0 +1,137 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import React from 'react'
+import { MultiSelectOption } from '../index.js'
+import { MultiSelectField } from './index.js'
+
+const description = `
+\`MultiSelectField\` is a wrapper around a \`MultiSelect\` component that adds a label, help text, validation text, and other features.
+
+See the MultiSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).
+
+\`\`\`js
+import { MultiSelectField, MultiSelectOption } 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 onChange = (selected) =>
+    alert(`Selected changed to: ${JSON.stringify(selected, null, 2)}`)
+
+const options = [
+    <MultiSelectOption key="1" value="1" label="one" />,
+    <MultiSelectOption key="2" value="2" label="two" />,
+    <MultiSelectOption key="3" value="3" label="three" />,
+    <MultiSelectOption key="4" value="4" label="four" />,
+    <MultiSelectOption key="5" value="5" label="five" />,
+    <MultiSelectOption key="6" value="6" label="six" />,
+    <MultiSelectOption key="7" value="7" label="seven" />,
+    <MultiSelectOption key="8" value="8" label="eight" />,
+    <MultiSelectOption key="9" value="9" label="nine" />,
+    <MultiSelectOption key="10" value="10" label="ten" />,
+]
+
+export default {
+    title: 'Multi Select Field',
+    component: MultiSelectField,
+    subcomponents: { MultiSelectOption },
+    parameters: { docs: { description: { component: description } } },
+    // default args for stories
+    args: {
+        // Fix default prop issues - causes 'i18n is not defined' error
+        dataTest: 'dhis2-uiwidgets-multiselectfield',
+        clearText: 'Clear',
+        empty: 'No data found',
+        filterPlaceholder: 'Type to filter options',
+        loadingText: 'Loading options',
+        noMatchText: 'No options found',
+
+        label: 'Default label',
+        selected: ['1'],
+        children: options,
+        onChange: onChange,
+    },
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+    },
+}
+
+const Template = (args) => <MultiSelectField {...args} />
+
+export const Default = Template.bind({})
+
+export const WithHelpText = Template.bind({})
+WithHelpText.args = { helpText: 'Helpful text.' }
+WithHelpText.parameters = {
+    docs: {
+        description: {
+            story: `_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._`,
+        },
+    },
+}
+
+export const StatusValid = Template.bind({})
+StatusValid.args = {
+    valid: true,
+    validationText: 'Totally valid!',
+    ...WithHelpText.args,
+}
+StatusValid.storyName = 'Status: Valid'
+
+export const StatusWarning = Template.bind({})
+StatusWarning.args = {
+    warning: true,
+    validationText: 'Hm, not quite, I warn thee!',
+    ...WithHelpText.args,
+}
+StatusWarning.storyName = 'Status: Warning'
+
+export const StatusError = Template.bind({})
+StatusError.args = {
+    error: true,
+    validationText: 'That value is wrong. Sorry!',
+    ...WithHelpText.args,
+}
+StatusError.storyName = 'Status: Error'
+
+export const Required = Template.bind({})
+Required.args = { required: true }
+
+export const InputWidth = Template.bind({})
+InputWidth.args = {
+    inputWidth: '200px',
+    label: 'A very long label indeed, well at least longer than the input field to show how it looks and works and stuff',
+    required: true,
+}
+
+export const DefaultClearText = Template.bind({})
+DefaultClearText.args = {
+    clearable: true,
+    children: (
+        <MultiSelectOption
+            key="1"
+            value="1"
+            label="Not translated, just for showing clear button"
+        />
+    ),
+    label: null,
+}
+DefaultClearText.storyName = 'Default: clearText'
+
+export const DefaultEmpty = Template.bind({})
+DefaultEmpty.args = { children: null, selected: [], label: null }
+DefaultEmpty.storyName = 'Default: empty'
+
+export const DefaultFilterPlaceholderAndNoMatchText = Template.bind({})
+DefaultFilterPlaceholderAndNoMatchText.args = {
+    filterable: true,
+    ...DefaultEmpty.args,
+}
+DefaultFilterPlaceholderAndNoMatchText.storyName =
+    'Default: filterPlaceholder and noMatchText'
+
+export const DefaultLoadingText = Template.bind({})
+DefaultLoadingText.args = { loading: true, ...DefaultEmpty.args }
+DefaultLoadingText.storyName = 'Default: loadingText'

package/src/multi-select-option/index.js

@@ -0,0 +1 @@
+export { MultiSelectOption } from './multi-select-option.js'

package/src/multi-select-option/multi-select-option.js

@@ -0,0 +1,70 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import { Checkbox } from '@dhis2-ui/checkbox'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { resolve } from 'styled-jsx/css'
+
+// Padding has to be set on the label, so that the entire area is clickable
+const { styles, className: checkboxClassname } = resolve`
+    padding: ${spacers.dp8} ${spacers.dp12};
+`
+
+const MultiSelectOption = ({
+    label,
+    active,
+    disabled,
+    onClick,
+    className,
+    dataTest = 'dhis2-uicore-multiselectoption',
+    value,
+}) => (
+    <div
+        className={cx(className, { active, disabled })}
+        data-test={dataTest}
+        data-value={value}
+        data-label={label}
+    >
+        <Checkbox
+            name={label}
+            className={checkboxClassname}
+            checked={active}
+            label={label}
+            onChange={onClick}
+            disabled={disabled}
+            dense
+        />
+
+        {styles}
+
+        <style jsx>{`
+            div:hover {
+                background-color: ${colors.grey200};
+            }
+
+            div.active {
+                background-color: ${colors.teal050};
+            }
+
+            div.active:hover {
+                background-color: #e6f4f4;
+            }
+
+            div.disabled:hover {
+                background-color: initial;
+            }
+        `}</style>
+    </div>
+)
+
+MultiSelectOption.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    active: PropTypes.bool,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+}
+
+export { MultiSelectOption }

package/src/select/__tests__/select.test.js

@@ -0,0 +1,31 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { Select } from '../select.js'
+
+describe('<Select />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <Select
+                input={<input type="text" />}
+                menu={<div />}
+                selected=""
+                onKeyDown={onKeyDown}
+            />
+        )
+
+        fireEvent.keyDown(screen.getByRole('textbox'), {
+            key: 'Enter',
+            code: 'Enter',
+            charCode: 13,
+        })
+
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { selected: '' },
+            expect.objectContaining({})
+        )
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+    })
+})

package/src/select/debounce/debounce.js

@@ -0,0 +1,30 @@
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not be triggered. The
+ * function will be called after it stops being called for N milliseconds. If `immediate` is
+ * passed, trigger the function on the leading edge, instead of the trailing.
+ */
+
+export const debounce = (func, wait, immediate) => {
+    let timeout
+
+    return (...args) => {
+        const context = this
+
+        const later = () => {
+            timeout = null
+
+            if (!immediate) {
+                func.apply(context, args)
+            }
+        }
+
+        const callNow = immediate && !timeout
+
+        clearTimeout(timeout)
+        timeout = setTimeout(later, wait)
+
+        if (callNow) {
+            func.apply(context, args)
+        }
+    }
+}

package/src/select/debounce/debounce.spec.js

@@ -0,0 +1,35 @@
+import { debounce } from './debounce.js'
+
+beforeEach(() => {
+    jest.useFakeTimers()
+})
+
+describe('debounce', () => {
+    it('should call the debounced function once after the timeout without immediate', () => {
+        const spy = jest.fn()
+        const debounced = debounce(spy, 100)
+
+        debounced()
+        debounced()
+
+        expect(spy).not.toHaveBeenCalled()
+
+        jest.runAllTimers()
+
+        expect(spy).toHaveBeenCalledTimes(1)
+    })
+
+    it('should call the debounced function once immediately if immediate is set', () => {
+        const spy = jest.fn()
+        const debounced = debounce(spy, 100, true)
+
+        debounced()
+        debounced()
+
+        expect(spy).toHaveBeenCalledTimes(1)
+
+        jest.runAllTimers()
+
+        expect(spy).toHaveBeenCalledTimes(1)
+    })
+})

package/src/select/empty.js

@@ -0,0 +1,28 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Empty = ({ message, className, dataTest }) => (
+    <div className={className} data-test={dataTest}>
+        {message}
+        <style jsx>{`
+            div {
+                color: ${colors.grey700};
+                font-family: ${theme.fonts};
+                font-size: 13px;
+                line-height: 16px;
+                padding-block: ${spacers.dp8};
+                padding-inline: ${spacers.dp24};
+                text-align: center;
+            }
+        `}</style>
+    </div>
+)
+
+Empty.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    className: PropTypes.string,
+}
+
+export { Empty }

package/src/select/filter-input.js

@@ -0,0 +1,42 @@
+import { spacers, colors } from '@dhis2/ui-constants'
+import { Input } from '@dhis2-ui/input'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const FilterInput = ({ value, onChange, placeholder, className, dataTest }) => (
+    <div className={className}>
+        <Input
+            dense
+            dataTest={dataTest}
+            value={value}
+            onChange={onChange}
+            type="text"
+            name="filter"
+            placeholder={placeholder}
+            initialFocus
+        />
+
+        <style jsx>{`
+            div {
+                position: sticky;
+                inset-block-start: 0;
+                background: ${colors.white};
+                padding-block-start: ${spacers.dp8};
+                padding-inline-end: ${spacers.dp8};
+                padding-block-end: ${spacers.dp4};
+                padding-inline-start: ${spacers.dp8};
+                z-index: 1;
+            }
+        `}</style>
+    </div>
+)
+
+FilterInput.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func,
+}
+
+export { FilterInput }