@navikt/ds-react 8.10.1 → 8.10.3
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/table/column-header/DataTableColumnHeader.d.ts +1 -1
- package/cjs/data/table/column-header/DataTableColumnHeader.js +16 -11
- package/cjs/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/cjs/data/table/column-header/useTableColumnResize.d.ts +28 -4
- package/cjs/data/table/column-header/useTableColumnResize.js +144 -53
- package/cjs/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/cjs/data/table/helpers/collectTableRowEntries.d.ts +24 -0
- package/cjs/data/table/helpers/collectTableRowEntries.js +35 -0
- package/cjs/data/table/helpers/collectTableRowEntries.js.map +1 -0
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +46 -0
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js +112 -0
- package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js.map +1 -0
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -2
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js +43 -19
- package/cjs/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/cjs/data/table/helpers/selection/selection.types.d.ts +1 -0
- package/cjs/data/table/helpers/table-keyboard.d.ts +1 -2
- package/cjs/data/table/helpers/table-keyboard.js +1 -5
- package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
- package/cjs/data/table/hooks/useTableExpansion.d.ts +7 -6
- package/cjs/data/table/hooks/useTableExpansion.js +42 -15
- package/cjs/data/table/hooks/useTableExpansion.js.map +1 -1
- package/cjs/data/table/hooks/useTableItems.d.ts +33 -0
- package/cjs/data/table/hooks/useTableItems.js +74 -0
- package/cjs/data/table/hooks/useTableItems.js.map +1 -0
- package/cjs/data/table/hooks/useTableKeyboardNav.js +3 -3
- package/cjs/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/cjs/data/table/hooks/useTableSelection.d.ts +3 -2
- package/cjs/data/table/hooks/useTableSelection.js +5 -4
- package/cjs/data/table/hooks/useTableSelection.js.map +1 -1
- package/cjs/data/table/root/DataTable.types.d.ts +5 -4
- package/cjs/data/table/root/DataTableAuto.d.ts +27 -1
- package/cjs/data/table/root/DataTableAuto.js +92 -50
- package/cjs/data/table/root/DataTableAuto.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.context.d.ts +5 -3
- package/cjs/data/table/root/DataTableRoot.context.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.js +6 -4
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/tr/DataTableTr.js +30 -32
- package/cjs/data/table/tr/DataTableTr.js.map +1 -1
- package/cjs/form/checkbox/Checkbox.js +1 -0
- package/cjs/form/checkbox/Checkbox.js.map +1 -1
- package/cjs/form/radio/Radio.js +7 -1
- package/cjs/form/radio/Radio.js.map +1 -1
- package/cjs/modal/types.d.ts +8 -4
- package/esm/data/table/column-header/DataTableColumnHeader.d.ts +1 -1
- package/esm/data/table/column-header/DataTableColumnHeader.js +17 -12
- package/esm/data/table/column-header/DataTableColumnHeader.js.map +1 -1
- package/esm/data/table/column-header/useTableColumnResize.d.ts +28 -4
- package/esm/data/table/column-header/useTableColumnResize.js +145 -54
- package/esm/data/table/column-header/useTableColumnResize.js.map +1 -1
- package/esm/data/table/helpers/collectTableRowEntries.d.ts +24 -0
- package/esm/data/table/helpers/collectTableRowEntries.js +33 -0
- package/esm/data/table/helpers/collectTableRowEntries.js.map +1 -0
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +46 -0
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js +109 -0
- package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js.map +1 -0
- package/esm/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -2
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js +43 -19
- package/esm/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
- package/esm/data/table/helpers/selection/selection.types.d.ts +1 -0
- package/esm/data/table/helpers/table-keyboard.d.ts +1 -2
- package/esm/data/table/helpers/table-keyboard.js +1 -5
- package/esm/data/table/helpers/table-keyboard.js.map +1 -1
- package/esm/data/table/hooks/useTableExpansion.d.ts +7 -6
- package/esm/data/table/hooks/useTableExpansion.js +42 -16
- package/esm/data/table/hooks/useTableExpansion.js.map +1 -1
- package/esm/data/table/hooks/useTableItems.d.ts +33 -0
- package/esm/data/table/hooks/useTableItems.js +69 -0
- package/esm/data/table/hooks/useTableItems.js.map +1 -0
- package/esm/data/table/hooks/useTableKeyboardNav.js +3 -3
- package/esm/data/table/hooks/useTableKeyboardNav.js.map +1 -1
- package/esm/data/table/hooks/useTableSelection.d.ts +3 -2
- package/esm/data/table/hooks/useTableSelection.js +5 -4
- package/esm/data/table/hooks/useTableSelection.js.map +1 -1
- package/esm/data/table/root/DataTable.types.d.ts +5 -4
- package/esm/data/table/root/DataTableAuto.d.ts +27 -1
- package/esm/data/table/root/DataTableAuto.js +94 -52
- package/esm/data/table/root/DataTableAuto.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.context.d.ts +5 -3
- package/esm/data/table/root/DataTableRoot.context.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.js +7 -5
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/tr/DataTableTr.js +32 -34
- package/esm/data/table/tr/DataTableTr.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +1 -0
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/radio/Radio.js +7 -1
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/modal/types.d.ts +8 -4
- package/package.json +7 -7
- package/src/data/table/column-header/DataTableColumnHeader.tsx +26 -14
- package/src/data/table/column-header/useTableColumnResize.ts +209 -80
- package/src/data/table/helpers/collectTableRowEntries.ts +90 -0
- package/src/data/table/helpers/selection/SelectionSubtreeHelper.test.ts +66 -0
- package/src/data/table/helpers/selection/SelectionSubtreeHelper.ts +162 -0
- package/src/data/table/helpers/selection/getMultipleSelectProps.ts +57 -20
- package/src/data/table/helpers/selection/selection.types.ts +1 -0
- package/src/data/table/helpers/table-keyboard.ts +1 -6
- package/src/data/table/hooks/__tests__/useTableItems.test.ts +145 -0
- package/src/data/table/hooks/__tests__/useTableSelection.test.ts +132 -21
- package/src/data/table/hooks/useTableExpansion.tsx +68 -22
- package/src/data/table/hooks/useTableItems.ts +146 -0
- package/src/data/table/hooks/useTableKeyboardNav.ts +3 -3
- package/src/data/table/hooks/useTableSelection.ts +10 -6
- package/src/data/table/root/DataTable.types.ts +5 -4
- package/src/data/table/root/DataTableAuto.test.tsx +244 -0
- package/src/data/table/root/DataTableAuto.tsx +260 -141
- package/src/data/table/root/DataTableRoot.context.ts +4 -2
- package/src/data/table/root/DataTableRoot.tsx +22 -16
- package/src/data/table/tr/DataTableTr.tsx +48 -47
- package/src/form/checkbox/Checkbox.tsx +1 -0
- package/src/form/radio/Radio.tsx +7 -1
- package/src/modal/types.ts +8 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":"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"}
|
|
@@ -23,6 +23,7 @@ export const Checkbox = forwardRef((props, forwardedRef) => {
|
|
|
23
23
|
"indeterminate",
|
|
24
24
|
"errorId",
|
|
25
25
|
"readOnly",
|
|
26
|
+
"className",
|
|
26
27
|
]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { "aria-describedby": cl(inputProps["aria-describedby"], {
|
|
27
28
|
[descriptionId]: description,
|
|
28
29
|
}) || undefined, indeterminate: indeterminate !== null && indeterminate !== void 0 ? indeterminate : false, standalone: false })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAoB,EAAE,YAAY,EAAE,EAAE;IACrC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAClE,KAAK,CAAC;IAER,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,mBAAmB,IAAI,EAAE,EAAE;YACpE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;YAC/C,0BAA0B,EAAE,QAAQ;SACrC,CAAC,gBACU,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,oBAAC,aAAa,kBACZ,GAAG,EAAE,YAAY,IACb,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;YACT,UAAU;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAoB,EAAE,YAAY,EAAE,EAAE;IACrC,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,GAClE,KAAK,CAAC;IAER,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,EAAE,mBAAmB,IAAI,EAAE,EAAE;YACpE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;YAC/C,0BAA0B,EAAE,QAAQ;SACrC,CAAC,gBACU,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,oBAAC,aAAa,kBACZ,GAAG,EAAE,YAAY,IACb,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;YACX,eAAe;YACf,SAAS;YACT,UAAU;YACV,WAAW;SACZ,CAAC,EACE,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,wBAExD,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;gBACjC,CAAC,aAAa,CAAC,EAAE,WAAW;aAC7B,CAAC,IAAI,SAAS,EAEjB,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK,EACrC,UAAU,EAAE,KAAK,IACjB;QACF,oBAAC,SAAS,IACR,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,uBAAuB,EACjC,cAAc,EAAE,SAAS;YAExB,CAAC,MAAM,IAAI,QAAQ,IAAI,oBAAC,qBAAqB,OAAG;YAChD,QAAQ,CACC;QACX,WAAW,IAAI,CACd,oBAAC,SAAS,IACR,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,8DAA8D,EACxE,cAAc,EAAE,SAAS,IAExB,WAAW,CACF,CACb,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/esm/form/radio/Radio.js
CHANGED
|
@@ -13,7 +13,13 @@ export const Radio = forwardRef((props, forwardedRef) => {
|
|
|
13
13
|
"aksel-radio--disabled": inputProps.disabled,
|
|
14
14
|
"aksel-radio--readonly": readOnly,
|
|
15
15
|
}), "data-color": hasError ? "danger" : props["data-color"] },
|
|
16
|
-
React.createElement(RadioInput, Object.assign({ ref: forwardedRef }, omit(props, [
|
|
16
|
+
React.createElement(RadioInput, Object.assign({ ref: forwardedRef }, omit(props, [
|
|
17
|
+
"children",
|
|
18
|
+
"size",
|
|
19
|
+
"description",
|
|
20
|
+
"readOnly",
|
|
21
|
+
"className",
|
|
22
|
+
]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { "aria-describedby": cl(inputProps["aria-describedby"], {
|
|
17
23
|
[descriptionId]: description,
|
|
18
24
|
}) || undefined, standalone: false })),
|
|
19
25
|
React.createElement(BodyShort, { as: "label", htmlFor: inputProps.id, className: "aksel-radio__label", size: size }, children),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,KAAiB,EAAE,YAAY,EAAE,EAAE;IAClC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YAC9D,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;YAC5C,uBAAuB,EAAE,QAAQ;SAClC,CAAC,gBACU,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,oBAAC,UAAU,kBACT,GAAG,EAAE,YAAY,IACb,IAAI,CAAC,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,KAAiB,EAAE,YAAY,EAAE,EAAE;IAClC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,KAAK,EAAE,CAAC;IAE9B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE;YAC9D,oBAAoB,EAAE,QAAQ;YAC9B,uBAAuB,EAAE,UAAU,CAAC,QAAQ;YAC5C,uBAAuB,EAAE,QAAQ;SAClC,CAAC,gBACU,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,oBAAC,UAAU,kBACT,GAAG,EAAE,YAAY,IACb,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,aAAa;YACb,UAAU;YACV,WAAW;SACZ,CAAC,EACE,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,wBAExD,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;gBACjC,CAAC,aAAa,CAAC,EAAE,WAAW;aAC7B,CAAC,IAAI,SAAS,EAEjB,UAAU,EAAE,KAAK,IACjB;QACF,oBAAC,SAAS,IACR,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAE,IAAI,IAET,QAAQ,CACC;QACX,WAAW,IAAI,CACd,oBAAC,SAAS,IACR,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2DAA2D,IAEpE,WAAW,CACF,CACb,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/esm/modal/types.d.ts
CHANGED
|
@@ -39,7 +39,8 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
|
|
|
39
39
|
/**
|
|
40
40
|
* Called when the user tries to close the modal by one of the built-in methods.
|
|
41
41
|
* Used if you want to ask the user for confirmation before closing.
|
|
42
|
-
*
|
|
42
|
+
*
|
|
43
|
+
* **NB:** Will not always be called when pressing Esc. See `onCancel` for more info.
|
|
43
44
|
* @returns Whether to close the modal or not
|
|
44
45
|
*/
|
|
45
46
|
onBeforeClose?: () => boolean;
|
|
@@ -52,7 +53,8 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
|
|
|
52
53
|
onCancel?: React.ReactEventHandler<HTMLDialogElement>;
|
|
53
54
|
/**
|
|
54
55
|
* Whether to close when clicking on the backdrop.
|
|
55
|
-
*
|
|
56
|
+
*
|
|
57
|
+
* **NB:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
|
|
56
58
|
* @default false
|
|
57
59
|
*/
|
|
58
60
|
closeOnBackdropClick?: boolean;
|
|
@@ -77,13 +79,15 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
|
|
|
77
79
|
/**
|
|
78
80
|
* ID of the element that labels the modal.
|
|
79
81
|
* No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
|
|
80
|
-
*
|
|
82
|
+
*
|
|
83
|
+
* **NB:** If not using `header`, you should set either `aria-labelledby` or `aria-label`.
|
|
81
84
|
*/
|
|
82
85
|
"aria-labelledby"?: string;
|
|
83
86
|
/**
|
|
84
87
|
* String value that labels the modal.
|
|
85
88
|
* No need to set this if the `header` prop is used.
|
|
86
|
-
*
|
|
89
|
+
*
|
|
90
|
+
* **NB:** If not using `header`, you should set either `aria-labelledby` or `aria-label`.
|
|
87
91
|
*/
|
|
88
92
|
"aria-label"?: string;
|
|
89
93
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "8.10.
|
|
3
|
+
"version": "8.10.3",
|
|
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",
|
|
@@ -706,8 +706,8 @@
|
|
|
706
706
|
"dependencies": {
|
|
707
707
|
"@floating-ui/react": "0.27.8",
|
|
708
708
|
"@floating-ui/react-dom": "^2.1.8",
|
|
709
|
-
"@navikt/aksel-icons": "^8.10.
|
|
710
|
-
"@navikt/ds-tokens": "^8.10.
|
|
709
|
+
"@navikt/aksel-icons": "^8.10.3",
|
|
710
|
+
"@navikt/ds-tokens": "^8.10.3",
|
|
711
711
|
"date-fns": "^4.0.0",
|
|
712
712
|
"react-day-picker": "9.14.0"
|
|
713
713
|
},
|
|
@@ -726,15 +726,15 @@
|
|
|
726
726
|
"fast-glob": "3.3.3",
|
|
727
727
|
"jscodeshift": "17.3.0",
|
|
728
728
|
"jsdom": "27.1.0",
|
|
729
|
-
"react": "19.2.
|
|
730
|
-
"react-dom": "19.2.
|
|
729
|
+
"react": "19.2.5",
|
|
730
|
+
"react-dom": "19.2.5",
|
|
731
731
|
"react-router": "^7.13.1",
|
|
732
732
|
"rimraf": "6.1.3",
|
|
733
|
-
"swr": "^2.
|
|
733
|
+
"swr": "^2.4.1",
|
|
734
734
|
"tsc-alias": "1.8.16",
|
|
735
735
|
"tsx": "^4.20.6",
|
|
736
736
|
"typescript": "6.0.2",
|
|
737
|
-
"vitest": "4.1.
|
|
737
|
+
"vitest": "4.1.4"
|
|
738
738
|
},
|
|
739
739
|
"peerDependencies": {
|
|
740
740
|
"@types/react": "^17.0.30 || ^18 || ^19",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { forwardRef,
|
|
1
|
+
import React, { forwardRef, useRef } from "react";
|
|
2
2
|
import {
|
|
3
3
|
ArrowsUpDownIcon,
|
|
4
4
|
CaretLeftCircleFillIcon,
|
|
@@ -62,12 +62,14 @@ const DataTableColumnHeader = forwardRef<
|
|
|
62
62
|
sortable = false,
|
|
63
63
|
sortDirection = "none",
|
|
64
64
|
onSortClick,
|
|
65
|
+
resizable = true,
|
|
65
66
|
style,
|
|
66
67
|
width,
|
|
68
|
+
defaultWidth,
|
|
69
|
+
autoWidth,
|
|
67
70
|
minWidth,
|
|
68
71
|
maxWidth,
|
|
69
72
|
onWidthChange,
|
|
70
|
-
defaultWidth,
|
|
71
73
|
colSpan,
|
|
72
74
|
rowSpan,
|
|
73
75
|
UNSAFE_isSelection,
|
|
@@ -75,17 +77,16 @@ const DataTableColumnHeader = forwardRef<
|
|
|
75
77
|
},
|
|
76
78
|
forwardedRef,
|
|
77
79
|
) => {
|
|
78
|
-
const [isOverflowing, setIsOverflowing] = React.useState(false);
|
|
79
80
|
const contentRef = React.useRef<HTMLDivElement>(null);
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
);
|
|
83
|
-
const mergedRef = useMergeRefs(forwardedRef, setThRefState);
|
|
81
|
+
const thRef = useRef<HTMLTableCellElement>(null);
|
|
82
|
+
const mergedRef = useMergeRefs(forwardedRef, thRef);
|
|
84
83
|
|
|
85
84
|
const resizeResult = useTableColumnResize({
|
|
86
|
-
|
|
85
|
+
resizable,
|
|
86
|
+
thRef,
|
|
87
87
|
width,
|
|
88
88
|
defaultWidth,
|
|
89
|
+
autoWidth,
|
|
89
90
|
minWidth,
|
|
90
91
|
maxWidth,
|
|
91
92
|
onWidthChange,
|
|
@@ -104,12 +105,6 @@ const DataTableColumnHeader = forwardRef<
|
|
|
104
105
|
data-sortable={sortable}
|
|
105
106
|
style={resizeResult.style}
|
|
106
107
|
aria-sort={sortable ? getAriaSort(sortDirection) : undefined}
|
|
107
|
-
onPointerEnter={() => {
|
|
108
|
-
const el = contentRef.current;
|
|
109
|
-
setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
|
|
110
|
-
console.info("is overflowing", isOverflowing);
|
|
111
|
-
}}
|
|
112
|
-
onPointerLeave={() => setIsOverflowing(false)}
|
|
113
108
|
UNSAFE_isSelection={UNSAFE_isSelection}
|
|
114
109
|
colSpan={colSpan}
|
|
115
110
|
rowSpan={rowSpan}
|
|
@@ -146,9 +141,26 @@ const DataTableColumnHeader = forwardRef<
|
|
|
146
141
|
<button
|
|
147
142
|
{...resizeResult.resizeHandlerProps}
|
|
148
143
|
className="aksel-data-table__th-resize-handle"
|
|
144
|
+
aria-label={
|
|
145
|
+
resizeResult.isResizingWithKeyboard
|
|
146
|
+
? "Bruk pil venstre/høyre"
|
|
147
|
+
: "Endre bredde"
|
|
148
|
+
} // TODO Translate
|
|
149
149
|
data-active={resizeResult.isResizingWithKeyboard}
|
|
150
150
|
data-disable-keyboard-nav={resizeResult.isResizingWithKeyboard}
|
|
151
151
|
data-block-keyboard-nav
|
|
152
|
+
role="slider"
|
|
153
|
+
aria-valuenow={
|
|
154
|
+
typeof resizeResult.style.width === "number"
|
|
155
|
+
? resizeResult.style.width
|
|
156
|
+
: 0
|
|
157
|
+
}
|
|
158
|
+
aria-valuetext={
|
|
159
|
+
typeof resizeResult.style.width === "number" &&
|
|
160
|
+
resizeResult.isResizingWithKeyboard
|
|
161
|
+
? resizeResult.style.width.toString()
|
|
162
|
+
: "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
|
|
163
|
+
} // Need either this or aria-valuemax to get SR (at least NVDA) to announce the value
|
|
152
164
|
>
|
|
153
165
|
{resizeResult.isResizingWithKeyboard && (
|
|
154
166
|
<>
|
|
@@ -1,11 +1,23 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
type DOMAttributes,
|
|
3
|
+
useCallback,
|
|
4
|
+
useEffect,
|
|
5
|
+
useRef,
|
|
6
|
+
useState,
|
|
7
|
+
} from "react";
|
|
2
8
|
import { useControllableState } from "../../../utils/hooks";
|
|
3
9
|
import { useDataTableContext } from "../root/DataTableRoot.context";
|
|
4
10
|
|
|
5
11
|
type ColumnWidth = number | string;
|
|
6
12
|
|
|
7
13
|
type ResizeProps = {
|
|
8
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Whether the column should be resizable by the user.
|
|
16
|
+
*
|
|
17
|
+
* **NB:** This is always disabled when `layout="auto"` on the root component.
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
resizable?: boolean;
|
|
9
21
|
/**
|
|
10
22
|
* Controlled width of the column.
|
|
11
23
|
*
|
|
@@ -13,9 +25,20 @@ type ResizeProps = {
|
|
|
13
25
|
*/
|
|
14
26
|
width?: ColumnWidth;
|
|
15
27
|
/**
|
|
16
|
-
* Initial width of the column. Only used when `width` is not set.
|
|
28
|
+
* Initial width of the column. Only used when `width` is not set and `resizable` is true.
|
|
17
29
|
*/
|
|
18
30
|
defaultWidth?: ColumnWidth;
|
|
31
|
+
/**
|
|
32
|
+
* Whether the column should automatically resize to fit its content. **Runs only once.**
|
|
33
|
+
*
|
|
34
|
+
* `onWidthChange` will be called with the new size. `minWidth` and `maxWidth` will be respected.
|
|
35
|
+
*
|
|
36
|
+
* If you don't need manual resizing support and want most of the columns to resize automatically,
|
|
37
|
+
* consider using `layout="auto"` on the root instead for better performance.
|
|
38
|
+
*
|
|
39
|
+
* **NB:** This can cause a layout shift. Set a good initial width with `width` or `defaultWidth` to mitigate this.
|
|
40
|
+
*/
|
|
41
|
+
autoWidth?: boolean;
|
|
19
42
|
/**
|
|
20
43
|
* Minimum width of the column.
|
|
21
44
|
*
|
|
@@ -42,17 +65,25 @@ type ResizeProps = {
|
|
|
42
65
|
colSpan?: number;
|
|
43
66
|
};
|
|
44
67
|
|
|
45
|
-
type
|
|
68
|
+
type WithUndefined<T> = {
|
|
69
|
+
[K in keyof T]: T[K] | undefined;
|
|
70
|
+
};
|
|
71
|
+
type Unomittable<T> = WithUndefined<Required<T>>;
|
|
72
|
+
|
|
73
|
+
type TableColumnResizeArgs = Unomittable<ResizeProps> & {
|
|
74
|
+
thRef: React.RefObject<HTMLTableCellElement | null>;
|
|
75
|
+
};
|
|
46
76
|
|
|
47
77
|
type TableColumnResizeResult =
|
|
48
78
|
| {
|
|
49
|
-
style
|
|
79
|
+
style: React.CSSProperties;
|
|
50
80
|
resizeHandlerProps: {
|
|
51
81
|
onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
|
|
52
82
|
onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
|
|
53
83
|
onKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"];
|
|
54
84
|
onBlur: DOMAttributes<HTMLButtonElement>["onBlur"];
|
|
55
85
|
onDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"];
|
|
86
|
+
onClick: DOMAttributes<HTMLButtonElement>["onClick"];
|
|
56
87
|
};
|
|
57
88
|
isResizingWithKeyboard: boolean;
|
|
58
89
|
enabled: true;
|
|
@@ -72,9 +103,11 @@ function useTableColumnResize(
|
|
|
72
103
|
args: TableColumnResizeArgs,
|
|
73
104
|
): TableColumnResizeResult {
|
|
74
105
|
const {
|
|
75
|
-
|
|
106
|
+
resizable,
|
|
107
|
+
thRef,
|
|
76
108
|
width: userWidth,
|
|
77
109
|
defaultWidth,
|
|
110
|
+
autoWidth,
|
|
78
111
|
onWidthChange,
|
|
79
112
|
maxWidth = Infinity,
|
|
80
113
|
minWidth = 40,
|
|
@@ -84,7 +117,10 @@ function useTableColumnResize(
|
|
|
84
117
|
|
|
85
118
|
const tableContext = useDataTableContext();
|
|
86
119
|
|
|
87
|
-
const [
|
|
120
|
+
const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
|
|
121
|
+
const ignoreNextOnClick = useRef(false);
|
|
122
|
+
|
|
123
|
+
const [width, setWidth] = useControllableState({
|
|
88
124
|
value: userWidth,
|
|
89
125
|
defaultValue: defaultWidth ?? (colSpan ?? 1) * 140,
|
|
90
126
|
/**
|
|
@@ -95,69 +131,100 @@ function useTableColumnResize(
|
|
|
95
131
|
onChange: onWidthChange,
|
|
96
132
|
});
|
|
97
133
|
|
|
98
|
-
const
|
|
99
|
-
const [, setIsResizingWithMouse] = useState(false);
|
|
100
|
-
|
|
101
|
-
const setWidth = useCallback(
|
|
134
|
+
const setClampedWidth = useCallback(
|
|
102
135
|
(newWidth: number) => {
|
|
103
|
-
const currentWidth = ref?.offsetWidth;
|
|
104
|
-
if (!currentWidth) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
136
|
const min = parseWidth(minWidth) ?? 0;
|
|
109
137
|
const max = parseWidth(maxWidth) ?? Infinity;
|
|
110
138
|
const clamped = Math.min(Math.max(newWidth, min), max);
|
|
139
|
+
setWidth(clamped);
|
|
140
|
+
},
|
|
141
|
+
[minWidth, maxWidth, setWidth],
|
|
142
|
+
);
|
|
111
143
|
|
|
112
|
-
|
|
113
|
-
|
|
144
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoWidth changes
|
|
145
|
+
useEffect(
|
|
146
|
+
function autoResizeColumn() {
|
|
147
|
+
if (!autoWidth) {
|
|
114
148
|
return;
|
|
115
149
|
}
|
|
116
150
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
151
|
+
const newColumnWidth = getAutoColumnWidth(thRef);
|
|
152
|
+
if (newColumnWidth) {
|
|
153
|
+
setClampedWidth(newColumnWidth);
|
|
120
154
|
}
|
|
121
|
-
|
|
122
|
-
_setWidth(clamped);
|
|
123
155
|
},
|
|
124
|
-
[
|
|
156
|
+
[autoWidth], // eslint-disable-line react-hooks/exhaustive-deps
|
|
125
157
|
);
|
|
126
158
|
|
|
159
|
+
const handleOnClick: DOMAttributes<HTMLButtonElement>["onClick"] =
|
|
160
|
+
useCallback(() => {
|
|
161
|
+
// We need to use the onClick event in order to support screen readers properly,
|
|
162
|
+
// since some of them only send a mouse click when pressing enter/space.
|
|
163
|
+
// We detect a "screen reader click" by checking if we had a mouseUp event right before.
|
|
164
|
+
|
|
165
|
+
if (ignoreNextOnClick.current) {
|
|
166
|
+
ignoreNextOnClick.current = false;
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
setIsResizingWithKeyboard((prev) => !prev);
|
|
171
|
+
}, []);
|
|
172
|
+
|
|
127
173
|
const handleKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"] =
|
|
128
174
|
useCallback(
|
|
129
175
|
(event) => {
|
|
130
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
131
|
-
setIsResizingWithKeyboard((prev) => !prev);
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
176
|
if (!isResizingWithKeyboard) {
|
|
136
177
|
return;
|
|
137
178
|
}
|
|
179
|
+
const currentWidth = thRef.current?.offsetWidth ?? 0;
|
|
138
180
|
|
|
139
181
|
if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
|
|
140
182
|
event.preventDefault();
|
|
141
|
-
|
|
142
|
-
const th = (event.target as HTMLElement).closest(
|
|
143
|
-
"th",
|
|
144
|
-
) as HTMLTableCellElement;
|
|
145
|
-
const startWidth = th.offsetWidth;
|
|
146
|
-
|
|
147
183
|
const delta = event.key === "ArrowRight" ? 20 : -20;
|
|
148
|
-
|
|
184
|
+
setClampedWidth(currentWidth + delta);
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
if (event.key === "Home") {
|
|
188
|
+
event.preventDefault();
|
|
189
|
+
setClampedWidth(0); // will fall back to minWidth
|
|
190
|
+
return;
|
|
191
|
+
}
|
|
192
|
+
if (event.key === "End") {
|
|
193
|
+
event.preventDefault();
|
|
194
|
+
const newWidth = getAutoColumnWidth(thRef);
|
|
195
|
+
if (newWidth && newWidth > currentWidth) {
|
|
196
|
+
setClampedWidth(newWidth);
|
|
197
|
+
}
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
if (event.key === "Escape") {
|
|
201
|
+
setIsResizingWithKeyboard(false);
|
|
149
202
|
}
|
|
150
203
|
},
|
|
151
|
-
[isResizingWithKeyboard,
|
|
204
|
+
[isResizingWithKeyboard, setClampedWidth, thRef],
|
|
152
205
|
);
|
|
153
206
|
|
|
154
207
|
const startResize = useCallback(
|
|
155
|
-
(
|
|
156
|
-
|
|
157
|
-
const startWidth = th.offsetWidth;
|
|
208
|
+
(startX: number) => {
|
|
209
|
+
const startWidth = thRef.current?.offsetWidth ?? 0;
|
|
158
210
|
|
|
159
211
|
function onPointerMove(clientX: number) {
|
|
160
|
-
|
|
212
|
+
const currentWidth = thRef.current?.offsetWidth ?? 0;
|
|
213
|
+
const newWidth = startWidth + (clientX - startX);
|
|
214
|
+
|
|
215
|
+
const min = parseWidth(minWidth) ?? 0;
|
|
216
|
+
const max = parseWidth(maxWidth) ?? Infinity;
|
|
217
|
+
|
|
218
|
+
if (newWidth > max) {
|
|
219
|
+
setWidth(newWidth < currentWidth ? newWidth : currentWidth);
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
if (newWidth < min) {
|
|
223
|
+
setWidth(newWidth > currentWidth ? newWidth : currentWidth);
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
setClampedWidth(newWidth);
|
|
161
228
|
}
|
|
162
229
|
|
|
163
230
|
function onMouseMove(e: MouseEvent) {
|
|
@@ -172,28 +239,26 @@ function useTableColumnResize(
|
|
|
172
239
|
function cleanup() {
|
|
173
240
|
document.removeEventListener("mousemove", onMouseMove);
|
|
174
241
|
document.removeEventListener("touchmove", onTouchMove);
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
242
|
+
setIsResizingWithKeyboard(false);
|
|
243
|
+
|
|
244
|
+
// We only want onClick to trigger when using the keyboard
|
|
245
|
+
// (we use onClick b.c. keyDown doesn't fire when using a screen reader)
|
|
246
|
+
ignoreNextOnClick.current = true;
|
|
179
247
|
}
|
|
180
248
|
|
|
181
249
|
document.addEventListener("mousemove", onMouseMove);
|
|
182
250
|
document.addEventListener("touchmove", onTouchMove, { passive: false });
|
|
183
|
-
document.addEventListener("mouseup", cleanup);
|
|
184
|
-
document.addEventListener("touchend", cleanup);
|
|
185
|
-
document.addEventListener("touchcancel", cleanup);
|
|
251
|
+
document.addEventListener("mouseup", cleanup, { once: true });
|
|
252
|
+
document.addEventListener("touchend", cleanup, { once: true });
|
|
253
|
+
document.addEventListener("touchcancel", cleanup, { once: true });
|
|
186
254
|
},
|
|
187
|
-
[setWidth],
|
|
255
|
+
[maxWidth, minWidth, setWidth, setClampedWidth, thRef],
|
|
188
256
|
);
|
|
189
257
|
|
|
190
258
|
const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
|
|
191
259
|
useCallback(
|
|
192
260
|
(event) => {
|
|
193
|
-
|
|
194
|
-
"th",
|
|
195
|
-
) as HTMLTableCellElement;
|
|
196
|
-
startResize(th, event.clientX);
|
|
261
|
+
startResize(event.clientX);
|
|
197
262
|
},
|
|
198
263
|
[startResize],
|
|
199
264
|
);
|
|
@@ -201,38 +266,19 @@ function useTableColumnResize(
|
|
|
201
266
|
const handleTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"] =
|
|
202
267
|
useCallback(
|
|
203
268
|
(event) => {
|
|
204
|
-
|
|
205
|
-
"th",
|
|
206
|
-
) as HTMLTableCellElement;
|
|
207
|
-
startResize(th, event.touches[0].clientX);
|
|
269
|
+
startResize(event.touches[0].clientX);
|
|
208
270
|
},
|
|
209
271
|
[startResize],
|
|
210
272
|
);
|
|
211
273
|
|
|
212
|
-
|
|
213
|
-
* TODO: Do we even want this?
|
|
214
|
-
* - + 32px padding is hardcoded now, fix this
|
|
215
|
-
* - Need to find widest element in column, not the header itself.
|
|
216
|
-
* - Should doubleclick just reset to defaultWidth? Or add a autoWidth prop.
|
|
217
|
-
*/
|
|
274
|
+
// Auto-size column to fit content on double click. NB: Doesn't work with block content!
|
|
218
275
|
const handleDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"] =
|
|
219
|
-
useCallback(
|
|
220
|
-
(
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
const contentEl = th.getElementsByClassName(
|
|
226
|
-
"aksel-data-table__th-content",
|
|
227
|
-
)[0];
|
|
228
|
-
const range = document.createRange();
|
|
229
|
-
range.selectNodeContents(contentEl);
|
|
230
|
-
const contentWidth = range.getBoundingClientRect().width;
|
|
231
|
-
|
|
232
|
-
setWidth(contentWidth + 32);
|
|
233
|
-
},
|
|
234
|
-
[setWidth],
|
|
235
|
-
);
|
|
276
|
+
useCallback(() => {
|
|
277
|
+
const newColumnWidth = getAutoColumnWidth(thRef);
|
|
278
|
+
if (newColumnWidth) {
|
|
279
|
+
setClampedWidth(newColumnWidth);
|
|
280
|
+
}
|
|
281
|
+
}, [setClampedWidth, thRef]);
|
|
236
282
|
|
|
237
283
|
if (tableContext.layout !== "fixed") {
|
|
238
284
|
return {
|
|
@@ -241,6 +287,16 @@ function useTableColumnResize(
|
|
|
241
287
|
};
|
|
242
288
|
}
|
|
243
289
|
|
|
290
|
+
if (!resizable) {
|
|
291
|
+
return {
|
|
292
|
+
style: {
|
|
293
|
+
...style,
|
|
294
|
+
width,
|
|
295
|
+
},
|
|
296
|
+
enabled: false,
|
|
297
|
+
};
|
|
298
|
+
}
|
|
299
|
+
|
|
244
300
|
return {
|
|
245
301
|
style: {
|
|
246
302
|
...style,
|
|
@@ -252,6 +308,7 @@ function useTableColumnResize(
|
|
|
252
308
|
onKeyDown: handleKeyDown,
|
|
253
309
|
onBlur: () => setIsResizingWithKeyboard(false),
|
|
254
310
|
onDoubleClick: handleDoubleClick,
|
|
311
|
+
onClick: handleOnClick,
|
|
255
312
|
},
|
|
256
313
|
isResizingWithKeyboard,
|
|
257
314
|
enabled: true,
|
|
@@ -272,5 +329,77 @@ function parseWidth(width: ColumnWidth | undefined): number | undefined {
|
|
|
272
329
|
return undefined;
|
|
273
330
|
}
|
|
274
331
|
|
|
332
|
+
function getAutoColumnWidth(
|
|
333
|
+
thRef: React.RefObject<HTMLTableCellElement | null>,
|
|
334
|
+
) {
|
|
335
|
+
const th = thRef.current!;
|
|
336
|
+
const thContent = th.querySelector(".aksel-data-table__th-content");
|
|
337
|
+
const thPaddingEl = th.querySelector("div");
|
|
338
|
+
const rows = th.closest("table")?.querySelectorAll("tbody tr, tfoot tr");
|
|
339
|
+
if (!thContent || !thPaddingEl || !rows) {
|
|
340
|
+
return;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
// Find needed width for header cell
|
|
344
|
+
const contentWidth = thContent.scrollWidth;
|
|
345
|
+
const paddingElStyle = window.getComputedStyle(thPaddingEl);
|
|
346
|
+
const thInlinePadding =
|
|
347
|
+
parseInt(paddingElStyle.paddingLeft, 10) +
|
|
348
|
+
parseInt(paddingElStyle.paddingRight, 10);
|
|
349
|
+
let newColumnWidth = contentWidth + thInlinePadding;
|
|
350
|
+
|
|
351
|
+
// Find column position
|
|
352
|
+
let columnPosition = 1;
|
|
353
|
+
let prevSibling = th.previousElementSibling;
|
|
354
|
+
while (prevSibling) {
|
|
355
|
+
columnPosition += (prevSibling as HTMLTableCellElement).colSpan;
|
|
356
|
+
prevSibling = prevSibling.previousElementSibling;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
// Find needed width for each cell in column in tbody and tfoot
|
|
360
|
+
const range = document.createRange();
|
|
361
|
+
let skipRows = 0;
|
|
362
|
+
for (const row of rows) {
|
|
363
|
+
// Skip rows where the cell in this column is covered by a rowspan from a previous row
|
|
364
|
+
if (skipRows > 0) {
|
|
365
|
+
skipRows--;
|
|
366
|
+
continue;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
// Find cell
|
|
370
|
+
let cell = row.firstChild as HTMLTableCellElement;
|
|
371
|
+
let currentPosition = cell.colSpan;
|
|
372
|
+
while (columnPosition > currentPosition && cell.nextElementSibling) {
|
|
373
|
+
cell = cell.nextElementSibling as HTMLTableCellElement;
|
|
374
|
+
currentPosition += cell.colSpan;
|
|
375
|
+
}
|
|
376
|
+
skipRows = cell.rowSpan - 1;
|
|
377
|
+
|
|
378
|
+
// Find needed width
|
|
379
|
+
const cellContent = cell.firstChild as HTMLElement;
|
|
380
|
+
range.selectNodeContents(cellContent);
|
|
381
|
+
const cellContentWidth = range.getBoundingClientRect().width;
|
|
382
|
+
const contentElStyle = window.getComputedStyle(cellContent);
|
|
383
|
+
const inlinePadding =
|
|
384
|
+
parseInt(contentElStyle.paddingLeft, 10) +
|
|
385
|
+
parseInt(contentElStyle.paddingRight, 10);
|
|
386
|
+
const widthNeededForThisCell =
|
|
387
|
+
(cellContentWidth + inlinePadding) / cell.colSpan;
|
|
388
|
+
if (widthNeededForThisCell > newColumnWidth) {
|
|
389
|
+
newColumnWidth = widthNeededForThisCell;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
// Make sure new width is not wider than the table container since that would be impractical
|
|
394
|
+
const container = th.closest("div");
|
|
395
|
+
const maxColWidth =
|
|
396
|
+
(container?.offsetWidth || document.documentElement.clientWidth * 0.9) *
|
|
397
|
+
0.95;
|
|
398
|
+
|
|
399
|
+
return newColumnWidth > maxColWidth
|
|
400
|
+
? Math.floor(maxColWidth)
|
|
401
|
+
: Math.ceil(newColumnWidth);
|
|
402
|
+
}
|
|
403
|
+
|
|
275
404
|
export { useTableColumnResize };
|
|
276
405
|
export type { ResizeProps };
|