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

package/src/multi-select/features/can_be_filtered.feature

@@ -0,0 +1,14 @@
+Feature: Filtering the MultiSelect options
+
+    Scenario: The user enters a filter string to filter the options
+        Given a filterable MultiSelect with options is rendered
+        And the MultiSelect is open
+        When the user enters a filter string
+        Then the matching options are displayed
+
+    Scenario: The user enters a filter string that doesn't match any options
+        Given a filterable MultiSelect with options is rendered
+        And the MultiSelect is open
+        When the user enters a filter string that doesn't match any options
+        Then the no match text is displayed
+        And the options are not rendered

package/src/multi-select/features/can_be_opened_and_closed/index.js

@@ -0,0 +1,32 @@
+import { Given, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with options is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options')
+})
+
+Given('the MultiSelect is closed', () => {
+    cy.contains('option one').should('not.exist')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})
+
+Given('the MultiSelect is focused', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').focus()
+    cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-select-input')
+})
+
+When('the down arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{downarrow}')
+})
+
+When('the spacebar is pressed on the focused element', () => {
+    cy.focused().type(' ')
+})
+
+When('the up arrowkey is pressed on the focused element', () => {
+    cy.focused().type('{uparrow}')
+})
+
+When('the escape key is pressed on the focused element', () => {
+    cy.focused().type('{esc}')
+})

package/src/multi-select/features/can_be_opened_and_closed.feature

@@ -0,0 +1,41 @@
+Feature: Opening and closing the MultiSelect
+
+    Scenario: The user clicks the MultiSelect input to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        When the MultiSelect input is clicked
+        Then the options are displayed
+
+    Scenario: The user presses the down arrowkey to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the down arrowkey is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user presses the up arrowkey to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the up arrowkey is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user presses the spacebar to display the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is closed
+        And the MultiSelect is focused
+        When the spacebar is pressed on the focused element
+        Then the options are displayed
+
+    Scenario: The user clicks the backdrop layer to hide the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is open
+        When the user clicks the backdrop layer
+        Then the options are not rendered
+
+    Scenario: The user presses the escape key to hide the options
+        Given a MultiSelect with options is rendered
+        And the MultiSelect is open
+        And the MultiSelect is focused
+        When the escape key is pressed on the focused element
+        Then the options are not rendered

package/src/multi-select/features/common/index.js

@@ -0,0 +1,49 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with options and onChange handler is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options and on change')
+})
+
+Given(
+    'a MultiSelect with options, a selection and onChange handler is rendered',
+    () => {
+        cy.visitStory('MultiSelect', 'With options, a selection and on change')
+    }
+)
+
+Given('a MultiSelect is rendered to which options can be added', () => {
+    cy.visitStory('MultiSelect', 'With options that can be added to the input')
+    cy.get('[data-test="dhis2-uicore-multiselect"]').should('exist')
+})
+
+Given('the MultiSelect is open', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+
+    cy.contains('option one').should('be.visible')
+    cy.contains('option two').should('be.visible')
+    cy.contains('option three').should('be.visible')
+})
+
+When('the MultiSelect input is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+When('the user clicks the backdrop layer', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').click()
+})
+
+Then('the options are not rendered', () => {
+    cy.contains('option one').should('not.exist')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})
+
+Then('the options are displayed', () => {
+    cy.contains('option one').should('be.visible')
+    cy.contains('option two').should('be.visible')
+    cy.contains('option three').should('be.visible')
+})
+
+Then('the MultiSelect has focus', () => {
+    cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-select-input')
+})

package/src/multi-select/features/duplicate_option_values/index.js

@@ -0,0 +1,21 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a MultiSelect with options with a duplicate value and this value is selected',
+    () => {
+        cy.visitStory('MultiSelect', 'With duplicate selected option values')
+    }
+)
+Then(
+    'the first option with the selected value is displayed in the input',
+    () => {
+        cy.get('[data-test="dhis2-uicore-select-input"]').should(
+            'contain',
+            'option one'
+        )
+    }
+)
+Then('both options are highlighted in the dropdown', () => {
+    cy.get('input[name="option one"]').should('have.attr', 'checked')
+    cy.get('input[name="option one a"]').should('have.attr', 'checked')
+})

package/src/multi-select/features/duplicate_option_values.feature

@@ -0,0 +1,7 @@
+Feature: Duplicate option values result in a conflict between the input and dropdown UI
+
+    Scenario: The MultiSelect has options with a duplicate value and this value is selected
+        Given a MultiSelect with options with a duplicate value and this value is selected
+        And the MultiSelect is open
+        Then the first option with the selected value is displayed in the input
+        But both options are highlighted in the dropdown

package/src/multi-select/features/menu_width_matches_input/index.js

@@ -0,0 +1,53 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with hidden sibling elements', () => {
+    cy.visitStory('MultiSelect', 'Menu width changing')
+    cy.get('[data-test="dhis2-uicore-multiselect"]').then(($el) => {
+        cy.wrap($el.outerWidth()).as('originalWidth')
+    })
+})
+When('the button is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-button"]').click()
+})
+Then('the siblings are displayed', () => {
+    cy.get('.toggler').should('exist').and('have.length', 2)
+})
+Then('the menu width has decreased', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect"]').then(($el) => {
+        const newWidth = $el.outerWidth()
+        cy.get('@originalWidth').should('be.greaterThan', newWidth)
+    })
+})
+When('the MultiSelect menu is open', () => {
+    cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should(
+        'be.visible'
+    )
+})
+Then('the MultiSelect input is left aligned with the menu', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-multiselect"]'
+    const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]'
+
+    cy.getAll(selectDataTest, menuDataTest).should(([inputs, menus]) => {
+        expect(inputs.length).to.equal(1)
+        expect(menus.length).to.equal(1)
+
+        const $input = inputs[0]
+        const $menu = menus[0]
+
+        const inputRect = $input.getBoundingClientRect()
+        const menuRect = $menu.getBoundingClientRect()
+
+        expect(Math.round(inputRect.left)).to.equal(Math.round(menuRect.left))
+    })
+})
+When('the MultiSelect input and menu have the same width', () => {
+    const inputSelector = '[data-test="dhis2-uicore-select"]'
+    const menuSelector = '[data-test="dhis2-uicore-select-menu-menuwrapper"]'
+
+    cy.getAll(inputSelector, menuSelector).should(([$input, $menu]) => {
+        const inputWidth = Math.round($input.outerWidth())
+        const menuWidth = Math.round($menu.outerWidth())
+
+        expect(inputWidth).to.equal(menuWidth)
+    })
+})

package/src/multi-select/features/menu_width_matches_input.feature

@@ -0,0 +1,11 @@
+Feature: The menu always has the same size as the input
+
+    Scenario: The MultiSelect input changes width while the menu is closed
+        Given a MultiSelect with hidden sibling elements
+        When the button is clicked
+        Then the siblings are displayed
+        And the menu width has decreased
+        When the MultiSelect input is clicked
+        Then the MultiSelect menu is open
+        And the MultiSelect input is left aligned with the menu
+        And the MultiSelect input and menu have the same width

package/src/multi-select/features/position/index.js

@@ -0,0 +1,160 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'there is enough space below the anchor to fit the MultiSelect menu',
+    () => {
+        cy.visitStory('MultiSelect', 'Default position')
+    }
+)
+
+Given(
+    'there is not enough space below the anchor to fit the MultiSelect menu',
+    () => {
+        cy.visitStory('MultiSelect', 'Flipped position')
+    }
+)
+
+Given(
+    'there is not enough space above or below the anchor to fit the MultiSelect menu',
+    () => {
+        cy.visitStory('MultiSelect', 'Shifted into view')
+    }
+)
+
+Given('the input is empty', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]')
+        .should('exist')
+        .should('have.length', 1)
+        .then((inputs) => {
+            const $input = inputs[0]
+            const inputRect = $input.getBoundingClientRect()
+
+            return inputRect.height
+        })
+        .as('emptyInputHeight')
+
+    cy.get('[data-test="dhis2-uicore-select-input"] .root').should('be.empty')
+})
+
+When('the MultiSelect is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect"]').click()
+})
+
+When('the window is scrolled down', () => {
+    cy.scrollTo(0, 800)
+})
+
+When('the window is resized to a greater width', () => {
+    cy.viewport(1200, 660)
+})
+
+When('an option is clicked', () => {
+    cy.contains('option one').click()
+})
+
+Then('the Input remains the same height', () => {
+    const emptyInputHeight = '@emptyInputHeight'
+    const inputDataTest = '[data-test="dhis2-uicore-select-input"]'
+
+    cy.getAll(emptyInputHeight, inputDataTest).should(
+        ([emptyInputHeight, inputs]) => {
+            expect(inputs.length).to.equal(1)
+
+            const $input = inputs[0]
+            const inputRect = $input.getBoundingClientRect()
+
+            expect(inputRect.height).to.equal(emptyInputHeight)
+        }
+    )
+})
+
+Then('the top of the menu is aligned with the bottom of the input', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-multiselect"]'
+    const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]'
+
+    cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+        expect(selects.length).to.equal(1)
+        expect(menus.length).to.equal(1)
+
+        const $select = selects[0]
+        const $menu = menus[0]
+
+        const selectRect = $select.getBoundingClientRect()
+        const menuRect = $menu.getBoundingClientRect()
+
+        expect(menuRect.top).to.be.closeTo(selectRect.bottom, 1)
+    })
+})
+
+Then('the bottom of the menu is aligned with the top of the input', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-multiselect"]'
+    const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]'
+
+    cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+        expect(selects.length).to.equal(1)
+        expect(menus.length).to.equal(1)
+
+        const $select = selects[0]
+        const $menu = menus[0]
+
+        const selectRect = $select.getBoundingClientRect()
+        const menuRect = $menu.getBoundingClientRect()
+
+        expect(selectRect.top).to.be.closeTo(menuRect.bottom, 1)
+    })
+})
+
+Then('it is rendered on top of the MultiSelect', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-multiselect"]'
+    const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]'
+
+    cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+        expect(selects.length).to.equal(1)
+        expect(menus.length).to.equal(1)
+
+        const $select = selects[0]
+        const $menu = menus[0]
+
+        const selectRect = $select.getBoundingClientRect()
+        const menuRect = $menu.getBoundingClientRect()
+
+        expect(selectRect.top).to.be.greaterThan(menuRect.top)
+        expect(menuRect.bottom).to.be.greaterThan(selectRect.bottom)
+    })
+})
+
+Then('the left of the Menu is aligned with the left of the Input', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-multiselect"]'
+    const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]'
+
+    cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+        expect(selects.length).to.equal(1)
+        expect(menus.length).to.equal(1)
+
+        const $select = selects[0]
+        const $menu = menus[0]
+
+        const selectRect = $select.getBoundingClientRect()
+        const menuRect = $menu.getBoundingClientRect()
+
+        expect(selectRect.left).to.be.closeTo(menuRect.left, 1)
+    })
+})
+
+Then('the Menu and the Input have an equal width', () => {
+    const inputDataTest = '[data-test="dhis2-uicore-multiselect"] .root-input'
+    const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]'
+
+    cy.getAll(inputDataTest, menuDataTest).should(([inputs, menus]) => {
+        expect(inputs.length).to.equal(1)
+        expect(menus.length).to.equal(1)
+
+        const $input = inputs[0]
+        const $menu = menus[0]
+
+        const inputRect = $input.getBoundingClientRect()
+        const menuRect = $menu.getBoundingClientRect()
+
+        expect(inputRect.width).to.be.closeTo(menuRect.width, 1)
+    })
+})

package/src/multi-select/features/position.feature

@@ -0,0 +1,46 @@
+Feature: Position of MultiSelect menu dropdown
+
+    Scenario: Default rendering
+        Given there is enough space below the anchor to fit the MultiSelect menu
+        When the MultiSelect is clicked
+        Then the top of the menu is aligned with the bottom of the input
+        And the left of the Menu is aligned with the left of the Input
+
+    Scenario: Flipped rendering when insufficient space below
+        Given there is not enough space below the anchor to fit the MultiSelect menu
+        When the MultiSelect is clicked
+        Then the bottom of the menu is aligned with the top of the input
+        And the left of the Menu is aligned with the left of the Input
+
+    Scenario: Shifting into view when insufficient space below and above
+        Given there is not enough space above or below the anchor to fit the MultiSelect menu
+        When the MultiSelect is clicked
+        Then it is rendered on top of the MultiSelect
+        And the left of the Menu is aligned with the left of the Input
+
+    Scenario: Staying in position when the window is scrolled
+        Given there is enough space below the anchor to fit the MultiSelect menu
+        When the MultiSelect is clicked
+        And the window is scrolled down
+        Then the top of the menu is aligned with the bottom of the input
+        And the left of the Menu is aligned with the left of the Input
+
+    Scenario: Adusting the menu width when the window resizes
+        Given there is enough space below the anchor to fit the MultiSelect menu
+        When the MultiSelect is clicked
+        Then the left of the Menu is aligned with the left of the Input
+        And the Menu and the Input have an equal width
+        When the window is resized to a greater width
+        Then the left of the Menu is aligned with the left of the Input
+        And the Menu and the Input have an equal width
+
+    Scenario: Positioning the menu when an option is selected
+        Given a MultiSelect is rendered to which options can be added
+        And the input is empty
+        When the MultiSelect is clicked
+        Then the top of the menu is aligned with the bottom of the input
+        And the left of the Menu is aligned with the left of the Input
+        When an option is clicked
+        Then the Input remains the same height
+        And the top of the menu is aligned with the bottom of the input
+        And the left of the Menu is aligned with the left of the Input

package/src/multi-select/features/shows_selections/index.js

@@ -0,0 +1,18 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with options and a selection is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options and a selection')
+})
+
+Given('a MultiSelect with options and multiple selections is rendered', () => {
+    cy.visitStory('MultiSelect', 'With options and multiple selections')
+})
+
+Then('the selection is displayed', () => {
+    cy.contains('option one').should('be.visible')
+})
+
+Then('the selections are displayed', () => {
+    cy.contains('option one').should('be.visible')
+    cy.contains('option two').should('be.visible')
+})

package/src/multi-select/features/shows_selections.feature

@@ -0,0 +1,9 @@
+Feature: Show current selections
+
+    Scenario: The multiselect has a single selection
+        Given a MultiSelect with options and a selection is rendered
+        Then the selection is displayed
+
+    Scenario: The multiselect has multiple selections
+        Given a MultiSelect with options and multiple selections is rendered
+        Then the selections are displayed

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

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { FilterableMenu as CommonFilterableMenu } from '../select/index.js'
+import { Menu } from './menu.js'
+
+const FilterableMenu = ({
+    dataTest,
+    options,
+    onChange,
+    selected,
+    empty,
+    handleClose,
+    handleFocusInput,
+    placeholder,
+    noMatchText,
+}) => (
+    <CommonFilterableMenu
+        dataTest={dataTest}
+        options={options}
+        onChange={onChange}
+        selected={selected}
+        empty={empty}
+        handleClose={handleClose}
+        handleFocusInput={handleFocusInput}
+        placeholder={placeholder}
+        noMatchText={noMatchText}
+        Menu={Menu}
+    />
+)
+
+FilterableMenu.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    noMatchText: PropTypes.string.isRequired,
+    empty: PropTypes.node,
+    handleClose: PropTypes.func,
+    handleFocusInput: PropTypes.func,
+    options: PropTypes.node,
+    placeholder: PropTypes.string,
+    selected: PropTypes.arrayOf(PropTypes.string),
+    onChange: PropTypes.func,
+}
+
+export { FilterableMenu }

package/src/multi-select/index.js

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

package/src/multi-select/input.js

@@ -0,0 +1,129 @@
+import { requiredIf } from '@dhis2/prop-types'
+import { colors } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+import {
+    InputClearButton,
+    InputPlaceholder,
+    InputPrefix,
+} from '../select/index.js'
+import { SelectionList } from './selection-list.js'
+
+const Input = ({
+    selected,
+    onChange,
+    clearable,
+    clearText,
+    placeholder,
+    dataTest,
+    prefix,
+    options,
+    className,
+    disabled,
+    inputMaxHeight = '100px',
+    collapseSelectionAfter,
+}) => {
+    const hasSelection = selected.length > 0
+    const shouldCollapse =
+        hasSelection &&
+        typeof collapseSelectionAfter === 'number' &&
+        selected.length > collapseSelectionAfter
+    const onClear = (e) => {
+        const data = { selected: [] }
+
+        e.stopPropagation()
+        onChange(data, e)
+    }
+
+    return (
+        <div className={cx('root', className)}>
+            <InputPrefix prefix={prefix} dataTest={`${dataTest}-prefix`} />
+            {!hasSelection && !prefix && (
+                <InputPlaceholder
+                    placeholder={placeholder}
+                    dataTest={`${dataTest}-placeholder`}
+                />
+            )}
+            {hasSelection && shouldCollapse && (
+                <span
+                    className="collapsed-selection-text"
+                    data-test={`${dataTest}-selection-count`}
+                >
+                    {i18n.t('{{count}} selected', { count: selected.length })}
+                </span>
+            )}
+            {hasSelection && !shouldCollapse && (
+                <div className="root-input">
+                    {/* the wrapper div above is necessary to enforce wrapping on overflow */}
+                    <SelectionList
+                        selected={selected}
+                        onChange={onChange}
+                        options={options}
+                        disabled={disabled}
+                    />
+                </div>
+            )}
+            {hasSelection && clearable && !disabled && (
+                <div className="root-right">
+                    <InputClearButton
+                        onClear={onClear}
+                        clearText={clearText}
+                        dataTest={`${dataTest}-clear`}
+                    />
+                </div>
+            )}
+
+            <style jsx>{`
+                .root {
+                    display: flex;
+                    align-items: center;
+                    color: ${colors.grey900};
+                    font-size: 14px;
+                    line-height: 16px;
+                }
+
+                .root-input {
+                    overflow-y: auto;
+                    flex: 1;
+                    display: flex;
+                    flex-flow: wrap;
+                    gap: 4px;
+                }
+
+                .root-right {
+                    margin-inline-start: auto;
+                }
+
+                .collapsed-selection-text {
+                    flex: 1;
+                    user-select: none;
+                }
+            `}</style>
+
+            <style jsx>{`
+                .root-input {
+                    max-height: ${inputMaxHeight};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Input.propTypes = {
+    dataTest: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    clearText: requiredIf((props) => props.clearable, PropTypes.string),
+    clearable: PropTypes.bool,
+    collapseSelectionAfter: PropTypes.number,
+    disabled: PropTypes.bool,
+    inputMaxHeight: PropTypes.string,
+    options: PropTypes.node,
+    placeholder: PropTypes.string,
+    prefix: PropTypes.string,
+    selected: PropTypes.arrayOf(PropTypes.string),
+    onChange: PropTypes.func,
+}
+
+export { Input }