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

package/build/cjs/selector-bar-item/selector-bar-item.js

@@ -49,10 +49,19 @@ const SelectorBarItem = _ref => {
   } = _ref;
   const buttonRef = (0, _react.useRef)();
   const Icon = open ? _uiIcons.IconChevronUp24 : _uiIcons.IconChevronDown24;
+  const handleKeyDown = evt => {
+    if (open && setOpen && evt.key === 'Tab') {
+      var _buttonRef$current;
+      // Move focus to trigger and defer close so Tab advances before the popup unmounts.
+      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      requestAnimationFrame(() => setOpen(false));
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("button", {
     ref: buttonRef,
     disabled: disabled,
     onClick: () => setOpen && setOpen(true),
+    onKeyDown: handleKeyDown,
     "data-test": dataTest,
     className: _style.default.dynamic([["4226485334", [
     /*

package/build/es/selector-bar-item/selector-bar-item.js

@@ -40,10 +40,19 @@ export const SelectorBarItem = _ref => {
   } = _ref;
   const buttonRef = useRef();
   const Icon = open ? IconChevronUp24 : IconChevronDown24;
+  const handleKeyDown = evt => {
+    if (open && setOpen && evt.key === 'Tab') {
+      var _buttonRef$current;
+      // Move focus to trigger and defer close so Tab advances before the popup unmounts.
+      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      requestAnimationFrame(() => setOpen(false));
+    }
+  };
   return /*#__PURE__*/React.createElement("button", {
     ref: buttonRef,
     disabled: disabled,
     onClick: () => setOpen && setOpen(true),
+    onKeyDown: handleKeyDown,
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["4226485334", [
     /*

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/selector-bar",
-    "version": "10.16.1",
+    "version": "10.16.3-alpha.1",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,20 +33,20 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "10.16.1",
-        "@dhis2-ui/card": "10.16.1",
-        "@dhis2-ui/popper": "10.16.1",
-        "@dhis2-ui/layer": "10.16.1",
-        "@dhis2/ui-constants": "10.16.1",
-        "@dhis2/ui-icons": "10.16.1",
+        "@dhis2-ui/button": "10.16.3-alpha.1",
+        "@dhis2-ui/card": "10.16.3-alpha.1",
+        "@dhis2-ui/popper": "10.16.3-alpha.1",
+        "@dhis2-ui/layer": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-icons": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "devDependencies": {
-        "@dhis2-ui/css": "10.16.1",
-        "@dhis2-ui/menu": "10.16.1",
-        "@dhis2-ui/organisation-unit-tree": "10.16.1",
-        "@dhis2-ui/select": "10.16.1",
+        "@dhis2-ui/css": "10.16.3-alpha.1",
+        "@dhis2-ui/menu": "10.16.3-alpha.1",
+        "@dhis2-ui/organisation-unit-tree": "10.16.3-alpha.1",
+        "@dhis2-ui/select": "10.16.3-alpha.1",
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -54,7 +54,8 @@
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "types": "types"
 }

package/src/index.js

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

package/src/locales/ar/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "إلغاء تحديد ماتم تحديده"
+}

package/src/locales/cs/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Vymazat výběry"
+}

package/src/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Clear selections"
+}

package/src/locales/es/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Borrar selecciones"
+}

package/src/locales/es_419/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Borrar selecciones"
+}

package/src/locales/fr/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Effacer les sélections"
+}

package/src/locales/hi_IN/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "चयन साफ़ करें"
+}

package/src/locales/id/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Hapus semua pilihan"
+}

package/src/locales/index.js

@@ -0,0 +1,50 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n'
+
+import arTranslations from './ar/translations.json'
+import csTranslations from './cs/translations.json'
+import enTranslations from './en/translations.json'
+import esTranslations from './es/translations.json'
+import es_419Translations from './es_419/translations.json'
+import frTranslations from './fr/translations.json'
+import hi_INTranslations from './hi_IN/translations.json'
+import idTranslations from './id/translations.json'
+import loTranslations from './lo/translations.json'
+import nbTranslations from './nb/translations.json'
+import ptTranslations from './pt/translations.json'
+import ruTranslations from './ru/translations.json'
+import ukTranslations from './uk/translations.json'
+import uz_UZ_CyrlTranslations from './uz_UZ_Cyrl/translations.json'
+import uz_UZ_LatnTranslations from './uz_UZ_Latn/translations.json'
+import viTranslations from './vi/translations.json'
+import zhTranslations from './zh/translations.json'
+import zh_CNTranslations from './zh_CN/translations.json'
+
+const namespace = 'default'
+i18n.addResources('ar', namespace, arTranslations)
+i18n.addResources('cs', namespace, csTranslations)
+i18n.addResources('en', namespace, enTranslations)
+i18n.addResources('es', namespace, esTranslations)
+i18n.addResources('es_419', namespace, es_419Translations)
+i18n.addResources('fr', namespace, frTranslations)
+i18n.addResources('hi_IN', namespace, hi_INTranslations)
+i18n.addResources('id', namespace, idTranslations)
+i18n.addResources('lo', namespace, loTranslations)
+i18n.addResources('nb', namespace, nbTranslations)
+i18n.addResources('pt', namespace, ptTranslations)
+i18n.addResources('ru', namespace, ruTranslations)
+i18n.addResources('uk', namespace, ukTranslations)
+i18n.addResources('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations)
+i18n.addResources('uz_UZ_Latn', namespace, uz_UZ_LatnTranslations)
+i18n.addResources('vi', namespace, viTranslations)
+i18n.addResources('zh', namespace, zhTranslations)
+i18n.addResources('zh_CN', namespace, zh_CNTranslations)
+
+export default i18n

package/src/locales/lo/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "ລົບຕົວເລືອກ"
+}

package/src/locales/nb/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Tøm valg"
+}

package/src/locales/pt/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Limpar selecções"
+}

package/src/locales/ru/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Очистить выбор"
+}

package/src/locales/uk/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Очистити обране"
+}

package/src/locales/uz_UZ_Cyrl/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Танловларни тозалаш"
+}

package/src/locales/uz_UZ_Latn/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Tanlovlarni tozalash"
+}

package/src/locales/vi/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "Xóa các lựa chọn"
+}

package/src/locales/zh/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "清除选择"
+}

package/src/locales/zh_CN/translations.json

@@ -0,0 +1,3 @@
+{
+    "Clear selections": "清除选择"
+}

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

@@ -0,0 +1,232 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import { colors } from '@dhis2/ui-constants'
+import { Menu, MenuItem } from '@dhis2-ui/menu'
+import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree'
+import React, { useState } from 'react'
+
+export const decoratorCommonStyles = (fn) => (
+    <>
+        {fn()}
+        <style jsx>{`
+            :global(body) {
+                background: ${colors.grey100};
+                padding: 0 !important;
+            }
+
+            :global(div#root) {
+                padding: 0;
+            }
+        `}</style>
+    </>
+)
+
+export const getOrganisationUnitData = (id) => {
+    let data
+
+    if (id === 'A0000000000') {
+        data = {
+            id: 'A0000000000',
+            path: '/A0000000000',
+            displayName: 'Org Unit 1',
+            children: [
+                {
+                    id: 'A0000000001',
+                    path: '/A0000000000/A0000000001',
+                    children: [{ id: 'A0000000003' }, { id: 'A0000000004' }],
+                    displayName: 'Org Unit 2',
+                },
+                {
+                    id: 'A0000000002',
+                    path: '/A0000000000/A0000000002',
+                    children: [],
+                    displayName: 'Org Unit 3',
+                },
+                {
+                    id: 'A0000000006',
+                    path: '/A0000000000/A0000000006',
+                    children: [],
+                    displayName: 'Org Unit 7',
+                },
+            ],
+        }
+    }
+
+    if (id === 'A0000000001') {
+        data = {
+            id: 'A0000000001',
+            path: '/A0000000000/A0000000001',
+            displayName: 'Org Unit 2',
+            children: [
+                {
+                    id: 'A0000000003',
+                    path: '/A0000000000/A0000000001/A0000000003',
+                    children: [],
+                    displayName: 'Org Unit 4',
+                },
+                {
+                    id: 'A0000000004',
+                    path: '/A0000000000/A0000000001/A0000000004',
+                    children: [],
+                    displayName: 'Org Unit 5',
+                },
+            ],
+        }
+    }
+
+    if (id === 'A0000000002') {
+        data = {
+            displayName: 'Org Unit 3',
+            id: 'A0000000002',
+            path: '/A0000000000/A0000000002',
+            children: [],
+        }
+    }
+
+    if (id === 'A0000000003') {
+        data = {
+            displayName: 'Org Unit 4',
+            id: 'A0000000003',
+            path: '/A0000000000/A0000000001/A0000000003',
+            children: [
+                {
+                    id: 'A0000000007',
+                    path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+                    children: [],
+                    displayName: 'Org Unit 8',
+                },
+            ],
+        }
+    }
+
+    if (id === 'A0000000004') {
+        data = {
+            displayName: 'Org Unit 5',
+            id: 'A0000000004',
+            path: '/A0000000000/A0000000001/A0000000004',
+            children: [],
+        }
+    }
+
+    if (id === 'A0000000006') {
+        data = {
+            displayName: 'Org Unit 7',
+            id: 'A0000000006',
+            path: '/A0000000000/A0000000006',
+            children: [],
+        }
+    }
+
+    if (id === 'A0000000007') {
+        data = {
+            displayName: 'Org Unit 8',
+            id: 'A0000000007',
+            path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+            children: [],
+        }
+    }
+
+    return data
+}
+
+export const dataProviderData = {
+    organisationUnits: (_, { id }) => {
+        const data = getOrganisationUnitData(id)
+
+        if (!data) {
+            return Promise.reject(new Error('404 - Org unit not found'))
+        }
+
+        return Promise.resolve(data)
+    },
+}
+
+export const createDecoratorCustomDataProvider = (args) => {
+    const data = args?.data || dataProviderData
+
+    return (Story) => {
+        window.dataProviderData = data
+
+        return (
+            <CustomDataProvider data={data}>
+                <Story />
+            </CustomDataProvider>
+        )
+    }
+}
+
+export const createStatefulDecorator = (args) => {
+    return (fn) => {
+        const [workflow, setWorkflow] = useState(args?.workflow || null)
+        const [workflowOpen, setWorkflowOpen] = useState(
+            args?.workflowOpen || false
+        )
+        const [dataSet, setDataSet] = useState(args?.dataSet || null)
+        const [dataSetOpen, setDataSetOpen] = useState(
+            args?.dataSetOpen || false
+        )
+        const [orgUnit, setOrgUnit] = useState(args?.orgUnit || null)
+        const [orgUnitOpen, setOrgUnitOpen] = useState(
+            args?.orgUnitOpen || false
+        )
+
+        return (
+            <>
+                {fn({
+                    workflow,
+                    setWorkflow,
+                    workflowOpen,
+                    setWorkflowOpen,
+                    dataSet,
+                    setDataSet,
+                    dataSetOpen,
+                    setDataSetOpen,
+                    orgUnit,
+                    setOrgUnit,
+                    orgUnitOpen,
+                    setOrgUnitOpen,
+                })}
+            </>
+        )
+    }
+}
+
+export const workflows = [
+    { value: 'm<4y', label: 'Mortality < 4 years' },
+    { value: 'm<5y', label: 'Mortality < 5 years' },
+]
+
+export const dataSets = [
+    { value: 'data-set-1', label: 'Data set 1' },
+    { value: 'data-set-2', label: 'Data set 2' },
+    { value: 'data-set-3', label: 'Data set 3' },
+]
+
+export const MenuSelect = ({ values, selected, onChange }) => {
+    return (
+        <div style={{ width: 400 }}>
+            <Menu>
+                {values.map(({ value, label }) => (
+                    <MenuItem
+                        key={value}
+                        label={label}
+                        active={selected === value}
+                        onClick={() => onChange({ selected: value })}
+                    />
+                ))}
+            </Menu>
+        </div>
+    )
+}
+
+export const OrgUnitSelect = ({ onChange, selected }) => {
+    return (
+        <div style={{ width: 400, minHeight: 400, maxHeight: '70vh' }}>
+            <OrganisationUnitTree
+                singleSelection
+                onChange={onChange}
+                roots={['A0000000000']}
+                selected={selected}
+            />
+        </div>
+    )
+}

package/src/selector-bar/__stories__/keep-org-unit-expanded.js

@@ -0,0 +1,71 @@
+import { OrganisationUnitTree } from '@dhis2-ui/organisation-unit-tree'
+import React, { useState } from 'react'
+import { SelectorBar, SelectorBarItem } from '../../index.js'
+import {
+    createStatefulDecorator,
+    decoratorCommonStyles,
+    createDecoratorCustomDataProvider,
+} from './common.js'
+
+export const KeepOrgUnitExpanded = (
+    _,
+    { orgUnit, setOrgUnit, orgUnitOpen, setOrgUnitOpen }
+) => {
+    const [expanded, setExpanded] = useState([])
+    const handleExpand = ({ path }) => setExpanded([...expanded, path])
+    const handleCollapse = ({ path }) =>
+        setExpanded(expanded.filter((p) => p !== path))
+
+    return (
+        <>
+            <SelectorBar
+                disableClearSelections={!orgUnit}
+                onClearSelectionClick={() => setOrgUnit(null)}
+            >
+                <SelectorBarItem
+                    label="Org unit"
+                    value={orgUnit?.displayName}
+                    noValueMessage="Choose an organisation unit"
+                    open={orgUnitOpen}
+                    setOpen={setOrgUnitOpen}
+                    onClearSelectionClick={() => {
+                        setOrgUnit(null)
+                    }}
+                >
+                    <div
+                        style={{
+                            width: 400,
+                            minHeight: 400,
+                            maxHeight: '70vh',
+                        }}
+                    >
+                        <OrganisationUnitTree
+                            singleSelection
+                            roots={['A0000000000']}
+                            selected={orgUnit ? [orgUnit.path] : []}
+                            onChange={(nextOrgUnit, evt) => {
+                                evt.stopPropagation()
+                                setOrgUnit(nextOrgUnit)
+                                setOrgUnitOpen(false)
+                            }}
+                            expanded={expanded}
+                            handleExpand={handleExpand}
+                            handleCollapse={handleCollapse}
+                        />
+                    </div>
+                </SelectorBarItem>
+            </SelectorBar>
+
+            <p style={{ padding: '0 16px' }}>
+                This story illustrates how to keep states between mount/unmount
+                cycles of the component rendered inside the selector bar icon
+            </p>
+        </>
+    )
+}
+
+KeepOrgUnitExpanded.decorators = [
+    decoratorCommonStyles,
+    createStatefulDecorator(),
+    createDecoratorCustomDataProvider(),
+]

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

@@ -0,0 +1,105 @@
+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 RTL = (
+    _,
+    {
+        workflow,
+        setWorkflow,
+        workflowOpen,
+        setWorkflowOpen,
+        orgUnit,
+        setOrgUnit,
+        orgUnitOpen,
+        setOrgUnitOpen,
+    }
+) => {
+    return (
+        <div dir="rtl">
+            <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>
+        </div>
+    )
+}
+
+RTL.decorators = [
+    decoratorCommonStyles,
+    createStatefulDecorator(),
+    createDecoratorCustomDataProvider(),
+]