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

package/src/single-select/menu.js

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { Empty, filterIgnored, checkIfValidOption } from '../select/index.js'
+
+const onIgnoredClick = (_, e) => {
+    e.stopPropagation()
+    e.preventDefault()
+}
+
+const Menu = ({
+    options,
+    onChange,
+    selected,
+    empty = '',
+    handleFocusInput,
+    handleClose,
+    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, disabled: isDisabled } = child.props
+
+        // Active means the option is currently selected
+        const isActive = value === selected
+        const onClick = (_, e) => {
+            const data = { selected: value }
+            e.stopPropagation()
+
+            onChange(data, e)
+            handleClose()
+            handleFocusInput()
+        }
+
+        // Clicks on active options or disabled options should be ignored for the single select
+        const isIgnored = isActive || isDisabled
+
+        return React.cloneElement(child, {
+            ...child.props,
+            onClick: isIgnored ? onIgnoredClick : onClick,
+            active: isActive,
+        })
+    })
+
+    return <React.Fragment>{children}</React.Fragment>
+}
+
+Menu.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    empty: PropTypes.node,
+    handleClose: PropTypes.func,
+    handleFocusInput: PropTypes.func,
+    options: PropTypes.node,
+    selected: PropTypes.string,
+    onChange: PropTypes.func,
+}
+
+export { Menu }

package/src/single-select/selection.js

@@ -0,0 +1,60 @@
+import { spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { findOptionChild } from '../select/index.js'
+
+const Selection = ({ options, selected, className }) => {
+    const isProduction = process.env.NODE_ENV === 'production'
+    const selectedOption = findOptionChild(selected, options)
+
+    if (!selectedOption) {
+        const message =
+            `There is no option with the value: "${selected}". ` +
+            'Make sure that the value passed to the selected ' +
+            'prop matches the value of an existing option.'
+
+        if (isProduction) {
+            // Don't crash the app if in production
+            console.error(message)
+        } else {
+            // Throw error if not in production for maximum visibility
+            throw new Error(message)
+        }
+    }
+
+    const icon = selectedOption && selectedOption.props.icon
+    // Use the selected value if we do not have a label
+    const label = selectedOption ? selectedOption.props.label : selected
+
+    return (
+        <div className={cx(className, 'root')}>
+            {icon && <div className="root-icon">{icon}</div>}
+            {label}
+
+            <style jsx>{`
+                .root {
+                    display: flex;
+                    align-items: center;
+                    user-select: none;
+                }
+
+                .root-icon {
+                    margin-inline-end: ${spacers.dp8};
+                    width: ${spacers.dp16};
+                    height: ${spacers.dp16};
+                    overflow: hidden;
+                    flex-shrink: 0;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Selection.propTypes = {
+    className: PropTypes.string,
+    options: PropTypes.node,
+    selected: PropTypes.string,
+}
+
+export { Selection }

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

@@ -0,0 +1,376 @@
+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 { SingleSelectOption } from '../index.js'
+import { SingleSelect } from './index.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 CustomSingleSelectOption = ({ label, onClick }) => (
+    <div onClick={(e) => onClick({}, e)}>{label}</div>
+)
+
+CustomSingleSelectOption.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: 'SingleSelect' }
+export const WithOptions = () => (
+    <SingleSelect className="select">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithOptionsAndOnChange = () => (
+    <SingleSelect className="select" onChange={window.onChange}>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithOnFocus = () => (
+    <SingleSelect className="select" onFocus={window.onFocus}>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithOnBlur = () => (
+    <SingleSelect className="select" onBlur={window.onBlur}>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithCustomOptionsAndOnChange = () => (
+    <SingleSelect className="select" onChange={window.onChange}>
+        <CustomSingleSelectOption value="1" label="option one" />
+        <CustomSingleSelectOption value="2" label="option two" />
+        <CustomSingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithInvalidOptions = () => (
+    <SingleSelect className="select">
+        <div>invalid one</div>
+        <SingleSelectOption value="1" label="option one" />
+        <div>invalid two</div>
+        <SingleSelectOption value="2" label="option two" />
+        <div>invalid three</div>
+        <SingleSelectOption value="3" label="option three" />
+        {null}
+        {undefined}
+        {false}
+    </SingleSelect>
+)
+export const WithInvalidFilterableOptions = () => (
+    <SingleSelect filterable className="select" noMatchText="No match">
+        <div>invalid one</div>
+        <SingleSelectOption value="1" label="option one" />
+        <div>invalid two</div>
+        <SingleSelectOption value="2" label="option two" />
+        <div>invalid three</div>
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithInitialFocus = () => (
+    <SingleSelect className="select" initialFocus />
+)
+export const Empty = () => <SingleSelect className="select" />
+export const EmptyWithEmptyText = () => (
+    <SingleSelect className="select" empty="Custom empty text" />
+)
+export const EmptyWithEmptyComponent = () => (
+    <SingleSelect
+        className="select"
+        empty={<div className="custom-empty">Custom empty component</div>}
+    />
+)
+export const WithOptionsAndLoading = () => (
+    <SingleSelect className="select" loading>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithOptionsLoadingAndLoadingText = () => (
+    <SingleSelect className="select" loadingText="Loading options" loading>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithMoreThanTenOptions = () => (
+    <SingleSelect className="select">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+        <SingleSelectOption value="4" label="option four" />
+        <SingleSelectOption value="5" label="option five" />
+        <SingleSelectOption value="6" label="option six" />
+        <SingleSelectOption value="7" label="option seven" />
+        <SingleSelectOption value="8" label="option eight" />
+        <SingleSelectOption value="9" label="option nine" />
+        <SingleSelectOption value="10" label="option ten" />
+        <SingleSelectOption value="11" label="option eleven" />
+        <SingleSelectOption value="12" label="option twelve" />
+    </SingleSelect>
+)
+export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => (
+    <SingleSelect className="select" maxHeight="100px">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+        <SingleSelectOption value="4" label="option four" />
+        <SingleSelectOption value="5" label="option five" />
+        <SingleSelectOption value="6" label="option six" />
+        <SingleSelectOption value="7" label="option seven" />
+        <SingleSelectOption value="8" label="option eight" />
+        <SingleSelectOption value="9" label="option nine" />
+        <SingleSelectOption value="10" label="option ten" />
+        <SingleSelectOption value="11" label="option eleven" />
+        <SingleSelectOption value="12" label="option twelve" />
+    </SingleSelect>
+)
+export const WithOptionsASelectionAndDisabled = () => (
+    <SingleSelect disabled className="select" selected="1">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithOptionsAndDisabled = () => (
+    <SingleSelect disabled className="select">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithPrefix = () => (
+    <SingleSelect className="select" prefix="Prefix text">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithPrefixAndSelection = () => (
+    <SingleSelect className="select" prefix="Prefix text" selected="1">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithPlaceholder = () => (
+    <SingleSelect className="select" placeholder="Placeholder text">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithPlaceholderAndSelection = () => (
+    <SingleSelect
+        className="select"
+        selected="1"
+        placeholder="Placeholder text"
+    >
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithDisabledOptionAndOnChange = () => (
+    <SingleSelect className="select" onChange={window.onChange}>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+        <SingleSelectOption value="4" label="disabled option" disabled />
+    </SingleSelect>
+)
+export const WithOptionsAndASelection = () => (
+    <SingleSelect className="select" selected="1">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithOptionsASelectionAndOnChange = () => (
+    <SingleSelect className="select" selected="1" onChange={window.onChange}>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithClearButtonSelectionAndOnChange = () => (
+    <SingleSelect
+        clearable
+        clearText="Clear"
+        className="select"
+        selected="1"
+        onChange={window.onChange}
+    >
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const WithFilterField = () => (
+    <SingleSelect filterable noMatchText="No match found" className="select">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+export const DefaultPosition = () => (
+    <>
+        <SingleSelect className="select">
+            <SingleSelectOption value="1" label="option one" />
+            <SingleSelectOption value="2" label="option two" />
+            <SingleSelectOption value="3" label="option three" />
+            <SingleSelectOption value="4" label="option four" />
+            <SingleSelectOption value="5" label="option five" />
+            <SingleSelectOption value="6" label="option six" />
+            <SingleSelectOption value="7" label="option seven" />
+            <SingleSelectOption value="8" label="option eight" />
+            <SingleSelectOption value="9" label="option nine" />
+            <SingleSelectOption value="10" label="option ten" />
+            <SingleSelectOption value="11" label="option eleven" />
+            <SingleSelectOption value="12" label="option twelve" />
+        </SingleSelect>
+        <style jsx>{`
+            :global(#storybook-root) {
+                margin-bottom: 2000px;
+            }
+        `}</style>
+    </>
+)
+export const FlippedPosition = () => (
+    <>
+        <SingleSelect className="select">
+            <SingleSelectOption value="1" label="option one" />
+            <SingleSelectOption value="2" label="option two" />
+            <SingleSelectOption value="3" label="option three" />
+            <SingleSelectOption value="4" label="option four" />
+            <SingleSelectOption value="5" label="option five" />
+            <SingleSelectOption value="6" label="option six" />
+            <SingleSelectOption value="7" label="option seven" />
+            <SingleSelectOption value="8" label="option eight" />
+            <SingleSelectOption value="9" label="option nine" />
+            <SingleSelectOption value="10" label="option ten" />
+            <SingleSelectOption value="11" label="option eleven" />
+            <SingleSelectOption value="12" label="option twelve" />
+        </SingleSelect>
+        <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 = () => (
+    <>
+        <SingleSelect className="select">
+            <SingleSelectOption value="1" label="option one" />
+            <SingleSelectOption value="2" label="option two" />
+            <SingleSelectOption value="3" label="option three" />
+            <SingleSelectOption value="4" label="option four" />
+            <SingleSelectOption value="5" label="option five" />
+            <SingleSelectOption value="6" label="option six" />
+            <SingleSelectOption value="7" label="option seven" />
+            <SingleSelectOption value="8" label="option eight" />
+            <SingleSelectOption value="9" label="option nine" />
+            <SingleSelectOption value="10" label="option ten" />
+            <SingleSelectOption value="11" label="option eleven" />
+            <SingleSelectOption value="12" label="option twelve" />
+        </SingleSelect>
+        <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 = () => (
+    <SingleSelect className="select" selected="1">
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="1" label="option one a" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+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 }}>
+                            <SingleSelect
+                                onChange={({ selected }) =>
+                                    console.log('size changed to ' + selected)
+                                }
+                            >
+                                {options.map(({ name, id }) => (
+                                    <SingleSelectOption
+                                        key={id}
+                                        value={id}
+                                        label={name}
+                                    />
+                                ))}
+                            </SingleSelect>
+                        </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/single-select/single-select.js

@@ -0,0 +1,146 @@
+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'
+
+const SingleSelect = ({
+    className,
+    selected = '',
+    tabIndex,
+    maxHeight,
+    inputMaxHeight,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onBlur,
+    loading,
+    error,
+    warning,
+    valid,
+    disabled,
+    children,
+    clearable,
+    clearText,
+    filterable,
+    filterPlaceholder,
+    placeholder,
+    prefix,
+    empty,
+    loadingText,
+    noMatchText,
+    initialFocus,
+    dense,
+    dataTest = 'dhis2-uicore-singleselect',
+}) => {
+    // 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}
+                        />
+                    }
+                    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>
+    )
+}
+
+SingleSelect.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    /** Text on button that clears selection. Required if `clearable` prop is true */
+    clearText: requiredIf((props) => props.clearable, PropTypes.string),
+    /** Adds a button to clear selection */
+    clearable: PropTypes.bool,
+    dataTest: PropTypes.string,
+    dense: PropTypes.bool,
+    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,
+    filterPlaceholder: PropTypes.string,
+    /** Adds a filter field to add text to filter options */
+    filterable: PropTypes.bool,
+    initialFocus: PropTypes.bool,
+    inputMaxHeight: PropTypes.string,
+    loading: PropTypes.bool,
+    loadingText: PropTypes.string,
+    maxHeight: PropTypes.string,
+    /** Text to show when filter returns no results. Required if `filterable` prop is true */
+    noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
+    placeholder: PropTypes.string,
+    prefix: PropTypes.string,
+    selected: PropTypes.string,
+    tabIndex: PropTypes.string,
+    /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `error` props */
+    valid: sharedPropTypes.statusPropType,
+    /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
+    warning: sharedPropTypes.statusPropType,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    onKeyDown: PropTypes.func,
+}
+
+export { SingleSelect }