@navikt/ds-react 8.8.0 → 8.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.d.ts +13 -0
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +59 -0
- package/cjs/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -0
- package/cjs/data/drag-and-drop/item/DragAndDropItem.d.ts +31 -0
- package/cjs/data/drag-and-drop/item/DragAndDropItem.js +48 -0
- package/cjs/data/drag-and-drop/item/DragAndDropItem.js.map +1 -0
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.d.ts +17 -0
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.js +10 -0
- package/cjs/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -0
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.d.ts +38 -0
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js +219 -0
- package/cjs/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -0
- package/cjs/data/drag-and-drop/types.d.ts +4 -0
- package/cjs/data/drag-and-drop/types.js +3 -0
- package/cjs/data/drag-and-drop/types.js.map +1 -0
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.d.ts +14 -0
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js +48 -0
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -0
- package/cjs/data/table/helpers/selection/getSingleSelectProps.d.ts +10 -0
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js +26 -0
- package/cjs/data/table/helpers/selection/getSingleSelectProps.js.map +1 -0
- package/cjs/data/table/helpers/selection/selection.types.d.ts +42 -0
- package/cjs/data/table/helpers/selection/selection.types.js +3 -0
- package/cjs/data/table/helpers/selection/selection.types.js.map +1 -0
- package/cjs/data/table/{root → hooks}/useTableKeyboardNav.js +1 -1
- package/cjs/data/table/hooks/useTableKeyboardNav.js.map +1 -0
- package/cjs/data/table/hooks/useTableSelection.d.ts +8 -0
- package/cjs/data/table/hooks/useTableSelection.js +49 -0
- package/cjs/data/table/hooks/useTableSelection.js.map +1 -0
- package/cjs/data/table/root/DataTableAuto.d.ts +4 -4
- package/cjs/data/table/root/DataTableAuto.js +23 -11
- package/cjs/data/table/root/DataTableAuto.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.d.ts +1 -1
- package/cjs/data/table/root/DataTableRoot.js +1 -1
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/td/DataTableTd.d.ts +4 -0
- package/cjs/data/table/td/DataTableTd.js +4 -2
- package/cjs/data/table/td/DataTableTd.js.map +1 -1
- package/cjs/data/table/th/DataTableTh.d.ts +4 -0
- package/cjs/data/table/th/DataTableTh.js +6 -3
- package/cjs/data/table/th/DataTableTh.js.map +1 -1
- package/cjs/data/token-filter/AutoSuggest.js +37 -4
- package/cjs/data/token-filter/AutoSuggest.js.map +1 -1
- package/cjs/data/token-filter/FilterChip.d.ts +10 -0
- package/cjs/data/token-filter/FilterChip.js +65 -0
- package/cjs/data/token-filter/FilterChip.js.map +1 -0
- package/cjs/data/token-filter/TokenFilter.d.ts +1 -0
- package/cjs/data/token-filter/TokenFilter.js +4 -10
- package/cjs/data/token-filter/TokenFilter.js.map +1 -1
- package/cjs/data/toolbar/root/DataToolbarRoot.d.ts +6 -23
- package/cjs/data/toolbar/root/DataToolbarRoot.js +42 -7
- package/cjs/data/toolbar/root/DataToolbarRoot.js.map +1 -1
- package/cjs/date/Date.Input.js +8 -9
- package/cjs/date/Date.Input.js.map +1 -1
- package/cjs/date/datepicker/hooks/useDatepicker.js +4 -3
- package/cjs/date/datepicker/hooks/useDatepicker.js.map +1 -1
- package/cjs/date/monthpicker/hooks/useMonthPicker.js +3 -2
- package/cjs/date/monthpicker/hooks/useMonthPicker.js.map +1 -1
- package/cjs/form/checkbox/Checkbox.js +19 -33
- package/cjs/form/checkbox/Checkbox.js.map +1 -1
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.d.ts +21 -0
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.js +65 -0
- package/cjs/form/checkbox/checkbox-input/CheckboxInput.js.map +1 -0
- package/cjs/form/checkbox/types.d.ts +1 -1
- package/cjs/form/fieldset/Fieldset.js +2 -6
- package/cjs/form/fieldset/Fieldset.js.map +1 -1
- package/cjs/form/radio/Radio.js +9 -7
- package/cjs/form/radio/Radio.js.map +1 -1
- package/cjs/form/radio/radio-input/RadioInput.d.ts +19 -0
- package/cjs/{data/drag-and-drop/root/DataDragAndDropRoot.js → form/radio/radio-input/RadioInput.js} +17 -23
- package/cjs/form/radio/radio-input/RadioInput.js.map +1 -0
- package/cjs/internal-header/InternalHeaderButton.d.ts +5 -0
- package/cjs/internal-header/InternalHeaderButton.js +2 -2
- package/cjs/internal-header/InternalHeaderButton.js.map +1 -1
- package/cjs/utils/components/Listbox/group/ListboxGroup.js +2 -1
- package/cjs/utils/components/Listbox/group/ListboxGroup.js.map +1 -1
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.d.ts +13 -0
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js +53 -0
- package/esm/data/drag-and-drop/drag-handler/DragAndDropDragHandler.js.map +1 -0
- package/esm/data/drag-and-drop/item/DragAndDropItem.d.ts +31 -0
- package/esm/data/drag-and-drop/item/DragAndDropItem.js +42 -0
- package/esm/data/drag-and-drop/item/DragAndDropItem.js.map +1 -0
- package/esm/data/drag-and-drop/root/DragAndDrop.context.d.ts +17 -0
- package/esm/data/drag-and-drop/root/DragAndDrop.context.js +6 -0
- package/esm/data/drag-and-drop/root/DragAndDrop.context.js.map +1 -0
- package/esm/data/drag-and-drop/root/DragAndDropRoot.d.ts +38 -0
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js +179 -0
- package/esm/data/drag-and-drop/root/DragAndDropRoot.js.map +1 -0
- package/esm/data/drag-and-drop/types.d.ts +4 -0
- package/esm/data/drag-and-drop/types.js +2 -0
- package/esm/data/drag-and-drop/types.js.map +1 -0
- package/esm/data/table/helpers/selection/getMultipleSelectProps.d.ts +14 -0
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js +46 -0
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -0
- package/esm/data/table/helpers/selection/getSingleSelectProps.d.ts +10 -0
- package/esm/data/table/helpers/selection/getSingleSelectProps.js +24 -0
- package/esm/data/table/helpers/selection/getSingleSelectProps.js.map +1 -0
- package/esm/data/table/helpers/selection/selection.types.d.ts +42 -0
- package/esm/data/table/helpers/selection/selection.types.js +2 -0
- package/esm/data/table/helpers/selection/selection.types.js.map +1 -0
- package/esm/data/table/{root → hooks}/useTableKeyboardNav.js +1 -1
- package/esm/data/table/hooks/useTableKeyboardNav.js.map +1 -0
- package/esm/data/table/hooks/useTableSelection.d.ts +8 -0
- package/esm/data/table/hooks/useTableSelection.js +47 -0
- package/esm/data/table/hooks/useTableSelection.js.map +1 -0
- package/esm/data/table/root/DataTableAuto.d.ts +4 -4
- package/esm/data/table/root/DataTableAuto.js +23 -11
- package/esm/data/table/root/DataTableAuto.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.d.ts +1 -1
- package/esm/data/table/root/DataTableRoot.js +1 -1
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/td/DataTableTd.d.ts +4 -0
- package/esm/data/table/td/DataTableTd.js +4 -2
- package/esm/data/table/td/DataTableTd.js.map +1 -1
- package/esm/data/table/th/DataTableTh.d.ts +4 -0
- package/esm/data/table/th/DataTableTh.js +6 -3
- package/esm/data/table/th/DataTableTh.js.map +1 -1
- package/esm/data/token-filter/AutoSuggest.js +38 -5
- package/esm/data/token-filter/AutoSuggest.js.map +1 -1
- package/esm/data/token-filter/FilterChip.d.ts +10 -0
- package/esm/data/token-filter/FilterChip.js +30 -0
- package/esm/data/token-filter/FilterChip.js.map +1 -0
- package/esm/data/token-filter/TokenFilter.d.ts +1 -0
- package/esm/data/token-filter/TokenFilter.js +4 -10
- package/esm/data/token-filter/TokenFilter.js.map +1 -1
- package/esm/data/toolbar/root/DataToolbarRoot.d.ts +6 -23
- package/esm/data/toolbar/root/DataToolbarRoot.js +9 -7
- package/esm/data/toolbar/root/DataToolbarRoot.js.map +1 -1
- package/esm/date/Date.Input.js +9 -10
- package/esm/date/Date.Input.js.map +1 -1
- package/esm/date/datepicker/hooks/useDatepicker.js +4 -3
- package/esm/date/datepicker/hooks/useDatepicker.js.map +1 -1
- package/esm/date/monthpicker/hooks/useMonthPicker.js +3 -2
- package/esm/date/monthpicker/hooks/useMonthPicker.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +19 -33
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/checkbox/checkbox-input/CheckboxInput.d.ts +21 -0
- package/esm/form/checkbox/checkbox-input/CheckboxInput.js +29 -0
- package/esm/form/checkbox/checkbox-input/CheckboxInput.js.map +1 -0
- package/esm/form/checkbox/types.d.ts +1 -1
- package/esm/form/fieldset/Fieldset.js +2 -6
- package/esm/form/fieldset/Fieldset.js.map +1 -1
- package/esm/form/radio/Radio.js +9 -7
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/form/radio/radio-input/RadioInput.d.ts +19 -0
- package/esm/form/radio/radio-input/RadioInput.js +19 -0
- package/esm/form/radio/radio-input/RadioInput.js.map +1 -0
- package/esm/internal-header/InternalHeaderButton.d.ts +5 -0
- package/esm/internal-header/InternalHeaderButton.js +2 -2
- package/esm/internal-header/InternalHeaderButton.js.map +1 -1
- package/esm/utils/components/Listbox/group/ListboxGroup.js +2 -1
- package/esm/utils/components/Listbox/group/ListboxGroup.js.map +1 -1
- package/package.json +4 -4
- package/src/data/drag-and-drop/drag-handler/DragAndDropDragHandler.tsx +94 -0
- package/src/data/drag-and-drop/item/DragAndDropItem.tsx +75 -0
- package/src/data/drag-and-drop/root/DragAndDrop.context.tsx +27 -0
- package/src/data/drag-and-drop/root/DragAndDropRoot.tsx +294 -0
- package/src/data/drag-and-drop/types.ts +4 -0
- package/src/data/table/helpers/selection/getMultipleSelectProps.ts +70 -0
- package/src/data/table/helpers/selection/getSingleSelectProps.ts +36 -0
- package/src/data/table/helpers/selection/selection.types.ts +56 -0
- package/src/data/table/hooks/__tests__/useTableSelection.test.ts +327 -0
- package/src/data/table/{root → hooks}/useTableKeyboardNav.ts +1 -1
- package/src/data/table/hooks/useTableSelection.ts +78 -0
- package/src/data/table/root/DataTableAuto.tsx +58 -25
- package/src/data/table/root/DataTableRoot.tsx +2 -2
- package/src/data/table/td/DataTableTd.tsx +15 -2
- package/src/data/table/th/DataTableTh.tsx +13 -2
- package/src/data/token-filter/AutoSuggest.tsx +65 -3
- package/src/data/token-filter/FilterChip.tsx +100 -0
- package/src/data/token-filter/TokenFilter.tsx +9 -24
- package/src/data/toolbar/root/DataToolbarRoot.tsx +29 -32
- package/src/date/Date.Input.tsx +17 -16
- package/src/date/datepicker/hooks/useDatepicker.tsx +4 -5
- package/src/date/monthpicker/hooks/useMonthPicker.tsx +3 -4
- package/src/form/checkbox/Checkbox.tsx +37 -64
- package/src/form/checkbox/checkbox-input/CheckboxInput.tsx +69 -0
- package/src/form/checkbox/types.ts +1 -1
- package/src/form/fieldset/Fieldset.tsx +4 -6
- package/src/form/radio/Radio.tsx +43 -38
- package/src/form/radio/radio-input/RadioInput.tsx +32 -0
- package/src/internal-header/InternalHeaderButton.tsx +18 -9
- package/src/utils/components/Listbox/group/ListboxGroup.tsx +9 -2
- package/cjs/data/action-bar/root/DataActionBarRoot.d.ts +0 -27
- package/cjs/data/action-bar/root/DataActionBarRoot.js +0 -49
- package/cjs/data/action-bar/root/DataActionBarRoot.js.map +0 -1
- package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.d.ts +0 -21
- package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js +0 -24
- package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js.map +0 -1
- package/cjs/data/drag-and-drop/item/DataDragAndDropItem.d.ts +0 -27
- package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js +0 -41
- package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js.map +0 -1
- package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.d.ts +0 -8
- package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js +0 -10
- package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js.map +0 -1
- package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.d.ts +0 -34
- package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.js.map +0 -1
- package/cjs/data/table/root/useTableKeyboardNav.js.map +0 -1
- package/cjs/data/table/root/useTableSelection.d.ts +0 -55
- package/cjs/data/table/root/useTableSelection.js +0 -79
- package/cjs/data/table/root/useTableSelection.js.map +0 -1
- package/esm/data/action-bar/root/DataActionBarRoot.d.ts +0 -27
- package/esm/data/action-bar/root/DataActionBarRoot.js +0 -43
- package/esm/data/action-bar/root/DataActionBarRoot.js.map +0 -1
- package/esm/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.d.ts +0 -21
- package/esm/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js +0 -18
- package/esm/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js.map +0 -1
- package/esm/data/drag-and-drop/item/DataDragAndDropItem.d.ts +0 -27
- package/esm/data/drag-and-drop/item/DataDragAndDropItem.js +0 -35
- package/esm/data/drag-and-drop/item/DataDragAndDropItem.js.map +0 -1
- package/esm/data/drag-and-drop/root/DataDragAndDrop.context.d.ts +0 -8
- package/esm/data/drag-and-drop/root/DataDragAndDrop.context.js +0 -6
- package/esm/data/drag-and-drop/root/DataDragAndDrop.context.js.map +0 -1
- package/esm/data/drag-and-drop/root/DataDragAndDropRoot.d.ts +0 -34
- package/esm/data/drag-and-drop/root/DataDragAndDropRoot.js +0 -21
- package/esm/data/drag-and-drop/root/DataDragAndDropRoot.js.map +0 -1
- package/esm/data/table/root/useTableKeyboardNav.js.map +0 -1
- package/esm/data/table/root/useTableSelection.d.ts +0 -55
- package/esm/data/table/root/useTableSelection.js +0 -77
- package/esm/data/table/root/useTableSelection.js.map +0 -1
- package/src/data/action-bar/root/DataActionBarRoot.tsx +0 -59
- package/src/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.tsx +0 -63
- package/src/data/drag-and-drop/item/DataDragAndDropItem.tsx +0 -54
- package/src/data/drag-and-drop/root/DataDragAndDrop.context.tsx +0 -14
- package/src/data/drag-and-drop/root/DataDragAndDropRoot.tsx +0 -54
- package/src/data/table/root/useTableSelection.ts +0 -126
- /package/cjs/data/table/{root → hooks}/useTableKeyboardNav.d.ts +0 -0
- /package/esm/data/table/{root → hooks}/useTableKeyboardNav.d.ts +0 -0
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
function getMultipleSelectProps({ selectedKeys, setSelectedKeys, disabledKeys, allKeys, totalCount, }) {
|
|
2
|
+
const handleToggleAll = () => {
|
|
3
|
+
const allSelected = selectedKeys === "all" ||
|
|
4
|
+
(Array.isArray(selectedKeys) && selectedKeys.length === totalCount);
|
|
5
|
+
setSelectedKeys(allSelected ? [] : allKeys);
|
|
6
|
+
};
|
|
7
|
+
const handleToggleRow = (key) => {
|
|
8
|
+
if (selectedKeys === "all") {
|
|
9
|
+
setSelectedKeys(allKeys.filter((id) => id !== key));
|
|
10
|
+
}
|
|
11
|
+
else if (selectedKeys.includes(key)) {
|
|
12
|
+
setSelectedKeys(selectedKeys.filter((k) => k !== key));
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
setSelectedKeys([...selectedKeys, key]);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
const isChecked = (key) => selectedKeys === "all" ||
|
|
19
|
+
(Array.isArray(selectedKeys) && selectedKeys.includes(key));
|
|
20
|
+
return {
|
|
21
|
+
getTheadCheckboxProps: () => {
|
|
22
|
+
const indeterminate = Array.isArray(selectedKeys) &&
|
|
23
|
+
selectedKeys.length > 0 &&
|
|
24
|
+
selectedKeys.length < totalCount;
|
|
25
|
+
return {
|
|
26
|
+
/* TODO: Add support for label visuallyhidden */
|
|
27
|
+
/* children: "Select all rows", */
|
|
28
|
+
onChange: handleToggleAll,
|
|
29
|
+
checked: (selectedKeys === "all" ||
|
|
30
|
+
(Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
|
|
31
|
+
!indeterminate,
|
|
32
|
+
indeterminate,
|
|
33
|
+
disabled: disabledKeys.length === totalCount,
|
|
34
|
+
};
|
|
35
|
+
},
|
|
36
|
+
getRowCheckboxProps: (key) => ({
|
|
37
|
+
/* TODO: Add support for label visuallyhidden */
|
|
38
|
+
/* children: `Select row with id ${key}`, */
|
|
39
|
+
onChange: () => handleToggleRow(key),
|
|
40
|
+
checked: isChecked(key),
|
|
41
|
+
disabled: disabledKeys.includes(key),
|
|
42
|
+
}),
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
export { getMultipleSelectProps };
|
|
46
|
+
//# sourceMappingURL=getMultipleSelectProps.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getMultipleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getMultipleSelectProps.ts"],"names":[],"mappings":"AAWA,SAAS,sBAAsB,CAAC,EAC9B,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,OAAO,EACP,UAAU,GACiB;IAC3B,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,WAAW,GACf,YAAY,KAAK,KAAK;YACtB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,MAAM,KAAK,UAAU,CAAC,CAAC;QAEtE,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,GAAoB,EAAE,EAAE;QAC/C,IAAI,YAAY,KAAK,KAAK,EAAE,CAAC;YAC3B,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;QACtD,CAAC;aAAM,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACtC,eAAe,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACzD,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,CAAC,GAAG,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,GAAoB,EAAE,EAAE,CACzC,YAAY,KAAK,KAAK;QACtB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAE9D,OAAO;QACL,qBAAqB,EAAE,GAAuB,EAAE;YAC9C,MAAM,aAAa,GACjB,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;gBAC3B,YAAY,CAAC,MAAM,GAAG,CAAC;gBACvB,YAAY,CAAC,MAAM,GAAG,UAAU,CAAC;YAEnC,OAAO;gBACL,gDAAgD;gBAChD,kCAAkC;gBAClC,QAAQ,EAAE,eAAe;gBACzB,OAAO,EACL,CAAC,YAAY,KAAK,KAAK;oBACrB,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;oBAC3D,CAAC,aAAa;gBAChB,aAAa;gBACb,QAAQ,EAAE,YAAY,CAAC,MAAM,KAAK,UAAU;aAC7C,CAAC;QACJ,CAAC;QACD,mBAAmB,EAAE,CAAC,GAAoB,EAAsB,EAAE,CAAC,CAAC;YAClE,gDAAgD;YAChD,4CAA4C;YAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC;YACpC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC;YACvB,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;SACrC,CAAC;KACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput.js";
|
|
2
|
+
type GetSingleSelectPropsArgs = {
|
|
3
|
+
selectedKeys: (string | number)[];
|
|
4
|
+
setSelectedKeys: (keys: (string | number)[]) => void;
|
|
5
|
+
disabledKeys: (string | number)[];
|
|
6
|
+
};
|
|
7
|
+
declare function getSingleSelectProps({ selectedKeys, setSelectedKeys, disabledKeys, }: GetSingleSelectPropsArgs): {
|
|
8
|
+
getRowRadioProps: (key: string | number) => RadioInputProps;
|
|
9
|
+
};
|
|
10
|
+
export { getSingleSelectProps };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
function getSingleSelectProps({ selectedKeys, setSelectedKeys, disabledKeys, }) {
|
|
2
|
+
const handleSelectionChange = (key) => {
|
|
3
|
+
if (selectedKeys.includes(key)) {
|
|
4
|
+
setSelectedKeys([]);
|
|
5
|
+
}
|
|
6
|
+
else {
|
|
7
|
+
setSelectedKeys([key]);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
return {
|
|
11
|
+
getRowRadioProps: (key) => ({
|
|
12
|
+
/* TODO: Add support for label visuallyhidden */
|
|
13
|
+
/* children: `Select row with id ${key}`, */
|
|
14
|
+
checked: selectedKeys.includes(key),
|
|
15
|
+
onChange: () => handleSelectionChange(key),
|
|
16
|
+
disabled: disabledKeys.includes(key),
|
|
17
|
+
value: key,
|
|
18
|
+
/* TODO: Make this unique to avoid issue with multipe tables */
|
|
19
|
+
name: "data-table-single-select",
|
|
20
|
+
}),
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export { getSingleSelectProps };
|
|
24
|
+
//# sourceMappingURL=getSingleSelectProps.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getSingleSelectProps.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/getSingleSelectProps.ts"],"names":[],"mappings":"AAQA,SAAS,oBAAoB,CAAC,EAC5B,YAAY,EACZ,eAAe,EACf,YAAY,GACa;IACzB,MAAM,qBAAqB,GAAG,CAAC,GAAoB,EAAE,EAAE;QACrD,IAAI,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,eAAe,CAAC,EAAE,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO;QACL,gBAAgB,EAAE,CAAC,GAAoB,EAAmB,EAAE,CAAC,CAAC;YAC5D,gDAAgD;YAChD,4CAA4C;YAC5C,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;YACnC,QAAQ,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,CAAC;YAC1C,QAAQ,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;YACpC,KAAK,EAAE,GAAG;YACV,+DAA+D;YAC/D,IAAI,EAAE,0BAA0B;SACjC,CAAC;KACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput.js";
|
|
2
|
+
import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput.js";
|
|
3
|
+
type SelectionT = (string | number)[] | "all";
|
|
4
|
+
type SelectionProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Enables selection of rows.
|
|
7
|
+
*
|
|
8
|
+
* When set to "single", only one row can be selected at a time (renders radio buttons).
|
|
9
|
+
*
|
|
10
|
+
* When set to "multiple", multiple rows can be selected (renders checkboxes).
|
|
11
|
+
*
|
|
12
|
+
* @default "none"
|
|
13
|
+
*/
|
|
14
|
+
selectionMode?: "none" | "single" | "multiple";
|
|
15
|
+
selectedKeys?: SelectionT;
|
|
16
|
+
defaultSelectedKeys?: SelectionT;
|
|
17
|
+
onSelectionChange?: (keys: SelectionT) => void;
|
|
18
|
+
disabledKeys?: (string | number)[];
|
|
19
|
+
};
|
|
20
|
+
type NoneSelection = {
|
|
21
|
+
selectionMode: "none";
|
|
22
|
+
allKeys: (string | number)[];
|
|
23
|
+
selectedKeys: (string | number)[];
|
|
24
|
+
disabledKeys: (string | number)[];
|
|
25
|
+
};
|
|
26
|
+
type SingleSelection = {
|
|
27
|
+
selectionMode: "single";
|
|
28
|
+
allKeys: (string | number)[];
|
|
29
|
+
selectedKeys: (string | number)[];
|
|
30
|
+
disabledKeys: (string | number)[];
|
|
31
|
+
getRowRadioProps: (key: string | number) => RadioInputProps;
|
|
32
|
+
};
|
|
33
|
+
type MultipleSelection = {
|
|
34
|
+
selectionMode: "multiple";
|
|
35
|
+
allKeys: (string | number)[];
|
|
36
|
+
selectedKeys: SelectionT;
|
|
37
|
+
disabledKeys: (string | number)[];
|
|
38
|
+
getTheadCheckboxProps: () => CheckboxInputProps;
|
|
39
|
+
getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
|
|
40
|
+
};
|
|
41
|
+
type TableSelection = NoneSelection | SingleSelection | MultipleSelection;
|
|
42
|
+
export type { MultipleSelection, NoneSelection, SelectionProps, SelectionT, SingleSelection, TableSelection, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selection.types.js","sourceRoot":"","sources":["../../../../../src/data/table/helpers/selection/selection.types.ts"],"names":[],"mappings":""}
|
|
@@ -4,7 +4,7 @@ import { focusInitialTableTarget } from "../helpers/table-cell.js";
|
|
|
4
4
|
import { focusCellAndUpdateTabIndex } from "../helpers/table-focus.js";
|
|
5
5
|
import { findFirstCell, findFirstCellInRow, findLastCell, findLastCellInRow, findNextFocusableCell, } from "../helpers/table-grid-nav.js";
|
|
6
6
|
import { getNavigationAction, shouldBlockNavigation, } from "../helpers/table-keyboard.js";
|
|
7
|
-
import { useGridCache } from "
|
|
7
|
+
import { useGridCache } from "./useGridCache.js";
|
|
8
8
|
function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customBlockFn }) {
|
|
9
9
|
const { getTableGrid, activeCell, setActiveCell } = useGridCache(tableRef, enabled);
|
|
10
10
|
/**
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { SelectionProps, SelectionT, TableSelection } from "../helpers/selection/selection.types.js";
|
|
2
|
+
type UseTableSelectionArgs<T> = SelectionProps & {
|
|
3
|
+
data: T[];
|
|
4
|
+
getRowId: (rowData: T, index: number) => string | number;
|
|
5
|
+
};
|
|
6
|
+
declare function useTableSelection<T>({ selectionMode, defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledKeys, data, getRowId, }: UseTableSelectionArgs<T>): TableSelection;
|
|
7
|
+
export { useTableSelection };
|
|
8
|
+
export type { SelectionProps, SelectionT };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useControllableState } from "../../../utils/hooks/index.js";
|
|
3
|
+
import { getMultipleSelectProps } from "../helpers/selection/getMultipleSelectProps.js";
|
|
4
|
+
import { getSingleSelectProps } from "../helpers/selection/getSingleSelectProps.js";
|
|
5
|
+
function useTableSelection({ selectionMode = "none", defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledKeys = [], data, getRowId, }) {
|
|
6
|
+
const allKeys = useMemo(() => data.map((item, index) => getRowId(item, index)), [data, getRowId]);
|
|
7
|
+
const [selectedKeys, setSelectedKeys] = useControllableState({
|
|
8
|
+
value: selectionMode !== "none" ? selectedKeysProp : undefined,
|
|
9
|
+
defaultValue: defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : [],
|
|
10
|
+
onChange: onSelectionChange,
|
|
11
|
+
});
|
|
12
|
+
if (selectionMode === "none") {
|
|
13
|
+
return { selectionMode, allKeys, selectedKeys: [], disabledKeys };
|
|
14
|
+
}
|
|
15
|
+
if (selectionMode === "single") {
|
|
16
|
+
const arrayKeys = Array.isArray(selectedKeys) ? selectedKeys : [];
|
|
17
|
+
const { getRowRadioProps } = getSingleSelectProps({
|
|
18
|
+
selectedKeys: arrayKeys,
|
|
19
|
+
setSelectedKeys,
|
|
20
|
+
disabledKeys,
|
|
21
|
+
});
|
|
22
|
+
return {
|
|
23
|
+
selectionMode,
|
|
24
|
+
allKeys,
|
|
25
|
+
selectedKeys: arrayKeys,
|
|
26
|
+
disabledKeys,
|
|
27
|
+
getRowRadioProps,
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
const { getTheadCheckboxProps, getRowCheckboxProps } = getMultipleSelectProps({
|
|
31
|
+
selectedKeys,
|
|
32
|
+
setSelectedKeys,
|
|
33
|
+
disabledKeys,
|
|
34
|
+
allKeys,
|
|
35
|
+
totalCount: data.length,
|
|
36
|
+
});
|
|
37
|
+
return {
|
|
38
|
+
selectionMode,
|
|
39
|
+
allKeys,
|
|
40
|
+
selectedKeys,
|
|
41
|
+
disabledKeys,
|
|
42
|
+
getTheadCheckboxProps,
|
|
43
|
+
getRowCheckboxProps,
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
export { useTableSelection };
|
|
47
|
+
//# sourceMappingURL=useTableSelection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAYjF,SAAS,iBAAiB,CAAI,EAC5B,aAAa,GAAG,MAAM,EACtB,mBAAmB,EACnB,YAAY,EAAE,gBAAgB,EAC9B,iBAAiB,EACjB,YAAY,GAAG,EAAE,EACjB,IAAI,EACJ,QAAQ,GACiB;IACzB,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EACtD,CAAC,IAAI,EAAE,QAAQ,CAAC,CACjB,CAAC;IAEF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,oBAAoB,CAAa;QACvE,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;QAC9D,YAAY,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE;QACvC,QAAQ,EAAE,iBAAiB;KAC5B,CAAC,CAAC;IAEH,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QAC7B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC;IACpE,CAAC;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAClE,MAAM,EAAE,gBAAgB,EAAE,GAAG,oBAAoB,CAAC;YAChD,YAAY,EAAE,SAAS;YACvB,eAAe;YACf,YAAY;SACb,CAAC,CAAC;QAEH,OAAO;YACL,aAAa;YACb,OAAO;YACP,YAAY,EAAE,SAAS;YACvB,YAAY;YACZ,gBAAgB;SACjB,CAAC;IACJ,CAAC;IAED,MAAM,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,CAC3E;QACE,YAAY;QACZ,eAAe;QACf,YAAY;QACZ,OAAO;QACP,UAAU,EAAE,IAAI,CAAC,MAAM;KACxB,CACF,CAAC;IAEF,OAAO;QACL,aAAa;QACb,OAAO;QACP,YAAY;QACZ,YAAY;QACZ,qBAAqB;QACrB,mBAAmB;KACpB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
|
|
1
2
|
import React from "react";
|
|
3
|
+
import { type SelectionProps } from "../hooks/useTableSelection.js";
|
|
2
4
|
import type { ColumnDefinitions } from "./DataTable.types.js";
|
|
3
|
-
import { type SelectionProps } from "./useTableSelection.js";
|
|
4
5
|
interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
|
|
5
6
|
children?: never;
|
|
6
7
|
/**
|
|
@@ -50,9 +51,8 @@ interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, Sele
|
|
|
50
51
|
*
|
|
51
52
|
*/
|
|
52
53
|
columnDefinitions: ColumnDefinitions<T>;
|
|
53
|
-
data:
|
|
54
|
-
|
|
55
|
-
})[];
|
|
54
|
+
data: T[];
|
|
55
|
+
getRowId?: (rowData: T, index: number) => string | number;
|
|
56
56
|
}
|
|
57
57
|
declare const DataTableAuto: <T>(props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
|
|
58
58
|
export { DataTableAuto };
|
|
@@ -9,33 +9,37 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
+
/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
|
|
12
13
|
import React, { forwardRef, useState } from "react";
|
|
13
|
-
import {
|
|
14
|
+
import { CheckboxInput } from "../../../form/checkbox/checkbox-input/CheckboxInput.js";
|
|
15
|
+
import { RadioInput } from "../../../form/radio/radio-input/RadioInput.js";
|
|
14
16
|
import { cl } from "../../../utils/helpers/index.js";
|
|
15
17
|
import { useMergeRefs } from "../../../utils/hooks/index.js";
|
|
18
|
+
import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
|
|
19
|
+
import { useTableSelection, } from "../hooks/useTableSelection.js";
|
|
16
20
|
import { DataTableTbody } from "../tbody/DataTableTbody.js";
|
|
17
21
|
import { DataTableTd } from "../td/DataTableTd.js";
|
|
18
22
|
import { DataTableTh } from "../th/DataTableTh.js";
|
|
19
23
|
import { DataTableThead } from "../thead/DataTableThead.js";
|
|
20
24
|
import { DataTableTr } from "../tr/DataTableTr.js";
|
|
21
25
|
import { DataTableContextProvider } from "./DataTableRoot.context.js";
|
|
22
|
-
import { useTableKeyboardNav } from "./useTableKeyboardNav.js";
|
|
23
|
-
import { useTableSelection } from "./useTableSelection.js";
|
|
24
26
|
function DataTableAutoInner(_a, forwardedRef) {
|
|
25
|
-
var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed", selectionMode: selectionModeProp = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys = [], data, columnDefinitions } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout", "selectionMode", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "disabledKeys", "data", "columnDefinitions"]);
|
|
27
|
+
var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed", selectionMode: selectionModeProp = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys = [], data, columnDefinitions, getRowId } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout", "selectionMode", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "disabledKeys", "data", "columnDefinitions", "getRowId"]);
|
|
26
28
|
const [tableRef, setTableRef] = useState(null);
|
|
27
29
|
const mergedRef = useMergeRefs(forwardedRef, setTableRef);
|
|
28
30
|
const { tabIndex } = useTableKeyboardNav(tableRef, {
|
|
29
31
|
enabled: withKeyboardNav,
|
|
30
32
|
shouldBlockNavigation,
|
|
31
33
|
});
|
|
32
|
-
const
|
|
34
|
+
const resolvedGetRowId = getRowId !== null && getRowId !== void 0 ? getRowId : ((_row, index) => index);
|
|
35
|
+
const selection = useTableSelection({
|
|
33
36
|
selectionMode: selectionModeProp,
|
|
34
37
|
selectedKeys,
|
|
35
38
|
defaultSelectedKeys,
|
|
36
39
|
onSelectionChange,
|
|
37
40
|
disabledKeys,
|
|
38
41
|
data,
|
|
42
|
+
getRowId: resolvedGetRowId,
|
|
39
43
|
});
|
|
40
44
|
return (React.createElement(DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav },
|
|
41
45
|
React.createElement("div", { className: "aksel-data-table__border-wrapper" },
|
|
@@ -43,15 +47,23 @@ function DataTableAutoInner(_a, forwardedRef) {
|
|
|
43
47
|
React.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex }),
|
|
44
48
|
React.createElement(DataTableThead, null,
|
|
45
49
|
React.createElement(DataTableTr, null,
|
|
46
|
-
|
|
47
|
-
React.createElement(
|
|
50
|
+
selection.selectionMode === "multiple" && (React.createElement(DataTableTh, { textAlign: "center", width: "60px", UNSAFE_isSelection: true },
|
|
51
|
+
React.createElement(CheckboxInput, Object.assign({}, selection.getTheadCheckboxProps(), { compact: true })))),
|
|
52
|
+
selection.selectionMode === "single" && (React.createElement(DataTableTh, { width: "64px", UNSAFE_isSelection: true })),
|
|
48
53
|
columnDefinitions.map((colDef, colDefIndex) => {
|
|
49
|
-
return (React.createElement(DataTableTh
|
|
54
|
+
return (React.createElement(DataTableTh
|
|
55
|
+
/* TODO: Make these user-changable */
|
|
56
|
+
, {
|
|
57
|
+
/* TODO: Make these user-changable */
|
|
58
|
+
maxWidth: "400px", minWidth: "100px", defaultWidth: "100%", textAlign: "left", key: colDef.id || colDefIndex }, colDef.header));
|
|
50
59
|
}))),
|
|
51
60
|
React.createElement(DataTableTbody, null, data.map((rowData, rowIndex) => {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
61
|
+
const rowId = selection.allKeys[rowIndex];
|
|
62
|
+
return (React.createElement(DataTableTr, { key: rowId },
|
|
63
|
+
selection.selectionMode === "multiple" && (React.createElement(DataTableTd, { align: "center", width: "60px", UNSAFE_isSelection: true },
|
|
64
|
+
React.createElement(CheckboxInput, Object.assign({}, selection.getRowCheckboxProps(rowId), { compact: true })))),
|
|
65
|
+
selection.selectionMode === "single" && (React.createElement(DataTableTd, { width: "64px", UNSAFE_isSelection: true },
|
|
66
|
+
React.createElement(RadioInput, Object.assign({}, selection.getRowRadioProps(rowId))))),
|
|
55
67
|
columnDefinitions.map((colDef, colDefIndex) => {
|
|
56
68
|
return (React.createElement(DataTableTd, { textAlign: "left", key: colDef.id || colDefIndex }, colDef.cell(rowData)));
|
|
57
69
|
})));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableAuto.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableAuto.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DataTableAuto.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableAuto.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { DataTableCaption, type DataTableCaptionProps } from "../caption/DataTableCaption.js";
|
|
3
3
|
import { DataTableEmptyState, type DataTableEmptyStateProps } from "../empty-state/DataTableEmptyState.js";
|
|
4
|
+
import { type SelectionProps } from "../hooks/useTableSelection.js";
|
|
4
5
|
import { DataTableLoadingState, type DataTableLoadingStateProps } from "../loading-state/DataTableLoadingState.js";
|
|
5
6
|
import { DataTableTbody, type DataTableTbodyProps } from "../tbody/DataTableTbody.js";
|
|
6
7
|
import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd.js";
|
|
@@ -8,7 +9,6 @@ import { DataTableTfoot, type DataTableTfootProps } from "../tfoot/DataTableTfoo
|
|
|
8
9
|
import { DataTableTh, type DataTableThProps } from "../th/DataTableTh.js";
|
|
9
10
|
import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThead.js";
|
|
10
11
|
import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr.js";
|
|
11
|
-
import { type SelectionProps } from "./useTableSelection.js";
|
|
12
12
|
interface DataTableProps extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
|
|
13
13
|
children: React.ReactNode;
|
|
14
14
|
/**
|
|
@@ -14,6 +14,7 @@ import { cl } from "../../../utils/helpers/index.js";
|
|
|
14
14
|
import { useMergeRefs } from "../../../utils/hooks/index.js";
|
|
15
15
|
import { DataTableCaption, } from "../caption/DataTableCaption.js";
|
|
16
16
|
import { DataTableEmptyState, } from "../empty-state/DataTableEmptyState.js";
|
|
17
|
+
import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
|
|
17
18
|
import { DataTableLoadingState, } from "../loading-state/DataTableLoadingState.js";
|
|
18
19
|
import { DataTableTbody, } from "../tbody/DataTableTbody.js";
|
|
19
20
|
import { DataTableTd } from "../td/DataTableTd.js";
|
|
@@ -22,7 +23,6 @@ import { DataTableTh } from "../th/DataTableTh.js";
|
|
|
22
23
|
import { DataTableThead, } from "../thead/DataTableThead.js";
|
|
23
24
|
import { DataTableTr } from "../tr/DataTableTr.js";
|
|
24
25
|
import { DataTableContextProvider } from "./DataTableRoot.context.js";
|
|
25
|
-
import { useTableKeyboardNav } from "./useTableKeyboardNav.js";
|
|
26
26
|
/**
|
|
27
27
|
* TODO Component description etc.
|
|
28
28
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,mBAAmB,GAEpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,qBAAqB,GAEtB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,mBAAmB,GAEpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EACL,qBAAqB,GAEtB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAyKnE;;;;;GAKG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EASC,EACD,YAAY,EACZ,EAAE;QAXF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,EACtB,qBAAqB,EACrB,MAAM,GAAG,OAAO,OAEjB,EADI,IAAI,cART,oHASC,CADQ;IAIT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE;QACjD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,wBAAwB,IACvB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe;QAEhC,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,kCAAkC;gBAC/C,+CACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,wBACxB,YAAY,2BACT,eAAe,kBACxB,UAAU,iBACX,MAAM,EACnB,QAAQ,EAAE,QAAQ,IAClB,CACE,CACF,CACmB,CAC5B,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,UAAU,GAAG,mBAAmB,CAAC;AAC3C,SAAS,CAAC,YAAY,GAAG,qBAAqB,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,GACZ,CAAC;AACF,eAAe,SAAS,CAAC"}
|
|
@@ -16,6 +16,10 @@ interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement>
|
|
|
16
16
|
* @default "left"
|
|
17
17
|
*/
|
|
18
18
|
textAlign?: "left" | "center" | "right";
|
|
19
|
+
/**
|
|
20
|
+
* Temp hack to solve overflow and alignment
|
|
21
|
+
*/
|
|
22
|
+
UNSAFE_isSelection?: boolean;
|
|
19
23
|
}
|
|
20
24
|
declare const DataTableTd: React.ForwardRefExoticComponent<DataTableTdProps & React.RefAttributes<HTMLTableCellElement>>;
|
|
21
25
|
export { DataTableTd };
|
|
@@ -13,9 +13,11 @@ import React, { forwardRef } from "react";
|
|
|
13
13
|
import { cl } from "../../../utils/helpers/index.js";
|
|
14
14
|
import { useDataTableContext } from "../root/DataTableRoot.context.js";
|
|
15
15
|
const DataTableTd = forwardRef((_a, forwardedRef) => {
|
|
16
|
-
var { className, children, contentMaxWidth, textAlign = "left" } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth", "textAlign"]);
|
|
16
|
+
var { className, children, contentMaxWidth, textAlign = "left", UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth", "textAlign", "UNSAFE_isSelection"]);
|
|
17
17
|
const { withKeyboardNav } = useDataTableContext();
|
|
18
|
-
return (React.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__td", className
|
|
18
|
+
return (React.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__td", className, {
|
|
19
|
+
"aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
|
|
20
|
+
}), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign }),
|
|
19
21
|
React.createElement("div", { style: { maxWidth: contentMaxWidth } }, children)));
|
|
20
22
|
});
|
|
21
23
|
export { DataTableTd };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AA0BpE,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAOC,EACD,YAAY,EACZ,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,eAAe,EACf,SAAS,GAAG,MAAM,EAClB,kBAAkB,OAEnB,EADI,IAAI,cANT,+EAOC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAElD,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,sCAAsC,EAAE,kBAAkB;SAC3D,CAAC,EACF,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,SAAS;QAErB,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAG,QAAQ,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -27,7 +27,7 @@ const SORT_ICON = {
|
|
|
27
27
|
* Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
|
|
28
28
|
*/
|
|
29
29
|
const DataTableTh = forwardRef((_a, forwardedRef) => {
|
|
30
|
-
var { className, children, sortable = false, sortDirection = "none", onSortClick, style, textAlign = "left", width, minWidth, maxWidth, onWidthChange, defaultWidth, colSpan } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "style", "textAlign", "width", "minWidth", "maxWidth", "onWidthChange", "defaultWidth", "colSpan"]);
|
|
30
|
+
var { className, children, sortable = false, sortDirection = "none", onSortClick, style, textAlign = "left", width, minWidth, maxWidth, onWidthChange, defaultWidth, colSpan, UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "style", "textAlign", "width", "minWidth", "maxWidth", "onWidthChange", "defaultWidth", "colSpan", "UNSAFE_isSelection"]);
|
|
31
31
|
const { withKeyboardNav } = useDataTableContext();
|
|
32
32
|
const [isOverflowing, setIsOverflowing] = React.useState(false);
|
|
33
33
|
const contentRef = React.useRef(null);
|
|
@@ -51,8 +51,11 @@ const DataTableTh = forwardRef((_a, forwardedRef) => {
|
|
|
51
51
|
}, onPointerLeave: () => setIsOverflowing(false), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign, colSpan: colSpan }),
|
|
52
52
|
sortable ? (React.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: sortable ? onSortClick : undefined },
|
|
53
53
|
React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children),
|
|
54
|
-
SortIcon && (React.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (React.createElement("div", { ref: contentRef, className:
|
|
55
|
-
|
|
54
|
+
SortIcon && (React.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (React.createElement("div", { ref: contentRef, className: cl({
|
|
55
|
+
"aksel-data-table__th-content": !UNSAFE_isSelection,
|
|
56
|
+
"aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
|
|
57
|
+
}) }, children)),
|
|
58
|
+
resizeResult.enabled && !UNSAFE_isSelection && (React.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { className: "aksel-data-table__th-resize-handle", "data-active": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true }), resizeResult.isResizingWithKeyboard && (React.createElement(React.Fragment, null,
|
|
56
59
|
React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start" },
|
|
57
60
|
React.createElement(CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
|
|
58
61
|
React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,wBAAwB,EACxB,YAAY,EACZ,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAoB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,wBAAwB,EACxB,YAAY,EACZ,UAAU,GACX,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAoB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAiDhF,MAAM,SAAS,GAAoD;IACjE,GAAG,EAAE,UAAU;IACf,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,gBAAgB;CACvB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAgBC,EACD,YAAY,EACZ,EAAE;QAlBF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,MAAM,EACtB,WAAW,EACX,KAAK,EACL,SAAS,GAAG,MAAM,EAClB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,OAAO,EACP,kBAAkB,OAEnB,EADI,IAAI,cAfT,8LAgBC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAClD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,IAAI,CACL,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAG,oBAAoB,CAAC;QACxC,GAAG,EAAE,UAAU;QACf,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,QAAQ;QACR,aAAa;QACb,KAAK;QACL,OAAO;KACR,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5D,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,mBACjC,QAAQ,EACvB,KAAK,EAAE,YAAY,CAAC,KAAK,eACd,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5D,cAAc,EAAE,GAAG,EAAE;YACnB,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;YAC9B,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YAC/D,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QAChD,CAAC,EACD,cAAc,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAC7C,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,SAAS,EACrB,OAAO,EAAE,OAAO;QAEf,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,SAAS,EAAC,kCAAkC,EAC5C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;YAE3C,6BAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,8BAA8B,IAC3D,QAAQ,CACL;YACL,QAAQ,IAAI,CACX,oBAAC,QAAQ,gDAEc,aAAa,EAClC,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAC,SAAS,GAClB,CACH,CACM,CACV,CAAC,CAAC,CAAC,CACF,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CAAC;gBACZ,8BAA8B,EAAE,CAAC,kBAAkB;gBACnD,sCAAsC,EAAE,kBAAkB;aAC3D,CAAC,IAED,QAAQ,CACL,CACP;QAEA,YAAY,CAAC,OAAO,IAAI,CAAC,kBAAkB,IAAI,CAC9C,gDACM,YAAY,CAAC,kBAAkB,IACnC,SAAS,EAAC,oCAAoC,iBACjC,YAAY,CAAC,sBAAsB,sCAG/C,YAAY,CAAC,sBAAsB,IAAI,CACtC;YACE,8BAAM,SAAS,EAAC,kGAAkG;gBAChH,oBAAC,uBAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACpD;YACP,8BAAM,SAAS,EAAC,gGAAgG;gBAC9G,oBAAC,wBAAwB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACrD,CACN,CACJ,CACM,CACV,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,WAAW,CAClB,aAAwC;IAExC,IAAI,aAAa,KAAK,KAAK;QAAE,OAAO,WAAW,CAAC;IAChD,IAAI,aAAa,KAAK,MAAM;QAAE,OAAO,YAAY,CAAC;IAClD,IAAI,aAAa,KAAK,MAAM;QAAE,OAAO,MAAM,CAAC;IAC5C,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { forwardRef, useState } from "react";
|
|
2
2
|
import { Search } from "../../form/search/index.js";
|
|
3
3
|
import { VStack } from "../../primitives/stack/index.js";
|
|
4
|
-
import {
|
|
4
|
+
import { BodyShort, Detail } from "../../typography/index.js";
|
|
5
5
|
import Listbox from "../../utils/components/Listbox/root/ListboxRoot.js";
|
|
6
6
|
import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer.js";
|
|
7
7
|
import { Floating } from "../../utils/components/floating/Floating.js";
|
|
@@ -31,17 +31,50 @@ const AutoSuggest = forwardRef(({ options, onSelect, value, onChange, open, setO
|
|
|
31
31
|
React.createElement(Listbox.InputSlot, null,
|
|
32
32
|
React.createElement(Search, { label: "Tabells\u00F8k", variant: "simple", className: "aksel-property-filter__input", placeholder: "Type to filter...", ref: mergedRef, value: value, onChange: handleChange, onClick: () => {
|
|
33
33
|
setOpen(true);
|
|
34
|
-
}, onFocus: () => setOpen(true) }))),
|
|
35
|
-
open && (React.createElement(AutoSuggestPopup, { options: options, onSelect: handleSelectOption, focusedValue: virtuallyFocusedOptionId, setFocusedValue: setVirtuallyFocusedOptionId, onClose: handleClose, safeZoneAnchor: inputRef })))));
|
|
34
|
+
}, onFocus: () => setOpen(true), size: "small", autoComplete: "off" }))),
|
|
35
|
+
open && (React.createElement(AutoSuggestPopup, { options: options, onSelect: handleSelectOption, focusedValue: virtuallyFocusedOptionId, setFocusedValue: setVirtuallyFocusedOptionId, onClose: handleClose, safeZoneAnchor: inputRef, autoSuggestValue: value })))));
|
|
36
36
|
});
|
|
37
|
-
const AutoSuggestPopup = forwardRef(({ options, onSelect, focusedValue, setFocusedValue, onClose, safeZoneAnchor, }, ref) => {
|
|
37
|
+
const AutoSuggestPopup = forwardRef(({ options, onSelect, focusedValue, setFocusedValue, onClose, safeZoneAnchor, autoSuggestValue, }, ref) => {
|
|
38
38
|
return (React.createElement(DismissableLayer, { asChild: true, onDismiss: onClose, safeZone: { anchor: safeZoneAnchor } },
|
|
39
39
|
React.createElement(Floating.Content, { ref: ref, align: "start", side: "bottom", fallbackPlacements: [], sideOffset: 8, className: "aksel-property-filter__popup" },
|
|
40
40
|
React.createElement("div", { className: "aksel-property-filter__popup-inner" },
|
|
41
41
|
React.createElement(Listbox.Options, { setVirtuallyFocusedOptionId: setFocusedValue }, options.map((group) => (React.createElement(Listbox.Group, { key: group.label, label: group.label }, group.options.map((item) => (React.createElement(Listbox.Option, { key: item.value, id: item.value, onClick: () => onSelect(item), hasVirtualFocus: focusedValue === item.value },
|
|
42
42
|
React.createElement(VStack, { gap: "space-0" },
|
|
43
|
-
React.createElement(
|
|
43
|
+
React.createElement(BodyShort, { as: "div", size: "small" },
|
|
44
|
+
React.createElement(HighlightText, { text: item.label, highlightText: autoSuggestValue })),
|
|
44
45
|
item.description && (React.createElement(Detail, { as: "div" }, item.description))))))))))))));
|
|
45
46
|
});
|
|
47
|
+
function HighlightText({ text, highlightText, }) {
|
|
48
|
+
if (!text || !highlightText) {
|
|
49
|
+
return React.createElement("span", null, text);
|
|
50
|
+
}
|
|
51
|
+
if (text === highlightText) {
|
|
52
|
+
return React.createElement(Highlight, { text: text });
|
|
53
|
+
}
|
|
54
|
+
const { noMatches, matches } = highlightSplit(text, highlightText);
|
|
55
|
+
const highlighted = [];
|
|
56
|
+
noMatches.forEach((noMatch, idx) => {
|
|
57
|
+
highlighted.push(React.createElement("span", { key: `noMatch-${idx}` }, noMatch));
|
|
58
|
+
if (matches && idx < matches.length) {
|
|
59
|
+
highlighted.push(React.createElement(Highlight, { key: `match-${idx}`, text: matches[idx] }));
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
return React.createElement("span", null, highlighted);
|
|
63
|
+
}
|
|
64
|
+
function Highlight({ text }) {
|
|
65
|
+
return React.createElement("mark", { className: "aksel-listbox__highlight" }, text);
|
|
66
|
+
}
|
|
67
|
+
function highlightSplit(text, highlightText) {
|
|
68
|
+
/* Skip loooong texts */
|
|
69
|
+
if (highlightText.length > 1000) {
|
|
70
|
+
return { noMatches: [text], matches: null };
|
|
71
|
+
}
|
|
72
|
+
/* Case insensitive filtering */
|
|
73
|
+
const filteringPattern = highlightText.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
|
|
74
|
+
const regexp = new RegExp(filteringPattern, "gi");
|
|
75
|
+
const noMatches = text.split(regexp);
|
|
76
|
+
const matches = text.match(regexp);
|
|
77
|
+
return { noMatches, matches };
|
|
78
|
+
}
|
|
46
79
|
export { AutoSuggest };
|
|
47
80
|
//# sourceMappingURL=AutoSuggest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ExternalToken, OperationT } from "./TokenFilter.types.js";
|
|
3
|
+
type TokenFilterChipsProps = {
|
|
4
|
+
tokens: ExternalToken[];
|
|
5
|
+
removeToken: (index: number) => void;
|
|
6
|
+
operation: OperationT;
|
|
7
|
+
updateOperation: (operation: OperationT) => void;
|
|
8
|
+
};
|
|
9
|
+
declare function TokenFilterChips(props: TokenFilterChipsProps): React.JSX.Element | null;
|
|
10
|
+
export { TokenFilterChips };
|