@dhis2-ui/select 10.16.2 → 10.16.3

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

@@ -0,0 +1,358 @@
+import { sharedPropTypes } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+import { SingleSelectOption } from '../index.js'
+import { SingleSelect } from './index.js'
+
+const description = `
+Use a select component wherever the user needs to make a selection of one or more options from a list of 6 or more options. If there are less than 6 options to choose from and space permits, use checkboxes for multiple selection and radio buttons for single selection. If the user needs to make a complex selection with a specific ordering, use a transfer instead.
+
+Learn more about using Selects at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
+
+\`\`\`js
+import { SingleSelect, SingleSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (interactive) examples, see individual stories in the 'Canvas' tab._
+`
+
+const eventHandler = (handlerName) => (payload, event) => {
+    console.log(`${handlerName} payload`, payload)
+    console.log(`${handlerName} event`, event)
+}
+
+const onChange = eventHandler('onChange')
+const onFocus = eventHandler('onFocus')
+const onBlur = eventHandler('onBlur')
+
+const CustomSingleSelectOption = ({ label, onClick }) => (
+    <div onClick={(e) => onClick({}, e)}>{label}</div>
+)
+
+CustomSingleSelectOption.propTypes = {
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+}
+
+const requiredIfArgType = {
+    table: { type: { summary: 'string' }, control: { type: 'string' } },
+}
+
+export default {
+    title: 'Single Select',
+    component: SingleSelect,
+    parameters: {
+        docs: {
+            description: { component: description },
+            // Disable stories in docs page by default, then use one representative examples
+            disable: true,
+            // Use iframe to keep dropdown menu inside story for docs page
+            inlineStories: false,
+            iframeHeight: '300px',
+        },
+    },
+    // Use 'onChange' as a default arg, otherwise components throw an error when interacted with
+    // (Maybe this could be handled in the component - as a required prop)
+    args: { className: 'select', onChange },
+    argTypes: {
+        valid: { ...sharedPropTypes.statusArgType },
+        warning: { ...sharedPropTypes.statusArgType },
+        error: { ...sharedPropTypes.statusArgType },
+        clearText: { ...requiredIfArgType },
+        noMatchText: { ...requiredIfArgType },
+    },
+}
+
+const WithOptionsTemplate = (args) => (
+    <SingleSelect {...args}>
+        <SingleSelectOption value="1" label="option one" />
+        <SingleSelectOption value="2" label="option two" />
+        <SingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+
+const EmptyTemplate = (args) => <SingleSelect {...args} />
+
+export const WithOptionsAndOnChange = WithOptionsTemplate.bind({})
+WithOptionsAndOnChange.storyName = 'With options and onChange'
+
+export const WithOptionsAndASelection = WithOptionsTemplate.bind({})
+WithOptionsAndASelection.args = { selected: '1' }
+// Enable this story as the primary for docs as a representative example
+WithOptionsAndASelection.parameters = { docs: { disable: false } }
+WithOptionsAndASelection.storyName = 'With options and a selection'
+
+export const WithOnFocus = WithOptionsTemplate.bind({})
+WithOnFocus.args = { onFocus }
+WithOnFocus.storyName = 'With on focus'
+
+export const WithOnBlur = WithOptionsTemplate.bind({})
+WithOnBlur.args = { onBlur }
+WithOnBlur.storyName = 'With onBlur'
+
+export const WithCustomOptionsAndOnChange = (args) => (
+    <SingleSelect {...args}>
+        <CustomSingleSelectOption value="1" label="option one" />
+        <CustomSingleSelectOption value="2" label="option two" />
+        <CustomSingleSelectOption value="3" label="option three" />
+    </SingleSelect>
+)
+WithCustomOptionsAndOnChange.storyName = 'With custom options and onChange'
+
+export const WithInvalidOptions = (args) => (
+    <SingleSelect {...args}>
+        <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 = (args) => (
+    <SingleSelect {...args}>
+        <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>
+)
+WithInvalidFilterableOptions.args = {
+    filterable: true,
+    noMatchText: 'No match found',
+}
+
+export const WithInitialFocus = EmptyTemplate.bind({})
+WithInitialFocus.args = { initialFocus: true }
+WithInitialFocus.parameters = { docs: { disable: true } }
+
+export const Dense = WithOptionsTemplate.bind({})
+Dense.args = { dense: true, placeholder: 'Dense sized select' }
+Dense.storyName = 'Dense'
+
+export const Empty = EmptyTemplate.bind({})
+
+export const EmptyWithEmptyText = EmptyTemplate.bind({})
+EmptyWithEmptyText.args = { empty: 'Custom empty text' }
+
+export const EmptyWithEmptyComponent = EmptyTemplate.bind({})
+EmptyWithEmptyComponent.args = {
+    empty: <div className="custom-empty">Custom empty component</div>,
+}
+
+export const WithOptionsAndLoading = WithOptionsTemplate.bind({})
+WithOptionsAndLoading.args = { loading: true }
+
+export const WithOptionsLoadingAndLoadingText = WithOptionsTemplate.bind({})
+WithOptionsLoadingAndLoadingText.args = {
+    ...WithOptionsAndLoading.args,
+    loadingText: 'Loading options',
+}
+WithOptionsLoadingAndLoadingText.storyName =
+    'With options, loading and loading text'
+
+export const WithMoreThanTenOptions = (args) => (
+    <SingleSelect {...args}>
+        <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 = (args) => (
+    <SingleSelect {...args}>
+        <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>
+)
+WithMoreThanThreeOptionsAndA100PxMaxHeight.args = { maxHeight: '100px' }
+WithMoreThanThreeOptionsAndA100PxMaxHeight.storyName =
+    'With more than three options and a 100px max-height'
+
+export const WithOptionsAndDisabled = WithOptionsTemplate.bind({})
+WithOptionsAndDisabled.args = { disabled: true }
+WithOptionsAndDisabled.storyName = 'With options and disabled'
+
+export const WithOptionsASelectionAndDisabled = WithOptionsTemplate.bind({})
+WithOptionsASelectionAndDisabled.args = {
+    ...WithOptionsAndDisabled.args,
+    ...WithOptionsAndASelection.args,
+}
+WithOptionsASelectionAndDisabled.storyName =
+    'With options, a selection and disabled'
+
+export const WithPrefix = WithOptionsTemplate.bind({})
+WithPrefix.args = { prefix: 'Prefix text', selected: '1' }
+
+export const WithPrefixAndSelection = WithOptionsTemplate.bind({})
+WithPrefixAndSelection.args = {
+    ...WithPrefix.args,
+    ...WithOptionsAndASelection.args,
+}
+
+export const WithRTL = (args) => {
+    // as options are rendered in Portal, the body dir (of the iframe) needs to be set to 'rtl'
+    useEffect(() => {
+        document.body.dir = 'rtl'
+        return () => {
+            document.body.dir = 'ltr'
+        }
+    }, [])
+
+    return (
+        <div dir="rtl">
+            <SingleSelect {...args}>
+                <SingleSelectOption value="1" label="الخيار 1" />
+                <SingleSelectOption value="2" label="الخيار 2" />
+                <SingleSelectOption value="3" label="الخيار 3" />
+            </SingleSelect>
+        </div>
+    )
+}
+WithRTL.args = {
+    prefix: 'نص البادئة',
+    ...WithOptionsAndASelection.args,
+}
+WithRTL.storyName = 'RTL Text'
+
+export const WithPlaceholder = WithOptionsTemplate.bind({})
+WithPlaceholder.args = { placeholder: 'Placeholder text' }
+
+export const WithPlaceholderAndSelection = WithOptionsTemplate.bind({})
+WithPlaceholderAndSelection.args = {
+    ...WithPlaceholder.args,
+    ...WithOptionsAndASelection.args,
+}
+
+export const WithDisabledOptionAndOnChange = (args) => (
+    <SingleSelect {...args}>
+        <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>
+)
+WithDisabledOptionAndOnChange.storyName = 'With disabled option and onChange'
+
+export const WithClearButtonSelectionAndOnChange = WithOptionsTemplate.bind({})
+WithClearButtonSelectionAndOnChange.args = {
+    ...WithOptionsAndASelection.args,
+    clearable: true,
+    clearText: 'Clear',
+}
+WithClearButtonSelectionAndOnChange.storyName =
+    'With clear button, selection and onChange'
+
+export const WithFilterField = WithOptionsTemplate.bind({})
+WithFilterField.args = { ...WithInvalidFilterableOptions.args }
+
+export const DefaultPosition = (args) => (
+    <>
+        <SingleSelect {...args}>
+            <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(#root) {
+                margin-bottom: 2000px;
+            }
+        `}</style>
+    </>
+)
+
+export const FlippedPosition = (args) => (
+    <>
+        <SingleSelect {...args}>
+            <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(#root) {
+                position: relative;
+                height: 500px;
+                max-height: 500px;
+            }
+            :global(#root) {
+                padding-top: 400px !important;
+            }
+        `}</style>
+    </>
+)
+
+export const ShiftedIntoView = (args) => (
+    <>
+        <SingleSelect {...args}>
+            <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(#root) {
+                position: relative;
+                height: 300px !important;
+                max-height: 300px;
+            }
+            :global(#root) {
+                padding-top: 130px !important;
+            }
+        `}</style>
+    </>
+)

package/src/single-select-field/__tests__/single-select-field.test.js

@@ -0,0 +1,29 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import React from 'react'
+import { SingleSelectField } from '../single-select-field.js'
+
+describe('<SingleSelect />', () => {
+    it('should call the onKeyDown callback when provided', () => {
+        const onKeyDown = jest.fn()
+
+        render(
+            <SingleSelectField
+                label="label"
+                placeholder="placeholder"
+                onKeyDown={onKeyDown}
+            />
+        )
+
+        fireEvent.keyDown(
+            screen.getByTestId('dhis2-uicore-singleselect-placeholder'),
+            { key: 'Enter', code: 'Enter', charCode: 13 }
+        )
+
+        expect(onKeyDown).toHaveBeenCalledWith(
+            { selected: '' },
+            expect.objectContaining({})
+        )
+
+        expect(onKeyDown).toHaveBeenCalledTimes(1)
+    })
+})

package/src/single-select-field/features/accepts_help_text/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelectField with help text is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With help text')
+})
+
+Then('the help text is visible', () => {
+    cy.contains('The help text').should('be.visible')
+})

package/src/single-select-field/features/accepts_help_text.feature

@@ -0,0 +1,5 @@
+Feature: Help text for the SingleSelectField
+
+    Scenario: Rendering a SingleSelectField with help text
+        Given a SingleSelectField with help text is rendered
+        Then the help text is visible

package/src/single-select-field/features/accepts_label/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelectField with a label is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With label')
+})
+
+Then('the label is visible', () => {
+    cy.contains('The label').should('be.visible')
+})

package/src/single-select-field/features/accepts_label.feature

@@ -0,0 +1,5 @@
+Feature: Label for the SingleSelectField
+
+    Scenario: Rendering a SingleSelectField with a label
+        Given a SingleSelectField with a label is rendered
+        Then the label is visible

package/src/single-select-field/features/accepts_validation_text/index.js

@@ -0,0 +1,9 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelectField with validation text is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With validation text')
+})
+
+Then('the validation text is visible', () => {
+    cy.contains('The validation text').should('be.visible')
+})

package/src/single-select-field/features/accepts_validation_text.feature

@@ -0,0 +1,5 @@
+Feature: Validation text for the SingleSelectField
+
+    Scenario: Rendering a SingleSelectField with validation text
+        Given a SingleSelectField with validation text is rendered
+        Then the validation text is visible

package/src/single-select-field/features/can_be_required/index.js

@@ -0,0 +1,11 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a SingleSelectField with label and a required flag is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With label and required status')
+})
+
+Then('the required indicator is visible', () => {
+    cy.get(
+        '[data-test="dhis2-uiwidgets-singleselectfield-label-required"]'
+    ).should('be.visible')
+})

package/src/single-select-field/features/can_be_required.feature

@@ -0,0 +1,5 @@
+Feature: Required status for the SingleSelectField
+
+    Scenario: Rendering a SingleSelectField that is required
+        Given a SingleSelectField with label and a required flag is rendered
+        Then the required indicator is visible

package/src/single-select-field/features/has_default_clear_text/index.js

@@ -0,0 +1,16 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a clearable SingleSelectField with selected option is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With clearable and selected option')
+})
+
+When('the clear button is hovered', () => {
+    cy.get('[data-test="dhis2-uicore-singleselect-clear"]').trigger(
+        'mouseover',
+        'top'
+    )
+})
+
+Then('the clear text is visible', () => {
+    cy.contains('Clear').should('be.visible')
+})

package/src/single-select-field/features/has_default_clear_text.feature

@@ -0,0 +1,6 @@
+Feature: Clear text for the SingleSelectField
+
+    Scenario: Rendering a clearable SingleSelectField
+        Given a clearable SingleSelectField with selected option is rendered
+        When the clear button is hovered
+        Then the clear text is visible

package/src/single-select-field/features/has_default_empty_text/index.js

@@ -0,0 +1,13 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an empty SingleSelectField is rendered', () => {
+    cy.visitStory('SingleSelectField', 'Without options')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+Then('the empty text is visible', () => {
+    cy.contains('No data found').should('be.visible')
+})

package/src/single-select-field/features/has_default_empty_text.feature

@@ -0,0 +1,6 @@
+Feature: Empty text for the SingleSelectField
+
+    Scenario: Rendering an empty SingleSelectField
+        Given an empty SingleSelectField is rendered
+        When the Select is opened
+        Then the empty text is visible

package/src/single-select-field/features/has_default_filter_nomatch_text/index.js

@@ -0,0 +1,17 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a filterable SingleSelectField is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With filterable')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+When('a filter that does not match any options is entered', () => {
+    cy.focused().type('Two')
+})
+
+Then('the no match text is visible', () => {
+    cy.contains('No options found').should('be.visible')
+})

package/src/single-select-field/features/has_default_filter_nomatch_text.feature

@@ -0,0 +1,7 @@
+Feature: Nomatchtext for the SingleSelectField
+
+    Scenario: Rendering a filterable SingleSelectField
+        Given a filterable SingleSelectField is rendered
+        When the Select is opened
+        And a filter that does not match any options is entered
+        Then the no match text is visible

package/src/single-select-field/features/has_default_filter_placeholder/index.js

@@ -0,0 +1,15 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a filterable SingleSelectField is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With filterable')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+Then('the filter placeholder exists', () => {
+    cy.get(
+        '[data-test="dhis2-uicore-singleselect-filterinput"] [placeholder="Type to filter options"]'
+    ).should('exist')
+})

package/src/single-select-field/features/has_default_filter_placeholder.feature

@@ -0,0 +1,6 @@
+Feature: Filter placeholder for the SingleSelectField
+
+    Scenario: Rendering a filterable SingleSelectField
+        Given a filterable SingleSelectField is rendered
+        When the Select is opened
+        Then the filter placeholder exists

package/src/single-select-field/features/has_default_loading_text/index.js

@@ -0,0 +1,13 @@
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a loading SingleSelectField is rendered', () => {
+    cy.visitStory('SingleSelectField', 'With loading')
+})
+
+When('the Select is opened', () => {
+    cy.get('[data-test="dhis2-uicore-select-input"]').click()
+})
+
+Then('the loading text is visible', () => {
+    cy.contains('Loading options').should('be.visible')
+})

package/src/single-select-field/features/has_default_loading_text.feature

@@ -0,0 +1,6 @@
+Feature: Filter placeholder for the SingleSelectField
+
+    Scenario: Rendering a filterable SingleSelectField
+        Given a loading SingleSelectField is rendered
+        When the Select is opened
+        Then the loading text is visible

package/src/single-select-field/index.js

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

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { SingleSelectOption } from '../index.js'
+import { SingleSelectField } from './index.js'
+
+export default { title: 'SingleSelectField' }
+export const WithLabel = () => (
+    <SingleSelectField label="The label">
+        <SingleSelectOption value="1" label="one" />
+        <SingleSelectOption value="2" label="two" />
+        <SingleSelectOption value="3" label="three" />
+    </SingleSelectField>
+)
+export const WithHelpText = () => (
+    <SingleSelectField helpText="The help text">
+        <SingleSelectOption value="1" label="one" />
+        <SingleSelectOption value="2" label="two" />
+        <SingleSelectOption value="3" label="three" />
+    </SingleSelectField>
+)
+export const WithValidationText = () => (
+    <SingleSelectField validationText="The validation text">
+        <SingleSelectOption value="1" label="one" />
+        <SingleSelectOption value="2" label="two" />
+        <SingleSelectOption value="3" label="three" />
+    </SingleSelectField>
+)
+export const WithLabelAndRequiredStatus = () => (
+    <SingleSelectField label="The label" required>
+        <SingleSelectOption value="1" label="one" />
+        <SingleSelectOption value="2" label="two" />
+        <SingleSelectOption value="3" label="three" />
+    </SingleSelectField>
+)
+export const WithClearableAndSelectedOption = () => (
+    <SingleSelectField selected="1" clearable>
+        <SingleSelectOption key="1" value="1" label="One" />
+    </SingleSelectField>
+)
+export const WithFilterable = () => (
+    <SingleSelectField filterable>
+        <SingleSelectOption key="1" value="1" label="One" />
+    </SingleSelectField>
+)
+export const WithLoading = () => <SingleSelectField loading />
+export const WithoutOptions = () => <SingleSelectField />