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

package/src/single-select/features/can_be_disabled.feature

@@ -0,0 +1,32 @@
+Feature: Disabled SingleSelect
+
+    Scenario: The disabled singleselect has a selection
+        Given a disabled SingleSelect with options and a selection is rendered
+        Then the selection is displayed
+
+    Scenario: The user clicks a disabled SingleSelect
+        Given a disabled SingleSelect with options is rendered
+        And the SingleSelect is closed
+        When the SingleSelect input is clicked
+        Then the options are not rendered
+
+    Scenario: The user presses the down arrowkey
+        Given a disabled SingleSelect with options is rendered
+        And the SingleSelect is closed
+        And the SingleSelect is focused
+        When the down arrowkey is pressed on the focused element
+        Then the options are not rendered
+
+    Scenario: The user presses the up arrowkey
+        Given a disabled SingleSelect with options is rendered
+        And the SingleSelect is closed
+        And the SingleSelect is focused
+        When the up arrowkey is pressed on the focused element
+        Then the options are not rendered
+
+    Scenario: The user presses the spacebar
+        Given a disabled SingleSelect with options is rendered
+        And the SingleSelect is closed
+        And the SingleSelect is focused
+        When the spacebar is pressed on the focused element
+        Then the options are not rendered

package/src/single-select/features/can_be_empty/index.js

@@ -0,0 +1,28 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an empty SingleSelect is rendered', () => {
+    cy.visitStory('SingleSelect', 'Empty')
+})
+
+Given('an empty SingleSelect with custom empty text is rendered', () => {
+    cy.visitStory('SingleSelect', 'Empty with empty text')
+})
+
+Given('an empty SingleSelect with custom empty component is rendered', () => {
+    cy.visitStory('SingleSelect', 'Empty with empty component')
+})
+
+Then('an empty menu is displayed', () => {
+    cy.get('[data-test="dhis2-uicore-layer"]').should('exist')
+})
+
+Then('the custom empty text is displayed', () => {
+    cy.get('[data-test="dhis2-uicore-singleselect-empty"]')
+        .contains('Custom empty text')
+        .should('be.visible')
+})
+
+Then('the custom empty component is displayed', () => {
+    cy.contains('Custom empty component').should('be.visible')
+    cy.get('.custom-empty').should('exist')
+})

package/src/single-select/features/can_be_empty.feature

@@ -0,0 +1,16 @@
+Feature: Loading status
+
+    Scenario: The user opens an empty SingleSelect
+        Given an empty SingleSelect is rendered
+        When the SingleSelect input is clicked
+        Then an empty menu is displayed
+
+    Scenario: The user opens an empty SingleSelect with custom empty text
+        Given an empty SingleSelect with custom empty text is rendered
+        When the SingleSelect input is clicked
+        Then the custom empty text is displayed
+
+    Scenario: The user opens an empty SingleSelect with a custom empty component
+        Given an empty SingleSelect with custom empty component is rendered
+        When the SingleSelect input is clicked
+        Then the custom empty component is displayed

package/src/single-select/features/can_be_filtered/index.js

@@ -0,0 +1,23 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a filterable SingleSelect with options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With filter field')
+})
+
+When('the user enters a filter string', () => {
+    cy.focused().type('one')
+})
+
+When("the user enters a filter string that doesn't match any options", () => {
+    cy.focused().type('does not exist')
+})
+
+Then('the matching options are displayed', () => {
+    cy.contains('option one').should('be.visible')
+    cy.contains('option two').should('not.exist')
+    cy.contains('option three').should('not.exist')
+})
+
+Then('the no match text is displayed', () => {
+    cy.contains('No match found').should('be.visible')
+})

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

@@ -0,0 +1,14 @@
+Feature: Filtering the SingleSelect options
+
+    Scenario: The user enters a filter string to filter the options
+        Given a filterable SingleSelect with options is rendered
+        And the SingleSelect 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 SingleSelect with options is rendered
+        And the SingleSelect 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/single-select/features/can_be_opened_and_closed/index.js

@@ -0,0 +1,32 @@
+import { Given, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with options is rendered', () => {
+    cy.visitStory('SingleSelect', 'With options')
+})
+
+Given('the SingleSelect 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 SingleSelect 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/single-select/features/can_be_opened_and_closed.feature

@@ -0,0 +1,41 @@
+Feature: Opening and closing the SingleSelect
+
+    Scenario: The user clicks the SingleSelect input to display the options
+        Given a SingleSelect with options is rendered
+        And the SingleSelect is closed
+        When the SingleSelect input is clicked
+        Then the options are displayed
+
+    Scenario: The user presses the down arrowkey to display the options
+        Given a SingleSelect with options is rendered
+        And the SingleSelect is closed
+        And the SingleSelect 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 SingleSelect with options is rendered
+        And the SingleSelect is closed
+        And the SingleSelect 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 SingleSelect with options is rendered
+        And the SingleSelect is closed
+        And the SingleSelect 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 SingleSelect with options is rendered
+        And the SingleSelect 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 SingleSelect with options is rendered
+        And the SingleSelect is open
+        And the SingleSelect is focused
+        When the escape key is pressed on the focused element
+        Then the options are not rendered

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

@@ -0,0 +1,44 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with options and onChange handler is rendered', () => {
+    cy.visitStory('SingleSelect', 'With options and on change')
+})
+
+Given(
+    'a SingleSelect with options, a selection and onChange handler is rendered',
+    () => {
+        cy.visitStory('SingleSelect', 'With options, a selection and on change')
+    }
+)
+
+Given('the SingleSelect is open', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+
+    cy.contains('option one').should('exist')
+    cy.contains('option two').should('exist')
+    cy.contains('option three').should('exist')
+})
+
+When('the SingleSelect 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 SingleSelect has focus', () => {
+    cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-select-input')
+})

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

@@ -0,0 +1,26 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'a SingleSelect with options with a duplicate value and this value is selected',
+    () => {
+        cy.visitStory('SingleSelect', '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(
+        '[data-test="dhis2-uicore-singleselectoption"]:contains("option one")'
+    ).should('have.class', 'active')
+
+    cy.get(
+        '[data-test="dhis2-uicore-singleselectoption"]:contains("option one a")'
+    ).should('have.class', 'active')
+})

package/src/single-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 SingleSelect has options with a duplicate value and this value is selected
+        Given a SingleSelect with options with a duplicate value and this value is selected
+        And the SingleSelect 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/single-select/features/menu_width_matches_input/index.js

@@ -0,0 +1,53 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelect with hidden sibling elements', () => {
+    cy.visitStory('SingleSelect', 'Menu width changing')
+    cy.get('[data-test="dhis2-uicore-singleselect"]').then(($el) => {
+        cy.wrap($el.outerWidth()).as('originalWidth')
+    })
+})
+When('the button is clicked', () => {
+    cy.get('button:contains("Toggle")').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-singleselect"]').then(($el) => {
+        const newWidth = $el.outerWidth()
+        cy.get('@originalWidth').should('be.greaterThan', newWidth)
+    })
+})
+When('the SingleSelect menu is open', () => {
+    cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should(
+        'be.visible'
+    )
+})
+Then('the SingleSelect input is left aligned with the menu', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-singleselect"]'
+    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 SingleSelect 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/single-select/features/menu_width_matches_input.feature

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

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

@@ -0,0 +1,111 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    'there is enough space below the anchor to fit the SingleSelect menu',
+    () => {
+        cy.visitStory('SingleSelect', 'Default position')
+    }
+)
+
+Given(
+    'there is not enough space below the anchor to fit the SingleSelect menu',
+    () => {
+        cy.visitStory('SingleSelect', 'Flipped position')
+    }
+)
+
+Given(
+    'there is not enough space above or below the anchor to fit the SingleSelect menu',
+    () => {
+        cy.visitStory('SingleSelect', 'Shifted into view')
+    }
+)
+
+When('the SingleSelect is clicked', () => {
+    cy.get('[data-test="dhis2-uicore-singleselect"]').click()
+})
+
+When('the window is scrolled down', () => {
+    // Ensure the body can scroll first
+    cy.get('body').then(($body) => {
+        $body.height('5000px')
+    })
+    cy.scrollTo(0, 800)
+})
+
+Then('the top of the menu is aligned with the bottom of the input', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-singleselect"]'
+    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-singleselect"]'
+    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 SingleSelect', () => {
+    const selectDataTest = '[data-test="dhis2-uicore-singleselect"]'
+    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 SingleSelect is aligned with the left of the anchor',
+    () => {
+        const selectDataTest = '[data-test="dhis2-uicore-singleselect"]'
+        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)
+        })
+    }
+)

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

@@ -0,0 +1,26 @@
+Feature: Position of SingleSelect menu dropdown
+
+    Scenario: Default rendering
+        Given there is enough space below the anchor to fit the SingleSelect menu
+        When the SingleSelect is clicked
+        Then the top of the menu is aligned with the bottom of the input
+        And the left of the SingleSelect is aligned with the left of the anchor
+
+    Scenario: Flipped rendering when insufficient space below
+        Given there is not enough space below the anchor to fit the SingleSelect menu
+        When the SingleSelect is clicked
+        Then the bottom of the menu is aligned with the top of the input
+        And the left of the SingleSelect is aligned with the left of the anchor
+
+    Scenario: Shifting into view when insufficient space below and above
+        Given there is not enough space above or below the anchor to fit the SingleSelect menu
+        When the SingleSelect is clicked
+        Then it is rendered on top of the SingleSelect
+        And the left of the SingleSelect is aligned with the left of the anchor
+
+    Scenario: Staying in position during when the window is scrolled
+        Given there is enough space below the anchor to fit the SingleSelect menu
+        When the SingleSelect 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 SingleSelect is aligned with the left of the anchor

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

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

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

@@ -0,0 +1,5 @@
+Feature: Show current selections
+
+    Scenario: The singleselect has a selection
+        Given a SingleSelect with options and a selection is rendered
+        Then the selection is displayed

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

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { FilterableMenu as CommonFilterableMenu } from '../select/index.js'
+import { Menu } from './menu.js'
+
+export 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.string,
+    onChange: PropTypes.func,
+}

package/src/single-select/index.js

@@ -0,0 +1 @@
+export { SingleSelect } from './single-select.js'

package/src/single-select/input.js

@@ -0,0 +1,101 @@
+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 {
+    InputClearButton,
+    InputPlaceholder,
+    InputPrefix,
+} from '../select/index.js'
+import { Selection } from './selection.js'
+
+const Input = ({
+    selected,
+    onChange,
+    clearable,
+    clearText,
+    placeholder,
+    dataTest,
+    prefix,
+    options,
+    className,
+    disabled,
+    inputMaxHeight = '100px',
+}) => {
+    const hasSelection = selected && typeof selected === 'string'
+    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 && (
+                <div className="root-input">
+                    {/* the wrapper div above is necessary to enforce wrapping on overflow */}
+                    <Selection selected={selected} options={options} />
+                </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;
+                }
+
+                .root-right {
+                    margin-inline-start: auto;
+                }
+            `}</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,
+    disabled: PropTypes.bool,
+    inputMaxHeight: PropTypes.string,
+    options: PropTypes.node,
+    placeholder: PropTypes.string,
+    prefix: PropTypes.string,
+    selected: PropTypes.string,
+    onChange: PropTypes.func,
+}
+
+export { Input }