@dhis2-ui/selector-bar 10.16.1 → 10.16.3-alpha.1

package/src/selector-bar/__stories__/with-multiple-rows.js

@@ -0,0 +1,131 @@
+import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree'
+import React from 'react'
+import { SelectorBar, SelectorBarItem } from '../../index.js'
+import {
+    MenuSelect,
+    createDecoratorCustomDataProvider,
+    createStatefulDecorator,
+    dataSets,
+    decoratorCommonStyles,
+    workflows,
+} from './common.js'
+
+export const WithMultipleRows = (
+    _,
+    {
+        workflow,
+        setWorkflow,
+        workflowOpen,
+        setWorkflowOpen,
+        dataSet,
+        setDataSet,
+        dataSetOpen,
+        setDataSetOpen,
+        orgUnit,
+        setOrgUnit,
+        orgUnitOpen,
+        setOrgUnitOpen,
+    }
+) => {
+    return (
+        <div className="narrow-container">
+            <SelectorBar
+                disableClearSelections
+                onClearSelectionClick={() => null}
+            >
+                <SelectorBarItem
+                    disabled={false}
+                    label="Workflow"
+                    value={workflow?.label}
+                    noValueMessage="Choose a workflow"
+                    open={workflowOpen}
+                    setOpen={setWorkflowOpen}
+                >
+                    <MenuSelect
+                        values={workflows}
+                        selected={workflow?.value}
+                        onChange={({ selected }) => {
+                            setWorkflow(
+                                workflows.find(
+                                    (currentWorkflow) =>
+                                        selected === currentWorkflow.value
+                                )
+                            )
+                            setWorkflowOpen(false)
+                        }}
+                    />
+                </SelectorBarItem>
+
+                <SelectorBarItem
+                    disabled={!workflow}
+                    label="Data set"
+                    value={dataSet?.label}
+                    noValueMessage="Choose a data set"
+                    open={dataSetOpen}
+                    setOpen={setDataSetOpen}
+                >
+                    <MenuSelect
+                        values={dataSets}
+                        selected={dataSet?.value}
+                        onChange={({ selected }) => {
+                            setDataSet(
+                                dataSets.find(
+                                    (currentWorkflow) =>
+                                        selected === currentWorkflow.value
+                                )
+                            )
+                            setDataSetOpen(false)
+                        }}
+                    />
+                </SelectorBarItem>
+
+                <SelectorBarItem
+                    disabled={!workflow && !dataSet}
+                    label="Org unit"
+                    value={orgUnit?.displayName}
+                    noValueMessage="Choose an organisation unit"
+                    open={orgUnitOpen}
+                    setOpen={setOrgUnitOpen}
+                >
+                    <div
+                        style={{
+                            width: 400,
+                            minHeight: 400,
+                            maxHeight: '70vh',
+                        }}
+                    >
+                        <OrganisationUnitTree
+                            singleSelection
+                            onChange={(nextOrgUnit, evt) => {
+                                evt.stopPropagation()
+                                setOrgUnit(nextOrgUnit)
+                                setOrgUnitOpen(false)
+                            }}
+                            roots={['A0000000000']}
+                            selected={orgUnit ? [orgUnit.path] : []}
+                        />
+                    </div>
+                </SelectorBarItem>
+            </SelectorBar>
+
+            <p style={{ padding: '0 16px', textAlign: 'center' }}>
+                This story shows the selection bar component with multiple rows
+                when a workflow has been selected.
+            </p>
+
+            <style jsx>{`
+                .narrow-container {
+                    margin: 0 auto;
+                    width: 100%;
+                    max-width: 600px;
+                }
+            `}</style>
+        </div>
+    )
+}
+
+WithMultipleRows.decorators = [
+    decoratorCommonStyles,
+    createStatefulDecorator({ workflow: workflows[0] }),
+    createDecoratorCustomDataProvider(),
+]

package/src/selector-bar/__stories__/with-right-hand-side-content.js

@@ -0,0 +1,103 @@
+import { Button } from '@dhis2-ui/button'
+import React from 'react'
+import { SelectorBar, SelectorBarItem } from '../../index.js'
+import {
+    OrgUnitSelect,
+    MenuSelect,
+    createDecoratorCustomDataProvider,
+    createStatefulDecorator,
+    decoratorCommonStyles,
+    workflows,
+} from './common.js'
+
+const RHSContent = () => (
+    <div className="rhs-content">
+        <Button small>Options</Button>
+        <style jsx>{`
+            .rhs-content {
+                display: flex;
+                height: 40px;
+                padding: 0 16px;
+                align-items: center;
+            }
+        `}</style>
+    </div>
+)
+
+export const WithAdditionalContent = (
+    _,
+    {
+        workflow,
+        setWorkflow,
+        workflowOpen,
+        setWorkflowOpen,
+        orgUnit,
+        setOrgUnit,
+        orgUnitOpen,
+        setOrgUnitOpen,
+    }
+) => {
+    return (
+        <SelectorBar
+            disableClearSelections={!workflow || !orgUnit}
+            onClearSelectionClick={() => {
+                setWorkflow(null)
+                setOrgUnit(null)
+            }}
+            additionalContent={<RHSContent />}
+        >
+            <SelectorBarItem
+                disabled={false}
+                label="Workflow"
+                value={workflow?.label}
+                noValueMessage="Choose a workflow"
+                open={workflowOpen}
+                setOpen={setWorkflowOpen}
+                onClearSelectionClick={() => {
+                    setWorkflow(null)
+                }}
+            >
+                <MenuSelect
+                    values={workflows}
+                    selected={workflow?.value}
+                    onChange={({ selected }) => {
+                        setWorkflow(
+                            workflows.find(
+                                (currentWorkflow) =>
+                                    selected === currentWorkflow.value
+                            )
+                        )
+                        setWorkflowOpen(false)
+                    }}
+                />
+            </SelectorBarItem>
+
+            <SelectorBarItem
+                disabled={!workflow}
+                label="Org unit"
+                value={orgUnit?.displayName}
+                noValueMessage="Choose an organisation unit"
+                open={orgUnitOpen}
+                setOpen={setOrgUnitOpen}
+                onClearSelectionClick={() => {
+                    setOrgUnit(null)
+                }}
+            >
+                <OrgUnitSelect
+                    selected={orgUnit ? [orgUnit.path] : []}
+                    onChange={(nextOrgUnit, evt) => {
+                        evt.stopPropagation()
+                        setOrgUnit(nextOrgUnit)
+                        setOrgUnitOpen(false)
+                    }}
+                />
+            </SelectorBarItem>
+        </SelectorBar>
+    )
+}
+
+WithAdditionalContent.decorators = [
+    decoratorCommonStyles,
+    createStatefulDecorator(),
+    createDecoratorCustomDataProvider(),
+]

package/src/selector-bar/__stories__/with-some-inputs.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import { SelectorBar, SelectorBarItem } from '../../index.js'
+import {
+    OrgUnitSelect,
+    MenuSelect,
+    createDecoratorCustomDataProvider,
+    createStatefulDecorator,
+    decoratorCommonStyles,
+    workflows,
+} from './common.js'
+
+export const WithSomeInputs = (
+    _,
+    {
+        workflow,
+        setWorkflow,
+        workflowOpen,
+        setWorkflowOpen,
+        orgUnit,
+        setOrgUnit,
+        orgUnitOpen,
+        setOrgUnitOpen,
+    }
+) => {
+    return (
+        <SelectorBar
+            disableClearSelections={!workflow && !orgUnit}
+            onClearSelectionClick={() => {
+                setWorkflow(null)
+                setOrgUnit(null)
+            }}
+        >
+            <SelectorBarItem
+                disabled={false}
+                label="Workflow"
+                value={workflow?.label}
+                noValueMessage="Choose a workflow"
+                open={workflowOpen}
+                setOpen={setWorkflowOpen}
+                onClearSelectionClick={() => {
+                    setWorkflow(null)
+                }}
+            >
+                <MenuSelect
+                    values={workflows}
+                    selected={workflow?.value}
+                    onChange={({ selected }) => {
+                        setWorkflow(
+                            workflows.find(
+                                (currentWorkflow) =>
+                                    selected === currentWorkflow.value
+                            )
+                        )
+                        setWorkflowOpen(false)
+                    }}
+                />
+            </SelectorBarItem>
+
+            <SelectorBarItem
+                disabled={!workflow}
+                label="Org unit"
+                value={orgUnit?.displayName}
+                noValueMessage="Choose an organisation unit"
+                open={orgUnitOpen}
+                setOpen={setOrgUnitOpen}
+                onClearSelectionClick={() => {
+                    setOrgUnit(null)
+                }}
+            >
+                <OrgUnitSelect
+                    selected={orgUnit ? [orgUnit.path] : []}
+                    onChange={(nextOrgUnit, evt) => {
+                        evt.stopPropagation()
+                        setOrgUnit(nextOrgUnit)
+                        setOrgUnitOpen(false)
+                    }}
+                />
+            </SelectorBarItem>
+            <SelectorBarItem
+                displayOnly={true}
+                label="Person"
+                value="John doe"
+                onClearSelectionClick={() => {
+                    alert('This selection would be cleared')
+                }}
+            />
+        </SelectorBar>
+    )
+}
+
+WithSomeInputs.decorators = [
+    decoratorCommonStyles,
+    createStatefulDecorator({ workflow: workflows[0] }),
+    createDecoratorCustomDataProvider(),
+]

package/src/selector-bar/index.js

@@ -0,0 +1 @@
+export { SelectorBar } from './selector-bar.js'

package/src/selector-bar/selector-bar.js

@@ -0,0 +1,171 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import { Button } from '@dhis2-ui/button'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useRef, useState, useEffect } from 'react'
+import i18n from '../locales/index.js'
+
+const ClearSelection = ({ disabled, onClick }) => {
+    return (
+        <div className="clear-selections">
+            <Button small secondary disabled={disabled} onClick={onClick}>
+                {i18n.t('Clear selections')}
+            </Button>
+
+            <style jsx>{`
+                .clear-selections {
+                    display: flex;
+                    align-items: center;
+                    height: 40px;
+                    padding: 0 ${spacers.dp8};
+                }
+            `}</style>
+        </div>
+    )
+}
+
+ClearSelection.propTypes = {
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+}
+
+export const SelectorBar = ({
+    className,
+    children,
+    onClearSelectionClick,
+    dataTest = 'dhis2-ui-selectorbar',
+    disableClearSelections,
+    additionalContent,
+    ariaLabel,
+}) => {
+    const container = useRef(null)
+
+    const [childrenToFocus, setChildrenToFocus] = useState([])
+
+    useEffect(() => {
+        if (container.current) {
+            const controlsDiv = container.current.querySelector('.controls')
+            if (controlsDiv) {
+                const childElements = Array.from(controlsDiv.children)
+                childElements.forEach((child) => {
+                    child.tabIndex = -1
+                })
+                setChildrenToFocus(childElements)
+            }
+        }
+    }, [children])
+
+    const handleKeyDown = (event) => {
+        const currentFocus = document.activeElement
+
+        if (container.current && container.current === currentFocus) {
+            if (childrenToFocus.length > 0 && childrenToFocus[0]) {
+                childrenToFocus[0].focus()
+            }
+            return
+        }
+        if (!childrenToFocus.length) {
+            return
+        }
+
+        const currentIndex = childrenToFocus.findIndex(
+            (element) => element === currentFocus
+        )
+
+        if (currentIndex === -1) {
+            return
+        }
+
+        if (event.key === 'ArrowRight') {
+            event.preventDefault()
+            const nextIndex = (currentIndex + 1) % childrenToFocus.length
+            childrenToFocus[nextIndex].focus()
+        }
+
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault()
+            const prevIndex =
+                (currentIndex - 1 + childrenToFocus.length) %
+                childrenToFocus.length
+            childrenToFocus[prevIndex].focus()
+        }
+    }
+
+    return (
+        <>
+            <div
+                className={cx(
+                    'container',
+                    { withRHSContents: additionalContent },
+                    className
+                )}
+                data-test={dataTest}
+                onKeyDown={handleKeyDown}
+                tabIndex={0}
+                ref={container}
+                role="toolbar"
+                aria-label={ariaLabel}
+            >
+                <div className="controls">
+                    {/*                     {React.Children.map(children, (child, index) =>
+                        React.cloneElement(child, {
+                            ref: childrenRefs[index],
+                        })
+                    )} */}
+                    {children}
+                    {onClearSelectionClick && (
+                        <ClearSelection
+                            disabled={disableClearSelections}
+                            onClick={onClearSelectionClick}
+                        />
+                    )}
+                </div>
+
+                {additionalContent && (
+                    <div className="additional-contents">
+                        {additionalContent}
+                    </div>
+                )}
+
+                <style jsx>{`
+                    .container {
+                        background: ${colors.white};
+                        box-shadow: inset 0 -1px 0 0 ${colors.grey400};
+                        padding-bottom: 1px;
+                    }
+
+                    .withRHSContents {
+                        display: flex;
+                    }
+
+                    .controls {
+                        display: flex;
+                        flex-wrap: wrap;
+                        flex-grow: 1;
+                        gap: 1px;
+                    }
+
+                    .additional-contents {
+                        ${
+                            /*
+                             * Specs define the space to be 12px.
+                             * 8px already come from the clear selection component
+                             */ ''
+                        }
+                        padding-inline-start: 4px;
+                    }
+                `}</style>
+            </div>
+        </>
+    )
+}
+
+SelectorBar.propTypes = {
+    children: PropTypes.any.isRequired,
+    additionalContent: PropTypes.any,
+    ariaLabel: PropTypes.string,
+    className: PropTypes.string,
+    dataTest: PropTypes.string,
+    disableClearSelections: PropTypes.bool,
+    onClearSelectionClick: PropTypes.func,
+}

package/src/selector-bar/selector-bar.prod.stories.js

@@ -0,0 +1,6 @@
+export default { title: 'SelectionBar' }
+export { WithSomeInputs } from './__stories__/with-some-inputs.js'
+export { WithAdditionalContent } from './__stories__/with-right-hand-side-content.js'
+export { KeepOrgUnitExpanded } from './__stories__/keep-org-unit-expanded.js'
+export { WithMultipleRows } from './__stories__/with-multiple-rows.js'
+export { RTL } from './__stories__/rtl.js'

package/src/selector-bar/selector-bar.test.js

@@ -0,0 +1,124 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { SelectorBarItem } from '../selector-bar-item/index.js'
+import { SelectorBar } from './selector-bar.js'
+
+const noop = () => null
+
+describe('SelectorBar', () => {
+    it('should render the selection bar items', () => {
+        render(
+            <SelectorBar>
+                <SelectorBarItem
+                    label="Selection bar item 1"
+                    noValueMessage="No value message 1"
+                    open={false}
+                    setOpen={noop}
+                >
+                    Content
+                </SelectorBarItem>
+
+                <SelectorBarItem
+                    label="Selection bar item 2"
+                    noValueMessage="No value message 2"
+                    open={false}
+                    setOpen={noop}
+                >
+                    Content
+                </SelectorBarItem>
+            </SelectorBar>
+        )
+
+        expect(screen.getByText('Selection bar item 1')).not.toBeNull()
+        expect(screen.getByText('Selection bar item 2')).not.toBeNull()
+    })
+
+    it('should not disable the clear selection button by default', () => {
+        render(
+            <SelectorBar onClearSelectionClick={noop}>
+                <SelectorBarItem
+                    label="label"
+                    noValueMessage="msg"
+                    open={false}
+                    setOpen={noop}
+                >
+                    Content
+                </SelectorBarItem>
+            </SelectorBar>
+        )
+
+        const clearBtn = screen.getByText('Clear selections')
+        expect(clearBtn).not.toBeNull()
+        expect(clearBtn).not.toBeDisabled()
+    })
+
+    it('should disable the clear selection button', () => {
+        render(
+            <SelectorBar disableClearSelections onClearSelectionClick={noop}>
+                <SelectorBarItem
+                    label="label"
+                    noValueMessage="msg"
+                    open={false}
+                    setOpen={noop}
+                >
+                    Content
+                </SelectorBarItem>
+            </SelectorBar>
+        )
+
+        const clearBtn = screen.getByText('Clear selections')
+        expect(clearBtn).not.toBeNull()
+        expect(clearBtn).toBeDisabled()
+    })
+
+    it('should render the optional content', () => {
+        render(
+            <SelectorBar additionalContent={<div>Foobar</div>}>
+                <SelectorBarItem
+                    label="label"
+                    noValueMessage="msg"
+                    open={false}
+                    setOpen={noop}
+                >
+                    Content
+                </SelectorBarItem>
+            </SelectorBar>
+        )
+
+        const extraContent = screen.getByText('Foobar')
+        expect(extraContent).not.toBeNull()
+    })
+
+    it('should render the displayOnly value', () => {
+        render(
+            <SelectorBar>
+                <SelectorBarItem
+                    displayOnly={true}
+                    label="Person"
+                    value="John doe"
+                />
+            </SelectorBar>
+        )
+
+        const value = screen.getByText('John doe')
+        expect(value).not.toBeNull()
+    })
+
+    it('should render the cross icon', () => {
+        render(
+            <SelectorBar>
+                <SelectorBarItem
+                    label="label"
+                    value="selected value"
+                    onClearSelectionClick={noop}
+                />
+            </SelectorBar>
+        )
+
+        const clearIcon = screen.getByTestId(
+            'dhis2-ui-selectorbaritem-clear-icon'
+        )
+        expect(clearIcon).not.toBeNull()
+    })
+})

package/src/selector-bar-item/features/toggle-children/index.js

@@ -0,0 +1,27 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('the selector bar item is closed', () => {
+    cy.visitStory('SelectorBarItem', 'closed no value')
+})
+
+Given('the selector bar item is open', () => {
+    cy.visitStory('SelectorBarItem', 'open no value')
+})
+
+When('the user opens the selector bar item', () => {
+    cy.contains('Selection bar item', { selector: 'button' }).click()
+})
+
+When('the user closes the selector bar item', () => {
+    cy.get('body').click('topLeft')
+})
+
+Then('the children should be displayed', () => {
+    cy.get('[data-test="dhis2-uiwidgets-singleselectfield"]').should('exist')
+})
+
+Then('the children should not be displayed', () => {
+    cy.get('[data-test="dhis2-uiwidgets-singleselectfield"]').should(
+        'not.exist'
+    )
+})

package/src/selector-bar-item/features/toggle-children.feature

@@ -0,0 +1,11 @@
+Feature: The display of the children can be toggled
+
+    Scenario: The children are being opened
+        Given the selector bar item is closed
+        When the user opens the selector bar item
+        Then the children should be displayed
+
+    Scenario: The children are being closed
+        Given the selector bar item is open
+        When the user closes the selector bar item
+        Then the children should not be displayed

package/src/selector-bar-item/index.js

@@ -0,0 +1 @@
+export { SelectorBarItem } from './selector-bar-item.js'