@navikt/ds-react 6.2.0 → 6.3.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/cjs/form/combobox/ComboboxProvider.js +5 -1
- package/cjs/form/combobox/ComboboxProvider.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +14 -12
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/filtered-options-util.d.ts +3 -3
- package/cjs/form/combobox/FilteredOptions/filtered-options-util.js +1 -3
- package/cjs/form/combobox/FilteredOptions/filtered-options-util.js.map +1 -1
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +8 -5
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +8 -13
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/cjs/form/combobox/Input/Input.js +9 -7
- package/cjs/form/combobox/Input/Input.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.d.ts +2 -1
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +3 -3
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +10 -7
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js +6 -8
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/cjs/form/combobox/combobox-utils.d.ts +10 -0
- package/cjs/form/combobox/combobox-utils.js +27 -0
- package/cjs/form/combobox/combobox-utils.js.map +1 -0
- package/cjs/form/combobox/customOptionsContext.d.ts +5 -4
- package/cjs/form/combobox/customOptionsContext.js +1 -1
- package/cjs/form/combobox/customOptionsContext.js.map +1 -1
- package/cjs/form/combobox/types.d.ts +22 -11
- package/cjs/form/file-upload/FileUpload.context.d.ts +8 -0
- package/cjs/form/file-upload/FileUpload.context.js +7 -0
- package/cjs/form/file-upload/FileUpload.context.js.map +1 -0
- package/cjs/form/file-upload/FileUpload.d.ts +118 -0
- package/cjs/form/file-upload/FileUpload.js +73 -0
- package/cjs/form/file-upload/FileUpload.js.map +1 -0
- package/cjs/form/file-upload/FileUpload.types.d.ts +55 -0
- package/cjs/form/file-upload/FileUpload.types.js +8 -0
- package/cjs/form/file-upload/FileUpload.types.js.map +1 -0
- package/cjs/form/file-upload/i18n/get.d.ts +2 -0
- package/cjs/form/file-upload/i18n/get.js +38 -0
- package/cjs/form/file-upload/i18n/get.js.map +1 -0
- package/cjs/form/file-upload/i18n/i18n.context.d.ts +11 -0
- package/cjs/form/file-upload/i18n/i18n.context.js +39 -0
- package/cjs/form/file-upload/i18n/i18n.context.js.map +1 -0
- package/cjs/form/file-upload/i18n/i18n.types.d.ts +13 -0
- package/cjs/form/file-upload/i18n/i18n.types.js +3 -0
- package/cjs/form/file-upload/i18n/i18n.types.js.map +1 -0
- package/cjs/form/file-upload/i18n/locales/nb.json +20 -0
- package/cjs/form/file-upload/i18n/merge.d.ts +2 -0
- package/cjs/form/file-upload/i18n/merge.js +29 -0
- package/cjs/form/file-upload/i18n/merge.js.map +1 -0
- package/cjs/form/file-upload/index.d.ts +7 -0
- package/cjs/form/file-upload/index.js +16 -0
- package/cjs/form/file-upload/index.js.map +1 -0
- package/cjs/form/file-upload/parts/Trigger.d.ts +7 -0
- package/cjs/form/file-upload/parts/Trigger.js +43 -0
- package/cjs/form/file-upload/parts/Trigger.js.map +1 -0
- package/cjs/form/file-upload/parts/dropzone/Dropzone.d.ts +4 -0
- package/cjs/form/file-upload/parts/dropzone/Dropzone.js +106 -0
- package/cjs/form/file-upload/parts/dropzone/Dropzone.js.map +1 -0
- package/cjs/form/file-upload/parts/dropzone/dropzone.types.d.ts +18 -0
- package/cjs/form/file-upload/parts/dropzone/dropzone.types.js +3 -0
- package/cjs/form/file-upload/parts/dropzone/dropzone.types.js.map +1 -0
- package/cjs/form/file-upload/parts/dropzone/useDropzone.d.ts +13 -0
- package/cjs/form/file-upload/parts/dropzone/useDropzone.js +34 -0
- package/cjs/form/file-upload/parts/dropzone/useDropzone.js.map +1 -0
- package/cjs/form/file-upload/parts/item/Item.d.ts +55 -0
- package/cjs/form/file-upload/parts/item/Item.js +79 -0
- package/cjs/form/file-upload/parts/item/Item.js.map +1 -0
- package/cjs/form/file-upload/parts/item/Item.types.d.ts +5 -0
- package/cjs/form/file-upload/parts/item/Item.types.js +3 -0
- package/cjs/form/file-upload/parts/item/Item.types.js.map +1 -0
- package/cjs/form/file-upload/parts/item/ItemButton.d.ts +12 -0
- package/cjs/form/file-upload/parts/item/ItemButton.js +22 -0
- package/cjs/form/file-upload/parts/item/ItemButton.js.map +1 -0
- package/cjs/form/file-upload/parts/item/ItemIcon.d.ts +9 -0
- package/cjs/form/file-upload/parts/item/ItemIcon.js +51 -0
- package/cjs/form/file-upload/parts/item/ItemIcon.js.map +1 -0
- package/cjs/form/file-upload/parts/item/ItemName.d.ts +9 -0
- package/cjs/form/file-upload/parts/item/ItemName.js +32 -0
- package/cjs/form/file-upload/parts/item/ItemName.js.map +1 -0
- package/cjs/form/file-upload/parts/item/utils/download-file.d.ts +1 -0
- package/cjs/form/file-upload/parts/item/utils/download-file.js +13 -0
- package/cjs/form/file-upload/parts/item/utils/download-file.js.map +1 -0
- package/cjs/form/file-upload/parts/item/utils/file-type-checker.d.ts +2 -0
- package/cjs/form/file-upload/parts/item/utils/file-type-checker.js +6 -0
- package/cjs/form/file-upload/parts/item/utils/file-type-checker.js.map +1 -0
- package/cjs/form/file-upload/parts/item/utils/format-file-size.d.ts +2 -0
- package/cjs/form/file-upload/parts/item/utils/format-file-size.js +24 -0
- package/cjs/form/file-upload/parts/item/utils/format-file-size.js.map +1 -0
- package/cjs/form/file-upload/useFileUpload.d.ts +12 -0
- package/cjs/form/file-upload/useFileUpload.js +33 -0
- package/cjs/form/file-upload/useFileUpload.js.map +1 -0
- package/cjs/form/file-upload/utils/is-accepted-file-type.d.ts +1 -0
- package/cjs/form/file-upload/utils/is-accepted-file-type.js +26 -0
- package/cjs/form/file-upload/utils/is-accepted-file-type.js.map +1 -0
- package/cjs/form/file-upload/utils/is-accepted-size.d.ts +1 -0
- package/cjs/form/file-upload/utils/is-accepted-size.js +11 -0
- package/cjs/form/file-upload/utils/is-accepted-size.js.map +1 -0
- package/cjs/form/file-upload/utils/validate-files.d.ts +8 -0
- package/cjs/form/file-upload/utils/validate-files.js +48 -0
- package/cjs/form/file-upload/utils/validate-files.js.map +1 -0
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +3 -1
- package/cjs/index.js.map +1 -1
- package/cjs/loader/Loader.d.ts +0 -7
- package/cjs/loader/Loader.js.map +1 -1
- package/cjs/table/DataCell.d.ts +1 -3
- package/cjs/table/DataCell.js.map +1 -1
- package/cjs/util/create-context.d.ts +1 -0
- package/cjs/util/create-context.js.map +1 -1
- package/cjs/util/hooks/useEventListener.d.ts +1 -1
- package/cjs/util/hooks/useMergeRefs.d.ts +1 -1
- package/esm/form/combobox/ComboboxProvider.js +5 -1
- package/esm/form/combobox/ComboboxProvider.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +14 -12
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filtered-options-util.d.ts +3 -3
- package/esm/form/combobox/FilteredOptions/filtered-options-util.js +1 -3
- package/esm/form/combobox/FilteredOptions/filtered-options-util.js.map +1 -1
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +8 -5
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +8 -13
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -1
- package/esm/form/combobox/Input/Input.js +9 -7
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.d.ts +2 -1
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js +3 -3
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -1
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +10 -7
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js +6 -8
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -1
- package/esm/form/combobox/combobox-utils.d.ts +10 -0
- package/esm/form/combobox/combobox-utils.js +22 -0
- package/esm/form/combobox/combobox-utils.js.map +1 -0
- package/esm/form/combobox/customOptionsContext.d.ts +5 -4
- package/esm/form/combobox/customOptionsContext.js +1 -1
- package/esm/form/combobox/customOptionsContext.js.map +1 -1
- package/esm/form/combobox/types.d.ts +22 -11
- package/esm/form/file-upload/FileUpload.context.d.ts +8 -0
- package/esm/form/file-upload/FileUpload.context.js +3 -0
- package/esm/form/file-upload/FileUpload.context.js.map +1 -0
- package/esm/form/file-upload/FileUpload.d.ts +118 -0
- package/esm/form/file-upload/FileUpload.js +44 -0
- package/esm/form/file-upload/FileUpload.js.map +1 -0
- package/esm/form/file-upload/FileUpload.types.d.ts +55 -0
- package/esm/form/file-upload/FileUpload.types.js +5 -0
- package/esm/form/file-upload/FileUpload.types.js.map +1 -0
- package/esm/form/file-upload/i18n/get.d.ts +2 -0
- package/esm/form/file-upload/i18n/get.js +34 -0
- package/esm/form/file-upload/i18n/get.js.map +1 -0
- package/esm/form/file-upload/i18n/i18n.context.d.ts +11 -0
- package/esm/form/file-upload/i18n/i18n.context.js +32 -0
- package/esm/form/file-upload/i18n/i18n.context.js.map +1 -0
- package/esm/form/file-upload/i18n/i18n.types.d.ts +13 -0
- package/esm/form/file-upload/i18n/i18n.types.js +2 -0
- package/esm/form/file-upload/i18n/i18n.types.js.map +1 -0
- package/esm/form/file-upload/i18n/locales/nb.json +20 -0
- package/esm/form/file-upload/i18n/merge.d.ts +2 -0
- package/esm/form/file-upload/i18n/merge.js +25 -0
- package/esm/form/file-upload/i18n/merge.js.map +1 -0
- package/esm/form/file-upload/index.d.ts +7 -0
- package/esm/form/file-upload/index.js +6 -0
- package/esm/form/file-upload/index.js.map +1 -0
- package/esm/form/file-upload/parts/Trigger.d.ts +7 -0
- package/esm/form/file-upload/parts/Trigger.js +18 -0
- package/esm/form/file-upload/parts/Trigger.js.map +1 -0
- package/esm/form/file-upload/parts/dropzone/Dropzone.d.ts +4 -0
- package/esm/form/file-upload/parts/dropzone/Dropzone.js +78 -0
- package/esm/form/file-upload/parts/dropzone/Dropzone.js.map +1 -0
- package/esm/form/file-upload/parts/dropzone/dropzone.types.d.ts +18 -0
- package/esm/form/file-upload/parts/dropzone/dropzone.types.js +2 -0
- package/esm/form/file-upload/parts/dropzone/dropzone.types.js.map +1 -0
- package/esm/form/file-upload/parts/dropzone/useDropzone.d.ts +13 -0
- package/esm/form/file-upload/parts/dropzone/useDropzone.js +30 -0
- package/esm/form/file-upload/parts/dropzone/useDropzone.js.map +1 -0
- package/esm/form/file-upload/parts/item/Item.d.ts +55 -0
- package/esm/form/file-upload/parts/item/Item.js +50 -0
- package/esm/form/file-upload/parts/item/Item.js.map +1 -0
- package/esm/form/file-upload/parts/item/Item.types.d.ts +5 -0
- package/esm/form/file-upload/parts/item/Item.types.js +2 -0
- package/esm/form/file-upload/parts/item/Item.types.js.map +1 -0
- package/esm/form/file-upload/parts/item/ItemButton.d.ts +12 -0
- package/esm/form/file-upload/parts/item/ItemButton.js +17 -0
- package/esm/form/file-upload/parts/item/ItemButton.js.map +1 -0
- package/esm/form/file-upload/parts/item/ItemIcon.d.ts +9 -0
- package/esm/form/file-upload/parts/item/ItemIcon.js +46 -0
- package/esm/form/file-upload/parts/item/ItemIcon.js.map +1 -0
- package/esm/form/file-upload/parts/item/ItemName.d.ts +9 -0
- package/esm/form/file-upload/parts/item/ItemName.js +27 -0
- package/esm/form/file-upload/parts/item/ItemName.js.map +1 -0
- package/esm/form/file-upload/parts/item/utils/download-file.d.ts +1 -0
- package/esm/form/file-upload/parts/item/utils/download-file.js +9 -0
- package/esm/form/file-upload/parts/item/utils/download-file.js.map +1 -0
- package/esm/form/file-upload/parts/item/utils/file-type-checker.d.ts +2 -0
- package/esm/form/file-upload/parts/item/utils/file-type-checker.js +2 -0
- package/esm/form/file-upload/parts/item/utils/file-type-checker.js.map +1 -0
- package/esm/form/file-upload/parts/item/utils/format-file-size.d.ts +2 -0
- package/esm/form/file-upload/parts/item/utils/format-file-size.js +20 -0
- package/esm/form/file-upload/parts/item/utils/format-file-size.js.map +1 -0
- package/esm/form/file-upload/useFileUpload.d.ts +12 -0
- package/esm/form/file-upload/useFileUpload.js +29 -0
- package/esm/form/file-upload/useFileUpload.js.map +1 -0
- package/esm/form/file-upload/utils/is-accepted-file-type.d.ts +1 -0
- package/esm/form/file-upload/utils/is-accepted-file-type.js +22 -0
- package/esm/form/file-upload/utils/is-accepted-file-type.js.map +1 -0
- package/esm/form/file-upload/utils/is-accepted-size.d.ts +1 -0
- package/esm/form/file-upload/utils/is-accepted-size.js +7 -0
- package/esm/form/file-upload/utils/is-accepted-size.js.map +1 -0
- package/esm/form/file-upload/utils/validate-files.d.ts +8 -0
- package/esm/form/file-upload/utils/validate-files.js +44 -0
- package/esm/form/file-upload/utils/validate-files.js.map +1 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/loader/Loader.d.ts +0 -7
- package/esm/loader/Loader.js.map +1 -1
- package/esm/table/DataCell.d.ts +1 -3
- package/esm/table/DataCell.js.map +1 -1
- package/esm/util/create-context.d.ts +1 -0
- package/esm/util/create-context.js.map +1 -1
- package/esm/util/hooks/useEventListener.d.ts +1 -1
- package/esm/util/hooks/useMergeRefs.d.ts +1 -1
- package/package.json +13 -3
- package/src/form/combobox/ComboboxProvider.tsx +7 -3
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +22 -15
- package/src/form/combobox/FilteredOptions/filtered-options-util.ts +5 -10
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +19 -29
- package/src/form/combobox/Input/Input.tsx +14 -8
- package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +8 -5
- package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +24 -25
- package/src/form/combobox/combobox-utils.test.ts +67 -0
- package/src/form/combobox/combobox-utils.ts +32 -0
- package/src/form/combobox/combobox.stories.tsx +67 -32
- package/src/form/combobox/combobox.test.tsx +32 -1
- package/src/form/combobox/customOptionsContext.tsx +9 -8
- package/src/form/combobox/types.ts +23 -11
- package/src/form/file-upload/FileUpload.context.tsx +9 -0
- package/src/form/file-upload/FileUpload.tsx +142 -0
- package/src/form/file-upload/FileUpload.types.ts +57 -0
- package/src/form/file-upload/file-upload-dropzone.stories.tsx +123 -0
- package/src/form/file-upload/file-upload-item.stories.tsx +136 -0
- package/src/form/file-upload/file-upload.stories.tsx +236 -0
- package/src/form/file-upload/i18n/get.ts +48 -0
- package/src/form/file-upload/i18n/i18n.context.test.tsx +92 -0
- package/src/form/file-upload/i18n/i18n.context.ts +67 -0
- package/src/form/file-upload/i18n/i18n.types.ts +20 -0
- package/src/form/file-upload/i18n/locales/nb.json +20 -0
- package/src/form/file-upload/i18n/merge.ts +35 -0
- package/src/form/file-upload/index.ts +21 -0
- package/src/form/file-upload/parts/Trigger.tsx +48 -0
- package/src/form/file-upload/parts/dropzone/Dropzone.tsx +180 -0
- package/src/form/file-upload/parts/dropzone/dropzone.types.ts +22 -0
- package/src/form/file-upload/parts/dropzone/useDropzone.ts +43 -0
- package/src/form/file-upload/parts/item/Item.tsx +165 -0
- package/src/form/file-upload/parts/item/Item.types.ts +6 -0
- package/src/form/file-upload/parts/item/ItemButton.tsx +52 -0
- package/src/form/file-upload/parts/item/ItemIcon.tsx +74 -0
- package/src/form/file-upload/parts/item/ItemName.tsx +58 -0
- package/src/form/file-upload/parts/item/utils/download-file.ts +9 -0
- package/src/form/file-upload/parts/item/utils/file-type-checker.ts +4 -0
- package/src/form/file-upload/parts/item/utils/format-file-size.test.ts +76 -0
- package/src/form/file-upload/parts/item/utils/format-file-size.ts +25 -0
- package/src/form/file-upload/useFileUpload.ts +54 -0
- package/src/form/file-upload/utils/is-accepted-file-type.test.ts +69 -0
- package/src/form/file-upload/utils/is-accepted-file-type.ts +25 -0
- package/src/form/file-upload/utils/is-accepted-size.test.ts +26 -0
- package/src/form/file-upload/utils/is-accepted-size.ts +7 -0
- package/src/form/file-upload/utils/validate-files.test.ts +132 -0
- package/src/form/file-upload/utils/validate-files.ts +62 -0
- package/src/index.ts +14 -0
- package/src/internal-header/header.stories.tsx +8 -5
- package/src/loader/Loader.tsx +0 -7
- package/src/table/DataCell.tsx +1 -6
- package/src/util/create-context.tsx +1 -0
- package/src/util/hooks/useMergeRefs.ts +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const downloadFile: (file: File) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"download-file.js","sourceRoot":"","sources":["../../../../../../src/form/file-upload/parts/item/utils/download-file.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAU,EAAQ,EAAE;IAC/C,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC;IACb,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,CAAC,CAAC,KAAK,EAAE,CAAC;IAEV,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"file-type-checker.js","sourceRoot":"","sources":["../../../../../../src/form/file-upload/parts/item/utils/file-type-checker.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAkB,EAAoB,EAAE,CACnE,cAAc,IAAI,QAAQ,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const MAX_MEGA_BYTES = 500;
|
|
2
|
+
export function formatFileSize(file) {
|
|
3
|
+
if (!file.size) {
|
|
4
|
+
return null;
|
|
5
|
+
}
|
|
6
|
+
const megaBytes = file.size / (1024 * 1024);
|
|
7
|
+
if (megaBytes <= MAX_MEGA_BYTES) {
|
|
8
|
+
return formatter.format(megaBytes);
|
|
9
|
+
}
|
|
10
|
+
return `> ${MAX_MEGA_BYTES} MB`;
|
|
11
|
+
}
|
|
12
|
+
const formatter = new Intl.NumberFormat("nb-NO", {
|
|
13
|
+
style: "unit",
|
|
14
|
+
unit: "megabyte",
|
|
15
|
+
minimumFractionDigits: 2,
|
|
16
|
+
maximumFractionDigits: 2,
|
|
17
|
+
// @ts-expect-error - Looks like roundingMode hasn't been added to TypeScript yet
|
|
18
|
+
roundingMode: "ceil",
|
|
19
|
+
});
|
|
20
|
+
//# sourceMappingURL=format-file-size.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"format-file-size.js","sourceRoot":"","sources":["../../../../../../src/form/file-upload/parts/item/utils/format-file-size.ts"],"names":[],"mappings":"AAEA,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,MAAM,UAAU,cAAc,CAAC,IAAc;IAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAE5C,IAAI,SAAS,IAAI,cAAc,EAAE,CAAC;QAChC,OAAO,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,KAAK,cAAc,KAAK,CAAC;AAClC,CAAC;AAED,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;IAC/C,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,UAAU;IAChB,qBAAqB,EAAE,CAAC;IACxB,qBAAqB,EAAE,CAAC;IACxB,iFAAiF;IACjF,YAAY,EAAE,MAAM;CACrB,CAAC,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { FileUploadBaseProps } from "./FileUpload.types.js";
|
|
3
|
+
export interface UseFileUploadProps extends Omit<FileUploadBaseProps, "fileLimit"> {
|
|
4
|
+
ref: React.ForwardedRef<HTMLInputElement>;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const useFileUpload: ({ ref, accept, onSelect, validator, maxSizeInBytes, disabled, }: UseFileUploadProps) => {
|
|
8
|
+
upload: (fileList: FileList) => void;
|
|
9
|
+
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
10
|
+
inputRef: import("react").MutableRefObject<HTMLInputElement | null>;
|
|
11
|
+
mergedRef: (instance: HTMLInputElement | null) => void;
|
|
12
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useRef } from "react";
|
|
2
|
+
import { useMergeRefs } from "../../util/hooks/index.js";
|
|
3
|
+
import { validateFiles } from "./utils/validate-files.js";
|
|
4
|
+
export const useFileUpload = ({ ref, accept, onSelect, validator, maxSizeInBytes, disabled, }) => {
|
|
5
|
+
const inputRef = useRef(null);
|
|
6
|
+
const mergedRef = useMergeRefs(inputRef, ref);
|
|
7
|
+
const upload = (fileList) => {
|
|
8
|
+
const { files, partitionedFiles } = validateFiles(Array.from(fileList), accept, validator, maxSizeInBytes);
|
|
9
|
+
onSelect(files, partitionedFiles);
|
|
10
|
+
};
|
|
11
|
+
const onChange = (event) => {
|
|
12
|
+
const fileList = event.target.files;
|
|
13
|
+
if (!fileList) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
if (!disabled) {
|
|
17
|
+
upload(fileList);
|
|
18
|
+
}
|
|
19
|
+
// Resets the value to make it is possible to upload the same file several consecutive times
|
|
20
|
+
event.target.value = "";
|
|
21
|
+
};
|
|
22
|
+
return {
|
|
23
|
+
upload,
|
|
24
|
+
onChange,
|
|
25
|
+
inputRef,
|
|
26
|
+
mergedRef,
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=useFileUpload.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFileUpload.js","sourceRoot":"","sources":["../../../src/form/file-upload/useFileUpload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAQvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,SAAS,EACT,cAAc,EACd,QAAQ,GACW,EAAE,EAAE;IACvB,MAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE9C,MAAM,MAAM,GAAG,CAAC,QAAkB,EAAE,EAAE;QACpC,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAC/C,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,EACpB,MAAM,EACN,SAAS,EACT,cAAc,CACf,CAAC;QAEF,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC9D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACpC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,MAAM,CAAC,QAAQ,CAAC,CAAC;QACnB,CAAC;QAED,4FAA4F;QAC5F,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO;QACL,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function isAcceptedFileType(file: File, accept: string | undefined): boolean;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export function isAcceptedFileType(file, accept) {
|
|
2
|
+
if (!accept) {
|
|
3
|
+
return true;
|
|
4
|
+
}
|
|
5
|
+
const mimeType = file.type;
|
|
6
|
+
const acceptedTypes = accept.split(",");
|
|
7
|
+
return acceptedTypes.some((type) => {
|
|
8
|
+
const validType = type.trim();
|
|
9
|
+
const isExtensionType = validType.startsWith(".");
|
|
10
|
+
const isWildcardMimeType = validType.endsWith("/*");
|
|
11
|
+
if (isExtensionType) {
|
|
12
|
+
return file.name.toLowerCase().endsWith(validType.toLowerCase());
|
|
13
|
+
}
|
|
14
|
+
else if (isWildcardMimeType) {
|
|
15
|
+
const baseMimeType = mimeType.replace(/\/.*$/, "");
|
|
16
|
+
const baseValidType = validType.replace(/\/.*$/, "");
|
|
17
|
+
return baseMimeType === baseValidType;
|
|
18
|
+
}
|
|
19
|
+
return mimeType === validType;
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=is-accepted-file-type.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-accepted-file-type.js","sourceRoot":"","sources":["../../../../src/form/file-upload/utils/is-accepted-file-type.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,kBAAkB,CAChC,IAAU,EACV,MAA0B;IAE1B,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IAC3B,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAExC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;QACjC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAC9B,MAAM,eAAe,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAClD,MAAM,kBAAkB,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC;QACnE,CAAC;aAAM,IAAI,kBAAkB,EAAE,CAAC;YAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnD,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACrD,OAAO,YAAY,KAAK,aAAa,CAAC;QACxC,CAAC;QACD,OAAO,QAAQ,KAAK,SAAS,CAAC;IAChC,CAAC,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function isAcceptedSize(file: File, maxSize?: number): boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"is-accepted-size.js","sourceRoot":"","sources":["../../../../src/form/file-upload/utils/is-accepted-size.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,cAAc,CAAC,IAAU,EAAE,UAAkB,CAAC,CAAC;IAC7D,IAAI,OAAO,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,CAAC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FileObject, FileUploadBaseProps } from "../FileUpload.types.js";
|
|
2
|
+
export declare const validateFiles: (files: File[], accept?: string, validator?: FileUploadBaseProps["validator"], maxSizeInBytes?: number) => {
|
|
3
|
+
files: FileObject[];
|
|
4
|
+
partitionedFiles: {
|
|
5
|
+
accepted: File[];
|
|
6
|
+
rejected: import("../FileUpload.types.js").FileRejectedPartitioned[];
|
|
7
|
+
};
|
|
8
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { fileRejectionReason, } from "../FileUpload.types.js";
|
|
2
|
+
import { isAcceptedFileType } from "./is-accepted-file-type.js";
|
|
3
|
+
import { isAcceptedSize } from "./is-accepted-size.js";
|
|
4
|
+
export const validateFiles = (files, accept, validator, maxSizeInBytes = -1) => {
|
|
5
|
+
const allFiles = [];
|
|
6
|
+
const accepted = [];
|
|
7
|
+
const rejected = [];
|
|
8
|
+
files.forEach((file) => {
|
|
9
|
+
const acceptedFileType = isAcceptedFileType(file, accept);
|
|
10
|
+
const acceptedFileSize = isAcceptedSize(file, maxSizeInBytes);
|
|
11
|
+
const customValidation = validator ? validator(file) : true;
|
|
12
|
+
const reasons = [];
|
|
13
|
+
if (customValidation !== true) {
|
|
14
|
+
reasons.push(customValidation);
|
|
15
|
+
}
|
|
16
|
+
if (!acceptedFileType) {
|
|
17
|
+
reasons.push(fileRejectionReason.FileType);
|
|
18
|
+
}
|
|
19
|
+
if (!acceptedFileSize) {
|
|
20
|
+
reasons.push(fileRejectionReason.FileSize);
|
|
21
|
+
}
|
|
22
|
+
allFiles.push({
|
|
23
|
+
file,
|
|
24
|
+
error: reasons.length > 0,
|
|
25
|
+
reasons,
|
|
26
|
+
});
|
|
27
|
+
if (reasons.length === 0) {
|
|
28
|
+
accepted.push(file);
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
rejected.push({
|
|
32
|
+
file,
|
|
33
|
+
reasons,
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
return {
|
|
37
|
+
files: allFiles,
|
|
38
|
+
partitionedFiles: {
|
|
39
|
+
accepted,
|
|
40
|
+
rejected,
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=validate-files.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"validate-files.js","sourceRoot":"","sources":["../../../../src/form/file-upload/utils/validate-files.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,CAAC,MAAM,aAAa,GAAG,CAC3B,KAAa,EACb,MAAe,EACf,SAA4C,EAC5C,iBAAyB,CAAC,CAAC,EAC3B,EAAE;IACF,MAAM,QAAQ,GAAiB,EAAE,CAAC;IAClC,MAAM,QAAQ,GAAW,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAiC,EAAE,CAAC;IAElD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,MAAM,gBAAgB,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QAC1D,MAAM,gBAAgB,GAAG,cAAc,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QAC9D,MAAM,gBAAgB,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE5D,MAAM,OAAO,GAA+C,EAAE,CAAC;QAC/D,IAAI,gBAAgB,KAAK,IAAI,EAAE,CAAC;YAC9B,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAC7C,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAC7C,CAAC;QAED,QAAQ,CAAC,IAAI,CAAC;YACZ,IAAI;YACJ,KAAK,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC;YACzB,OAAO;SACR,CAAC,CAAC;QAEH,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,QAAQ,CAAC,IAAI,CAAC;YACZ,IAAI;YACJ,OAAO;SACR,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE;YAChB,QAAQ;YACR,QAAQ;SACT;KACF,CAAC;AACJ,CAAC,CAAC"}
|
package/esm/index.d.ts
CHANGED
|
@@ -47,6 +47,7 @@ export { Select, type SelectProps } from "./form/select/index.js";
|
|
|
47
47
|
export { Switch, type SwitchProps } from "./form/switch/index.js";
|
|
48
48
|
export { Textarea, type TextareaProps } from "./form/textarea/index.js";
|
|
49
49
|
export { TextField, type TextFieldProps } from "./form/textfield/index.js";
|
|
50
|
+
export { UNSAFE_FileUpload, type FileUploadDropzoneProps, type FileUploadTriggerProps, type FileObject, type FileRejected, type FileAccepted, type FileRejectedPartitioned, type FilesPartitioned, type FileRejectionReason, type FileUploadItemProps, type FileItem, type FileMetadata, } from "./form/file-upload/index.js";
|
|
50
51
|
/**
|
|
51
52
|
* @deprecated
|
|
52
53
|
*/
|
package/esm/index.js
CHANGED
|
@@ -48,6 +48,7 @@ export { Select } from "./form/select/index.js";
|
|
|
48
48
|
export { Switch } from "./form/switch/index.js";
|
|
49
49
|
export { Textarea } from "./form/textarea/index.js";
|
|
50
50
|
export { TextField } from "./form/textfield/index.js";
|
|
51
|
+
export { UNSAFE_FileUpload, } from "./form/file-upload/index.js";
|
|
51
52
|
/**
|
|
52
53
|
* @deprecated
|
|
53
54
|
*/
|
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/esm/loader/Loader.d.ts
CHANGED
|
@@ -21,13 +21,6 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
|
|
|
21
21
|
* @default "neutral"
|
|
22
22
|
*/
|
|
23
23
|
variant?: "neutral" | "interaction" | "inverted";
|
|
24
|
-
/**
|
|
25
|
-
* Allows getting a ref to the component instance.
|
|
26
|
-
* Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
|
|
27
|
-
*
|
|
28
|
-
* @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
|
|
29
|
-
*/
|
|
30
|
-
ref?: React.Ref<SVGSVGElement>;
|
|
31
24
|
}
|
|
32
25
|
export type LoaderType = React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<SVGSVGElement>>;
|
|
33
26
|
/**
|
package/esm/loader/Loader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAsCtC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAe,UAAU,CAC1C,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cAPT,8DAQC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI,CAAC,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC;QAE5B,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,GACX;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,eAAe,EAAC,QAAQ,GACxB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/esm/table/DataCell.d.ts
CHANGED
|
@@ -10,7 +10,5 @@ export interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellEleme
|
|
|
10
10
|
*/
|
|
11
11
|
textSize?: "medium" | "small";
|
|
12
12
|
}
|
|
13
|
-
export
|
|
14
|
-
}
|
|
15
|
-
export declare const DataCell: DataCellType;
|
|
13
|
+
export declare const DataCell: React.ForwardRefExoticComponent<DataCellProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
16
14
|
export default DataCell;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAe1C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAsD,EAAE,GAAG,EAAE,EAAE;QAA/D,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,OAAW,EAAN,IAAI,cAApD,8CAAsD,CAAF;IACnD,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,CAAC,iCAAiC,KAAK,EAAE,CAAC,EAAE,KAAK;SAClD,CAAC,EACF,IAAI,EAAE,QAAQ,IACV,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-context.js","sourceRoot":"","sources":["../../src/util/create-context.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EACZ,aAAa,IAAI,kBAAkB,EACnC,UAAU,EACV,UAAU,IAAI,eAAe,GAC9B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"create-context.js","sourceRoot":"","sources":["../../src/util/create-context.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,EACZ,aAAa,IAAI,kBAAkB,EACnC,UAAU,EACV,UAAU,IAAI,eAAe,GAC9B,MAAM,OAAO,CAAC;AAaf,SAAS,eAAe,CAAC,IAAY,EAAE,QAAgB;IACrD,OAAO,GAAG,IAAI,sEAAsE,QAAQ,EAAE,CAAC;AACjG,CAAC;AAED,MAAM,UAAU,aAAa,CAAI,UAAmC,EAAE;IACpE,MAAM,EACJ,IAAI,EACJ,QAAQ,GAAG,YAAY,EACvB,YAAY,GAAG,UAAU,EACzB,YAAY,EACZ,YAAY,GACb,GAAG,OAAO,CAAC;IAEZ,MAAM,OAAO,GAAG,kBAAkB,CAAgB,YAAY,CAAC,CAAC;IAEhE;;;OAGG;IACH,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAA0C,EAAE,GAAG,EAAE,EAAE;YAAnD,EAAE,QAAQ,OAAgC,EAA3B,OAAO,cAAtB,YAAwB,CAAF;QACrB,0CAA0C;QAC1C,uDAAuD;QACvD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAM,CAAC;QAExE,OAAO,CACL,oBAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,CAAC,iCAAM,KAAK,KAAE,GAAG,IAAG,CAAC,CAAC,KAAK,IACrD,QAAQ,CACQ,CACpB,CAAC;IACJ,CAAC,CACF,CAAC;IAEF,SAAS,UAAU,CACjB,SAAY,IAAS;;QAErB,MAAM,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;QAEzC,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;YACvB,MAAM,KAAK,GAAG,IAAI,KAAK,CACrB,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,eAAe,CAAC,QAAQ,EAAE,YAAY,CAAC,CACxD,CAAC;YACF,KAAK,CAAC,IAAI,GAAG,cAAc,CAAC;YAC5B,MAAA,KAAK,CAAC,iBAAiB,sDAAG,KAAK,EAAE,UAAU,CAAC,CAAC;YAC7C,MAAM,KAAK,CAAC;QACd,CAAC;QAED,OAAO,OAAwB,CAAC;IAClC,CAAC;IAED,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAE3B,OAAO,CAAC,QAAQ,EAAE,UAAU,CAAU,CAAC;AACzC,CAAC"}
|
|
@@ -2,4 +2,4 @@ export interface ListenerT {
|
|
|
2
2
|
addEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
|
|
3
3
|
removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
|
|
4
4
|
}
|
|
5
|
-
export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?:
|
|
5
|
+
export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?: null | T | Window) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.3.0",
|
|
4
4
|
"description": "React components from the Norwegian Labour and Welfare Administration.",
|
|
5
5
|
"author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -539,6 +539,16 @@
|
|
|
539
539
|
"default": "./cjs/form/textfield/index.js"
|
|
540
540
|
}
|
|
541
541
|
},
|
|
542
|
+
"./FileUpload": {
|
|
543
|
+
"import": {
|
|
544
|
+
"types": "./esm/form/file-upload/index.d.ts",
|
|
545
|
+
"default": "./esm/form/file-upload/index.js"
|
|
546
|
+
},
|
|
547
|
+
"require": {
|
|
548
|
+
"types": "./cjs/form/file-upload/index.d.ts",
|
|
549
|
+
"default": "./cjs/form/file-upload/index.js"
|
|
550
|
+
}
|
|
551
|
+
},
|
|
542
552
|
"./package.json": "./package.json"
|
|
543
553
|
},
|
|
544
554
|
"scripts": {
|
|
@@ -552,8 +562,8 @@
|
|
|
552
562
|
},
|
|
553
563
|
"dependencies": {
|
|
554
564
|
"@floating-ui/react": "0.25.4",
|
|
555
|
-
"@navikt/aksel-icons": "^6.
|
|
556
|
-
"@navikt/ds-tokens": "^6.
|
|
565
|
+
"@navikt/aksel-icons": "^6.3.0",
|
|
566
|
+
"@navikt/ds-tokens": "^6.3.0",
|
|
557
567
|
"@radix-ui/react-tabs": "1.0.0",
|
|
558
568
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
559
569
|
"clsx": "^2.1.0",
|
|
@@ -3,6 +3,7 @@ import Combobox from "./Combobox";
|
|
|
3
3
|
import { FilteredOptionsProvider } from "./FilteredOptions/filteredOptionsContext";
|
|
4
4
|
import { InputContextProvider } from "./Input/inputContext";
|
|
5
5
|
import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
|
|
6
|
+
import { mapToComboboxOptionArray } from "./combobox-utils";
|
|
6
7
|
import { CustomOptionsProvider } from "./customOptionsContext";
|
|
7
8
|
import { ComboboxProps } from "./types";
|
|
8
9
|
|
|
@@ -36,15 +37,15 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
|
|
|
36
37
|
defaultValue,
|
|
37
38
|
error,
|
|
38
39
|
errorId,
|
|
39
|
-
filteredOptions,
|
|
40
|
+
filteredOptions: externalFilteredOptions,
|
|
40
41
|
id,
|
|
41
42
|
isListOpen,
|
|
42
43
|
isLoading = false,
|
|
43
44
|
isMultiSelect,
|
|
44
45
|
onToggleSelected,
|
|
45
|
-
selectedOptions,
|
|
46
|
+
selectedOptions: externalSelectedOptions,
|
|
46
47
|
maxSelected,
|
|
47
|
-
options,
|
|
48
|
+
options: externalOptions,
|
|
48
49
|
value,
|
|
49
50
|
onChange,
|
|
50
51
|
onClear,
|
|
@@ -52,6 +53,9 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
|
|
|
52
53
|
size,
|
|
53
54
|
...rest
|
|
54
55
|
} = props;
|
|
56
|
+
const options = mapToComboboxOptionArray(externalOptions) || [];
|
|
57
|
+
const filteredOptions = mapToComboboxOptionArray(externalFilteredOptions);
|
|
58
|
+
const selectedOptions = mapToComboboxOptionArray(externalSelectedOptions);
|
|
55
59
|
return (
|
|
56
60
|
<InputContextProvider
|
|
57
61
|
value={{
|
|
@@ -5,6 +5,8 @@ import { Loader } from "../../../loader";
|
|
|
5
5
|
import { BodyShort, Label } from "../../../typography";
|
|
6
6
|
import { useInputContext } from "../Input/inputContext";
|
|
7
7
|
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
|
|
8
|
+
import { isInList, toComboboxOption } from "../combobox-utils";
|
|
9
|
+
import { ComboboxOption } from "../types";
|
|
8
10
|
import filteredOptionsUtil from "./filtered-options-util";
|
|
9
11
|
import { useFilteredOptionsContext } from "./filteredOptionsContext";
|
|
10
12
|
|
|
@@ -30,8 +32,8 @@ const FilteredOptions = () => {
|
|
|
30
32
|
const { isMultiSelect, selectedOptions, toggleOption, maxSelected } =
|
|
31
33
|
useSelectedOptionsContext();
|
|
32
34
|
|
|
33
|
-
const isDisabled = (option) =>
|
|
34
|
-
maxSelected?.isLimitReached && !
|
|
35
|
+
const isDisabled = (option: ComboboxOption) =>
|
|
36
|
+
maxSelected?.isLimitReached && !isInList(option.value, selectedOptions);
|
|
35
37
|
|
|
36
38
|
const shouldRenderNonSelectables =
|
|
37
39
|
maxSelected?.isLimitReached || // Render maxSelected message
|
|
@@ -102,8 +104,8 @@ const FilteredOptions = () => {
|
|
|
102
104
|
}
|
|
103
105
|
}}
|
|
104
106
|
onPointerUp={(event) => {
|
|
105
|
-
toggleOption(value, event);
|
|
106
|
-
if (!isMultiSelect && !
|
|
107
|
+
toggleOption(toComboboxOption(value), event);
|
|
108
|
+
if (!isMultiSelect && !isInList(value, selectedOptions))
|
|
107
109
|
toggleIsListOpen(false);
|
|
108
110
|
}}
|
|
109
111
|
id={filteredOptionsUtil.getAddNewOptionId(id)}
|
|
@@ -132,21 +134,23 @@ const FilteredOptions = () => {
|
|
|
132
134
|
className={cl("navds-combobox__list-item", {
|
|
133
135
|
"navds-combobox__list-item--focus":
|
|
134
136
|
activeDecendantId ===
|
|
135
|
-
filteredOptionsUtil.getOptionId(id, option),
|
|
136
|
-
"navds-combobox__list-item--selected":
|
|
137
|
-
|
|
137
|
+
filteredOptionsUtil.getOptionId(id, option.label),
|
|
138
|
+
"navds-combobox__list-item--selected": isInList(
|
|
139
|
+
option.value,
|
|
140
|
+
selectedOptions,
|
|
141
|
+
),
|
|
138
142
|
})}
|
|
139
143
|
data-no-focus={isDisabled(option) || undefined}
|
|
140
|
-
id={filteredOptionsUtil.getOptionId(id, option)}
|
|
141
|
-
key={option}
|
|
144
|
+
id={filteredOptionsUtil.getOptionId(id, option.label)}
|
|
145
|
+
key={option.label}
|
|
142
146
|
tabIndex={-1}
|
|
143
147
|
onMouseMove={() => {
|
|
144
148
|
if (
|
|
145
149
|
activeDecendantId !==
|
|
146
|
-
filteredOptionsUtil.getOptionId(id, option)
|
|
150
|
+
filteredOptionsUtil.getOptionId(id, option.label)
|
|
147
151
|
) {
|
|
148
152
|
virtualFocus.moveFocusToElement(
|
|
149
|
-
filteredOptionsUtil.getOptionId(id, option),
|
|
153
|
+
filteredOptionsUtil.getOptionId(id, option.label),
|
|
150
154
|
);
|
|
151
155
|
setIsMouseLastUsedInputDevice(true);
|
|
152
156
|
}
|
|
@@ -156,16 +160,19 @@ const FilteredOptions = () => {
|
|
|
156
160
|
return;
|
|
157
161
|
}
|
|
158
162
|
toggleOption(option, event);
|
|
159
|
-
if (
|
|
163
|
+
if (
|
|
164
|
+
!isMultiSelect &&
|
|
165
|
+
!isInList(option.value, selectedOptions)
|
|
166
|
+
) {
|
|
160
167
|
toggleIsListOpen(false);
|
|
161
168
|
}
|
|
162
169
|
}}
|
|
163
170
|
role="option"
|
|
164
|
-
aria-selected={
|
|
171
|
+
aria-selected={isInList(option.value, selectedOptions)}
|
|
165
172
|
aria-disabled={isDisabled(option) || undefined}
|
|
166
173
|
>
|
|
167
|
-
<BodyShort size={size}>{option}</BodyShort>
|
|
168
|
-
{
|
|
174
|
+
<BodyShort size={size}>{option.label}</BodyShort>
|
|
175
|
+
{isInList(option.value, selectedOptions) && <CheckmarkIcon />}
|
|
169
176
|
</li>
|
|
170
177
|
))}
|
|
171
178
|
</ul>
|
|
@@ -1,17 +1,13 @@
|
|
|
1
|
+
import { ComboboxOption } from "../types";
|
|
2
|
+
|
|
1
3
|
const normalizeText = (text: string): string =>
|
|
2
4
|
typeof text === "string" ? text.toLocaleLowerCase().trim() : "";
|
|
3
5
|
|
|
4
|
-
const isPartOfText = (value, text) =>
|
|
6
|
+
const isPartOfText = (value: string, text: string) =>
|
|
5
7
|
normalizeText(text).startsWith(normalizeText(value ?? ""));
|
|
6
8
|
|
|
7
|
-
const
|
|
8
|
-
list
|
|
9
|
-
|
|
10
|
-
const getMatchingValuesFromList = (value, list, alwaysIncluded) =>
|
|
11
|
-
list?.filter(
|
|
12
|
-
(listItem) =>
|
|
13
|
-
isPartOfText(value, listItem) || alwaysIncluded.includes(listItem),
|
|
14
|
-
);
|
|
9
|
+
const getMatchingValuesFromList = (value: string, list: ComboboxOption[]) =>
|
|
10
|
+
list.filter((listItem) => isPartOfText(value, listItem.label));
|
|
15
11
|
|
|
16
12
|
const getFilteredOptionsId = (comboboxId: string) =>
|
|
17
13
|
`${comboboxId}-filtered-options`;
|
|
@@ -34,7 +30,6 @@ const getMaxSelectedOptionsId = (comboboxId: string) =>
|
|
|
34
30
|
export default {
|
|
35
31
|
normalizeText,
|
|
36
32
|
isPartOfText,
|
|
37
|
-
isValueInList,
|
|
38
33
|
getMatchingValuesFromList,
|
|
39
34
|
getFilteredOptionsId,
|
|
40
35
|
getAddNewOptionId,
|
|
@@ -10,21 +10,18 @@ import React, {
|
|
|
10
10
|
import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
|
|
11
11
|
import { useInputContext } from "../Input/inputContext";
|
|
12
12
|
import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
|
|
13
|
+
import { toComboboxOption } from "../combobox-utils";
|
|
13
14
|
import { useCustomOptionsContext } from "../customOptionsContext";
|
|
14
|
-
import { ComboboxProps } from "../types";
|
|
15
|
+
import { ComboboxOption, ComboboxProps } from "../types";
|
|
15
16
|
import filteredOptionsUtils from "./filtered-options-util";
|
|
16
17
|
import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
|
|
17
18
|
|
|
18
19
|
type FilteredOptionsProps = {
|
|
19
|
-
children:
|
|
20
|
-
value: Pick<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
| "isListOpen"
|
|
25
|
-
| "isLoading"
|
|
26
|
-
| "options"
|
|
27
|
-
>;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
value: Pick<ComboboxProps, "allowNewValues" | "isListOpen" | "isLoading"> & {
|
|
22
|
+
filteredOptions?: ComboboxOption[];
|
|
23
|
+
options: ComboboxOption[];
|
|
24
|
+
};
|
|
28
25
|
};
|
|
29
26
|
|
|
30
27
|
type FilteredOptionsContextType = {
|
|
@@ -36,12 +33,12 @@ type FilteredOptionsContextType = {
|
|
|
36
33
|
>;
|
|
37
34
|
isListOpen: boolean;
|
|
38
35
|
isLoading?: boolean;
|
|
39
|
-
filteredOptions:
|
|
36
|
+
filteredOptions: ComboboxOption[];
|
|
40
37
|
isMouseLastUsedInputDevice: boolean;
|
|
41
38
|
setIsMouseLastUsedInputDevice: React.Dispatch<SetStateAction<boolean>>;
|
|
42
39
|
isValueNew: boolean;
|
|
43
40
|
toggleIsListOpen: (newState?: boolean) => void;
|
|
44
|
-
currentOption?:
|
|
41
|
+
currentOption?: ComboboxOption;
|
|
45
42
|
shouldAutocomplete?: boolean;
|
|
46
43
|
virtualFocus: VirtualFocusType;
|
|
47
44
|
};
|
|
@@ -71,7 +68,7 @@ export const FilteredOptionsProvider = ({
|
|
|
71
68
|
setSearchTerm,
|
|
72
69
|
shouldAutocomplete,
|
|
73
70
|
} = useInputContext();
|
|
74
|
-
const {
|
|
71
|
+
const { maxSelected } = useSelectedOptionsContext();
|
|
75
72
|
|
|
76
73
|
const [isInternalListOpen, setInternalListOpen] = useState(false);
|
|
77
74
|
const { customOptions } = useCustomOptionsContext();
|
|
@@ -81,18 +78,8 @@ export const FilteredOptionsProvider = ({
|
|
|
81
78
|
return externalFilteredOptions;
|
|
82
79
|
}
|
|
83
80
|
const opts = [...customOptions, ...options];
|
|
84
|
-
return filteredOptionsUtils.getMatchingValuesFromList(
|
|
85
|
-
|
|
86
|
-
opts,
|
|
87
|
-
selectedOptions,
|
|
88
|
-
);
|
|
89
|
-
}, [
|
|
90
|
-
customOptions,
|
|
91
|
-
externalFilteredOptions,
|
|
92
|
-
options,
|
|
93
|
-
searchTerm,
|
|
94
|
-
selectedOptions,
|
|
95
|
-
]);
|
|
81
|
+
return filteredOptionsUtils.getMatchingValuesFromList(searchTerm, opts);
|
|
82
|
+
}, [customOptions, externalFilteredOptions, options, searchTerm]);
|
|
96
83
|
|
|
97
84
|
const previousSearchTerm = usePrevious(searchTerm);
|
|
98
85
|
|
|
@@ -104,11 +91,11 @@ export const FilteredOptionsProvider = ({
|
|
|
104
91
|
options.reduce(
|
|
105
92
|
(map, _option) => ({
|
|
106
93
|
...map,
|
|
107
|
-
[filteredOptionsUtils.getOptionId(id, _option)]: _option,
|
|
94
|
+
[filteredOptionsUtils.getOptionId(id, _option.label)]: _option,
|
|
108
95
|
}),
|
|
109
96
|
{
|
|
110
97
|
[filteredOptionsUtils.getAddNewOptionId(id)]: allowNewValues
|
|
111
|
-
? value
|
|
98
|
+
? toComboboxOption(value)
|
|
112
99
|
: undefined,
|
|
113
100
|
},
|
|
114
101
|
),
|
|
@@ -123,7 +110,7 @@ export const FilteredOptionsProvider = ({
|
|
|
123
110
|
filteredOptions.length > 0
|
|
124
111
|
) {
|
|
125
112
|
setValue(
|
|
126
|
-
`${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`,
|
|
113
|
+
`${searchTerm}${filteredOptions[0].label.substring(searchTerm.length)}`,
|
|
127
114
|
);
|
|
128
115
|
setSearchTerm(searchTerm);
|
|
129
116
|
}
|
|
@@ -161,7 +148,10 @@ export const FilteredOptionsProvider = ({
|
|
|
161
148
|
activeOption = filteredOptionsUtils.getNoHitsId(id);
|
|
162
149
|
} else if ((value && value !== "") || isLoading) {
|
|
163
150
|
if (shouldAutocomplete && filteredOptions[0]) {
|
|
164
|
-
activeOption = filteredOptionsUtils.getOptionId(
|
|
151
|
+
activeOption = filteredOptionsUtils.getOptionId(
|
|
152
|
+
id,
|
|
153
|
+
filteredOptions[0].label,
|
|
154
|
+
);
|
|
165
155
|
} else if (isListOpen && isLoading) {
|
|
166
156
|
activeOption = filteredOptionsUtils.getIsLoadingId(id);
|
|
167
157
|
}
|