@dhis2-ui/select 10.16.2 → 10.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.16.2",
+    "version": "10.16.3",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,27 +33,28 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.16.2",
-        "@dhis2-ui/button": "10.16.2",
-        "@dhis2-ui/card": "10.16.2",
-        "@dhis2-ui/checkbox": "10.16.2",
-        "@dhis2-ui/chip": "10.16.2",
-        "@dhis2-ui/field": "10.16.2",
-        "@dhis2-ui/input": "10.16.2",
-        "@dhis2-ui/layer": "10.16.2",
-        "@dhis2-ui/loader": "10.16.2",
-        "@dhis2-ui/popper": "10.16.2",
-        "@dhis2-ui/status-icon": "10.16.2",
-        "@dhis2-ui/tooltip": "10.16.2",
+        "@dhis2-ui/box": "10.16.3",
+        "@dhis2-ui/button": "10.16.3",
+        "@dhis2-ui/card": "10.16.3",
+        "@dhis2-ui/checkbox": "10.16.3",
+        "@dhis2-ui/chip": "10.16.3",
+        "@dhis2-ui/field": "10.16.3",
+        "@dhis2-ui/input": "10.16.3",
+        "@dhis2-ui/layer": "10.16.3",
+        "@dhis2-ui/loader": "10.16.3",
+        "@dhis2-ui/popper": "10.16.3",
+        "@dhis2-ui/status-icon": "10.16.3",
+        "@dhis2-ui/tooltip": "10.16.3",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.2",
-        "@dhis2/ui-icons": "10.16.2",
+        "@dhis2/ui-constants": "10.16.3",
+        "@dhis2/ui-icons": "10.16.3",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",

package/src/index.js

@@ -0,0 +1,9 @@
+export { MultiSelect } from './multi-select/index.js'
+export { MultiSelectField } from './multi-select-field/index.js'
+export { MultiSelectOption } from './multi-select-option/index.js'
+
+export { SingleSelect } from './single-select/index.js'
+export { SimpleSingleSelect } from './simple-single-select/index.js'
+export { SimpleSingleSelectField } from './simple-single-select-field/index.js'
+export { SingleSelectField } from './single-select-field/index.js'
+export { SingleSelectOption } from './single-select-option/index.js'

package/src/locales/ar/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "مسح",
+    "No data found": "لم يتم إيجاد بيانات",
+    "Type to filter options": "اكتب لتصفية الخيارات",
+    "Loading options": "تحميل الخيارات",
+    "No options found": "لم يتم العثور على خيارات"
+}

package/src/locales/ar_IQ/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "مسح",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/ckb/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "پاککردنەوە",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/cs/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Vyčistit",
+    "No data found": "Nenalezena žádná data",
+    "Type to filter options": "Zadáním filtrujete možnosti",
+    "Loading options": "Možnosti načítání",
+    "No options found": "Nenalezeny žádné možnosti"
+}

package/src/locales/da/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Clear",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/en/translations.json

@@ -0,0 +1,11 @@
+{
+    "{{count}} selected": "{{count}} selected",
+    "{{count}} selected_plural": "{{count}} selected",
+    "Clear": "Clear",
+    "No data found": "No data found",
+    "Type to filter options": "Type to filter options",
+    "Loading options": "Loading options",
+    "No options found": "No options found",
+    "Search options": "Search options",
+    "{{clearText}}": "{{clearText}}"
+}

package/src/locales/en_US/translations.json

@@ -0,0 +1,9 @@
+{
+    "Clear": "साफ़ करें",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": "",
+    "Search options": "",
+    "{{clearText}}": ""
+}

package/src/locales/es/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Limpiar",
+    "No data found": "Datos no encontrados",
+    "Type to filter options": "Escriba para filtrar opciones",
+    "Loading options": "Cargando las opciones",
+    "No options found": "No se ha encontrado ninguna opción"
+}

package/src/locales/es_419/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Limpiar",
+    "No data found": "No se han encontrado datos",
+    "Type to filter options": "Escriba para filtrar opciones",
+    "Loading options": "Opciones de carga",
+    "No options found": "No se han encontrado opciones"
+}

package/src/locales/fr/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Effacer",
+    "No data found": "Aucune valeur trouvée",
+    "Type to filter options": "Tapez pour filtrer les options",
+    "Loading options": "Chargement des options",
+    "No options found": "Pas d'options trouvées"
+}

package/src/locales/hi_IN/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "साफ़ करें",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/id/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Hapus",
+    "No data found": "Tidak ada data yang ditemukan",
+    "Type to filter options": "Tipe opsi filter",
+    "Loading options": "Opsi mengunggah",
+    "No options found": "Opsi tidak tersedia"
+}

package/src/locales/index.js

@@ -0,0 +1,80 @@
+//------------------------------------------------------------------------------
+// <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 ar_IQTranslations from './ar_IQ/translations.json'
+import ckbTranslations from './ckb/translations.json'
+import csTranslations from './cs/translations.json'
+import daTranslations from './da/translations.json'
+import enTranslations from './en/translations.json'
+import en_USTranslations from './en_US/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 kmTranslations from './km/translations.json'
+import loTranslations from './lo/translations.json'
+import myTranslations from './my/translations.json'
+import nbTranslations from './nb/translations.json'
+import nlTranslations from './nl/translations.json'
+import prsTranslations from './prs/translations.json'
+import psTranslations from './ps/translations.json'
+import ptTranslations from './pt/translations.json'
+import pt_BRTranslations from './pt_BR/translations.json'
+import ruTranslations from './ru/translations.json'
+import svTranslations from './sv/translations.json'
+import tetTranslations from './tet/translations.json'
+import tgTranslations from './tg/translations.json'
+import ukTranslations from './uk/translations.json'
+import urTranslations from './ur/translations.json'
+import uz_LatnTranslations from './uz_Latn/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('ar_IQ', namespace, ar_IQTranslations)
+i18n.addResources('ckb', namespace, ckbTranslations)
+i18n.addResources('cs', namespace, csTranslations)
+i18n.addResources('da', namespace, daTranslations)
+i18n.addResources('en', namespace, enTranslations)
+i18n.addResources('en_US', namespace, en_USTranslations)
+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('km', namespace, kmTranslations)
+i18n.addResources('lo', namespace, loTranslations)
+i18n.addResources('my', namespace, myTranslations)
+i18n.addResources('nb', namespace, nbTranslations)
+i18n.addResources('nl', namespace, nlTranslations)
+i18n.addResources('prs', namespace, prsTranslations)
+i18n.addResources('ps', namespace, psTranslations)
+i18n.addResources('pt', namespace, ptTranslations)
+i18n.addResources('pt_BR', namespace, pt_BRTranslations)
+i18n.addResources('ru', namespace, ruTranslations)
+i18n.addResources('sv', namespace, svTranslations)
+i18n.addResources('tet', namespace, tetTranslations)
+i18n.addResources('tg', namespace, tgTranslations)
+i18n.addResources('uk', namespace, ukTranslations)
+i18n.addResources('ur', namespace, urTranslations)
+i18n.addResources('uz_Latn', namespace, uz_LatnTranslations)
+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/km/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "សម្អាត",
+    "No data found": "មិនមានទិន្នន័យបង្ហាញ",
+    "Type to filter options": "វាយបញ្ចូលមុខងារដើម្បីច្រោះ",
+    "Loading options": "កំពុងទាញយកមុខងារ",
+    "No options found": "មិនមានមុខងារបង្ហាញ"
+}

package/src/locales/lo/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "ລຶບ",
+    "No data found": "ບໍ່ພົບຂໍ້ມູນ",
+    "Type to filter options": "ປະເພດຕົວເລືອກການກອງ",
+    "Loading options": "ໂຫຼດຕົວເລືອກ",
+    "No options found": "ບໍ່ພົບຕົວເລືອກ"
+}

package/src/locales/my/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "ရှင်းလင်းသည်",
+    "No data found": "data မတွေ့ပါ။",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/nb/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Fjern",
+    "No data found": "Ingen data funnet",
+    "Type to filter options": "Skriv for å filtrere alternativer",
+    "Loading options": "Laster alternativer",
+    "No options found": "Ingen alternativer funnet"
+}

package/src/locales/nl/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Duidelijk",
+    "No data found": "Geen gegevens gevonden",
+    "Type to filter options": "Typ om opties te filteren",
+    "Loading options": "Laad opties",
+    "No options found": "Geen opties gevonden"
+}

package/src/locales/prs/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "پاک کردن",
+    "No data found": "هیچ معلوماتی یافت نشد",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/ps/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "پاک یې کړئ",
+    "No data found": "هېڅ ډاټا یا مالومات ونه موندل شول",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/pt/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Limpar",
+    "No data found": "Não foram encontrados dados",
+    "Type to filter options": "Tipo de opções de filtros",
+    "Loading options": "Carregando opções",
+    "No options found": "Não foram encontradas opções"
+}

package/src/locales/pt_BR/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Limpar",
+    "No data found": "Dado não encontrado",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/ru/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Очистить",
+    "No data found": "Данные не найдены",
+    "Type to filter options": "Начать печатать для фильтрации опций",
+    "Loading options": "Загрузка опций",
+    "No options found": "Опции не найдены"
+}

package/src/locales/sv/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Klar",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/tet/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Hamós",
+    "No data found": "",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/tg/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Пок кардан",
+    "No data found": "Ягон иттилоот ёфт нашуд",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/uk/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Очистити",
+    "No data found": "Даних не знайдено",
+    "Type to filter options": "Введіть параметри фільтра",
+    "Loading options": "Параметри завантаження",
+    "No options found": "Варіантів не знайдено"
+}

package/src/locales/ur/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "کلیئر",
+    "No data found": "کوئی ڈیٹا نہیں ملا",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/uz_Latn/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Аниқ",
+    "No data found": "Maʼlumotlar topilmadi",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/uz_UZ_Cyrl/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Тозалаш",
+    "No data found": "Маълумотлар топилмади",
+    "Type to filter options": "",
+    "Loading options": "Вариантлар юкланмоқда",
+    "No options found": ""
+}

package/src/locales/uz_UZ_Latn/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Аниқ",
+    "No data found": "Maʼlumotlar topilmadi",
+    "Type to filter options": "",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/vi/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "Xóa",
+    "No data found": "Không tìm thấy dữ liệu",
+    "Type to filter options": "Nhập để lọc tùy chọn",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/locales/zh/translations.json

@@ -0,0 +1,9 @@
+{
+    "Clear": "清除",
+    "No data found": "没有发现数据",
+    "Type to filter options": "键入过滤选项",
+    "Loading options": "加载选项",
+    "No options found": "没有找到选项",
+    "Search options": "搜索选项",
+    "{{clearText}}": "{{clearText}}"
+}

package/src/locales/zh_CN/translations.json

@@ -0,0 +1,7 @@
+{
+    "Clear": "清除",
+    "No data found": "没有数据被找到",
+    "Type to filter options": "键入过滤选项",
+    "Loading options": "",
+    "No options found": ""
+}

package/src/multi-select/__tests__/multi-select.test.js

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

package/src/multi-select/__tests__/selection-list.test.js

@@ -0,0 +1,102 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { MultiSelectOption } from '../../multi-select-option/index.js'
+import { SelectionList } from '../selection-list.js'
+import '@testing-library/jest-dom'
+
+describe('<SelectionList />', () => {
+    const env = process.env
+
+    beforeEach(() => {
+        // Ensure process.env is also reset for cached modules
+        jest.resetModules()
+        process.env = { ...env }
+
+        // Allow spying on console.error and silence rendering errors
+        jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterEach(() => {
+        // Restore process.env to original state
+        process.env = env
+
+        // Restore all mocks back to original values
+        jest.restoreAllMocks()
+    })
+
+    describe('production', () => {
+        it('should not throw an error for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'production'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            expect(() => {
+                render(
+                    <SelectionList
+                        selected={selected}
+                        options={options}
+                        disabled={false}
+                        onChange={() => {}}
+                    />
+                )
+            }).not.toThrow()
+        })
+
+        it('should show the selection for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'production'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            const { getByText } = render(
+                <SelectionList
+                    selected={selected}
+                    options={options}
+                    disabled={false}
+                    onChange={() => {}}
+                />
+            )
+
+            expect(getByText(selected)).toBeInTheDocument()
+        })
+
+        it('log an error for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'production'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            render(
+                <SelectionList
+                    selected={selected}
+                    options={options}
+                    disabled={false}
+                    onChange={() => {}}
+                />
+            )
+
+            expect(console.error).toHaveBeenCalledWith(
+                'There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.'
+            )
+        })
+    })
+
+    describe('not production', () => {
+        it('should throw an error for a selection that is not in the options', () => {
+            process.env.NODE_ENV = 'development'
+            const options = <MultiSelectOption key="1" label="one" value="1" />
+            const selected = ['value']
+
+            expect(() => {
+                render(
+                    <SelectionList
+                        selected={selected}
+                        options={options}
+                        disabled={false}
+                        onChange={() => {}}
+                    />
+                )
+            }).toThrow(
+                'There is no option with the value: "value". Make sure that all the values passed to the selected prop match the value of an existing option.'
+            )
+        })
+    })
+})

package/src/multi-select/features/accepts_blur_cb/index.js

@@ -0,0 +1,14 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with onBlur handler is rendered', () => {
+    cy.visitStory('MultiSelect', 'With on blur')
+})
+
+Then('the onBlur handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onBlur).to.be.calledOnce
+        expect(win.onBlur).to.be.calledWith({
+            selected: [],
+        })
+    })
+})

package/src/multi-select/features/accepts_blur_cb.feature

@@ -0,0 +1,8 @@
+Feature: Calls onBlur cb when blurred
+
+    Scenario: Blurring a MultiSelect through clicking away
+        Given a MultiSelect with onBlur handler is rendered
+        And the MultiSelect input is clicked
+        And the MultiSelect has focus
+        When the user clicks the backdrop layer
+        Then the onBlur handler is called

package/src/multi-select/features/accepts_focus_cb/index.js

@@ -0,0 +1,14 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with onFocus handler is rendered', () => {
+    cy.visitStory('MultiSelect', 'With on focus')
+})
+
+Then('the onFocus handler is called', () => {
+    cy.window().should((win) => {
+        expect(win.onFocus).to.be.calledOnce
+        expect(win.onFocus).to.be.calledWith({
+            selected: [],
+        })
+    })
+})

package/src/multi-select/features/accepts_focus_cb.feature

@@ -0,0 +1,6 @@
+Feature: Calls onFocus cb when focused
+
+    Scenario: Focusing a MultiSelect through clicking
+        Given a MultiSelect with onFocus handler is rendered
+        When the MultiSelect input is clicked
+        Then the onFocus handler is called

package/src/multi-select/features/accepts_initial_focus/index.js

@@ -0,0 +1,5 @@
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('a MultiSelect with initial focus is rendered', () => {
+    cy.visitStory('MultiSelect', 'With initial focus')
+})

package/src/multi-select/features/accepts_initial_focus.feature

@@ -0,0 +1,5 @@
+Feature: Focusing the MultiSelect on mount
+
+    Scenario: The MultiSelect renders with focus
+        Given a MultiSelect with initial focus is rendered
+        Then the MultiSelect has focus