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

package/src/multi-select/menu.js

@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import {
+    Empty,
+    filterIgnored,
+    checkIfValidOption,
+    removeOption,
+    findOption,
+} from '../select/index.js'
+
+const onDisabledClick = (_, e) => {
+    e.stopPropagation()
+    e.preventDefault()
+}
+
+const createHandler =
+    ({ isActive, onChange, selected, value }) =>
+    (_, e) => {
+        e.stopPropagation()
+
+        // If the option is currently selected remove it from the array of selected options
+        if (isActive) {
+            const filtered = removeOption(value, selected)
+            const data = { selected: filtered }
+
+            return onChange(data, e)
+        }
+
+        // Otherwise, add it to selected
+        const data = {
+            selected: selected.concat([value]),
+        }
+        return onChange(data, e)
+    }
+
+const Menu = ({ options, onChange, selected, empty = '', dataTest }) => {
+    const renderedOptions = filterIgnored(options)
+
+    if (React.Children.count(renderedOptions) === 0) {
+        // If it's a string, supply it to our <Empty> component so it looks better
+        if (typeof empty === 'string') {
+            return <Empty message={empty} dataTest={`${dataTest}-empty`} />
+        }
+
+        // Otherwise just render the supplied markup
+        return empty
+    }
+
+    const children = React.Children.map(options, (child) => {
+        const isValidOption = checkIfValidOption(child)
+
+        // Return early if the child isn't an option, to prevent attaching handlers etc.
+        if (!isValidOption) {
+            return child
+        }
+
+        const { value, label, disabled: isDisabled } = child.props
+
+        // Active means the option is currently selected
+        const isActive = !!findOption(value, selected)
+
+        // Create the appropriate click handler for the option
+        const onClick = isDisabled
+            ? onDisabledClick
+            : createHandler({
+                  isActive,
+                  onChange,
+                  selected,
+                  value,
+                  label,
+              })
+
+        return React.cloneElement(child, {
+            ...child.props,
+            onClick,
+            active: isActive,
+        })
+    })
+
+    return <React.Fragment>{children}</React.Fragment>
+}
+
+Menu.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    empty: PropTypes.node,
+    options: PropTypes.node,
+    selected: PropTypes.arrayOf(PropTypes.string),
+    onChange: PropTypes.func,
+}
+
+export { Menu }

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

@@ -0,0 +1,407 @@
+import { Button } from '@dhis2-ui/button'
+import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { MultiSelectOption } from '../index.js'
+import { MultiSelect } from './multi-select.js'
+
+window.onChange = window.Cypress && window.Cypress.cy.stub()
+window.onFocus = window.Cypress && window.Cypress.cy.stub()
+window.onBlur = window.Cypress && window.Cypress.cy.stub()
+
+const CustomMultiSelectOption = ({ label, onClick }) => (
+    <div onClick={(e) => onClick({}, e)}>{label}</div>
+)
+
+CustomMultiSelectOption.propTypes = {
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+}
+
+const options = [
+    { name: 'Hello', id: '1' },
+    { name: 'world', id: '2' },
+    { name: 'foo', id: '3' },
+    { name: 'bar', id: '4' },
+]
+
+export default { title: 'MultiSelect' }
+export const WithOptions = () => (
+    <MultiSelect className="select">
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOptionsAndOnChange = () => (
+    <MultiSelect className="select" onChange={window.onChange}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOnFocus = () => (
+    <MultiSelect className="select" onFocus={window.onFocus}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOnBlur = () => (
+    <MultiSelect className="select" onBlur={window.onBlur}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithCustomOptionsAndOnChange = () => (
+    <MultiSelect className="select" onChange={window.onChange}>
+        <CustomMultiSelectOption value="1" label="option one" />
+        <CustomMultiSelectOption value="2" label="option two" />
+        <CustomMultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithInvalidOptions = () => (
+    <MultiSelect className="select">
+        <div>invalid one</div>
+        <MultiSelectOption value="1" label="option one" />
+        <div>invalid two</div>
+        <MultiSelectOption value="2" label="option two" />
+        <div>invalid three</div>
+        <MultiSelectOption value="3" label="option three" />
+        {null}
+        {undefined}
+        {false}
+    </MultiSelect>
+)
+export const WithInvalidFilterableOptions = () => (
+    <MultiSelect filterable className="select" noMatchText="No match">
+        <div>invalid one</div>
+        <MultiSelectOption value="1" label="option one" />
+        <div>invalid two</div>
+        <MultiSelectOption value="2" label="option two" />
+        <div>invalid three</div>
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithInitialFocus = () => (
+    <MultiSelect className="select" initialFocus />
+)
+export const Empty = () => <MultiSelect className="select" />
+export const EmptyWithEmptyText = () => (
+    <MultiSelect className="select" empty="Custom empty text" />
+)
+export const EmptyWithEmptyComponent = () => (
+    <MultiSelect
+        className="select"
+        empty={<div className="custom-empty">Custom empty component</div>}
+    />
+)
+export const WithOptionsAndLoading = () => (
+    <MultiSelect className="select" loading>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOptionsLoadingAndLoadingText = () => (
+    <MultiSelect className="select" loadingText="Loading options" loading>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithMoreThanTenOptions = () => (
+    <MultiSelect className="select">
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+        <MultiSelectOption value="4" label="option four" />
+        <MultiSelectOption value="5" label="option five" />
+        <MultiSelectOption value="6" label="option six" />
+        <MultiSelectOption value="7" label="option seven" />
+        <MultiSelectOption value="8" label="option eight" />
+        <MultiSelectOption value="9" label="option nine" />
+        <MultiSelectOption value="10" label="option ten" />
+        <MultiSelectOption value="11" label="option eleven" />
+        <MultiSelectOption value="12" label="option twelve" />
+    </MultiSelect>
+)
+export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => (
+    <MultiSelect className="select" maxHeight="100px">
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+        <MultiSelectOption value="4" label="option four" />
+        <MultiSelectOption value="5" label="option five" />
+        <MultiSelectOption value="6" label="option six" />
+        <MultiSelectOption value="7" label="option seven" />
+        <MultiSelectOption value="8" label="option eight" />
+        <MultiSelectOption value="9" label="option nine" />
+        <MultiSelectOption value="10" label="option ten" />
+        <MultiSelectOption value="11" label="option eleven" />
+        <MultiSelectOption value="12" label="option twelve" />
+    </MultiSelect>
+)
+export const WithOptionsASelectionAndDisabled = () => (
+    <MultiSelect disabled className="select" selected={['1']}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOptionsAndDisabled = () => (
+    <MultiSelect disabled className="select">
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithPrefix = () => (
+    <MultiSelect className="select" prefix="Prefix text">
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithPrefixAndSelection = () => (
+    <MultiSelect className="select" prefix="Prefix text" selected={['1']}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithPlaceholder = () => (
+    <MultiSelect className="select" placeholder="Placeholder text">
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithPlaceholderAndSelection = () => (
+    <MultiSelect
+        className="select"
+        selected={['1']}
+        placeholder="Placeholder text"
+    >
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithDisabledOptionAndOnChange = () => (
+    <MultiSelect className="select" onChange={window.onChange}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+        <MultiSelectOption value="4" label="disabled option" disabled />
+    </MultiSelect>
+)
+export const WithOptionsAndASelection = () => (
+    <MultiSelect className="select" selected={['1']}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOptionsASelectionAndOnChange = () => (
+    <MultiSelect className="select" selected={['1']} onChange={window.onChange}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOptionsAndMultipleSelections = () => (
+    <MultiSelect className="select" selected={['1', '2']}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithClearButtonSelectionAndOnChange = () => (
+    <MultiSelect
+        clearable
+        clearText="Clear"
+        className="select"
+        selected={['1']}
+        onChange={window.onChange}
+    >
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithFilterField = () => (
+    <MultiSelect filterable noMatchText="No match found" className="select">
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const DefaultPosition = () => (
+    <>
+        <MultiSelect className="select">
+            <MultiSelectOption value="1" label="option one" />
+            <MultiSelectOption value="2" label="option two" />
+            <MultiSelectOption value="3" label="option three" />
+            <MultiSelectOption value="4" label="option four" />
+            <MultiSelectOption value="5" label="option five" />
+            <MultiSelectOption value="6" label="option six" />
+            <MultiSelectOption value="7" label="option seven" />
+            <MultiSelectOption value="8" label="option eight" />
+            <MultiSelectOption value="9" label="option nine" />
+            <MultiSelectOption value="10" label="option ten" />
+            <MultiSelectOption value="11" label="option eleven" />
+            <MultiSelectOption value="12" label="option twelve" />
+        </MultiSelect>
+        <style jsx>{`
+            :global(#storybook-root) {
+                height: 2000px !important;
+            }
+        `}</style>
+    </>
+)
+export const FlippedPosition = () => (
+    <>
+        <MultiSelect className="select">
+            <MultiSelectOption value="1" label="option one" />
+            <MultiSelectOption value="2" label="option two" />
+            <MultiSelectOption value="3" label="option three" />
+            <MultiSelectOption value="4" label="option four" />
+            <MultiSelectOption value="5" label="option five" />
+            <MultiSelectOption value="6" label="option six" />
+            <MultiSelectOption value="7" label="option seven" />
+            <MultiSelectOption value="8" label="option eight" />
+            <MultiSelectOption value="9" label="option nine" />
+            <MultiSelectOption value="10" label="option ten" />
+            <MultiSelectOption value="11" label="option eleven" />
+            <MultiSelectOption value="12" label="option twelve" />
+        </MultiSelect>
+        <style jsx>{`
+            :global(html),
+            :global(body),
+            :global(#storybook-root) {
+                position: relative;
+                height: 500px;
+                max-height: 500px;
+            }
+            :global(#storybook-root) {
+                padding-top: 400px !important;
+            }
+        `}</style>
+    </>
+)
+export const ShiftedIntoView = () => (
+    <>
+        <MultiSelect className="select">
+            <MultiSelectOption value="1" label="option one" />
+            <MultiSelectOption value="2" label="option two" />
+            <MultiSelectOption value="3" label="option three" />
+            <MultiSelectOption value="4" label="option four" />
+            <MultiSelectOption value="5" label="option five" />
+            <MultiSelectOption value="6" label="option six" />
+            <MultiSelectOption value="7" label="option seven" />
+            <MultiSelectOption value="8" label="option eight" />
+            <MultiSelectOption value="9" label="option nine" />
+            <MultiSelectOption value="10" label="option ten" />
+            <MultiSelectOption value="11" label="option eleven" />
+            <MultiSelectOption value="12" label="option twelve" />
+        </MultiSelect>
+        <style jsx>{`
+            :global(html),
+            :global(body),
+            :global(#storybook-root) {
+                position: relative;
+                height: 300px !important;
+                max-height: 300px;
+            }
+            :global(#storybook-root) {
+                padding-top: 130px !important;
+            }
+        `}</style>
+    </>
+)
+export const WithDuplicateSelectedOptionValues = () => (
+    <MultiSelect className="select" selected={['1']}>
+        <MultiSelectOption value="1" label="option one" />
+        <MultiSelectOption value="1" label="option one a" />
+        <MultiSelectOption value="2" label="option two" />
+        <MultiSelectOption value="3" label="option three" />
+    </MultiSelect>
+)
+export const WithOptionsThatCanBeAddedToTheInput = () => {
+    const [values, setValues] = React.useState([])
+    return (
+        <>
+            <MultiSelect
+                className="select"
+                selected={values}
+                onChange={({ selected }) => {
+                    window.onChange && window.onChange({ selected })
+                    setValues(selected)
+                }}
+            >
+                <MultiSelectOption value="1" label="option one" />
+                <MultiSelectOption value="2" label="option two" />
+                <MultiSelectOption value="3" label="option three" />
+            </MultiSelect>
+            <style jsx>{`
+                :global(#storybook-root) {
+                    height: 2000px !important;
+                }
+            `}</style>
+        </>
+    )
+}
+export const MenuWidthChanging = () => {
+    const [toggle, setToggle] = useState(false)
+    return (
+        <div className="App">
+            <Modal dataTest={'myModal'}>
+                <ModalTitle>Modal</ModalTitle>
+                <ModalContent>
+                    <div style={{ display: 'flex' }}>
+                        {toggle && (
+                            <div
+                                style={{
+                                    padding: '30px',
+                                    border: '1px solid green',
+                                }}
+                                className="toggler"
+                            >
+                                Stuff
+                            </div>
+                        )}
+                        <div style={{ flexGrow: 1 }}>
+                            <MultiSelect
+                                onChange={({ selected }) =>
+                                    console.log('size changed to ' + selected)
+                                }
+                            >
+                                {options.map(({ name, id }) => (
+                                    <MultiSelectOption
+                                        key={id}
+                                        value={id}
+                                        label={name}
+                                    />
+                                ))}
+                            </MultiSelect>
+                        </div>
+                        {toggle && (
+                            <div
+                                style={{
+                                    padding: '30px',
+                                    border: '1px solid green',
+                                }}
+                                className="toggler"
+                            >
+                                Stuff
+                            </div>
+                        )}
+                    </div>
+                    <Button onClick={() => setToggle(!toggle)}>Toggle</Button>
+                </ModalContent>
+            </Modal>
+        </div>
+    )
+}

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

@@ -0,0 +1,148 @@
+import { requiredIf } from '@dhis2/prop-types'
+import { spacers, sharedPropTypes } from '@dhis2/ui-constants'
+import { StatusIcon } from '@dhis2-ui/status-icon'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Loading as CommonLoading, Select } from '../select/index.js'
+import { FilterableMenu } from './filterable-menu.js'
+import { Input } from './input.js'
+import { Menu } from './menu.js'
+
+// stable object reference
+const staticArr = []
+const MultiSelect = ({
+    className,
+    selected = staticArr,
+    tabIndex,
+    maxHeight,
+    inputMaxHeight,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onBlur,
+    loading,
+    error,
+    warning,
+    valid,
+    disabled,
+    children,
+    clearable,
+    clearText,
+    filterable,
+    filterPlaceholder,
+    placeholder,
+    prefix,
+    empty,
+    loadingText,
+    noMatchText,
+    initialFocus,
+    dense,
+    collapseSelectionAfter,
+    dataTest = 'dhis2-uicore-multiselect',
+}) => {
+    // If the select is filterable, use a filterable menu
+    const menu = filterable ? (
+        <FilterableMenu
+            dataTest={dataTest}
+            empty={empty}
+            noMatchText={noMatchText}
+            placeholder={filterPlaceholder}
+        />
+    ) : (
+        <Menu empty={empty} dataTest={dataTest} />
+    )
+
+    return (
+        <div className="root" data-test={dataTest}>
+            <div className="root-input">
+                <Select
+                    className={className}
+                    selected={selected}
+                    input={
+                        <Input
+                            clearable={clearable}
+                            clearText={clearText}
+                            dataTest={dataTest}
+                            placeholder={placeholder}
+                            prefix={prefix}
+                            inputMaxHeight={inputMaxHeight}
+                            collapseSelectionAfter={collapseSelectionAfter}
+                        />
+                    }
+                    menu={menu}
+                    tabIndex={tabIndex}
+                    maxHeight={maxHeight}
+                    onChange={onChange}
+                    onFocus={onFocus}
+                    onKeyDown={onKeyDown}
+                    onBlur={onBlur}
+                    error={error}
+                    warning={warning}
+                    valid={valid}
+                    disabled={disabled}
+                    initialFocus={initialFocus}
+                    dense={dense}
+                >
+                    {children}
+                    {loading && (
+                        <CommonLoading
+                            message={loadingText}
+                            dataTest={`${dataTest}-loading`}
+                        />
+                    )}
+                </Select>
+            </div>
+            <StatusIcon error={error} valid={valid} warning={warning} />
+
+            <style jsx>{`
+                .root {
+                    align-items: center;
+                    display: flex;
+                    gap: ${spacers.dp8};
+                }
+
+                .root-input {
+                    flex: 1;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+MultiSelect.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    /** Required if `clearable` prop is `true` */
+    clearText: requiredIf((props) => props.clearable, PropTypes.string),
+    /** Adds a 'clear' option to the menu */
+    clearable: PropTypes.bool,
+    /** When the number of selected items exceeds this threshold, chips are replaced with "X selected" text */
+    collapseSelectionAfter: PropTypes.number,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    disabled: PropTypes.bool,
+    empty: PropTypes.node,
+    error: sharedPropTypes.statusPropType,
+    filterPlaceholder: PropTypes.string,
+    /** Adds a 'filter' field to the menu */
+    filterable: PropTypes.bool,
+    initialFocus: PropTypes.bool,
+    inputMaxHeight: PropTypes.string,
+    loading: PropTypes.bool,
+    loadingText: PropTypes.string,
+    maxHeight: PropTypes.string,
+    /** Required if `filterable` prop is `true` */
+    noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
+    placeholder: PropTypes.string,
+    prefix: PropTypes.string,
+    selected: PropTypes.arrayOf(PropTypes.string),
+    tabIndex: PropTypes.string,
+    valid: sharedPropTypes.statusPropType,
+    warning: sharedPropTypes.statusPropType,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    onKeyDown: PropTypes.func,
+}
+
+export { MultiSelect }