@kosmeo-ui/react 0.2.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/components/buttons/button/styles.css +43 -43
- package/dist/components/buttons/rowActions/index.d.ts.map +1 -1
- package/dist/components/buttons/rowActions/index.js +2 -1
- package/dist/components/buttons/rowActions/index.js.map +1 -1
- package/dist/components/data-display/addressBlock/styles.css +2 -2
- package/dist/components/data-display/colorSwatch/index.d.ts +1 -1
- package/dist/components/data-display/colorSwatch/index.d.ts.map +1 -1
- package/dist/components/data-display/colorSwatch/index.js +1 -1
- package/dist/components/data-display/colorSwatch/index.js.map +1 -1
- package/dist/components/data-display/colorSwatch/styles.css +1 -1
- package/dist/components/data-display/dataTable/index.d.ts.map +1 -1
- package/dist/components/data-display/dataTable/index.js +7 -3
- package/dist/components/data-display/dataTable/index.js.map +1 -1
- package/dist/components/data-display/dataTable/styles.css +3 -2
- package/dist/components/data-display/dataTable/utils/parseDataKey.d.ts +8 -1
- package/dist/components/data-display/dataTable/utils/parseDataKey.d.ts.map +1 -1
- package/dist/components/data-display/dataTable/utils/parseDataKey.js +13 -41
- package/dist/components/data-display/dataTable/utils/parseDataKey.js.map +1 -1
- package/dist/components/data-display/imagePreview/styles.css +2 -2
- package/dist/components/data-display/infiniteScroll/filters/index.d.ts +4 -0
- package/dist/components/data-display/infiniteScroll/filters/index.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/index.js +12 -2
- package/dist/components/data-display/infiniteScroll/filters/index.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/listFilter.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/listFilter.js +1 -1
- package/dist/components/data-display/infiniteScroll/filters/listFilter.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/rangeFilter.d.ts +6 -0
- package/dist/components/data-display/infiniteScroll/filters/rangeFilter.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/rangeFilter.js +55 -46
- package/dist/components/data-display/infiniteScroll/filters/rangeFilter.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/selectFilter.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/selectFilter.js +3 -5
- package/dist/components/data-display/infiniteScroll/filters/selectFilter.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/styles.css +30 -1
- package/dist/components/data-display/infiniteScroll/header/limit.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/limit.js +1 -1
- package/dist/components/data-display/infiniteScroll/header/limit.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/sortBy.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/sortBy.js +1 -1
- package/dist/components/data-display/infiniteScroll/header/sortBy.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/sortDirection.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/sortDirection.js +1 -1
- package/dist/components/data-display/infiniteScroll/header/sortDirection.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/index.d.ts +8 -0
- package/dist/components/data-display/infiniteScroll/index.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/index.js +41 -23
- package/dist/components/data-display/infiniteScroll/index.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/styles.css +2 -2
- package/dist/components/data-display/infiniteScroll/tags/index.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/index.js +6 -5
- package/dist/components/data-display/infiniteScroll/tags/index.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/listFilterTag.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/listFilterTag.js +6 -6
- package/dist/components/data-display/infiniteScroll/tags/listFilterTag.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/rangeFilterTag.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/rangeFilterTag.js +3 -5
- package/dist/components/data-display/infiniteScroll/tags/rangeFilterTag.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/utils/generateQueryString.d.ts +6 -0
- package/dist/components/data-display/infiniteScroll/utils/generateQueryString.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/utils/generateQueryString.js +24 -12
- package/dist/components/data-display/infiniteScroll/utils/generateQueryString.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/utils/hasPendingChanges.d.ts +11 -1
- package/dist/components/data-display/infiniteScroll/utils/hasPendingChanges.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/utils/hasPendingChanges.js +37 -18
- package/dist/components/data-display/infiniteScroll/utils/hasPendingChanges.js.map +1 -1
- package/dist/components/data-display/listCard/styles.css +3 -3
- package/dist/components/data-display/listRow/styles.css +2 -2
- package/dist/components/data-display/recoveryCodeGrid/styles.css +3 -3
- package/dist/components/data-display/secretDisplay/styles.css +4 -4
- package/dist/components/data-display/statCard/styles.css +12 -12
- package/dist/components/data-display/summaryRow/styles.css +4 -4
- package/dist/components/data-display/table/index.d.ts.map +1 -1
- package/dist/components/data-display/table/index.js +2 -2
- package/dist/components/data-display/table/index.js.map +1 -1
- package/dist/components/data-display/table/styles.css +10 -10
- package/dist/components/data-display/tableFilters/index.d.ts +30 -0
- package/dist/components/data-display/tableFilters/index.d.ts.map +1 -0
- package/dist/components/data-display/tableFilters/index.js +67 -0
- package/dist/components/data-display/tableFilters/index.js.map +1 -0
- package/dist/components/data-display/tagCard/index.d.ts.map +1 -1
- package/dist/components/data-display/tagCard/index.js +1 -1
- package/dist/components/data-display/tagCard/index.js.map +1 -1
- package/dist/components/data-display/tagCard/styles.css +1 -1
- package/dist/components/feedback/alert/styles.css +15 -15
- package/dist/components/feedback/badge/index.d.ts.map +1 -1
- package/dist/components/feedback/badge/index.js +14 -8
- package/dist/components/feedback/badge/index.js.map +1 -1
- package/dist/components/feedback/badge/styles.css +44 -46
- package/dist/components/feedback/emptyState/styles.css +2 -2
- package/dist/components/feedback/loadingOverlay/styles.css +1 -1
- package/dist/components/feedback/progressBar/styles.css +11 -11
- package/dist/components/feedback/spinner/styles.css +14 -11
- package/dist/components/feedback/tooltip/styles.css +9 -7
- package/dist/components/forms/detailField/styles.css +1 -1
- package/dist/components/forms/fieldShell/index.d.ts +3 -1
- package/dist/components/forms/fieldShell/index.d.ts.map +1 -1
- package/dist/components/forms/fieldShell/index.js +1 -1
- package/dist/components/forms/fieldShell/index.js.map +1 -1
- package/dist/components/forms/fieldShell/styles.css +5 -5
- package/dist/components/forms/form/styles.css +6 -6
- package/dist/components/forms/formActions/styles.css +4 -4
- package/dist/components/forms/formGrid/styles.css +32 -0
- package/dist/components/forms/infoRow/styles.css +2 -2
- package/dist/components/forms/optionsGroup/index.d.ts +3 -1
- package/dist/components/forms/optionsGroup/index.d.ts.map +1 -1
- package/dist/components/forms/optionsGroup/index.js +5 -1
- package/dist/components/forms/optionsGroup/index.js.map +1 -1
- package/dist/components/forms/optionsGroup/styles.css +1 -1
- package/dist/components/forms/requiredAsterisk/index.d.ts.map +1 -1
- package/dist/components/forms/requiredAsterisk/index.js +3 -2
- package/dist/components/forms/requiredAsterisk/index.js.map +1 -1
- package/dist/components/forms/requiredAsterisk/styles.css +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/index.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/index.js +3 -1
- package/dist/components/inputs/checkbox/index.js.map +1 -1
- package/dist/components/inputs/checkbox/styles.css +4 -4
- package/dist/components/inputs/colorPicker/index.d.ts.map +1 -1
- package/dist/components/inputs/colorPicker/index.js +3 -1
- package/dist/components/inputs/colorPicker/index.js.map +1 -1
- package/dist/components/inputs/colorPicker/styles.css +3 -3
- package/dist/components/inputs/dateInput/index.d.ts +3 -3
- package/dist/components/inputs/dateInput/index.d.ts.map +1 -1
- package/dist/components/inputs/dateInput/index.js +2 -2
- package/dist/components/inputs/dateInput/index.js.map +1 -1
- package/dist/components/inputs/dateInput/styles.css +5 -5
- package/dist/components/inputs/dateInput/utils.d.ts +0 -1
- package/dist/components/inputs/dateInput/utils.d.ts.map +1 -1
- package/dist/components/inputs/dateInput/utils.js +13 -8
- package/dist/components/inputs/dateInput/utils.js.map +1 -1
- package/dist/components/inputs/dropdown/index.js +1 -1
- package/dist/components/inputs/dropdown/index.js.map +1 -1
- package/dist/components/inputs/dropdown/styles.css +2 -2
- package/dist/components/inputs/dropdownArrowButton/styles.css +7 -5
- package/dist/components/inputs/fileDropZone/index.d.ts.map +1 -1
- package/dist/components/inputs/fileDropZone/index.js +3 -2
- package/dist/components/inputs/fileDropZone/index.js.map +1 -1
- package/dist/components/inputs/fileDropZone/styles.css +12 -12
- package/dist/components/inputs/fileUpload/index.d.ts.map +1 -1
- package/dist/components/inputs/fileUpload/index.js +11 -6
- package/dist/components/inputs/fileUpload/index.js.map +1 -1
- package/dist/components/inputs/fileUpload/styles.css +9 -9
- package/dist/components/inputs/input/index.d.ts +12 -0
- package/dist/components/inputs/input/index.d.ts.map +1 -1
- package/dist/components/inputs/input/index.js +4 -3
- package/dist/components/inputs/input/index.js.map +1 -1
- package/dist/components/inputs/input/styles.css +28 -28
- package/dist/components/inputs/languageSelect/index.d.ts.map +1 -1
- package/dist/components/inputs/languageSelect/index.js +15 -4
- package/dist/components/inputs/languageSelect/index.js.map +1 -1
- package/dist/components/inputs/multiSelect/dropDown.d.ts +7 -0
- package/dist/components/inputs/multiSelect/dropDown.d.ts.map +1 -1
- package/dist/components/inputs/multiSelect/dropDown.js +19 -12
- package/dist/components/inputs/multiSelect/dropDown.js.map +1 -1
- package/dist/components/inputs/multiSelect/index.d.ts.map +1 -1
- package/dist/components/inputs/multiSelect/index.js +49 -13
- package/dist/components/inputs/multiSelect/index.js.map +1 -1
- package/dist/components/inputs/multiSelect/styles.css +51 -43
- package/dist/components/inputs/multiSelect/utils.d.ts +7 -0
- package/dist/components/inputs/multiSelect/utils.d.ts.map +1 -0
- package/dist/components/inputs/multiSelect/utils.js +18 -0
- package/dist/components/inputs/multiSelect/utils.js.map +1 -0
- package/dist/components/inputs/phoneInput/index.d.ts.map +1 -1
- package/dist/components/inputs/phoneInput/index.js +11 -3
- package/dist/components/inputs/phoneInput/index.js.map +1 -1
- package/dist/components/inputs/phoneInput/styles.css +13 -13
- package/dist/components/inputs/radioGroup/index.d.ts.map +1 -1
- package/dist/components/inputs/radioGroup/index.js +1 -1
- package/dist/components/inputs/radioGroup/index.js.map +1 -1
- package/dist/components/inputs/richTextEditor/index.d.ts.map +1 -1
- package/dist/components/inputs/richTextEditor/index.js +21 -22
- package/dist/components/inputs/richTextEditor/index.js.map +1 -1
- package/dist/components/inputs/richTextEditor/styles.css +24 -24
- package/dist/components/inputs/searchList/index.d.ts +4 -1
- package/dist/components/inputs/searchList/index.d.ts.map +1 -1
- package/dist/components/inputs/searchList/index.js +46 -31
- package/dist/components/inputs/searchList/index.js.map +1 -1
- package/dist/components/inputs/searchList/styles.css +22 -22
- package/dist/components/inputs/searchSelect/index.d.ts.map +1 -1
- package/dist/components/inputs/searchSelect/index.js +8 -2
- package/dist/components/inputs/searchSelect/index.js.map +1 -1
- package/dist/components/inputs/select/index.js +3 -2
- package/dist/components/inputs/select/index.js.map +1 -1
- package/dist/components/inputs/select/styles.css +93 -15
- package/dist/components/inputs/switch/index.d.ts.map +1 -1
- package/dist/components/inputs/switch/index.js +3 -1
- package/dist/components/inputs/switch/index.js.map +1 -1
- package/dist/components/inputs/switch/styles.css +5 -5
- package/dist/components/inputs/textArea/index.d.ts.map +1 -1
- package/dist/components/inputs/textArea/index.js +3 -2
- package/dist/components/inputs/textArea/index.js.map +1 -1
- package/dist/components/inputs/textArea/styles.css +11 -11
- package/dist/components/inputs/typeahead/index.d.ts.map +1 -1
- package/dist/components/inputs/typeahead/index.js +21 -6
- package/dist/components/inputs/typeahead/index.js.map +1 -1
- package/dist/components/inputs/typeahead/styles.css +13 -13
- package/dist/components/layout/authPage/styles.css +6 -6
- package/dist/components/layout/borderedSection/styles.css +3 -3
- package/dist/components/layout/card/styles.css +31 -31
- package/dist/components/layout/col/styles.css +1 -1
- package/dist/components/layout/page/styles.css +25 -5
- package/dist/components/layout/sectionHeader/styles.css +3 -3
- package/dist/components/navigation/breadcrumbs/styles.css +7 -7
- package/dist/components/navigation/pagination/styles.css +15 -15
- package/dist/components/navigation/sidebar/styles.css +6 -6
- package/dist/components/navigation/stepper/styles.css +14 -14
- package/dist/components/navigation/tabButton/styles.css +59 -59
- package/dist/components/navigation/tabs/styles.css +5 -5
- package/dist/components/overlays/modal/index.d.ts +1 -1
- package/dist/components/overlays/modal/index.d.ts.map +1 -1
- package/dist/components/overlays/modal/index.js +3 -2
- package/dist/components/overlays/modal/index.js.map +1 -1
- package/dist/components/overlays/modal/styles.css +19 -19
- package/dist/hooks/useInfinite.d.ts +3 -1
- package/dist/hooks/useInfinite.d.ts.map +1 -1
- package/dist/hooks/useInfinite.js +4 -2
- package/dist/hooks/useInfinite.js.map +1 -1
- package/dist/hooks/useInfiniteArchivableCursor.d.ts +1 -1
- package/dist/hooks/useInfiniteArchivableCursor.d.ts.map +1 -1
- package/dist/hooks/useInfiniteArchivableCursor.js +11 -4
- package/dist/hooks/useInfiniteArchivableCursor.js.map +1 -1
- package/dist/hooks/useInfiniteCursor.d.ts +1 -1
- package/dist/hooks/useInfiniteCursor.d.ts.map +1 -1
- package/dist/hooks/useInfiniteCursor.js +11 -4
- package/dist/hooks/useInfiniteCursor.js.map +1 -1
- package/dist/hooks/useListKeyboard.d.ts.map +1 -1
- package/dist/hooks/useListKeyboard.js +4 -0
- package/dist/hooks/useListKeyboard.js.map +1 -1
- package/dist/styles.css +142 -127
- package/package.json +15 -4
- package/src/components/buttons/button/styles.css +43 -43
- package/src/components/buttons/rowActions/index.tsx +6 -1
- package/src/components/data-display/addressBlock/styles.css +2 -2
- package/src/components/data-display/colorSwatch/index.tsx +2 -2
- package/src/components/data-display/colorSwatch/styles.css +1 -1
- package/src/components/data-display/dataTable/index.tsx +6 -3
- package/src/components/data-display/dataTable/styles.css +3 -2
- package/src/components/data-display/dataTable/utils/parseDataKey.ts +18 -36
- package/src/components/data-display/imagePreview/styles.css +2 -2
- package/src/components/data-display/infiniteScroll/filters/index.tsx +18 -1
- package/src/components/data-display/infiniteScroll/filters/listFilter.tsx +1 -0
- package/src/components/data-display/infiniteScroll/filters/rangeFilter.tsx +77 -33
- package/src/components/data-display/infiniteScroll/filters/selectFilter.tsx +11 -17
- package/src/components/data-display/infiniteScroll/filters/styles.css +30 -1
- package/src/components/data-display/infiniteScroll/header/limit.tsx +1 -0
- package/src/components/data-display/infiniteScroll/header/sortBy.tsx +1 -0
- package/src/components/data-display/infiniteScroll/header/sortDirection.tsx +1 -0
- package/src/components/data-display/infiniteScroll/index.tsx +75 -29
- package/src/components/data-display/infiniteScroll/styles.css +2 -2
- package/src/components/data-display/infiniteScroll/tags/index.tsx +6 -5
- package/src/components/data-display/infiniteScroll/tags/listFilterTag.tsx +20 -13
- package/src/components/data-display/infiniteScroll/tags/rangeFilterTag.tsx +4 -3
- package/src/components/data-display/infiniteScroll/utils/generateQueryString.ts +28 -13
- package/src/components/data-display/infiniteScroll/utils/hasPendingChanges.ts +48 -16
- package/src/components/data-display/listCard/styles.css +3 -3
- package/src/components/data-display/listRow/styles.css +2 -2
- package/src/components/data-display/recoveryCodeGrid/styles.css +3 -3
- package/src/components/data-display/secretDisplay/styles.css +4 -4
- package/src/components/data-display/statCard/styles.css +12 -12
- package/src/components/data-display/summaryRow/styles.css +4 -4
- package/src/components/data-display/table/index.tsx +2 -2
- package/src/components/data-display/table/styles.css +10 -10
- package/src/components/data-display/tableFilters/index.tsx +147 -0
- package/src/components/data-display/tagCard/index.tsx +3 -2
- package/src/components/data-display/tagCard/styles.css +1 -1
- package/src/components/feedback/alert/styles.css +15 -15
- package/src/components/feedback/badge/index.tsx +36 -16
- package/src/components/feedback/badge/styles.css +44 -46
- package/src/components/feedback/emptyState/styles.css +2 -2
- package/src/components/feedback/loadingOverlay/styles.css +1 -1
- package/src/components/feedback/progressBar/styles.css +11 -11
- package/src/components/feedback/spinner/styles.css +14 -11
- package/src/components/feedback/tooltip/styles.css +9 -7
- package/src/components/forms/detailField/styles.css +1 -1
- package/src/components/forms/fieldShell/index.tsx +4 -1
- package/src/components/forms/fieldShell/styles.css +5 -5
- package/src/components/forms/form/styles.css +6 -6
- package/src/components/forms/formActions/styles.css +4 -4
- package/src/components/forms/formGrid/styles.css +32 -0
- package/src/components/forms/infoRow/styles.css +2 -2
- package/src/components/forms/optionsGroup/index.tsx +31 -12
- package/src/components/forms/optionsGroup/styles.css +1 -1
- package/src/components/forms/requiredAsterisk/index.tsx +5 -1
- package/src/components/forms/requiredAsterisk/styles.css +1 -1
- package/src/components/index.ts +2 -0
- package/src/components/inputs/checkbox/index.tsx +3 -2
- package/src/components/inputs/checkbox/styles.css +4 -4
- package/src/components/inputs/colorPicker/index.tsx +5 -2
- package/src/components/inputs/colorPicker/styles.css +3 -3
- package/src/components/inputs/dateInput/index.tsx +4 -5
- package/src/components/inputs/dateInput/styles.css +5 -5
- package/src/components/inputs/dateInput/utils.ts +12 -8
- package/src/components/inputs/dropdown/index.tsx +1 -1
- package/src/components/inputs/dropdown/styles.css +2 -2
- package/src/components/inputs/dropdownArrowButton/styles.css +7 -5
- package/src/components/inputs/fileDropZone/index.tsx +4 -3
- package/src/components/inputs/fileDropZone/styles.css +12 -12
- package/src/components/inputs/fileUpload/index.tsx +33 -23
- package/src/components/inputs/fileUpload/styles.css +9 -9
- package/src/components/inputs/input/index.tsx +21 -3
- package/src/components/inputs/input/styles.css +28 -28
- package/src/components/inputs/languageSelect/index.tsx +19 -4
- package/src/components/inputs/multiSelect/dropDown.tsx +83 -35
- package/src/components/inputs/multiSelect/index.tsx +87 -30
- package/src/components/inputs/multiSelect/styles.css +51 -43
- package/src/components/inputs/multiSelect/utils.ts +18 -0
- package/src/components/inputs/phoneInput/index.tsx +10 -2
- package/src/components/inputs/phoneInput/styles.css +13 -13
- package/src/components/inputs/radioGroup/index.tsx +2 -1
- package/src/components/inputs/richTextEditor/index.tsx +42 -44
- package/src/components/inputs/richTextEditor/styles.css +24 -24
- package/src/components/inputs/searchList/index.tsx +121 -109
- package/src/components/inputs/searchList/styles.css +22 -22
- package/src/components/inputs/searchSelect/index.tsx +8 -2
- package/src/components/inputs/select/index.tsx +3 -3
- package/src/components/inputs/select/styles.css +93 -15
- package/src/components/inputs/switch/index.tsx +3 -2
- package/src/components/inputs/switch/styles.css +5 -5
- package/src/components/inputs/textArea/index.tsx +3 -3
- package/src/components/inputs/textArea/styles.css +11 -11
- package/src/components/inputs/typeahead/index.tsx +84 -54
- package/src/components/inputs/typeahead/styles.css +13 -13
- package/src/components/layout/authPage/styles.css +6 -6
- package/src/components/layout/borderedSection/styles.css +3 -3
- package/src/components/layout/card/styles.css +31 -31
- package/src/components/layout/col/styles.css +1 -1
- package/src/components/layout/page/styles.css +25 -5
- package/src/components/layout/sectionHeader/styles.css +3 -3
- package/src/components/navigation/breadcrumbs/styles.css +7 -7
- package/src/components/navigation/pagination/styles.css +15 -15
- package/src/components/navigation/sidebar/styles.css +6 -6
- package/src/components/navigation/stepper/styles.css +14 -14
- package/src/components/navigation/tabButton/styles.css +59 -59
- package/src/components/navigation/tabs/styles.css +5 -5
- package/src/components/overlays/modal/index.tsx +14 -2
- package/src/components/overlays/modal/styles.css +19 -19
- package/src/hooks/useInfinite.ts +7 -3
- package/src/hooks/useInfiniteArchivableCursor.ts +11 -4
- package/src/hooks/useInfiniteCursor.ts +11 -4
- package/src/hooks/useListKeyboard.ts +4 -0
- package/src/styles.css +142 -127
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.k-input {
|
|
9
|
-
background-color: var(--background-color-light);
|
|
10
|
-
border: 0.0625rem solid var(--border-color);
|
|
9
|
+
background-color: var(--k-background-color-light);
|
|
10
|
+
border: 0.0625rem solid var(--k-border-color);
|
|
11
11
|
border-radius: 0.375rem;
|
|
12
|
-
color: var(--text-color);
|
|
12
|
+
color: var(--k-text-color);
|
|
13
13
|
width: 100%;
|
|
14
14
|
box-sizing: border-box;
|
|
15
15
|
transition:
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.k-input-sm {
|
|
21
|
-
font-size: var(--text-size-sm);
|
|
21
|
+
font-size: var(--k-text-size-sm);
|
|
22
22
|
padding: 0.5rem 0.75rem;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.k-input-md {
|
|
26
|
-
font-size: var(--text-size-md);
|
|
26
|
+
font-size: var(--k-text-size-md);
|
|
27
27
|
padding: 0.625rem 1rem;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.k-input-lg {
|
|
31
|
-
font-size: var(--text-size-lg);
|
|
31
|
+
font-size: var(--k-text-size-lg);
|
|
32
32
|
padding: 0.75rem 1.25rem;
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -37,30 +37,30 @@
|
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
.k-input::placeholder {
|
|
40
|
-
color: var(--text-color-secondary);
|
|
40
|
+
color: var(--k-text-color-secondary);
|
|
41
41
|
opacity: 0.7;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.k-input[type="date"]:empty {
|
|
45
|
-
color: var(--text-color-secondary);
|
|
45
|
+
color: var(--k-text-color-secondary);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.k-input:focus {
|
|
49
49
|
outline: none;
|
|
50
|
-
border-color: var(--border-color-active);
|
|
51
|
-
box-shadow: 0 0 0 0.1875rem var(--border-shadow-color-active);
|
|
50
|
+
border-color: var(--k-border-color-active);
|
|
51
|
+
box-shadow: 0 0 0 0.1875rem var(--k-border-shadow-color-active);
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
/* No opacity, unlike disabled: a read-only value keeps full text contrast. */
|
|
55
55
|
.k-input[readonly]:not(:disabled) {
|
|
56
|
-
background-color: var(--background-color-dark);
|
|
57
|
-
color: var(--text-color-secondary);
|
|
56
|
+
background-color: var(--k-background-color-dark);
|
|
57
|
+
color: var(--k-text-color-secondary);
|
|
58
58
|
cursor: default;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.k-input:disabled {
|
|
62
|
-
background-color: var(--
|
|
63
|
-
color: var(--text-color-disabled);
|
|
62
|
+
background-color: var(--k-background-color-disabled);
|
|
63
|
+
color: var(--k-text-color-disabled);
|
|
64
64
|
cursor: not-allowed;
|
|
65
65
|
opacity: 0.6;
|
|
66
66
|
}
|
|
@@ -83,18 +83,18 @@
|
|
|
83
83
|
border: none;
|
|
84
84
|
border-radius: 50%;
|
|
85
85
|
background: none;
|
|
86
|
-
color: var(--text-color-secondary);
|
|
86
|
+
color: var(--k-text-color-secondary);
|
|
87
87
|
cursor: pointer;
|
|
88
88
|
transition: color 0.2s ease-in-out;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.k-input-clear-button:hover {
|
|
92
|
-
color: var(--primary-color-text);
|
|
92
|
+
color: var(--k-primary-color-text);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
.k-input-clear-button:focus-visible {
|
|
96
96
|
outline: none;
|
|
97
|
-
box-shadow: 0 0 0 0.125rem var(--border-shadow-color-active);
|
|
97
|
+
box-shadow: 0 0 0 0.125rem var(--k-border-shadow-color-active);
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
.k-password-toggle-button {
|
|
@@ -112,17 +112,17 @@
|
|
|
112
112
|
display: flex;
|
|
113
113
|
align-items: center;
|
|
114
114
|
justify-content: center;
|
|
115
|
-
color: var(--text-color-secondary);
|
|
115
|
+
color: var(--k-text-color-secondary);
|
|
116
116
|
transition: color 0.2s ease-in-out;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.k-password-toggle-button:hover {
|
|
120
|
-
color: var(--primary-color-text);
|
|
120
|
+
color: var(--k-primary-color-text);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.k-password-toggle-button:focus {
|
|
124
124
|
outline: none;
|
|
125
|
-
box-shadow: 0 0 0 0.125rem var(--border-shadow-color-active);
|
|
125
|
+
box-shadow: 0 0 0 0.125rem var(--k-border-shadow-color-active);
|
|
126
126
|
border-radius: 50%;
|
|
127
127
|
}
|
|
128
128
|
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
.k-password-toggle-button:disabled:hover {
|
|
135
|
-
color: var(--text-color-secondary);
|
|
135
|
+
color: var(--k-text-color-secondary);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.k-input-wrapper-addon {
|
|
@@ -156,9 +156,9 @@
|
|
|
156
156
|
display: inline-flex;
|
|
157
157
|
align-items: center;
|
|
158
158
|
justify-content: center;
|
|
159
|
-
background-color: var(--background-color-dark);
|
|
160
|
-
border: 0.0625rem solid var(--border-color);
|
|
161
|
-
color: var(--text-color-secondary);
|
|
159
|
+
background-color: var(--k-background-color-dark);
|
|
160
|
+
border: 0.0625rem solid var(--k-border-color);
|
|
161
|
+
color: var(--k-text-color-secondary);
|
|
162
162
|
font-weight: 500;
|
|
163
163
|
white-space: nowrap;
|
|
164
164
|
user-select: none;
|
|
@@ -177,20 +177,20 @@
|
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
.k-input-addon-sm {
|
|
180
|
-
font-size: var(--text-size-sm);
|
|
180
|
+
font-size: var(--k-text-size-sm);
|
|
181
181
|
padding: 0.5rem 0.625rem;
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
.k-input-addon-md {
|
|
185
|
-
font-size: var(--text-size-md);
|
|
185
|
+
font-size: var(--k-text-size-md);
|
|
186
186
|
padding: 0.625rem 0.75rem;
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
.k-input-addon-lg {
|
|
190
|
-
font-size: var(--text-size-lg);
|
|
190
|
+
font-size: var(--k-text-size-lg);
|
|
191
191
|
padding: 0.75rem 0.875rem;
|
|
192
192
|
}
|
|
193
193
|
|
|
194
194
|
.k-input-wrapper-addon:focus-within .k-input-addon {
|
|
195
|
-
border-color: var(--border-color-active);
|
|
195
|
+
border-color: var(--k-border-color-active);
|
|
196
196
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/languageSelect/index.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,cAAc,EA4B/C,CAAC;AAEF,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,GAAI,kEAQrB,mBAAmB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/languageSelect/index.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,cAAc,EA4B/C,CAAC;AAEF,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,cAAc,GAAI,kEAQrB,mBAAmB,gCA+BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -31,10 +31,21 @@ export const SUPPORTED_LANGUAGES = [
|
|
|
31
31
|
{ value: "hi-IN", label: "Hindi (India)" },
|
|
32
32
|
];
|
|
33
33
|
const LanguageSelect = ({ label = "Preferred language", value, onChange, id, disabled, required, includeNone = true, }) => {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
// A stored value is shown, never replaced on load (Select would report its
|
|
35
|
+
// first option for a value it lacks): a bare language ("en") as its first
|
|
36
|
+
// locale, any other unknown code as itself.
|
|
37
|
+
const stored = value ?? "";
|
|
38
|
+
const isSupported = SUPPORTED_LANGUAGES.some((l) => l.value === stored);
|
|
39
|
+
const locale = stored && !isSupported
|
|
40
|
+
? SUPPORTED_LANGUAGES.find((l) => l.value.toLowerCase().startsWith(`${stored.toLowerCase()}-`))?.value
|
|
41
|
+
: undefined;
|
|
42
|
+
const unknown = stored && !isSupported && !locale ? [{ value: stored, label: stored }] : [];
|
|
43
|
+
const options = [
|
|
44
|
+
...(includeNone ? [{ value: "", label: "— None —" }] : []),
|
|
45
|
+
...unknown,
|
|
46
|
+
...SUPPORTED_LANGUAGES,
|
|
47
|
+
];
|
|
48
|
+
return (_jsx(Select, { label: label, id: id, value: locale ?? stored, disabled: disabled, required: required, options: options, onChange: (v) => onChange?.(v ? v : null) }));
|
|
38
49
|
};
|
|
39
50
|
export default LanguageSelect;
|
|
40
51
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/languageSelect/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,MAAM,CAAC,MAAM,mBAAmB,GAAqB;IACnD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,yBAAyB,EAAE;IACpD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,0BAA0B,EAAE;IACrD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE;IAChD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE;IAC5C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE;IAC5C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE;IAC5C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE;IAC5C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE;IAChD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,qBAAqB,EAAE;IAChD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAE;IAC9C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE;IAC/C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE;IAC5C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,6BAA6B,EAAE;IACxD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,+BAA+B,EAAE;IAC1D,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC7C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE;IAC3C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,uBAAuB,EAAE;IAClD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE;IAC5C,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE;CAC3C,CAAC;AAaF,MAAM,cAAc,GAAG,CAAC,EACtB,KAAK,GAAG,oBAAoB,EAC5B,KAAK,EACL,QAAQ,EACR,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,IAAI,GACE,EAAE,EAAE;IACxB,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/languageSelect/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,7 +10,14 @@ interface DropDownProps<T> extends PropsWithSize {
|
|
|
10
10
|
handleSelectAll: () => void;
|
|
11
11
|
handleClearAll: () => void;
|
|
12
12
|
handleOptionToggle: (optionValue: T) => void;
|
|
13
|
+
listboxId: string;
|
|
14
|
+
/** Id of the field's label, which also names the listbox. */
|
|
15
|
+
labelId?: string;
|
|
16
|
+
highlightedIndex: number;
|
|
17
|
+
optionRefs: React.RefObject<(HTMLLIElement | null)[]>;
|
|
18
|
+
onSearchKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
|
|
13
19
|
}
|
|
20
|
+
export declare const optionId: (listboxId: string, index: number) => string;
|
|
14
21
|
export declare const DropDownSection: <T>(props: DropDownProps<T>) => import("react").JSX.Element;
|
|
15
22
|
export {};
|
|
16
23
|
//# sourceMappingURL=dropDown.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropDown.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/dropDown.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAS/C,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,aAAa;IAC9C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACzD,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"dropDown.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/dropDown.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAS/C,UAAU,aAAa,CAAC,CAAC,CAAE,SAAQ,aAAa;IAC9C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACzD,eAAe,EAAE,CAAC,EAAE,CAAC;IACrB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IACtD,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,QAAQ,GAAI,WAAW,MAAM,EAAE,OAAO,MAAM,WACzB,CAAC;AAEjC,eAAO,MAAM,eAAe,GAAI,CAAC,EAAG,OAAO,aAAa,CAAC,CAAC,CAAC,gCA6H1D,CAAC"}
|
|
@@ -4,28 +4,35 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
4
4
|
import IconButton from "../../buttons/iconButton/index.js";
|
|
5
5
|
import Tooltip from "../../feedback/tooltip/index.js";
|
|
6
6
|
import Input from "../input/index.js";
|
|
7
|
-
import {
|
|
7
|
+
import { itemKeys } from "./utils.js";
|
|
8
8
|
import { faCheckDouble, faXmark, faCheck, } from "@fortawesome/free-solid-svg-icons";
|
|
9
|
+
export const optionId = (listboxId, index) => `${listboxId}-option-${index}`;
|
|
9
10
|
export const DropDownSection = (props) => {
|
|
10
11
|
const { size = "md", value = [] } = props;
|
|
11
|
-
const
|
|
12
|
-
|
|
12
|
+
const optionKeys = itemKeys(props.filteredOptions, props.labelKey);
|
|
13
|
+
const list = props.filteredOptions.length > 0 ? (_jsx("ul", { id: props.listboxId, role: "listbox", "aria-multiselectable": "true", "aria-labelledby": props.labelId, className: "k-multiselect-options-list", children: props.filteredOptions.map((option, index) => {
|
|
13
14
|
const isSelected = value.find((v) => v[props.labelKey] === option[props.labelKey]);
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
return (_jsxs("li", { ref: (el) => {
|
|
16
|
+
props.optionRefs.current[index] = el;
|
|
17
|
+
}, id: optionId(props.listboxId, index), role: "option", "aria-selected": !!isSelected, className: `k-multiselect-option k-multiselect-option-${size} ${isSelected ? "k-multiselect-option-selected" : ""} ${index === props.highlightedIndex
|
|
18
|
+
? "k-multiselect-option-highlighted"
|
|
19
|
+
: ""}`,
|
|
20
|
+
// Keeps focus, and so the keyboard, in the search box.
|
|
21
|
+
onMouseDown: (e) => e.preventDefault(), onClick: (e) => {
|
|
16
22
|
e.stopPropagation();
|
|
17
23
|
props.handleOptionToggle(option);
|
|
18
|
-
}, children: [_jsx("span", { className: "k-multiselect-option-label", children: String(option[props.labelKey]) }), isSelected && (_jsx(FontAwesomeIcon, { icon: faCheck, className: "k-multiselect-check" }))] },
|
|
19
|
-
})) : (_jsx("
|
|
24
|
+
}, children: [_jsx("span", { className: "k-multiselect-option-label", children: String(option[props.labelKey]) }), isSelected && (_jsx(FontAwesomeIcon, { icon: faCheck, className: "k-multiselect-check" }))] }, optionKeys[index]));
|
|
25
|
+
}) })) : (_jsx("div", { className: "k-multiselect-options-list", children: _jsx("div", { role: "status", className: `k-multiselect-no-results k-multiselect-option-${size}`, children: props.options.length === 0
|
|
20
26
|
? "No options available"
|
|
21
|
-
: "No options found" }));
|
|
22
|
-
}, [props.
|
|
23
|
-
|
|
27
|
+
: "No options found" }) }));
|
|
28
|
+
return (_jsxs("div", { className: `k-multiselect-dropdown k-multiselect-dropdown-${size}`, children: [_jsxs("div", { className: "k-multiselect-search-container", children: [_jsx(Input, { ref: props.searchInputRef, type: "text", placeholder: "Search options...", size: props.size, value: props.searchTerm, onChange: (e) => props.setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation(), onKeyDown: props.onSearchKeyDown, "aria-label": "Search options", "aria-controls": props.filteredOptions.length > 0 ? props.listboxId : undefined, "aria-activedescendant": props.highlightedIndex > -1
|
|
29
|
+
? optionId(props.listboxId, props.highlightedIndex)
|
|
30
|
+
: undefined }), _jsxs("div", { className: "k-multiselect-bulk-actions", children: [_jsx(Tooltip, { content: "Select All", children: _jsx(IconButton, { icon: faCheckDouble, "aria-label": "Select all", size: size, variant: "success", onClick: (e) => {
|
|
24
31
|
e.stopPropagation();
|
|
25
32
|
props.handleSelectAll();
|
|
26
|
-
}, disabled: value.length === props.options.length }) }), _jsx(Tooltip, { content: "Clear All", children: _jsx(IconButton, { icon: faXmark, size: size, variant: "danger", onClick: (e) => {
|
|
33
|
+
}, disabled: value.length === props.options.length }) }), _jsx(Tooltip, { content: "Clear All", children: _jsx(IconButton, { icon: faXmark, "aria-label": "Clear all", size: size, variant: "danger", onClick: (e) => {
|
|
27
34
|
e.stopPropagation();
|
|
28
35
|
props.handleClearAll();
|
|
29
|
-
}, disabled: value.length === 0 }) })] })] }),
|
|
36
|
+
}, disabled: value.length === 0 }) })] })] }), list] }));
|
|
30
37
|
};
|
|
31
38
|
//# sourceMappingURL=dropDown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropDown.js","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/dropDown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,OAAO,MAAM,iCAAiC,CAAC;AAEtD,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dropDown.js","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/dropDown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,UAAU,gBAAgB,CAAC,CAAC,CAAE,SAAQ,aAAa;IACjD,kCAAkC;IAClC,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,gCAAgC;IAChC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,uEAAuE;IACvE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACjC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,WAAW,GAAI,CAAC,EAAG,OAAO,gBAAgB,CAAC,CAAC,CAAC,gCA+PlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import useScrollIntoView from "../../../hooks/useScrollIntoView.js";
|
|
3
4
|
import DropdownArrowButton from "../dropdownArrowButton/index.js";
|
|
4
5
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
5
6
|
import useOutsideClick from "../../../hooks/useOutsideClick.js";
|
|
6
|
-
import
|
|
7
|
+
import useListKeyboard from "../../../hooks/useListKeyboard.js";
|
|
7
8
|
import { faXmark } from "@fortawesome/free-solid-svg-icons";
|
|
9
|
+
import { useState, useRef, useEffect, useId } from "react";
|
|
8
10
|
import FieldShell from "../../forms/fieldShell/index.js";
|
|
9
11
|
import { DropDownSection } from "./dropDown.js";
|
|
12
|
+
import { itemKeys } from "./utils.js";
|
|
10
13
|
import "./styles.css";
|
|
11
14
|
/**
|
|
12
15
|
* MultiSelect component with search functionality for selecting multiple options.
|
|
@@ -29,7 +32,13 @@ const MultiSelect = (props) => {
|
|
|
29
32
|
const [filteredOptions, setFilteredOptions] = useState(props.options);
|
|
30
33
|
const containerRef = useRef(null);
|
|
31
34
|
const searchInputRef = useRef(null);
|
|
32
|
-
const
|
|
35
|
+
const comboboxRef = useRef(null);
|
|
36
|
+
const optionRefs = useRef([]);
|
|
37
|
+
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
|
38
|
+
const generatedId = useId();
|
|
39
|
+
const componentId = props.id || `multiselect-${generatedId}`;
|
|
40
|
+
const labelId = `${componentId}-label`;
|
|
41
|
+
const listboxId = `${componentId}-listbox`;
|
|
33
42
|
// Filter options based on search term
|
|
34
43
|
useEffect(() => {
|
|
35
44
|
if (searchTerm) {
|
|
@@ -41,6 +50,7 @@ const MultiSelect = (props) => {
|
|
|
41
50
|
else {
|
|
42
51
|
setFilteredOptions(props.options);
|
|
43
52
|
}
|
|
53
|
+
setHighlightedIndex(-1);
|
|
44
54
|
}, [searchTerm, props.options]);
|
|
45
55
|
useOutsideClick([containerRef], () => setIsOpen(false));
|
|
46
56
|
// Focus search input when dropdown opens
|
|
@@ -49,12 +59,34 @@ const MultiSelect = (props) => {
|
|
|
49
59
|
searchInputRef.current.focus();
|
|
50
60
|
}
|
|
51
61
|
}, [isOpen]);
|
|
62
|
+
useScrollIntoView(optionRefs, highlightedIndex, isOpen);
|
|
52
63
|
const handleToggleDropdown = () => {
|
|
53
64
|
if (disabled)
|
|
54
65
|
return;
|
|
55
66
|
setIsOpen(!isOpen);
|
|
56
67
|
if (!isOpen) {
|
|
57
68
|
setSearchTerm("");
|
|
69
|
+
setHighlightedIndex(-1);
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
const close = () => {
|
|
73
|
+
setIsOpen(false);
|
|
74
|
+
comboboxRef.current?.focus();
|
|
75
|
+
};
|
|
76
|
+
// Closes when focus moves to something outside, such as on Tab. A null
|
|
77
|
+
// relatedTarget (a click on nothing focusable) is left to useOutsideClick,
|
|
78
|
+
// so a click inside the dropdown doesn't close it.
|
|
79
|
+
const handleBlur = (e) => {
|
|
80
|
+
const next = e.relatedTarget;
|
|
81
|
+
if (next && !containerRef.current?.contains(next))
|
|
82
|
+
setIsOpen(false);
|
|
83
|
+
};
|
|
84
|
+
const handleComboboxKeyDown = (e) => {
|
|
85
|
+
if (disabled || isOpen)
|
|
86
|
+
return;
|
|
87
|
+
if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
handleToggleDropdown();
|
|
58
90
|
}
|
|
59
91
|
};
|
|
60
92
|
const handleOptionToggle = (optionValue) => {
|
|
@@ -116,19 +148,23 @@ const MultiSelect = (props) => {
|
|
|
116
148
|
return;
|
|
117
149
|
props.onChange([]);
|
|
118
150
|
};
|
|
119
|
-
const
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
151
|
+
const handleSearchKeyDown = useListKeyboard({
|
|
152
|
+
isOpen,
|
|
153
|
+
length: filteredOptions.length,
|
|
154
|
+
highlightedIndex,
|
|
155
|
+
setHighlightedIndex,
|
|
156
|
+
onSelect: (index) => handleOptionToggle(filteredOptions[index]),
|
|
157
|
+
onClose: close,
|
|
158
|
+
});
|
|
159
|
+
const selectedKeys = itemKeys(value, props.labelKey);
|
|
160
|
+
const selectedItems = value.map((v, index) => (_jsxs("div", { className: "k-multiselect-selected-item", children: [_jsx("span", { className: "k-multiselect-selected-item-label", children: String(v[props.labelKey]) }), !disabled && (_jsx("button", { type: "button", className: "k-multiselect-selected-item-remove", tabIndex: -1, "aria-hidden": "true", "aria-label": `Remove ${String(v[props.labelKey])}`, onClick: (e) => {
|
|
161
|
+
e.stopPropagation();
|
|
162
|
+
handleOptionToggle(v);
|
|
163
|
+
}, children: _jsx(FontAwesomeIcon, { icon: faXmark }) }))] }, selectedKeys[index])));
|
|
164
|
+
return (_jsx("div", { ref: containerRef, onBlur: handleBlur, children: _jsxs(FieldShell, { label: props.label, required: required, labelId: labelId, className: "k-multiselect-container", children: [_jsxs("div", { ref: comboboxRef, id: componentId, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": isOpen ? listboxId : undefined, "aria-labelledby": props.label ? labelId : undefined, "aria-label": props.label ? undefined : placeholder, "aria-required": required || undefined, "aria-disabled": disabled || undefined, onKeyDown: handleComboboxKeyDown, className: `k-multiselect k-multiselect-${size} ${disabled ? "k-multiselect-disabled" : ""} ${isOpen ? "k-multiselect-open" : ""}`, onClick: handleToggleDropdown, tabIndex: disabled ? -1 : 0, children: [_jsx("div", { className: "k-multiselect-display", children: value.length > 0 ? (_jsx("div", { className: "k-multiselect-selected-items", children: selectedItems })) : (_jsx("span", { className: "k-multiselect-placeholder", children: placeholder })) }), _jsx(DropdownArrowButton, { size: size, isOpen: isOpen, disabled: disabled, onClick: (e) => {
|
|
129
165
|
e.stopPropagation();
|
|
130
166
|
handleToggleDropdown();
|
|
131
|
-
} })] }), isOpen && (_jsx(DropDownSection, { value: value, labelKey: props.labelKey, size: size, searchTerm: searchTerm, searchInputRef: searchInputRef, filteredOptions: filteredOptions, options: props.options, setSearchTerm: setSearchTerm, handleSelectAll: handleSelectAll, handleClearAll: handleClearAll, handleOptionToggle: handleOptionToggle }))] }) }));
|
|
167
|
+
} })] }), isOpen && (_jsx(DropDownSection, { value: value, labelKey: props.labelKey, size: size, searchTerm: searchTerm, searchInputRef: searchInputRef, filteredOptions: filteredOptions, options: props.options, setSearchTerm: setSearchTerm, handleSelectAll: handleSelectAll, handleClearAll: handleClearAll, handleOptionToggle: handleOptionToggle, listboxId: listboxId, labelId: props.label ? labelId : undefined, highlightedIndex: highlightedIndex, optionRefs: optionRefs, onSearchKeyDown: handleSearchKeyDown }))] }) }));
|
|
132
168
|
};
|
|
133
169
|
export default MultiSelect;
|
|
134
170
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,mBAAmB,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/multiSelect/index.tsx"],"names":[],"mappings":"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"}
|