@kosmeo-ui/react 0.1.1 → 1.0.0
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/index.d.ts +2 -0
- package/dist/components/buttons/button/index.d.ts.map +1 -1
- package/dist/components/buttons/button/index.js +2 -2
- package/dist/components/buttons/button/index.js.map +1 -1
- package/dist/components/buttons/button/styles.css +45 -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/buttons/rowActions/styles.css +7 -0
- package/dist/components/data-display/addressBlock/styles.css +2 -4
- 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 +18 -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/searchFilter.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/filters/searchFilter.js +4 -35
- package/dist/components/data-display/infiniteScroll/filters/searchFilter.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 +34 -1
- package/dist/components/data-display/infiniteScroll/header/deleteButton.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/deleteButton.js +1 -1
- package/dist/components/data-display/infiniteScroll/header/deleteButton.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/index.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/header/index.js +1 -1
- package/dist/components/data-display/infiniteScroll/header/index.js.map +1 -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/table/index.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/table/index.js +2 -2
- package/dist/components/data-display/infiniteScroll/table/index.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/index.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/index.js +7 -11
- 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 +8 -8
- 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 +6 -18
- package/dist/components/data-display/infiniteScroll/tags/rangeFilterTag.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/selectFilterTag.d.ts.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/selectFilterTag.js +3 -5
- package/dist/components/data-display/infiniteScroll/tags/selectFilterTag.js.map +1 -1
- package/dist/components/data-display/infiniteScroll/tags/styles.css +1 -29
- 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 -4
- 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 +22 -11
- 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 +45 -45
- package/dist/components/feedback/emptyState/styles.css +2 -4
- package/dist/components/feedback/loadingOverlay/styles.css +1 -1
- package/dist/components/feedback/progressBar/index.d.ts.map +1 -1
- package/dist/components/feedback/progressBar/index.js +7 -2
- package/dist/components/feedback/progressBar/index.js.map +1 -1
- package/dist/components/feedback/progressBar/styles.css +25 -16
- package/dist/components/feedback/spinner/styles.css +14 -24
- 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 -3
- 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 +4 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/index.d.ts +6 -1
- package/dist/components/inputs/checkbox/index.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/index.js +12 -3
- package/dist/components/inputs/checkbox/index.js.map +1 -1
- package/dist/components/inputs/checkbox/styles.css +11 -3
- 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 +6 -6
- package/dist/components/inputs/dateInput/index.d.ts.map +1 -1
- package/dist/components/inputs/dateInput/index.js +15 -5
- 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.d.ts +2 -0
- package/dist/components/inputs/dropdown/index.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/index.js +2 -2
- package/dist/components/inputs/dropdown/index.js.map +1 -1
- package/dist/components/inputs/dropdown/styles.css +2 -2
- package/dist/components/inputs/dropdownArrowButton/index.d.ts.map +1 -1
- package/dist/components/inputs/dropdownArrowButton/index.js +1 -1
- package/dist/components/inputs/dropdownArrowButton/index.js.map +1 -1
- 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 +17 -1
- package/dist/components/inputs/input/index.d.ts.map +1 -1
- package/dist/components/inputs/input/index.js +27 -5
- package/dist/components/inputs/input/index.js.map +1 -1
- package/dist/components/inputs/input/styles.css +68 -24
- 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 +30 -20
- 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/index.d.ts +3 -1
- package/dist/components/layout/borderedSection/index.d.ts.map +1 -1
- package/dist/components/layout/borderedSection/index.js +2 -2
- package/dist/components/layout/borderedSection/index.js.map +1 -1
- package/dist/components/layout/borderedSection/styles.css +3 -3
- package/dist/components/layout/card/styles.css +53 -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 -4
- package/dist/components/navigation/breadcrumbs/styles.css +7 -7
- package/dist/components/navigation/pagination/index.d.ts +23 -0
- package/dist/components/navigation/pagination/index.d.ts.map +1 -0
- package/dist/components/navigation/pagination/index.js +29 -0
- package/dist/components/navigation/pagination/index.js.map +1 -0
- package/dist/components/navigation/pagination/styles.css +113 -0
- package/dist/components/navigation/pagination/utils.d.ts +9 -0
- package/dist/components/navigation/pagination/utils.d.ts.map +1 -0
- package/dist/components/navigation/pagination/utils.js +25 -0
- package/dist/components/navigation/pagination/utils.js.map +1 -0
- package/dist/components/navigation/sidebar/styles.css +13 -5
- 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/confirmationModal/index.d.ts +5 -0
- package/dist/components/overlays/confirmationModal/index.d.ts.map +1 -1
- package/dist/components/overlays/confirmationModal/index.js +23 -4
- package/dist/components/overlays/confirmationModal/index.js.map +1 -1
- package/dist/components/overlays/confirmationModal/styles.css +3 -0
- package/dist/components/overlays/modal/index.d.ts +2 -0
- package/dist/components/overlays/modal/index.d.ts.map +1 -1
- package/dist/components/overlays/modal/index.js +13 -4
- package/dist/components/overlays/modal/index.js.map +1 -1
- package/dist/components/overlays/modal/styles.css +19 -19
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/index.js.map +1 -1
- 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/usePaginated.d.ts +43 -0
- package/dist/hooks/usePaginated.d.ts.map +1 -0
- package/dist/hooks/usePaginated.js +60 -0
- package/dist/hooks/usePaginated.js.map +1 -0
- package/dist/styles.css +161 -123
- package/package.json +15 -4
- package/src/components/buttons/button/index.tsx +14 -5
- package/src/components/buttons/button/styles.css +45 -43
- package/src/components/buttons/rowActions/index.tsx +6 -1
- package/src/components/buttons/rowActions/styles.css +7 -0
- package/src/components/data-display/addressBlock/styles.css +2 -4
- 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 +18 -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/searchFilter.tsx +16 -65
- package/src/components/data-display/infiniteScroll/filters/selectFilter.tsx +11 -17
- package/src/components/data-display/infiniteScroll/filters/styles.css +34 -1
- package/src/components/data-display/infiniteScroll/header/deleteButton.tsx +1 -0
- package/src/components/data-display/infiniteScroll/header/index.tsx +4 -0
- 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/table/index.tsx +2 -0
- package/src/components/data-display/infiniteScroll/tags/index.tsx +7 -16
- package/src/components/data-display/infiniteScroll/tags/listFilterTag.tsx +31 -28
- package/src/components/data-display/infiniteScroll/tags/rangeFilterTag.tsx +8 -25
- package/src/components/data-display/infiniteScroll/tags/selectFilterTag.tsx +4 -11
- package/src/components/data-display/infiniteScroll/tags/styles.css +1 -29
- 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 -4
- 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 +22 -11
- package/src/components/data-display/tableFilters/index.tsx +147 -0
- package/src/components/data-display/tagCard/index.tsx +7 -4
- 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 +45 -45
- package/src/components/feedback/emptyState/styles.css +2 -4
- package/src/components/feedback/loadingOverlay/styles.css +1 -1
- package/src/components/feedback/progressBar/index.tsx +14 -8
- package/src/components/feedback/progressBar/styles.css +25 -16
- package/src/components/feedback/spinner/styles.css +14 -24
- 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 -3
- 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 +4 -0
- package/src/components/inputs/checkbox/index.tsx +27 -6
- package/src/components/inputs/checkbox/styles.css +11 -3
- 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 +17 -9
- 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 +5 -1
- package/src/components/inputs/dropdown/styles.css +2 -2
- package/src/components/inputs/dropdownArrowButton/index.tsx +1 -0
- 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 +67 -6
- package/src/components/inputs/input/styles.css +68 -24
- 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 -29
- 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 +16 -4
- 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 +59 -37
- 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/index.tsx +4 -1
- package/src/components/layout/borderedSection/styles.css +3 -3
- package/src/components/layout/card/styles.css +53 -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 -4
- package/src/components/navigation/breadcrumbs/styles.css +7 -7
- package/src/components/navigation/pagination/index.tsx +134 -0
- package/src/components/navigation/pagination/styles.css +113 -0
- package/src/components/navigation/pagination/utils.ts +32 -0
- package/src/components/navigation/sidebar/styles.css +13 -5
- 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/confirmationModal/index.tsx +37 -1
- package/src/components/overlays/confirmationModal/styles.css +3 -0
- package/src/components/overlays/modal/index.tsx +23 -4
- package/src/components/overlays/modal/styles.css +19 -19
- package/src/hooks/index.ts +4 -0
- package/src/hooks/useInfinite.ts +7 -3
- package/src/hooks/useInfiniteArchivableCursor.ts +11 -4
- package/src/hooks/useInfiniteCursor.ts +11 -4
- package/src/hooks/usePaginated.ts +123 -0
- package/src/styles.css +161 -123
- package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.d.ts +0 -10
- package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.d.ts.map +0 -1
- package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.js +0 -22
- package/dist/components/data-display/infiniteScroll/tags/searchFilterTag.js.map +0 -1
- package/src/components/data-display/infiniteScroll/tags/searchFilterTag.tsx +0 -41
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/inputs/dateInput/utils.ts"],"names":[],"mappings":"AAAA,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAEzD,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/inputs/dateInput/utils.ts"],"names":[],"mappings":"AAAA,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAEzD,8EAA8E;AAC9E,2DAA2D;AAC3D,MAAM,MAAM,GAAG,CAAC,KAAoB,EAAQ,EAAE;IAC5C,IAAI,KAAK,YAAY,IAAI;QAAE,OAAO,KAAK,CAAC;IACxC,MAAM,QAAQ,GAAG,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzD,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACzC,OAAO,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAAuC,EAC/B,EAAE;IACV,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO,EAAE,CAAC;IAC7C,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;QAAE,OAAO,EAAE,CAAC;IACzC,OAAO,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAAuC,EAC/B,EAAE;IACV,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO,EAAE,CAAC;IAC7C,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACxB,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;QAAE,OAAO,EAAE,CAAC;IACzC,OAAO,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,IAAI,GAAG,CAC3E,CAAC,CAAC,QAAQ,EAAE,CACb,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAiB,EAAE;IACjE,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC"}
|
|
@@ -12,6 +12,8 @@ export interface DropdownProps extends PropsWithSize, PropsWithVariant {
|
|
|
12
12
|
isOpen?: boolean;
|
|
13
13
|
/** Controlled mode: callback when open state changes */
|
|
14
14
|
onOpenChange?: (isOpen: boolean) => void;
|
|
15
|
+
/** Accessible name for the trigger. Required when it shows only an `icon`. */
|
|
16
|
+
"aria-label"?: string;
|
|
15
17
|
}
|
|
16
18
|
declare const Dropdown: (props: DropdownProps) => import("react").JSX.Element;
|
|
17
19
|
export default Dropdown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAEpD,OAAO,cAAc,CAAC;AACtB,OAAO,EAGL,cAAc,EACf,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,gBAAgB;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAEpD,OAAO,cAAc,CAAC;AACtB,OAAO,EAGL,cAAc,EACf,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,gBAAgB;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,GAAI,OAAO,aAAa,gCA0DrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -22,9 +22,9 @@ const Dropdown = (props) => {
|
|
|
22
22
|
const handleTriggerClick = () => {
|
|
23
23
|
setIsOpen(!isOpen);
|
|
24
24
|
};
|
|
25
|
-
useOutsideClick([dropdownRef], () => setIsOpen(false));
|
|
25
|
+
useOutsideClick([dropdownRef], () => setIsOpen(false), isOpen);
|
|
26
26
|
const label = (_jsxs("div", { className: "k-dropdown-label-container", children: [props.label, renderCaret && (_jsx(FontAwesomeIcon, { icon: isOpen ? faCaretUp : faCaretDown }))] }));
|
|
27
|
-
return (_jsxs("div", { ref: dropdownRef, className: `k-dropdown-container`, children: [props.icon ? (_jsx(IconButton, { size: props.size, variant: props.variant, icon: props.icon, onClick: handleTriggerClick, children: props.label && label })) : (_jsx(Button, { size: props.size, variant: props.variant, onClick: handleTriggerClick, children: props.label && label })), _jsx("div", { className: `k-dropdown-menu ${align} ${isOpen ? "open" : ""}`, children: props.children })] }));
|
|
27
|
+
return (_jsxs("div", { ref: dropdownRef, className: `k-dropdown-container`, children: [props.icon ? (_jsx(IconButton, { size: props.size, variant: props.variant, icon: props.icon, onClick: handleTriggerClick, "aria-label": props["aria-label"], children: props.label && label })) : (_jsx(Button, { size: props.size, variant: props.variant, onClick: handleTriggerClick, "aria-label": props["aria-label"], children: props.label && label })), _jsx("div", { className: `k-dropdown-menu ${align} ${isOpen ? "open" : ""}`, children: props.children })] }));
|
|
28
28
|
};
|
|
29
29
|
export default Dropdown;
|
|
30
30
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,cAAc,CAAC;AACtB,OAAO,EACL,WAAW,EACX,SAAS,GAEV,MAAM,mCAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,cAAc,CAAC;AACtB,OAAO,EACL,WAAW,EACX,SAAS,GAEV,MAAM,mCAAmC,CAAC;AAgB3C,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IACxC,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAErD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC;IAChD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC;IAE5D,MAAM,SAAS,GAAG,CAAC,IAAa,EAAE,EAAE;QAClC,IAAI,YAAY;YAAE,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;;YACxC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,eAAe,CAAC,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;IAE/D,MAAM,KAAK,GAAG,CACZ,eAAK,SAAS,EAAC,4BAA4B,aACxC,KAAK,CAAC,KAAK,EACX,WAAW,IAAI,CACd,KAAC,eAAe,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,GAAI,CAC5D,IACG,CACP,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,sBAAsB,aACrD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,kBAAkB,gBACf,KAAK,CAAC,YAAY,CAAC,YAE9B,KAAK,CAAC,KAAK,IAAI,KAAK,GACV,CACd,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,kBAAkB,gBACf,KAAK,CAAC,YAAY,CAAC,YAE9B,KAAK,CAAC,KAAK,IAAI,KAAK,GACd,CACV,EAED,cAAK,SAAS,EAAE,mBAAmB,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,YAC/D,KAAK,CAAC,QAAQ,GACX,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
.k-dropdown-menu {
|
|
8
8
|
position: absolute;
|
|
9
9
|
top: 100%;
|
|
10
|
-
background-color: var(--background-color);
|
|
10
|
+
background-color: var(--k-background-color);
|
|
11
11
|
border-radius: 0.5rem;
|
|
12
|
-
box-shadow: 0 0.375rem 1.25rem var(--shadow-color);
|
|
12
|
+
box-shadow: 0 0.375rem 1.25rem var(--k-shadow-color);
|
|
13
13
|
overflow: hidden;
|
|
14
14
|
transform: translateY(-0.625rem);
|
|
15
15
|
opacity: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdownArrowButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAEtB,UAAU,wBAAyB,SAAQ,aAAa;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,mBAAmB,GAAI,sCAK1B,wBAAwB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdownArrowButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAEtB,UAAU,wBAAyB,SAAQ,aAAa;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,mBAAmB,GAAI,sCAK1B,wBAAwB,gCAgB1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
|
|
|
4
4
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
5
5
|
import "./styles.css";
|
|
6
6
|
const DropdownArrowButton = ({ size, isOpen, disabled = false, onClick, }) => {
|
|
7
|
-
return (_jsx("button", { type: "button", className: `k-dropdown-arrow k-dropdown-arrow-${size}`, onClick: onClick, tabIndex: -1, disabled: disabled, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, className: isOpen ? "k-dropdown-arrow-open" : "" }) }));
|
|
7
|
+
return (_jsx("button", { type: "button", className: `k-dropdown-arrow k-dropdown-arrow-${size}`, onClick: onClick, tabIndex: -1, disabled: disabled, "aria-label": isOpen ? "Hide options" : "Show options", children: _jsx(FontAwesomeIcon, { icon: faChevronDown, className: isOpen ? "k-dropdown-arrow-open" : "" }) }));
|
|
8
8
|
};
|
|
9
9
|
export default DropdownArrowButton;
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdownArrowButton/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,cAAc,CAAC;AAStB,MAAM,mBAAmB,GAAG,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,OAAO,GACkB,EAAE,EAAE;IAC7B,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,qCAAqC,IAAI,EAAE,EACtD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdownArrowButton/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,cAAc,CAAC;AAStB,MAAM,mBAAmB,GAAG,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,OAAO,GACkB,EAAE,EAAE;IAC7B,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,qCAAqC,IAAI,EAAE,EACtD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,QAAQ,gBACN,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,YAEpD,KAAC,eAAe,IACd,IAAI,EAAE,aAAa,EACnB,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,GAChD,GACK,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1,21 +1,26 @@
|
|
|
1
1
|
/* Generic dropdown arrow toggle — used by Input (dropDown), MultiSelect, etc. */
|
|
2
|
+
/* Spans the field's height and centers the chevron, however tall the field
|
|
3
|
+
grows (MultiSelect with chips). */
|
|
2
4
|
.k-dropdown-arrow {
|
|
3
5
|
position: absolute;
|
|
6
|
+
top: 0;
|
|
7
|
+
bottom: 0;
|
|
4
8
|
right: 0.75rem;
|
|
9
|
+
display: flex;
|
|
5
10
|
background: none;
|
|
6
11
|
border: none;
|
|
7
12
|
cursor: pointer;
|
|
8
13
|
padding: 0;
|
|
9
14
|
align-items: center;
|
|
10
15
|
justify-content: center;
|
|
11
|
-
color: var(--text-color-secondary);
|
|
16
|
+
color: var(--k-text-color-secondary);
|
|
12
17
|
transition:
|
|
13
18
|
color 0.2s ease-in-out,
|
|
14
19
|
transform 0.2s ease-in-out;
|
|
15
20
|
}
|
|
16
21
|
|
|
17
22
|
.k-dropdown-arrow:hover:not(:disabled) {
|
|
18
|
-
color: var(--primary-color);
|
|
23
|
+
color: var(--k-primary-color-text);
|
|
19
24
|
}
|
|
20
25
|
|
|
21
26
|
.k-dropdown-arrow:focus {
|
|
@@ -29,17 +34,14 @@
|
|
|
29
34
|
|
|
30
35
|
.k-dropdown-arrow-sm {
|
|
31
36
|
font-size: 0.75rem;
|
|
32
|
-
top: 0.5rem;
|
|
33
37
|
}
|
|
34
38
|
|
|
35
39
|
.k-dropdown-arrow-md {
|
|
36
40
|
font-size: 0.875rem;
|
|
37
|
-
top: 0.625rem;
|
|
38
41
|
}
|
|
39
42
|
|
|
40
43
|
.k-dropdown-arrow-lg {
|
|
41
44
|
font-size: 1rem;
|
|
42
|
-
top: 0.75rem;
|
|
43
45
|
}
|
|
44
46
|
|
|
45
47
|
.k-dropdown-arrow-open {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/fileDropZone/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,iBAAiB;IAChC,uCAAuC;IACvC,eAAe,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,GAAI,wDAMnB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/fileDropZone/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,iBAAiB;IAChC,uCAAuC;IACvC,eAAe,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,GAAI,wDAMnB,iBAAiB,gCAgGnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
3
|
+
import { useId, useState } from "react";
|
|
4
4
|
import "./styles.css";
|
|
5
5
|
const FileDropZone = ({ onFilesSelected, onError, maxFiles = 15, accept, label = "Drag and drop files here", }) => {
|
|
6
6
|
const [isDragging, setIsDragging] = useState(false);
|
|
7
|
+
const inputId = useId();
|
|
7
8
|
const validateFileType = (file) => {
|
|
8
9
|
if (!accept)
|
|
9
10
|
return true;
|
|
@@ -60,7 +61,7 @@ const FileDropZone = ({ onFilesSelected, onError, maxFiles = 15, accept, label =
|
|
|
60
61
|
processFiles(files);
|
|
61
62
|
}
|
|
62
63
|
};
|
|
63
|
-
return (_jsxs("div", { className: `k-file-drop-zone ${isDragging ? "k-file-drop-zone-dragging" : ""}`, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, children: [_jsx("p", { children: label }), _jsx("p", { children: "or" }), _jsx("label", { htmlFor:
|
|
64
|
+
return (_jsxs("div", { className: `k-file-drop-zone ${isDragging ? "k-file-drop-zone-dragging" : ""}`, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, children: [_jsx("p", { children: label }), _jsx("p", { children: "or" }), _jsx("label", { htmlFor: inputId, className: "k-file-drop-zone-button", children: "Browse Files" }), _jsx("input", { type: "file", accept: accept, multiple: true, id: inputId, onChange: handleFileChange, style: { display: "none" } })] }));
|
|
64
65
|
};
|
|
65
66
|
export default FileDropZone;
|
|
66
67
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/fileDropZone/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/fileDropZone/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,cAAc,CAAC;AAetB,MAAM,YAAY,GAAG,CAAC,EACpB,eAAe,EACf,OAAO,EACP,QAAQ,GAAG,EAAE,EACb,MAAM,EACN,KAAK,GAAG,0BAA0B,GAChB,EAAE,EAAE;IACtB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,gBAAgB,GAAG,CAAC,IAAU,EAAW,EAAE;QAC/C,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAEzB,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAEjE,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE;YACrC,oCAAoC;YACpC,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC1C,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;YAC9C,CAAC;YACD,uCAAuC;YACvC,IAAI,UAAU,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC/B,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;YACpE,CAAC;YACD,gDAAgD;YAChD,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAe,EAAE,EAAE;QACvC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEpC,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QAEtD,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,OAAO,EAAE,CAAC,qCAAqC,CAAC,CAAC;YACjD,OAAO;QACT,CAAC;QAED,IAAI,UAAU,CAAC,MAAM,GAAG,QAAQ,EAAE,CAAC;YACjC,OAAO,EAAE,CAAC,gDAAgD,QAAQ,EAAE,CAAC,CAAC;YACtE,OAAO;QACT,CAAC;QAED,eAAe,CAAC,UAAU,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAAkC,EAAE,EAAE;QACxD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,aAAa,CAAC,KAAK,CAAC,CAAC;QAErB,MAAM,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC;QACnC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAChC,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC5D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC7D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,CAAsC,EAAE,EAAE;QAClE,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAChC,YAAY,CAAC,KAAK,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,oBACT,UAAU,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAC7C,EAAE,EACF,MAAM,EAAE,UAAU,EAClB,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAAe,aAE5B,sBAAI,KAAK,GAAK,EACd,6BAAS,EACT,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,yBAAyB,6BAEpD,EACR,gBACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,MAAM,EACd,QAAQ,QACR,EAAE,EAAE,OAAO,EACX,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC1B,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,43 +1,43 @@
|
|
|
1
1
|
.k-file-drop-zone {
|
|
2
|
-
border: 0.125rem dashed var(--border-color);
|
|
2
|
+
border: 0.125rem dashed var(--k-border-color);
|
|
3
3
|
border-radius: 0.5rem;
|
|
4
4
|
padding: 2rem;
|
|
5
5
|
text-align: center;
|
|
6
|
-
background-color: var(--background-color-dark);
|
|
6
|
+
background-color: var(--k-background-color-dark);
|
|
7
7
|
transition: all 0.2s ease;
|
|
8
8
|
margin-bottom: 1rem;
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.k-file-drop-zone:hover {
|
|
13
|
-
border-color: var(--primary-color);
|
|
14
|
-
background-color: var(--background-color-hover);
|
|
13
|
+
border-color: var(--k-primary-color);
|
|
14
|
+
background-color: var(--k-background-color-hover);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.k-file-drop-zone-dragging {
|
|
18
|
-
border-color: var(--primary-color);
|
|
19
|
-
background-color: var(--primary-color-light);
|
|
18
|
+
border-color: var(--k-primary-color);
|
|
19
|
+
background-color: var(--k-primary-color-background-light);
|
|
20
20
|
border-style: solid;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.k-file-drop-zone p {
|
|
24
24
|
margin: 0.5rem 0;
|
|
25
|
-
color: var(--text-color);
|
|
26
|
-
font-size: var(--text-size-sm);
|
|
25
|
+
color: var(--k-text-color);
|
|
26
|
+
font-size: var(--k-text-size-sm);
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.k-file-drop-zone-button {
|
|
30
30
|
display: inline-block;
|
|
31
31
|
padding: 0.5rem 1rem;
|
|
32
|
-
background-color: var(--primary-color);
|
|
33
|
-
color: var(--text-color-light);
|
|
32
|
+
background-color: var(--k-primary-color);
|
|
33
|
+
color: var(--k-text-color-light);
|
|
34
34
|
border-radius: 0.5rem;
|
|
35
35
|
cursor: pointer;
|
|
36
|
-
font-size: var(--text-size-sm);
|
|
36
|
+
font-size: var(--k-text-size-sm);
|
|
37
37
|
font-weight: 600;
|
|
38
38
|
transition: background-color 0.2s ease;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.k-file-drop-zone-button:hover {
|
|
42
|
-
background-color: var(--primary-color-hover);
|
|
42
|
+
background-color: var(--k-primary-color-hover);
|
|
43
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/fileUpload/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjE,OAAO,cAAc,CAAC;AAQtB,UAAU,eAAgB,SAAQ,aAAa,EAAE,gBAAgB;IAC/D,4DAA4D;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QACrB,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/fileUpload/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjE,OAAO,cAAc,CAAC;AAQtB,UAAU,eAAgB,SAAQ,aAAa,EAAE,gBAAgB;IAC/D,4DAA4D;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QACrB,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,gCAiOzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import MandatoryAsterisk from "../../forms/requiredAsterisk/index.js";
|
|
4
4
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
5
5
|
import IconButton from "../../buttons/iconButton/index.js";
|
|
6
|
-
import { useEffect, useRef, useState } from "react";
|
|
6
|
+
import { useEffect, useId, useRef, useState } from "react";
|
|
7
7
|
import Button from "../../buttons/button/index.js";
|
|
8
8
|
import Modal from "../../overlays/modal/index.js";
|
|
9
9
|
import "./styles.css";
|
|
@@ -24,7 +24,8 @@ const FileUpload = (props) => {
|
|
|
24
24
|
}, []);
|
|
25
25
|
const [showSizeModal, setShowSizeModal] = useState(false);
|
|
26
26
|
const [oversizedFileInfo, setOversizedFileInfo] = useState({ files: [], maxSize: "" });
|
|
27
|
-
const
|
|
27
|
+
const generatedId = useId();
|
|
28
|
+
const componentId = props.id || `fileupload-${generatedId}`;
|
|
28
29
|
const directoryId = `${componentId}-dir`;
|
|
29
30
|
// `webkitdirectory` isn't in React's DOM type map; set it imperatively.
|
|
30
31
|
useEffect(() => {
|
|
@@ -37,8 +38,8 @@ const FileUpload = (props) => {
|
|
|
37
38
|
if (bytes === 0)
|
|
38
39
|
return "0 Bytes";
|
|
39
40
|
const k = 1024;
|
|
40
|
-
const sizes = ["Bytes", "KB", "MB", "GB"];
|
|
41
|
-
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
41
|
+
const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
|
|
42
|
+
const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
|
|
42
43
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
|
43
44
|
};
|
|
44
45
|
const handleFileChange = (event) => {
|
|
@@ -53,6 +54,8 @@ const FileUpload = (props) => {
|
|
|
53
54
|
const fileNames = oversizedFiles.map((f) => f.name);
|
|
54
55
|
setOversizedFileInfo({ files: fileNames, maxSize: maxSizeFormatted });
|
|
55
56
|
setShowSizeModal(true);
|
|
57
|
+
// Rejected files must not stay in the input, or a form would submit them.
|
|
58
|
+
event.target.value = "";
|
|
56
59
|
return;
|
|
57
60
|
}
|
|
58
61
|
}
|
|
@@ -85,8 +88,10 @@ const FileUpload = (props) => {
|
|
|
85
88
|
onRemove: handleRemoveFile,
|
|
86
89
|
onClear: handleClearFiles,
|
|
87
90
|
onChange: () => fileInputRef.current?.click(),
|
|
88
|
-
})) : (_jsxs("div", { className: "k-file-list", children: [_jsxs("div", { className: "k-file-list-header", children: [_jsxs("span", { children: ["Selected Files (", selectedFiles.length, ")"] }),
|
|
89
|
-
return (_jsxs("div", { className: "k-file-upload-container", children: [props.label && (_jsxs("label", { className: "k-file-upload-label-text", children: [props.label, required && _jsx(MandatoryAsterisk, {})] })), _jsx("input", { type: "file", accept: props.accept, multiple: multiple, onChange: handleFileChange, ref: fileInputRef, className: "k-file-upload-input", id: componentId, required: required }), props.allowDirectory && (_jsx("input", { type: "file", multiple: true, onChange: handleFileChange, ref: directoryInputRef, className: "k-file-upload-input", id: directoryId })), fileListPosition === "above" && fileList, selectedFiles.length === 0 && (_jsxs("div", { className: "k-file-upload-empty-actions", children: [_jsxs("
|
|
91
|
+
})) : (_jsxs("div", { className: "k-file-list", children: [_jsxs("div", { className: "k-file-list-header", children: [_jsxs("span", { children: ["Selected Files (", selectedFiles.length, ")"] }), _jsx("div", { className: "k-file-list-actions", children: _jsx(Button, { onClick: handleClearFiles, variant: "danger", size: size, children: "Clear All" }) })] }), _jsx("ul", { className: "k-file-list-items", children: selectedFiles.map((file, index) => (_jsxs("li", { className: "k-file-list-item", children: [_jsxs("div", { className: "k-file-info", children: [_jsx(FontAwesomeIcon, { icon: faFile, className: "k-file-icon" }), _jsx("span", { className: "k-file-name", children: file.name }), _jsxs("span", { className: "k-file-size", children: ["(", formatFileSize(file.size), ")"] })] }), _jsx(IconButton, { icon: faTrash, onClick: () => handleRemoveFile(index), "aria-label": `Remove ${file.name}`, variant: "danger", size: size })] }, index))) })] })));
|
|
92
|
+
return (_jsxs("div", { className: "k-file-upload-container", children: [props.label && (_jsxs("label", { htmlFor: componentId, className: "k-file-upload-label-text", children: [props.label, required && _jsx(MandatoryAsterisk, {})] })), _jsx("input", { type: "file", accept: props.accept, multiple: multiple, onChange: handleFileChange, ref: fileInputRef, className: "k-file-upload-input", id: componentId, required: required, "aria-label": multiple ? "Upload Files" : "Upload File", tabIndex: -1 }), props.allowDirectory && (_jsx("input", { type: "file", multiple: true, onChange: handleFileChange, ref: directoryInputRef, className: "k-file-upload-input", id: directoryId, "aria-label": "Upload Folder", tabIndex: -1 })), fileListPosition === "above" && fileList, (selectedFiles.length === 0 || !props.renderFiles) && (_jsxs("div", { className: "k-file-upload-empty-actions", children: [_jsxs("button", { type: "button", onClick: () => fileInputRef.current?.click(), className: `k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`, children: [_jsx(FontAwesomeIcon, { icon: faUpload, "aria-hidden": "true" }), " ", selectedFiles.length === 0
|
|
93
|
+
? `Upload ${multiple ? "Files" : "File"}`
|
|
94
|
+
: `Change File${selectedFiles.length > 1 ? "s" : ""}`] }), props.allowDirectory && (_jsxs("button", { type: "button", onClick: () => directoryInputRef.current?.click(), className: `k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`, children: [_jsx(FontAwesomeIcon, { icon: faFolderOpen, "aria-hidden": "true" }), " Upload Folder"] }))] })), fileListPosition === "below" && fileList, _jsx(Modal, { show: showSizeModal, onClose: () => setShowSizeModal(false), title: "File Size Error", children: _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "The following file(s) are too large:" }) }), _jsx("ul", { children: oversizedFileInfo.files.map((fileName, index) => (_jsx("li", { children: fileName }, index))) }), _jsxs("p", { children: ["Maximum allowed file size is", " ", _jsx("strong", { children: oversizedFileInfo.maxSize })] })] }) })] }));
|
|
90
95
|
};
|
|
91
96
|
export default FileUpload;
|
|
92
97
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/fileUpload/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/fileUpload/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
margin-bottom: 0.5rem;
|
|
27
27
|
font-size: 0.875rem;
|
|
28
28
|
font-weight: 500;
|
|
29
|
-
color: var(--text-color);
|
|
29
|
+
color: var(--k-text-color);
|
|
30
30
|
width: 100%;
|
|
31
31
|
text-align: left;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.k-file-list {
|
|
35
35
|
width: 100%;
|
|
36
|
-
border: 1px solid var(--border-color);
|
|
36
|
+
border: 1px solid var(--k-border-color);
|
|
37
37
|
border-radius: 0.375rem;
|
|
38
|
-
background-color: var(--light
|
|
38
|
+
background-color: var(--k-background-color-light);
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
.k-file-list-header {
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
justify-content: space-between;
|
|
44
44
|
align-items: center;
|
|
45
45
|
padding: 0.75rem 1rem;
|
|
46
|
-
border-bottom: 1px solid var(--border-color);
|
|
47
|
-
background-color: var(--
|
|
46
|
+
border-bottom: 1px solid var(--k-border-color);
|
|
47
|
+
background-color: var(--k-background-color-dark);
|
|
48
48
|
font-weight: 500;
|
|
49
49
|
}
|
|
50
50
|
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
align-items: center;
|
|
67
67
|
gap: 0.75rem;
|
|
68
68
|
padding: 0.75rem 1rem;
|
|
69
|
-
border-bottom: 1px solid var(--border-color);
|
|
69
|
+
border-bottom: 1px solid var(--k-border-color);
|
|
70
70
|
transition: background-color 0.2s;
|
|
71
71
|
}
|
|
72
72
|
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.k-file-list-item:hover {
|
|
78
|
-
background-color: var(--
|
|
78
|
+
background-color: var(--k-background-color-hover);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.k-file-info {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.k-file-icon {
|
|
89
|
-
color: var(--secondary-color);
|
|
89
|
+
color: var(--k-secondary-color);
|
|
90
90
|
flex-shrink: 0;
|
|
91
91
|
}
|
|
92
92
|
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
.k-file-size {
|
|
101
|
-
color: var(--text-
|
|
101
|
+
color: var(--k-text-color-secondary);
|
|
102
102
|
font-size: 0.875rem;
|
|
103
103
|
flex-shrink: 0;
|
|
104
104
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { PropsWithSize } from "../../types.js";
|
|
2
1
|
import { ReactNode } from "react";
|
|
2
|
+
import { PropsWithSize } from "../../types.js";
|
|
3
3
|
import "./styles.css";
|
|
4
4
|
interface InputProps extends PropsWithSize {
|
|
5
5
|
/**
|
|
@@ -10,6 +10,8 @@ interface InputProps extends PropsWithSize {
|
|
|
10
10
|
type?: "text" | "number" | "password" | "email" | "date" | "datetime-local" | "time" | "url" | "tel";
|
|
11
11
|
/** **_Optional_** if the field is disabled */
|
|
12
12
|
disabled?: boolean;
|
|
13
|
+
/** **_Optional_** if the field is read-only: unlike `disabled`, it stays focusable and is submitted */
|
|
14
|
+
readOnly?: boolean;
|
|
13
15
|
/** **_Optional_** if the field is a dropdown */
|
|
14
16
|
dropDown?: boolean;
|
|
15
17
|
/** **_Optional_** whether or not the drop down options are open */
|
|
@@ -56,6 +58,20 @@ interface InputProps extends PropsWithSize {
|
|
|
56
58
|
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
57
59
|
/** **_Optional_** function that is called when the input is clicked */
|
|
58
60
|
onClick?: React.MouseEventHandler<HTMLInputElement>;
|
|
61
|
+
/** **_Optional_** `combobox` when the input drives a popup list of suggestions */
|
|
62
|
+
role?: "combobox";
|
|
63
|
+
/** **_Optional_** with `role="combobox"`, whether its popup is showing */
|
|
64
|
+
"aria-expanded"?: boolean;
|
|
65
|
+
/** **_Optional_** with `role="combobox"`, how suggestions relate to what's typed */
|
|
66
|
+
"aria-autocomplete"?: "list" | "inline" | "both" | "none";
|
|
67
|
+
/** **_Optional_** accessible name when there's no visible `label` */
|
|
68
|
+
"aria-label"?: string;
|
|
69
|
+
/** **_Optional_** id of the element (e.g. a listbox) this input controls */
|
|
70
|
+
"aria-controls"?: string;
|
|
71
|
+
/** **_Optional_** id of the option highlighted in the controlled element, while focus stays in the input */
|
|
72
|
+
"aria-activedescendant"?: string;
|
|
73
|
+
/** **_Optional_** shows an × button at the end of a non-empty field; clear the value here. Sits at the right edge, so don't combine with `suffix` or `type="password"` */
|
|
74
|
+
onClear?: () => void;
|
|
59
75
|
}
|
|
60
76
|
declare const Input: (props: InputProps) => import("react").JSX.Element;
|
|
61
77
|
export default Input;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/input/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAEtB,UAAU,UAAW,SAAQ,aAAa;IACxC;;;;OAIG;IACH,IAAI,CAAC,EACD,MAAM,GACN,QAAQ,GACR,UAAU,GACV,OAAO,GACP,MAAM,GACN,gBAAgB,GAChB,MAAM,GACN,KAAK,GACL,KAAK,CAAC;IAEV,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uGAAuG;IACvG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gGAAgG;IAChG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,iDAAiD;IACjD,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sFAAsF;IACtF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wFAAwF;IACxF,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,uEAAuE;IACvE,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,wEAAwE;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,2FAA2F;IAC3F,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACzD,uEAAuE;IACvE,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,kFAAkF;IAClF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oFAAoF;IACpF,mBAAmB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1D,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4GAA4G;IAC5G,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0KAA0K;IAC1K,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,KAAK,GAAI,OAAO,UAAU,gCAuJ/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,15 +1,36 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
|
|
3
|
+
import { faEye, faEyeSlash, faXmark } from "@fortawesome/free-solid-svg-icons";
|
|
4
|
+
import { useCallback, useId, useRef, useState } from "react";
|
|
4
5
|
import DropdownArrowButton from "../dropdownArrowButton/index.js";
|
|
5
6
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
6
7
|
import FieldShell from "../../forms/fieldShell/index.js";
|
|
7
|
-
import { useState } from "react";
|
|
8
8
|
import "./styles.css";
|
|
9
9
|
const Input = (props) => {
|
|
10
10
|
const { type = "text", size = "md", disabled = false, isOpen = false, required = false, prefix, suffix, } = props;
|
|
11
11
|
const [showPassword, setShowPassword] = useState(false);
|
|
12
|
-
const
|
|
12
|
+
const inputRef = useRef(null);
|
|
13
|
+
const { ref: forwardedRef } = props;
|
|
14
|
+
// Keep our own handle on the input (the clear button refocuses it) while
|
|
15
|
+
// still honouring a caller's `ref`.
|
|
16
|
+
const setRefs = useCallback((el) => {
|
|
17
|
+
inputRef.current = el;
|
|
18
|
+
if (typeof forwardedRef === "function")
|
|
19
|
+
forwardedRef(el);
|
|
20
|
+
else if (forwardedRef)
|
|
21
|
+
forwardedRef.current = el;
|
|
22
|
+
}, [forwardedRef]);
|
|
23
|
+
const showClear = !!props.onClear &&
|
|
24
|
+
String(props.value ?? "") !== "" &&
|
|
25
|
+
!disabled &&
|
|
26
|
+
!props.readOnly;
|
|
27
|
+
const handleClear = () => {
|
|
28
|
+
props.onClear?.();
|
|
29
|
+
// The button unmounts once the field is empty; keep focus in the field.
|
|
30
|
+
inputRef.current?.focus();
|
|
31
|
+
};
|
|
32
|
+
const generatedId = useId();
|
|
33
|
+
const inputId = props.id || `input-${generatedId}`;
|
|
13
34
|
const togglePasswordVisibility = () => {
|
|
14
35
|
setShowPassword(!showPassword);
|
|
15
36
|
};
|
|
@@ -19,15 +40,16 @@ const Input = (props) => {
|
|
|
19
40
|
"k-input",
|
|
20
41
|
`k-input-${size}`,
|
|
21
42
|
type === "password" && "k-input-password",
|
|
43
|
+
props.onClear && "k-input-clearable",
|
|
22
44
|
hasAddon && "k-input-with-addon",
|
|
23
45
|
prefix !== undefined && "k-input-with-prefix",
|
|
24
46
|
suffix !== undefined && "k-input-with-suffix",
|
|
25
47
|
]
|
|
26
48
|
.filter(Boolean)
|
|
27
49
|
.join(" ");
|
|
28
|
-
const renderAddon = (content, side) => (_jsx("span", { className: `k-input-addon k-input-addon-${side} k-input-addon-${size}`,
|
|
50
|
+
const renderAddon = (content, side) => (_jsx("span", { className: `k-input-addon k-input-addon-${side} k-input-addon-${size}`, children: content }));
|
|
29
51
|
const charCount = props.showCharCount && type === "text" ? (_jsxs(_Fragment, { children: [String(props.value || "").length, props.max && ` / ${props.max}`] })) : undefined;
|
|
30
|
-
return (_jsx(FieldShell, { label: props.label, required: required, htmlFor: inputId, labelAside: charCount, error: props.error, helperText: props.helperText, children: _jsxs("div", { className: `k-input-wrapper${hasAddon ? " k-input-wrapper-addon" : ""}`, children: [prefix !== undefined && renderAddon(prefix, "prefix"), _jsx("input", { ref:
|
|
52
|
+
return (_jsx(FieldShell, { label: props.label, required: required, htmlFor: inputId, labelAside: charCount, error: props.error, helperText: props.helperText, children: _jsxs("div", { className: `k-input-wrapper${hasAddon ? " k-input-wrapper-addon" : ""}`, children: [prefix !== undefined && renderAddon(prefix, "prefix"), _jsx("input", { ref: setRefs, id: inputId, name: props.name, type: inputType, placeholder: props.placeholder, value: props.value, max: props.max, min: props.min, required: required, autoFocus: props.autoFocus, autoComplete: props.autoComplete, disabled: disabled, readOnly: props.readOnly, onChange: props.onChange, onFocus: props.onFocus, onBlur: props.onBlur, onClick: props.onClick, onKeyDown: props.onKeyDown, role: props.role, "aria-expanded": props["aria-expanded"], "aria-autocomplete": props["aria-autocomplete"], "aria-label": props["aria-label"], "aria-controls": props["aria-controls"], "aria-activedescendant": props["aria-activedescendant"], className: inputClasses }), showClear && (_jsx("button", { type: "button", onClick: handleClear, className: "k-input-clear-button", "aria-label": "Clear", children: _jsx(FontAwesomeIcon, { icon: faXmark }) })), suffix !== undefined && renderAddon(suffix, "suffix"), props.dropDown && (_jsx(DropdownArrowButton, { size: size, isOpen: isOpen, onClick: props.onClick })), type === "password" && (_jsx("button", { type: "button", onClick: togglePasswordVisibility, className: "k-password-toggle-button", "aria-label": showPassword ? "Hide password" : "Show password", disabled: disabled, children: _jsx(FontAwesomeIcon, { icon: showPassword ? faEyeSlash : faEye }) }))] }) }));
|
|
31
53
|
};
|
|
32
54
|
export default Input;
|
|
33
55
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/input/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/input/index.tsx"],"names":[],"mappings":"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"}
|