@dhis2-ui/select 10.16.2 → 10.16.3

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 }

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 }