@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
package/README.md
CHANGED
|
@@ -72,7 +72,9 @@ type Size = "sm" | "md" | "lg";
|
|
|
72
72
|
## Theming
|
|
73
73
|
|
|
74
74
|
Theme tokens are defined in `src/styles.css` on `:root` (light) and `[data-theme="dark"]`. Import
|
|
75
|
-
`styles.css` in your app entry point and override the variables to customize the theme.
|
|
75
|
+
`styles.css` in your app entry point and override the variables to customize the theme. Every token
|
|
76
|
+
is `--k-` prefixed (`--k-primary-color`, `--k-text-color`) so it can't collide with your app's own
|
|
77
|
+
variables.
|
|
76
78
|
|
|
77
79
|
`styles.css` is a global base, not only tokens: it also resets `html`, `body`, headings, links,
|
|
78
80
|
form-control fonts and scrollbars. Import it once, in the app's entry point.
|
|
@@ -46,126 +46,126 @@
|
|
|
46
46
|
|
|
47
47
|
.k-button-shadow {
|
|
48
48
|
box-shadow:
|
|
49
|
-
0 0.25rem 0.375rem -0.0625rem var(--shadow-color),
|
|
50
|
-
0 0.125rem 0.25rem -0.125rem var(--shadow-color);
|
|
49
|
+
0 0.25rem 0.375rem -0.0625rem var(--k-shadow-color),
|
|
50
|
+
0 0.125rem 0.25rem -0.125rem var(--k-shadow-color);
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.k-button-sm {
|
|
54
54
|
padding: 0.5rem 1rem;
|
|
55
|
-
font-size: var(--text-size-sm);
|
|
55
|
+
font-size: var(--k-text-size-sm);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.k-button-md {
|
|
59
59
|
padding: 0.75rem 1.5rem;
|
|
60
|
-
font-size: var(--text-size-md);
|
|
60
|
+
font-size: var(--k-text-size-md);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.k-button-lg {
|
|
64
64
|
padding: 1rem 2rem;
|
|
65
|
-
font-size: var(--text-size-lg);
|
|
65
|
+
font-size: var(--k-text-size-lg);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.k-button:not(:disabled):hover {
|
|
69
69
|
box-shadow:
|
|
70
|
-
0 0.625rem 0.9375rem -0.1875rem var(--shadow-color-hover),
|
|
71
|
-
0 0.25rem 0.375rem -0.25rem var(--shadow-color-hover);
|
|
70
|
+
0 0.625rem 0.9375rem -0.1875rem var(--k-shadow-color-hover),
|
|
71
|
+
0 0.25rem 0.375rem -0.25rem var(--k-shadow-color-hover);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
.k-button:active {
|
|
75
|
-
box-shadow: inset 0 0.125rem 0.25rem 0 var(--shadow-color-active);
|
|
75
|
+
box-shadow: inset 0 0.125rem 0.25rem 0 var(--k-shadow-color-active);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
.k-button:focus {
|
|
79
|
-
box-shadow: 0 0 0 0.1875rem var(--shadow-color-hover);
|
|
79
|
+
box-shadow: 0 0 0 0.1875rem var(--k-shadow-color-hover);
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
.k-button-primary {
|
|
83
|
-
background-color: var(--primary-color);
|
|
84
|
-
color: var(--text-color-light);
|
|
83
|
+
background-color: var(--k-primary-color);
|
|
84
|
+
color: var(--k-text-color-light);
|
|
85
85
|
}
|
|
86
86
|
.k-button-primary:not(:disabled):hover {
|
|
87
|
-
background-color: var(--primary-color-hover);
|
|
87
|
+
background-color: var(--k-primary-color-hover);
|
|
88
88
|
}
|
|
89
89
|
.k-button-primary:active {
|
|
90
|
-
background-color: var(--primary-color-active);
|
|
90
|
+
background-color: var(--k-primary-color-active);
|
|
91
91
|
}
|
|
92
92
|
.k-button-primary:focus {
|
|
93
|
-
box-shadow: 0 0 0 0.1875rem var(--primary-color);
|
|
93
|
+
box-shadow: 0 0 0 0.1875rem var(--k-primary-color);
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
.k-button-secondary {
|
|
97
|
-
background-color: var(--secondary-color);
|
|
98
|
-
color: var(--text-color-light);
|
|
97
|
+
background-color: var(--k-secondary-color);
|
|
98
|
+
color: var(--k-text-color-light);
|
|
99
99
|
}
|
|
100
100
|
.k-button-secondary:not(:disabled):hover {
|
|
101
|
-
background-color: var(--secondary-color-hover);
|
|
101
|
+
background-color: var(--k-secondary-color-hover);
|
|
102
102
|
}
|
|
103
103
|
.k-button-secondary:active {
|
|
104
|
-
background-color: var(--secondary-color-active);
|
|
104
|
+
background-color: var(--k-secondary-color-active);
|
|
105
105
|
}
|
|
106
106
|
.k-button-secondary:focus {
|
|
107
|
-
box-shadow: 0 0 0 0.1875rem var(--secondary-color);
|
|
107
|
+
box-shadow: 0 0 0 0.1875rem var(--k-secondary-color);
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
.k-button-light {
|
|
111
|
-
background-color: var(--light-color);
|
|
112
|
-
color: var(--text-color);
|
|
111
|
+
background-color: var(--k-light-color);
|
|
112
|
+
color: var(--k-text-color);
|
|
113
113
|
}
|
|
114
114
|
.k-button-light:not(:disabled):hover {
|
|
115
|
-
background-color: var(--light-color-hover);
|
|
115
|
+
background-color: var(--k-light-color-hover);
|
|
116
116
|
}
|
|
117
117
|
.k-button-light:active {
|
|
118
|
-
background-color: var(--light-color-active);
|
|
118
|
+
background-color: var(--k-light-color-active);
|
|
119
119
|
}
|
|
120
120
|
.k-button-light:focus {
|
|
121
|
-
box-shadow: 0 0 0 0.1875rem var(--light-color);
|
|
121
|
+
box-shadow: 0 0 0 0.1875rem var(--k-light-color);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
.k-button-danger {
|
|
125
|
-
background-color: var(--danger-color);
|
|
126
|
-
color: var(--text-color-light);
|
|
125
|
+
background-color: var(--k-danger-color);
|
|
126
|
+
color: var(--k-text-color-light);
|
|
127
127
|
}
|
|
128
128
|
.k-button-danger:not(:disabled):hover {
|
|
129
|
-
background-color: var(--danger-color-hover);
|
|
129
|
+
background-color: var(--k-danger-color-hover);
|
|
130
130
|
}
|
|
131
131
|
.k-button-danger:active {
|
|
132
|
-
background-color: var(--danger-color-active);
|
|
132
|
+
background-color: var(--k-danger-color-active);
|
|
133
133
|
}
|
|
134
134
|
.k-button-danger:focus {
|
|
135
|
-
box-shadow: 0 0 0 0.1875rem var(--danger-color);
|
|
135
|
+
box-shadow: 0 0 0 0.1875rem var(--k-danger-color);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.k-button-success {
|
|
139
|
-
background-color: var(--success-color);
|
|
140
|
-
color: var(--text-color-light);
|
|
139
|
+
background-color: var(--k-success-color);
|
|
140
|
+
color: var(--k-text-color-light);
|
|
141
141
|
}
|
|
142
142
|
.k-button-success:not(:disabled):hover {
|
|
143
|
-
background-color: var(--success-color-hover);
|
|
143
|
+
background-color: var(--k-success-color-hover);
|
|
144
144
|
}
|
|
145
145
|
.k-button-success:active {
|
|
146
|
-
background-color: var(--success-color-active);
|
|
146
|
+
background-color: var(--k-success-color-active);
|
|
147
147
|
}
|
|
148
148
|
.k-button-success:focus {
|
|
149
|
-
box-shadow: 0 0 0 0.1875rem var(--success-color);
|
|
149
|
+
box-shadow: 0 0 0 0.1875rem var(--k-success-color);
|
|
150
150
|
}
|
|
151
151
|
|
|
152
152
|
.k-button-warning {
|
|
153
|
-
background-color: var(--warning-color);
|
|
154
|
-
color: var(--warning-color-contrast);
|
|
153
|
+
background-color: var(--k-warning-color);
|
|
154
|
+
color: var(--k-warning-color-contrast);
|
|
155
155
|
}
|
|
156
156
|
.k-button-warning:not(:disabled):hover {
|
|
157
|
-
background-color: var(--warning-color-hover);
|
|
157
|
+
background-color: var(--k-warning-color-hover);
|
|
158
158
|
}
|
|
159
159
|
.k-button-warning:active {
|
|
160
|
-
background-color: var(--warning-color-active);
|
|
160
|
+
background-color: var(--k-warning-color-active);
|
|
161
161
|
}
|
|
162
162
|
.k-button-warning:focus {
|
|
163
|
-
box-shadow: 0 0 0 0.1875rem var(--warning-color);
|
|
163
|
+
box-shadow: 0 0 0 0.1875rem var(--k-warning-color);
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
.k-button-link {
|
|
167
167
|
background-color: transparent;
|
|
168
|
-
color: var(--primary-color-text);
|
|
168
|
+
color: var(--k-primary-color-text);
|
|
169
169
|
padding: 0;
|
|
170
170
|
border-radius: 0;
|
|
171
171
|
font-weight: 500;
|
|
@@ -174,19 +174,19 @@
|
|
|
174
174
|
box-shadow: none;
|
|
175
175
|
}
|
|
176
176
|
.k-button-link:not(:disabled):hover {
|
|
177
|
-
color: var(--primary-color-text);
|
|
177
|
+
color: var(--k-primary-color-text);
|
|
178
178
|
/* One text color keeps contrast in both themes; hover shows as a heavier underline. */
|
|
179
179
|
text-decoration-thickness: 0.125rem;
|
|
180
180
|
background-color: transparent;
|
|
181
181
|
box-shadow: none;
|
|
182
182
|
}
|
|
183
183
|
.k-button-link:active {
|
|
184
|
-
color: var(--primary-color-text);
|
|
184
|
+
color: var(--k-primary-color-text);
|
|
185
185
|
background-color: transparent;
|
|
186
186
|
box-shadow: none;
|
|
187
187
|
}
|
|
188
188
|
.k-button-link:focus {
|
|
189
|
-
outline: 0.125rem solid var(--primary-color);
|
|
189
|
+
outline: 0.125rem solid var(--k-primary-color);
|
|
190
190
|
outline-offset: 0.125rem;
|
|
191
191
|
box-shadow: none;
|
|
192
192
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/rowActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,qDAAqD;IACrD,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,UAAU,GAAI,2BAIjB,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/rowActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,qDAAqD;IACrD,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,UAAU,GAAI,2BAIjB,eAAe,gCAYjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -7,7 +7,8 @@ const RowActions = ({ children, align = "center", gap = "xs", }) => {
|
|
|
7
7
|
`k-row-actions-${align}`,
|
|
8
8
|
`k-row-actions-gap-${gap}`,
|
|
9
9
|
].join(" ");
|
|
10
|
-
|
|
10
|
+
// Actions sit inside clickable rows; a click on one is not a row click.
|
|
11
|
+
return (_jsx("div", { className: classes, onClick: (e) => e.stopPropagation(), children: children }));
|
|
11
12
|
};
|
|
12
13
|
export default RowActions;
|
|
13
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/buttons/rowActions/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAUtB,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,GAAG,GAAG,IAAI,GACM,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG;QACd,eAAe;QACf,iBAAiB,KAAK,EAAE;QACxB,qBAAqB,GAAG,EAAE;KAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACZ,OAAO,cAAK,SAAS,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/buttons/rowActions/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAUtB,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,KAAK,GAAG,QAAQ,EAChB,GAAG,GAAG,IAAI,GACM,EAAE,EAAE;IACpB,MAAM,OAAO,GAAG;QACd,eAAe;QACf,iBAAiB,KAAK,EAAE;QACxB,qBAAqB,GAAG,EAAE;KAC3B,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACZ,wEAAwE;IACxE,OAAO,CACL,cAAK,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YACzD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
font-weight: 600;
|
|
11
11
|
text-transform: uppercase;
|
|
12
12
|
letter-spacing: 0.04em;
|
|
13
|
-
color: var(--text-color-secondary);
|
|
13
|
+
color: var(--k-text-color-secondary);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.k-address-block-body {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
|
|
30
30
|
.k-address-block-contact {
|
|
31
31
|
font-size: 0.8125rem;
|
|
32
|
-
color: var(--text-color-secondary);
|
|
32
|
+
color: var(--k-text-color-secondary);
|
|
33
33
|
margin-top: 0.125rem;
|
|
34
34
|
}
|
|
35
35
|
|
|
@@ -4,7 +4,7 @@ export interface ColorSwatchProps {
|
|
|
4
4
|
size?: "sm" | "md" | "lg";
|
|
5
5
|
/** Border around swatch. Defaults to true. */
|
|
6
6
|
bordered?: boolean;
|
|
7
|
-
/** Accessible label
|
|
7
|
+
/** Accessible label and tooltip. Defaults to the colour value. */
|
|
8
8
|
title?: string;
|
|
9
9
|
}
|
|
10
10
|
declare const ColorSwatch: ({ color, size, bordered, title, }: ColorSwatchProps) => import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/colorSwatch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/colorSwatch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,WAAW,GAAI,mCAKlB,gBAAgB,gCAYlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import "./styles.css";
|
|
4
|
-
const ColorSwatch = ({ color, size = "md", bordered = true, title, }) => {
|
|
4
|
+
const ColorSwatch = ({ color, size = "md", bordered = true, title = color, }) => {
|
|
5
5
|
return (_jsx("span", { role: "img", "aria-label": title, title: title, style: { backgroundColor: color }, className: `k-color-swatch k-color-swatch-${size} ${bordered ? "k-color-swatch-bordered" : ""}`.trim() }));
|
|
6
6
|
};
|
|
7
7
|
export default ColorSwatch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/colorSwatch/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,cAAc,CAAC;AAWtB,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,IAAI,EACf,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/colorSwatch/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,cAAc,CAAC;AAWtB,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,IAAI,EACf,KAAK,GAAG,KAAK,GACI,EAAE,EAAE;IACrB,OAAO,CACL,eACE,IAAI,EAAC,KAAK,gBACE,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,SAAS,EAAE,iCAAiC,IAAI,IAC9C,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EACzC,EAAE,CAAC,IAAI,EAAE,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/dataTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGvE,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,cAAc,CAAC,KAAK;IACnC,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC1C,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAgBD,QAAA,MAAM,SAAS,GAAI,KAAK,SAAS,MAAM,EAAE,OAAO,cAAc,CAAC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/dataTable/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGvE,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,cAAc,CAAC,KAAK;IACnC,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;IACxB,qEAAqE;IACrE,aAAa,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC1C,gDAAgD;IAChD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAgBD,QAAA,MAAM,SAAS,GAAI,KAAK,SAAS,MAAM,EAAE,OAAO,cAAc,CAAC,KAAK,CAAC,gCAiKpE,CAAC;AAEF,eAAe,SAAS,CAAC;AACzB,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import parseDataKey, { cellText } from "./utils/parseDataKey.js";
|
|
3
4
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
4
|
-
import parseDataKey from "./utils/parseDataKey.js";
|
|
5
5
|
import { useMemo } from "react";
|
|
6
6
|
import "../table/styles.css";
|
|
7
7
|
import "./styles.css";
|
|
@@ -32,6 +32,8 @@ const DataTable = (props) => {
|
|
|
32
32
|
headers.push(_jsx("th", { className: "k-data-table-leading", children: leadingColumn.header }, "leading"));
|
|
33
33
|
}
|
|
34
34
|
for (const c of columns) {
|
|
35
|
+
if (c.hidden)
|
|
36
|
+
continue;
|
|
35
37
|
const content = c.headerElement ? c.headerElement(c.title) : c.title;
|
|
36
38
|
const alignClass = c.align ? `k-data-table-align-${c.align}` : "";
|
|
37
39
|
headers.push(_jsx("th", { className: `k-data-table-header-cell ${alignClass}`.trim(), style: { width: c.width, minWidth: c.minWidth, maxWidth: c.maxWidth }, children: content }, headers.length));
|
|
@@ -45,17 +47,19 @@ const DataTable = (props) => {
|
|
|
45
47
|
cells.push(_jsx("td", { className: "k-data-table-leading", onClick: disable ? (e) => e.stopPropagation() : undefined, children: leadingColumn.cell(row) }, "leading"));
|
|
46
48
|
}
|
|
47
49
|
for (const c of columns) {
|
|
50
|
+
if (c.hidden)
|
|
51
|
+
continue;
|
|
48
52
|
const alignClass = c.align ? `k-data-table-align-${c.align}` : "";
|
|
49
53
|
const content = c.cellElement
|
|
50
54
|
? c.cellElement(row.data, row.index)
|
|
51
55
|
: c.dataKey
|
|
52
|
-
? parseDataKey(c.dataKey, row.data)
|
|
56
|
+
? cellText(parseDataKey(c.dataKey, row.data))
|
|
53
57
|
: undefined;
|
|
54
58
|
cells.push(_jsx("td", { className: alignClass, onClick: c.disableRowClick ? (e) => e.stopPropagation() : undefined, children: content }, cells.length));
|
|
55
59
|
}
|
|
56
60
|
return cells;
|
|
57
61
|
};
|
|
58
|
-
const columnSpan = columns.length + (leadingColumn ? 1 : 0);
|
|
62
|
+
const columnSpan = columns.filter((c) => !c.hidden).length + (leadingColumn ? 1 : 0);
|
|
59
63
|
const body = shouldVirtualize
|
|
60
64
|
? (() => {
|
|
61
65
|
const virtualRows = virtualizer.getVirtualItems();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/dataTable/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/dataTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -24,8 +24,9 @@
|
|
|
24
24
|
border: 0;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
/* Headers follow their column's `align`, so they line up with the cells. */
|
|
27
28
|
.k-data-table-header-cell {
|
|
28
|
-
text-align:
|
|
29
|
+
text-align: left;
|
|
29
30
|
}
|
|
30
31
|
|
|
31
32
|
.k-data-table-row-clickable {
|
|
@@ -33,7 +34,7 @@
|
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
.k-data-table-row-clickable:hover {
|
|
36
|
-
background-color: var(--
|
|
37
|
+
background-color: var(--k-background-color-hover) !important;
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
/* Alignment classes using flexbox for reliable alignment of any content */
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Reads the value at `dataKey` ("name", "address.city", "tags[1]",
|
|
4
|
+
* "pets[0].name"), or undefined when any part of the path is missing.
|
|
5
|
+
*/
|
|
6
|
+
declare const parseDataKey: (dataKey: string, data: any) => unknown;
|
|
7
|
+
/** What a cell shows for a value: the value, or an em dash when there is none. */
|
|
8
|
+
export declare const cellText: (value: unknown) => ReactNode;
|
|
2
9
|
export default parseDataKey;
|
|
3
10
|
//# sourceMappingURL=parseDataKey.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseDataKey.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/dataTable/utils/parseDataKey.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"parseDataKey.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/dataTable/utils/parseDataKey.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;GAGG;AAEH,QAAA,MAAM,YAAY,GAAI,SAAS,MAAM,EAAE,MAAM,GAAG,KAAG,OAKwB,CAAC;AAE5E,kFAAkF;AAClF,eAAO,MAAM,QAAQ,GAAI,OAAO,OAAO,KAAG,SAGhB,CAAC;AAE3B,eAAe,YAAY,CAAC"}
|
|
@@ -1,44 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reads the value at `dataKey` ("name", "address.city", "tags[1]",
|
|
3
|
+
* "pets[0].name"), or undefined when any part of the path is missing.
|
|
4
|
+
*/
|
|
1
5
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2
|
-
const parseDataKey = (dataKey, data) =>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
else if (bracketIndex === -1) {
|
|
13
|
-
const key = dataKey.substring(0, dotIndex);
|
|
14
|
-
value = value[key];
|
|
15
|
-
dataKey = dataKey.substring(dotIndex + 1);
|
|
16
|
-
more = true;
|
|
17
|
-
}
|
|
18
|
-
else if (dotIndex === -1) {
|
|
19
|
-
const key = dataKey.substring(0, bracketIndex);
|
|
20
|
-
const index = dataKey.substring(bracketIndex + 1, dataKey.indexOf("]"));
|
|
21
|
-
value = value[key][parseInt(index)];
|
|
22
|
-
dataKey = dataKey.substring(dataKey.indexOf("]") + 1);
|
|
23
|
-
more = true;
|
|
24
|
-
}
|
|
25
|
-
else if (bracketIndex < dotIndex) {
|
|
26
|
-
const key = dataKey.substring(0, bracketIndex);
|
|
27
|
-
const index = dataKey.substring(bracketIndex + 1, dataKey.indexOf("]"));
|
|
28
|
-
value = value[key][parseInt(index)];
|
|
29
|
-
dataKey = dataKey.substring(dataKey.indexOf("]") + 1);
|
|
30
|
-
more = true;
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
33
|
-
const key = dataKey.substring(0, dotIndex);
|
|
34
|
-
value = value[key];
|
|
35
|
-
dataKey = dataKey.substring(dotIndex + 1);
|
|
36
|
-
more = true;
|
|
37
|
-
}
|
|
38
|
-
} while (more);
|
|
39
|
-
if (value === undefined)
|
|
40
|
-
throw new Error(`Invalid dataKey: ${dataKey}`);
|
|
41
|
-
return value;
|
|
42
|
-
};
|
|
6
|
+
const parseDataKey = (dataKey, data) => dataKey
|
|
7
|
+
.replace(/\[(\d+)\]/g, ".$1")
|
|
8
|
+
.split(".")
|
|
9
|
+
.filter(Boolean)
|
|
10
|
+
.reduce((value, key) => (value == null ? undefined : value[key]), data);
|
|
11
|
+
/** What a cell shows for a value: the value, or an em dash when there is none. */
|
|
12
|
+
export const cellText = (value) => value === undefined || value === null || value === ""
|
|
13
|
+
? "—"
|
|
14
|
+
: value;
|
|
43
15
|
export default parseDataKey;
|
|
44
16
|
//# sourceMappingURL=parseDataKey.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parseDataKey.js","sourceRoot":"","sources":["../../../../../src/components/data-display/dataTable/utils/parseDataKey.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"parseDataKey.js","sourceRoot":"","sources":["../../../../../src/components/data-display/dataTable/utils/parseDataKey.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,8DAA8D;AAC9D,MAAM,YAAY,GAAG,CAAC,OAAe,EAAE,IAAS,EAAW,EAAE,CAC3D,OAAO;KACJ,OAAO,CAAC,YAAY,EAAE,KAAK,CAAC;KAC5B,KAAK,CAAC,GAAG,CAAC;KACV,MAAM,CAAC,OAAO,CAAC;KACf,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AAE5E,kFAAkF;AAClF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAc,EAAa,EAAE,CACpD,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE;IACnD,CAAC,CAAC,GAAG;IACL,CAAC,CAAE,KAAmB,CAAC;AAE3B,eAAe,YAAY,CAAC"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
align-items: center;
|
|
5
5
|
gap: 0.5rem;
|
|
6
6
|
width: 100%;
|
|
7
|
-
border: 0.0625rem dashed var(--border-color);
|
|
7
|
+
border: 0.0625rem dashed var(--k-border-color);
|
|
8
8
|
border-radius: 0.25rem;
|
|
9
9
|
padding: 0.5rem;
|
|
10
10
|
}
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
.k-image-preview-item {
|
|
24
24
|
object-fit: cover;
|
|
25
25
|
border-radius: 0.25rem;
|
|
26
|
-
box-shadow: 0 0.125rem 0.25rem var(--shadow-color);
|
|
26
|
+
box-shadow: 0 0.125rem 0.25rem var(--k-shadow-color);
|
|
27
27
|
flex-shrink: 0;
|
|
28
28
|
}
|
|
29
29
|
|
|
@@ -4,6 +4,10 @@ import "./styles.css";
|
|
|
4
4
|
interface InfiniteScrollMenuFiltersProps {
|
|
5
5
|
pendingFilters: InfiniteScrollMenuGeneratedFilter[];
|
|
6
6
|
handleNewPendingFilters: (filters: SetStateAction<InfiniteScrollMenuGeneratedFilter[]>) => void;
|
|
7
|
+
/** Applies the pending filters; Enter in a filter's text box calls it. Omit when there's nothing to apply. */
|
|
8
|
+
onApply?: () => void;
|
|
9
|
+
/** Range filters keep edits as a draft until their menu's Apply button. */
|
|
10
|
+
rangeApplyInMenu?: boolean;
|
|
7
11
|
children?: ReactNode;
|
|
8
12
|
}
|
|
9
13
|
declare const Filters: (props: InfiniteScrollMenuFiltersProps) => import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAe,MAAM,OAAO,CAAC;AAK/D,OAAO,cAAc,CAAC;AAEtB,UAAU,8BAA8B;IACtC,cAAc,EAAE,iCAAiC,EAAE,CAAC;IACpD,uBAAuB,EAAE,CACvB,OAAO,EAAE,cAAc,CAAC,iCAAiC,EAAE,CAAC,KACzD,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iCAAiC,EAAE,MAAM,aAAa,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAe,MAAM,OAAO,CAAC;AAK/D,OAAO,cAAc,CAAC;AAEtB,UAAU,8BAA8B;IACtC,cAAc,EAAE,iCAAiC,EAAE,CAAC;IACpD,uBAAuB,EAAE,CACvB,OAAO,EAAE,cAAc,CAAC,iCAAiC,EAAE,CAAC,KACzD,IAAI,CAAC;IACV,8GAA8G;IAC9G,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAQD,QAAA,MAAM,OAAO,GAAI,OAAO,8BAA8B,gCA+DrD,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -6,6 +6,10 @@ import SearchFilter from "./searchFilter.js";
|
|
|
6
6
|
import RangeFilter from "./rangeFilter.js";
|
|
7
7
|
import ListFilter from "./listFilter.js";
|
|
8
8
|
import "./styles.css";
|
|
9
|
+
// Enter in a search, number or date box applies, as in a form; checkboxes and
|
|
10
|
+
// buttons keep their own Enter behaviour.
|
|
11
|
+
const isTextEntry = (target) => target instanceof HTMLInputElement &&
|
|
12
|
+
!["checkbox", "radio", "button", "submit"].includes(target.type);
|
|
9
13
|
const Filters = (props) => {
|
|
10
14
|
const handleFilterChange = useCallback((filter) => {
|
|
11
15
|
props.handleNewPendingFilters((prevFilters) => prevFilters.map((f) => (f.filterId === filter.filterId ? filter : f)));
|
|
@@ -15,7 +19,7 @@ const Filters = (props) => {
|
|
|
15
19
|
return (_jsx(SelectFilter, { filter: filter, onFilterChange: handleFilterChange }, filter.filterId));
|
|
16
20
|
}
|
|
17
21
|
else if (filter.type === "RANGE") {
|
|
18
|
-
return (_jsx(RangeFilter, { filter: filter, onFilterChange: handleFilterChange }, filter.filterId));
|
|
22
|
+
return (_jsx(RangeFilter, { filter: filter, onFilterChange: handleFilterChange, applyInMenu: props.rangeApplyInMenu }, filter.filterId));
|
|
19
23
|
}
|
|
20
24
|
else if (filter.type === "SEARCH") {
|
|
21
25
|
return (_jsx(SearchFilter, { filter: filter, onFilterChange: handleFilterChange }, filter.filterId));
|
|
@@ -24,7 +28,13 @@ const Filters = (props) => {
|
|
|
24
28
|
return (_jsx(ListFilter, { filter: filter, onFilterChange: handleFilterChange }, filter.filterId));
|
|
25
29
|
}
|
|
26
30
|
};
|
|
27
|
-
|
|
31
|
+
const handleKeyDown = (e) => {
|
|
32
|
+
if (e.key !== "Enter" || !props.onApply || !isTextEntry(e.target))
|
|
33
|
+
return;
|
|
34
|
+
e.preventDefault();
|
|
35
|
+
props.onApply();
|
|
36
|
+
};
|
|
37
|
+
return (_jsxs("div", { className: "k-menu-filters-container", onKeyDown: handleKeyDown, children: [_jsx("div", { className: "k-menu-filters", children: props.pendingFilters.map(getFilter) }), props.children && (_jsx("div", { className: "k-menu-filters-buttons", children: props.children }))] }));
|
|
28
38
|
};
|
|
29
39
|
export default Filters;
|
|
30
40
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,cAAc,CAAC;AActB,8EAA8E;AAC9E,0CAA0C;AAC1C,MAAM,WAAW,GAAG,CAAC,MAAmB,EAAE,EAAE,CAC1C,MAAM,YAAY,gBAAgB;IAClC,CAAC,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAEnE,MAAM,OAAO,GAAG,CAAC,KAAqC,EAAE,EAAE;IACxD,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,MAAyC,EAAE,EAAE;QAC5C,KAAK,CAAC,uBAAuB,CAAC,CAAC,WAAW,EAAE,EAAE,CAC5C,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACtE,CAAC;IACJ,CAAC,EACD,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAChC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,MAAyC,EAAE,EAAE;QAC9D,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO,CACL,KAAC,YAAY,IAEX,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,kBAAkB,IAF7B,MAAM,CAAC,QAAQ,CAGpB,CACH,CAAC;QACJ,CAAC;aAAM,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACnC,OAAO,CACL,KAAC,WAAW,IAEV,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,kBAAkB,EAClC,WAAW,EAAE,KAAK,CAAC,gBAAgB,IAH9B,MAAM,CAAC,QAAQ,CAIpB,CACH,CAAC;QACJ,CAAC;aAAM,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACpC,OAAO,CACL,KAAC,YAAY,IAEX,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,kBAAkB,IAF7B,MAAM,CAAC,QAAQ,CAGpB,CACH,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,CACL,KAAC,UAAU,IAET,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,kBAAkB,IAF7B,MAAM,CAAC,QAAQ,CAGpB,CACH,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC/D,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;YAAE,OAAO;QAC1E,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,EAAC,SAAS,EAAE,aAAa,aAChE,cAAK,SAAS,EAAC,gBAAgB,YAC5B,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,GAChC,EACL,KAAK,CAAC,QAAQ,IAAI,CACjB,cAAK,SAAS,EAAC,wBAAwB,YAAE,KAAK,CAAC,QAAQ,GAAO,CAC/D,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/listFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,cAAc,CAAC;AACtB,OAAO,EACL,mBAAmB,EACnB,iCAAiC,EAClC,MAAM,aAAa,CAAC;AAErB,UAAU,6BAA6B;IACrC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,iCAAiC,KAAK,IAAI,CAAC;CACrE;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,6BAA6B,
|
|
1
|
+
{"version":3,"file":"listFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/listFilter.tsx"],"names":[],"mappings":"AAOA,OAAO,cAAc,CAAC;AACtB,OAAO,EACL,mBAAmB,EACnB,iCAAiC,EAClC,MAAM,aAAa,CAAC;AAErB,UAAU,6BAA6B;IACrC,MAAM,EAAE,mBAAmB,CAAC;IAC5B,cAAc,EAAE,CAAC,MAAM,EAAE,iCAAiC,KAAK,IAAI,CAAC;CACrE;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,6BAA6B,gCA+DvD,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -34,7 +34,7 @@ const ListFilter = (props) => {
|
|
|
34
34
|
const allowSubmit = useMemo(() => {
|
|
35
35
|
return list !== prevList;
|
|
36
36
|
}, [list, prevList]);
|
|
37
|
-
return (_jsx(Dropdown, { size: "sm", variant: "secondary", label: props.filter.title, align: "left", icon: faList, isOpen: isOpen, onOpenChange: setIsOpen, children: _jsxs("div", { className: "k-filter-menu", children: [_jsx(Input, { size: "sm", value: list, onChange: handleChange, type: "text", onKeyDown: handleKeydown }), _jsx(Button, { size: "sm", disabled: !allowSubmit, onClick: handleSubmit, children: "Add Filter" })] }) }));
|
|
37
|
+
return (_jsx(Dropdown, { size: "sm", variant: "secondary", label: props.filter.title, align: "left", icon: faList, isOpen: isOpen, onOpenChange: setIsOpen, children: _jsxs("div", { className: "k-filter-menu", children: [_jsx(Input, { size: "sm", value: list, onChange: handleChange, type: "text", onKeyDown: handleKeydown, "aria-label": `${props.filter.title} values` }), _jsx(Button, { size: "sm", disabled: !allowSubmit, onClick: handleSubmit, children: "Add Filter" })] }) }));
|
|
38
38
|
};
|
|
39
39
|
export default ListFilter;
|
|
40
40
|
//# sourceMappingURL=listFilter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listFilter.js","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/listFilter.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,QAAQ,MAAM,mCAAmC,CAAC;AACzD,OAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,OAAO,KAAK,MAAM,gCAAgC,CAAC;AACnD,OAAO,cAAc,CAAC;AAWtB,MAAM,UAAU,GAAG,CAAC,KAAoC,EAAE,EAAE;IAC1D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IACE,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ;YAC9B,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,SAAS,IAAI,QAAQ,KAAK,EAAE,CAAC;YAEpD,OAAO;QACT,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;QACjC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;QACrC,OAAO;IACT,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAsC,EAAE,EAAE;QAC1E,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,KAAK,CAAC,cAAc,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QACtD,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAwC,EAAE,EAAE;QAC3C,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;YAAE,OAAO;QAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,YAAY,EAAE,CAAC;IACjB,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO,IAAI,KAAK,QAAQ,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EACzB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,SAAS,YAEvB,eAAK,SAAS,EAAC,eAAe,aAC5B,KAAC,KAAK,IACJ,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"listFilter.js","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/listFilter.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,12 @@ import { GeneratedRangeFilter, InfiniteScrollMenuGeneratedFilter } from "../type
|
|
|
3
3
|
interface InfiniteScrollRangeFilterProps {
|
|
4
4
|
filter: GeneratedRangeFilter;
|
|
5
5
|
onFilterChange: (filter: InfiniteScrollMenuGeneratedFilter) => void;
|
|
6
|
+
/**
|
|
7
|
+
* Edits stay a draft until the menu's Apply button (or Enter), so both
|
|
8
|
+
* bounds can be typed before anything is fetched. Closing the menu drops
|
|
9
|
+
* the draft. Without it, each edit reports at once.
|
|
10
|
+
*/
|
|
11
|
+
applyInMenu?: boolean;
|
|
6
12
|
}
|
|
7
13
|
declare const RangeFilter: (props: InfiniteScrollRangeFilterProps) => import("react").JSX.Element;
|
|
8
14
|
export default RangeFilter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rangeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/rangeFilter.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"rangeFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/infiniteScroll/filters/rangeFilter.tsx"],"names":[],"mappings":"AAQA,OAAO,cAAc,CAAC;AAMtB,OAAO,EACL,oBAAoB,EACpB,iCAAiC,EAElC,MAAM,aAAa,CAAC;AAErB,UAAU,8BAA8B;IACtC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,cAAc,EAAE,CAAC,MAAM,EAAE,iCAAiC,KAAK,IAAI,CAAC;IACpE;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAuBD,QAAA,MAAM,WAAW,GAAI,OAAO,8BAA8B,gCA6JzD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|