@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.
Files changed (114) hide show
  1. package/cjs/data/table/column-header/DataTableColumnHeader.d.ts +1 -1
  2. package/cjs/data/table/column-header/DataTableColumnHeader.js +16 -11
  3. package/cjs/data/table/column-header/DataTableColumnHeader.js.map +1 -1
  4. package/cjs/data/table/column-header/useTableColumnResize.d.ts +28 -4
  5. package/cjs/data/table/column-header/useTableColumnResize.js +144 -53
  6. package/cjs/data/table/column-header/useTableColumnResize.js.map +1 -1
  7. package/cjs/data/table/helpers/collectTableRowEntries.d.ts +24 -0
  8. package/cjs/data/table/helpers/collectTableRowEntries.js +35 -0
  9. package/cjs/data/table/helpers/collectTableRowEntries.js.map +1 -0
  10. package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +46 -0
  11. package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js +112 -0
  12. package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.js.map +1 -0
  13. package/cjs/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -2
  14. package/cjs/data/table/helpers/selection/getMultipleSelectProps.js +43 -19
  15. package/cjs/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
  16. package/cjs/data/table/helpers/selection/selection.types.d.ts +1 -0
  17. package/cjs/data/table/helpers/table-keyboard.d.ts +1 -2
  18. package/cjs/data/table/helpers/table-keyboard.js +1 -5
  19. package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
  20. package/cjs/data/table/hooks/useTableExpansion.d.ts +7 -6
  21. package/cjs/data/table/hooks/useTableExpansion.js +42 -15
  22. package/cjs/data/table/hooks/useTableExpansion.js.map +1 -1
  23. package/cjs/data/table/hooks/useTableItems.d.ts +33 -0
  24. package/cjs/data/table/hooks/useTableItems.js +74 -0
  25. package/cjs/data/table/hooks/useTableItems.js.map +1 -0
  26. package/cjs/data/table/hooks/useTableKeyboardNav.js +3 -3
  27. package/cjs/data/table/hooks/useTableKeyboardNav.js.map +1 -1
  28. package/cjs/data/table/hooks/useTableSelection.d.ts +3 -2
  29. package/cjs/data/table/hooks/useTableSelection.js +5 -4
  30. package/cjs/data/table/hooks/useTableSelection.js.map +1 -1
  31. package/cjs/data/table/root/DataTable.types.d.ts +5 -4
  32. package/cjs/data/table/root/DataTableAuto.d.ts +27 -1
  33. package/cjs/data/table/root/DataTableAuto.js +92 -50
  34. package/cjs/data/table/root/DataTableAuto.js.map +1 -1
  35. package/cjs/data/table/root/DataTableRoot.context.d.ts +5 -3
  36. package/cjs/data/table/root/DataTableRoot.context.js.map +1 -1
  37. package/cjs/data/table/root/DataTableRoot.js +6 -4
  38. package/cjs/data/table/root/DataTableRoot.js.map +1 -1
  39. package/cjs/data/table/tr/DataTableTr.js +30 -32
  40. package/cjs/data/table/tr/DataTableTr.js.map +1 -1
  41. package/cjs/form/checkbox/Checkbox.js +1 -0
  42. package/cjs/form/checkbox/Checkbox.js.map +1 -1
  43. package/cjs/form/radio/Radio.js +7 -1
  44. package/cjs/form/radio/Radio.js.map +1 -1
  45. package/cjs/modal/types.d.ts +8 -4
  46. package/esm/data/table/column-header/DataTableColumnHeader.d.ts +1 -1
  47. package/esm/data/table/column-header/DataTableColumnHeader.js +17 -12
  48. package/esm/data/table/column-header/DataTableColumnHeader.js.map +1 -1
  49. package/esm/data/table/column-header/useTableColumnResize.d.ts +28 -4
  50. package/esm/data/table/column-header/useTableColumnResize.js +145 -54
  51. package/esm/data/table/column-header/useTableColumnResize.js.map +1 -1
  52. package/esm/data/table/helpers/collectTableRowEntries.d.ts +24 -0
  53. package/esm/data/table/helpers/collectTableRowEntries.js +33 -0
  54. package/esm/data/table/helpers/collectTableRowEntries.js.map +1 -0
  55. package/esm/data/table/helpers/selection/SelectionSubtreeHelper.d.ts +46 -0
  56. package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js +109 -0
  57. package/esm/data/table/helpers/selection/SelectionSubtreeHelper.js.map +1 -0
  58. package/esm/data/table/helpers/selection/getMultipleSelectProps.d.ts +3 -2
  59. package/esm/data/table/helpers/selection/getMultipleSelectProps.js +43 -19
  60. package/esm/data/table/helpers/selection/getMultipleSelectProps.js.map +1 -1
  61. package/esm/data/table/helpers/selection/selection.types.d.ts +1 -0
  62. package/esm/data/table/helpers/table-keyboard.d.ts +1 -2
  63. package/esm/data/table/helpers/table-keyboard.js +1 -5
  64. package/esm/data/table/helpers/table-keyboard.js.map +1 -1
  65. package/esm/data/table/hooks/useTableExpansion.d.ts +7 -6
  66. package/esm/data/table/hooks/useTableExpansion.js +42 -16
  67. package/esm/data/table/hooks/useTableExpansion.js.map +1 -1
  68. package/esm/data/table/hooks/useTableItems.d.ts +33 -0
  69. package/esm/data/table/hooks/useTableItems.js +69 -0
  70. package/esm/data/table/hooks/useTableItems.js.map +1 -0
  71. package/esm/data/table/hooks/useTableKeyboardNav.js +3 -3
  72. package/esm/data/table/hooks/useTableKeyboardNav.js.map +1 -1
  73. package/esm/data/table/hooks/useTableSelection.d.ts +3 -2
  74. package/esm/data/table/hooks/useTableSelection.js +5 -4
  75. package/esm/data/table/hooks/useTableSelection.js.map +1 -1
  76. package/esm/data/table/root/DataTable.types.d.ts +5 -4
  77. package/esm/data/table/root/DataTableAuto.d.ts +27 -1
  78. package/esm/data/table/root/DataTableAuto.js +94 -52
  79. package/esm/data/table/root/DataTableAuto.js.map +1 -1
  80. package/esm/data/table/root/DataTableRoot.context.d.ts +5 -3
  81. package/esm/data/table/root/DataTableRoot.context.js.map +1 -1
  82. package/esm/data/table/root/DataTableRoot.js +7 -5
  83. package/esm/data/table/root/DataTableRoot.js.map +1 -1
  84. package/esm/data/table/tr/DataTableTr.js +32 -34
  85. package/esm/data/table/tr/DataTableTr.js.map +1 -1
  86. package/esm/form/checkbox/Checkbox.js +1 -0
  87. package/esm/form/checkbox/Checkbox.js.map +1 -1
  88. package/esm/form/radio/Radio.js +7 -1
  89. package/esm/form/radio/Radio.js.map +1 -1
  90. package/esm/modal/types.d.ts +8 -4
  91. package/package.json +7 -7
  92. package/src/data/table/column-header/DataTableColumnHeader.tsx +26 -14
  93. package/src/data/table/column-header/useTableColumnResize.ts +209 -80
  94. package/src/data/table/helpers/collectTableRowEntries.ts +90 -0
  95. package/src/data/table/helpers/selection/SelectionSubtreeHelper.test.ts +66 -0
  96. package/src/data/table/helpers/selection/SelectionSubtreeHelper.ts +162 -0
  97. package/src/data/table/helpers/selection/getMultipleSelectProps.ts +57 -20
  98. package/src/data/table/helpers/selection/selection.types.ts +1 -0
  99. package/src/data/table/helpers/table-keyboard.ts +1 -6
  100. package/src/data/table/hooks/__tests__/useTableItems.test.ts +145 -0
  101. package/src/data/table/hooks/__tests__/useTableSelection.test.ts +132 -21
  102. package/src/data/table/hooks/useTableExpansion.tsx +68 -22
  103. package/src/data/table/hooks/useTableItems.ts +146 -0
  104. package/src/data/table/hooks/useTableKeyboardNav.ts +3 -3
  105. package/src/data/table/hooks/useTableSelection.ts +10 -6
  106. package/src/data/table/root/DataTable.types.ts +5 -4
  107. package/src/data/table/root/DataTableAuto.test.tsx +244 -0
  108. package/src/data/table/root/DataTableAuto.tsx +260 -141
  109. package/src/data/table/root/DataTableRoot.context.ts +4 -2
  110. package/src/data/table/root/DataTableRoot.tsx +22 -16
  111. package/src/data/table/tr/DataTableTr.tsx +48 -47
  112. package/src/form/checkbox/Checkbox.tsx +1 -0
  113. package/src/form/radio/Radio.tsx +7 -1
  114. package/src/modal/types.ts +8 -4
@@ -49,7 +49,13 @@ exports.Radio = (0, react_1.forwardRef)((props, forwardedRef) => {
49
49
  "aksel-radio--disabled": inputProps.disabled,
50
50
  "aksel-radio--readonly": readOnly,
51
51
  }), "data-color": hasError ? "danger" : props["data-color"] },
52
- react_1.default.createElement(RadioInput_1.RadioInput, Object.assign({ ref: forwardedRef }, (0, utils_external_1.omit)(props, ["children", "size", "description", "readOnly"]), (0, utils_external_1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { "aria-describedby": (0, helpers_1.cl)(inputProps["aria-describedby"], {
52
+ react_1.default.createElement(RadioInput_1.RadioInput, Object.assign({ ref: forwardedRef }, (0, utils_external_1.omit)(props, [
53
+ "children",
54
+ "size",
55
+ "description",
56
+ "readOnly",
57
+ "className",
58
+ ]), (0, utils_external_1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { "aria-describedby": (0, helpers_1.cl)(inputProps["aria-describedby"], {
53
59
  [descriptionId]: description,
54
60
  }) || undefined, standalone: false })),
55
61
  react_1.default.createElement(typography_1.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,+CAA0C;AAC1C,iDAA6C;AAC7C,yDAAmD;AACnD,iDAAyC;AACzC,yDAAsD;AAEtD,yCAAsC;AAEzB,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CAAC,KAAiB,EAAE,YAAY,EAAE,EAAE;IAClC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAA,mBAAQ,EAAC,KAAK,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,IAAA,sBAAK,GAAE,CAAC;IAE9B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,YAAE,EAAC,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,8BAAC,uBAAU,kBACT,GAAG,EAAE,YAAY,IACb,IAAA,qBAAI,EAAC,KAAK,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CAAC,EAC5D,IAAA,qBAAI,EAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,wBAExD,IAAA,YAAE,EAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;gBACjC,CAAC,aAAa,CAAC,EAAE,WAAW;aAC7B,CAAC,IAAI,SAAS,EAEjB,UAAU,EAAE,KAAK,IACjB;QACF,8BAAC,sBAAS,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,8BAAC,sBAAS,IACR,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2DAA2D,IAEpE,WAAW,CACF,CACb,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}
1
+ {"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/form/radio/Radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,iDAA6C;AAC7C,yDAAmD;AACnD,iDAAyC;AACzC,yDAAsD;AAEtD,yCAAsC;AAEzB,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CAAC,KAAiB,EAAE,YAAY,EAAE,EAAE;IAClC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAA,mBAAQ,EAAC,KAAK,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,IAAA,sBAAK,GAAE,CAAC;IAE9B,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,YAAE,EAAC,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,8BAAC,uBAAU,kBACT,GAAG,EAAE,YAAY,IACb,IAAA,qBAAI,EAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,aAAa;YACb,UAAU;YACV,WAAW;SACZ,CAAC,EACE,IAAA,qBAAI,EAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,wBAExD,IAAA,YAAE,EAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;gBACjC,CAAC,aAAa,CAAC,EAAE,WAAW;aAC7B,CAAC,IAAI,SAAS,EAEjB,UAAU,EAAE,KAAK,IACjB;QACF,8BAAC,sBAAS,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,8BAAC,sBAAS,IACR,EAAE,EAAE,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2DAA2D,IAEpE,WAAW,CACF,CACb,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}
@@ -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
- * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
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
- * @warning Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
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
- * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
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
- * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
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
  }
@@ -26,6 +26,6 @@ interface DataTableColumnHeaderProps extends ResizeProps, DataTableBaseCellProps
26
26
  * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
27
27
  * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
28
28
  */
29
- declare const DataTableColumnHeader: React.ForwardRefExoticComponent<Omit<DataTableColumnHeaderProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
29
+ declare const DataTableColumnHeader: React.ForwardRefExoticComponent<DataTableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
30
30
  export { DataTableColumnHeader };
31
31
  export type { DataTableColumnHeaderProps };
@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import React, { forwardRef, useState } from "react";
12
+ import React, { forwardRef, useRef } from "react";
13
13
  import { ArrowsUpDownIcon, CaretLeftCircleFillIcon, CaretRightCircleFillIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
14
14
  import { cl } from "../../../utils/helpers/index.js";
15
15
  import { useMergeRefs } from "../../../utils/hooks/index.js";
@@ -26,15 +26,16 @@ const SORT_ICON = {
26
26
  * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
27
27
  */
28
28
  const DataTableColumnHeader = forwardRef((_a, forwardedRef) => {
29
- var { className, children, sortable = false, sortDirection = "none", onSortClick, style, width, minWidth, maxWidth, onWidthChange, defaultWidth, colSpan, rowSpan, UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "style", "width", "minWidth", "maxWidth", "onWidthChange", "defaultWidth", "colSpan", "rowSpan", "UNSAFE_isSelection"]);
30
- const [isOverflowing, setIsOverflowing] = React.useState(false);
29
+ var { className, children, sortable = false, sortDirection = "none", onSortClick, resizable = true, style, width, defaultWidth, autoWidth, minWidth, maxWidth, onWidthChange, colSpan, rowSpan, UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "resizable", "style", "width", "defaultWidth", "autoWidth", "minWidth", "maxWidth", "onWidthChange", "colSpan", "rowSpan", "UNSAFE_isSelection"]);
31
30
  const contentRef = React.useRef(null);
32
- const [thRefState, setThRefState] = useState(null);
33
- const mergedRef = useMergeRefs(forwardedRef, setThRefState);
31
+ const thRef = useRef(null);
32
+ const mergedRef = useMergeRefs(forwardedRef, thRef);
34
33
  const resizeResult = useTableColumnResize({
35
- ref: thRefState,
34
+ resizable,
35
+ thRef,
36
36
  width,
37
37
  defaultWidth,
38
+ autoWidth,
38
39
  minWidth,
39
40
  maxWidth,
40
41
  onWidthChange,
@@ -42,17 +43,21 @@ const DataTableColumnHeader = forwardRef((_a, forwardedRef) => {
42
43
  colSpan,
43
44
  });
44
45
  const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
45
- return (React.createElement(DataTableBaseCell, Object.assign({ as: "th" }, rest, { ref: mergedRef, className: cl("aksel-data-table__column-header", className), "data-sortable": sortable, style: resizeResult.style, "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, onPointerEnter: () => {
46
- const el = contentRef.current;
47
- setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
48
- console.info("is overflowing", isOverflowing);
49
- }, onPointerLeave: () => setIsOverflowing(false), UNSAFE_isSelection: UNSAFE_isSelection, colSpan: colSpan, rowSpan: rowSpan }),
46
+ return (React.createElement(DataTableBaseCell, Object.assign({ as: "th" }, rest, { ref: mergedRef, className: cl("aksel-data-table__column-header", className), "data-sortable": sortable, style: resizeResult.style, "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, UNSAFE_isSelection: UNSAFE_isSelection, colSpan: colSpan, rowSpan: rowSpan }),
50
47
  sortable ? (React.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: onSortClick },
51
48
  React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children),
52
49
  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({
53
50
  "aksel-data-table__th-content": !UNSAFE_isSelection,
54
51
  }) }, children)),
55
- resizeResult.enabled && !UNSAFE_isSelection && (React.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { className: "aksel-data-table__th-resize-handle", "data-active": resizeResult.isResizingWithKeyboard, "data-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true }), resizeResult.isResizingWithKeyboard && (React.createElement(React.Fragment, null,
52
+ resizeResult.enabled && !UNSAFE_isSelection && (React.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { className: "aksel-data-table__th-resize-handle", "aria-label": resizeResult.isResizingWithKeyboard
53
+ ? "Bruk pil venstre/høyre"
54
+ : "Endre bredde", "data-active": resizeResult.isResizingWithKeyboard, "data-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true, role: "slider", "aria-valuenow": typeof resizeResult.style.width === "number"
55
+ ? resizeResult.style.width
56
+ : 0, "aria-valuetext": typeof resizeResult.style.width === "number" &&
57
+ resizeResult.isResizingWithKeyboard
58
+ ? resizeResult.style.width.toString()
59
+ : "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
60
+ }), resizeResult.isResizingWithKeyboard && (React.createElement(React.Fragment, null,
56
61
  React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start" },
57
62
  React.createElement(CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
58
63
  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":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/DataTableColumnHeader.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/DataTableColumnHeader.tsx"],"names":[],"mappings":"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"}
@@ -1,7 +1,13 @@
1
1
  import { type DOMAttributes } from "react";
2
2
  type ColumnWidth = number | string;
3
3
  type ResizeProps = {
4
- ref: HTMLTableCellElement | null;
4
+ /**
5
+ * Whether the column should be resizable by the user.
6
+ *
7
+ * **NB:** This is always disabled when `layout="auto"` on the root component.
8
+ * @default true
9
+ */
10
+ resizable?: boolean;
5
11
  /**
6
12
  * Controlled width of the column.
7
13
  *
@@ -9,9 +15,20 @@ type ResizeProps = {
9
15
  */
10
16
  width?: ColumnWidth;
11
17
  /**
12
- * Initial width of the column. Only used when `width` is not set.
18
+ * Initial width of the column. Only used when `width` is not set and `resizable` is true.
13
19
  */
14
20
  defaultWidth?: ColumnWidth;
21
+ /**
22
+ * Whether the column should automatically resize to fit its content. **Runs only once.**
23
+ *
24
+ * `onWidthChange` will be called with the new size. `minWidth` and `maxWidth` will be respected.
25
+ *
26
+ * If you don't need manual resizing support and want most of the columns to resize automatically,
27
+ * consider using `layout="auto"` on the root instead for better performance.
28
+ *
29
+ * **NB:** This can cause a layout shift. Set a good initial width with `width` or `defaultWidth` to mitigate this.
30
+ */
31
+ autoWidth?: boolean;
15
32
  /**
16
33
  * Minimum width of the column.
17
34
  *
@@ -37,15 +54,22 @@ type ResizeProps = {
37
54
  */
38
55
  colSpan?: number;
39
56
  };
40
- type TableColumnResizeArgs = ResizeProps & {};
57
+ type WithUndefined<T> = {
58
+ [K in keyof T]: T[K] | undefined;
59
+ };
60
+ type Unomittable<T> = WithUndefined<Required<T>>;
61
+ type TableColumnResizeArgs = Unomittable<ResizeProps> & {
62
+ thRef: React.RefObject<HTMLTableCellElement | null>;
63
+ };
41
64
  type TableColumnResizeResult = {
42
- style?: React.CSSProperties;
65
+ style: React.CSSProperties;
43
66
  resizeHandlerProps: {
44
67
  onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
45
68
  onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
46
69
  onKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"];
47
70
  onBlur: DOMAttributes<HTMLButtonElement>["onBlur"];
48
71
  onDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"];
72
+ onClick: DOMAttributes<HTMLButtonElement>["onClick"];
49
73
  };
50
74
  isResizingWithKeyboard: boolean;
51
75
  enabled: true;
@@ -1,4 +1,4 @@
1
- import { useCallback, useState } from "react";
1
+ import { useCallback, useEffect, useRef, useState, } from "react";
2
2
  import { useControllableState } from "../../../utils/hooks/index.js";
3
3
  import { useDataTableContext } from "../root/DataTableRoot.context.js";
4
4
  /**
@@ -8,9 +8,11 @@ import { useDataTableContext } from "../root/DataTableRoot.context.js";
8
8
  * be able to set "1fr" or similar and have it fill remaining space.
9
9
  */
10
10
  function useTableColumnResize(args) {
11
- const { ref, width: userWidth, defaultWidth, onWidthChange, maxWidth = Infinity, minWidth = 40, style, colSpan, } = args;
11
+ const { resizable, thRef, width: userWidth, defaultWidth, autoWidth, onWidthChange, maxWidth = Infinity, minWidth = 40, style, colSpan, } = args;
12
12
  const tableContext = useDataTableContext();
13
- const [width, _setWidth] = useControllableState({
13
+ const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
14
+ const ignoreNextOnClick = useRef(false);
15
+ const [width, setWidth] = useControllableState({
14
16
  value: userWidth,
15
17
  defaultValue: defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : (colSpan !== null && colSpan !== void 0 ? colSpan : 1) * 140,
16
18
  /**
@@ -20,48 +22,80 @@ function useTableColumnResize(args) {
20
22
  */
21
23
  onChange: onWidthChange,
22
24
  });
23
- const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
24
- const [, setIsResizingWithMouse] = useState(false);
25
- const setWidth = useCallback((newWidth) => {
25
+ const setClampedWidth = useCallback((newWidth) => {
26
26
  var _a, _b;
27
- const currentWidth = ref === null || ref === void 0 ? void 0 : ref.offsetWidth;
28
- if (!currentWidth) {
29
- return;
30
- }
31
27
  const min = (_a = parseWidth(minWidth)) !== null && _a !== void 0 ? _a : 0;
32
28
  const max = (_b = parseWidth(maxWidth)) !== null && _b !== void 0 ? _b : Infinity;
33
29
  const clamped = Math.min(Math.max(newWidth, min), max);
34
- if (newWidth <= currentWidth && newWidth > max) {
35
- _setWidth(newWidth);
30
+ setWidth(clamped);
31
+ }, [minWidth, maxWidth, setWidth]);
32
+ // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoWidth changes
33
+ useEffect(function autoResizeColumn() {
34
+ if (!autoWidth) {
36
35
  return;
37
36
  }
38
- if (newWidth >= currentWidth && newWidth > max) {
39
- _setWidth(currentWidth);
40
- return;
37
+ const newColumnWidth = getAutoColumnWidth(thRef);
38
+ if (newColumnWidth) {
39
+ setClampedWidth(newColumnWidth);
41
40
  }
42
- _setWidth(clamped);
43
- }, [minWidth, maxWidth, _setWidth, ref]);
44
- const handleKeyDown = useCallback((event) => {
45
- if (event.key === "Enter" || event.key === " ") {
46
- setIsResizingWithKeyboard((prev) => !prev);
41
+ }, [autoWidth]);
42
+ const handleOnClick = useCallback(() => {
43
+ // We need to use the onClick event in order to support screen readers properly,
44
+ // since some of them only send a mouse click when pressing enter/space.
45
+ // We detect a "screen reader click" by checking if we had a mouseUp event right before.
46
+ if (ignoreNextOnClick.current) {
47
+ ignoreNextOnClick.current = false;
47
48
  return;
48
49
  }
50
+ setIsResizingWithKeyboard((prev) => !prev);
51
+ }, []);
52
+ const handleKeyDown = useCallback((event) => {
53
+ var _a, _b;
49
54
  if (!isResizingWithKeyboard) {
50
55
  return;
51
56
  }
57
+ const currentWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
52
58
  if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
53
59
  event.preventDefault();
54
- const th = event.target.closest("th");
55
- const startWidth = th.offsetWidth;
56
60
  const delta = event.key === "ArrowRight" ? 20 : -20;
57
- setWidth(startWidth + delta);
61
+ setClampedWidth(currentWidth + delta);
62
+ return;
63
+ }
64
+ if (event.key === "Home") {
65
+ event.preventDefault();
66
+ setClampedWidth(0); // will fall back to minWidth
67
+ return;
68
+ }
69
+ if (event.key === "End") {
70
+ event.preventDefault();
71
+ const newWidth = getAutoColumnWidth(thRef);
72
+ if (newWidth && newWidth > currentWidth) {
73
+ setClampedWidth(newWidth);
74
+ }
75
+ return;
58
76
  }
59
- }, [isResizingWithKeyboard, setWidth]);
60
- const startResize = useCallback((th, startX) => {
61
- setIsResizingWithMouse(true);
62
- const startWidth = th.offsetWidth;
77
+ if (event.key === "Escape") {
78
+ setIsResizingWithKeyboard(false);
79
+ }
80
+ }, [isResizingWithKeyboard, setClampedWidth, thRef]);
81
+ const startResize = useCallback((startX) => {
82
+ var _a, _b;
83
+ const startWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
63
84
  function onPointerMove(clientX) {
64
- setWidth(startWidth + (clientX - startX));
85
+ var _a, _b, _c, _d;
86
+ const currentWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
87
+ const newWidth = startWidth + (clientX - startX);
88
+ const min = (_c = parseWidth(minWidth)) !== null && _c !== void 0 ? _c : 0;
89
+ const max = (_d = parseWidth(maxWidth)) !== null && _d !== void 0 ? _d : Infinity;
90
+ if (newWidth > max) {
91
+ setWidth(newWidth < currentWidth ? newWidth : currentWidth);
92
+ return;
93
+ }
94
+ if (newWidth < min) {
95
+ setWidth(newWidth > currentWidth ? newWidth : currentWidth);
96
+ return;
97
+ }
98
+ setClampedWidth(newWidth);
65
99
  }
66
100
  function onMouseMove(e) {
67
101
  onPointerMove(e.clientX);
@@ -73,45 +107,42 @@ function useTableColumnResize(args) {
73
107
  function cleanup() {
74
108
  document.removeEventListener("mousemove", onMouseMove);
75
109
  document.removeEventListener("touchmove", onTouchMove);
76
- document.removeEventListener("mouseup", cleanup);
77
- document.removeEventListener("touchend", cleanup);
78
- document.removeEventListener("touchcancel", cleanup);
79
- setIsResizingWithMouse(false);
110
+ setIsResizingWithKeyboard(false);
111
+ // We only want onClick to trigger when using the keyboard
112
+ // (we use onClick b.c. keyDown doesn't fire when using a screen reader)
113
+ ignoreNextOnClick.current = true;
80
114
  }
81
115
  document.addEventListener("mousemove", onMouseMove);
82
116
  document.addEventListener("touchmove", onTouchMove, { passive: false });
83
- document.addEventListener("mouseup", cleanup);
84
- document.addEventListener("touchend", cleanup);
85
- document.addEventListener("touchcancel", cleanup);
86
- }, [setWidth]);
117
+ document.addEventListener("mouseup", cleanup, { once: true });
118
+ document.addEventListener("touchend", cleanup, { once: true });
119
+ document.addEventListener("touchcancel", cleanup, { once: true });
120
+ }, [maxWidth, minWidth, setWidth, setClampedWidth, thRef]);
87
121
  const handleMouseDown = useCallback((event) => {
88
- const th = event.target.closest("th");
89
- startResize(th, event.clientX);
122
+ startResize(event.clientX);
90
123
  }, [startResize]);
91
124
  const handleTouchStart = useCallback((event) => {
92
- const th = event.target.closest("th");
93
- startResize(th, event.touches[0].clientX);
125
+ startResize(event.touches[0].clientX);
94
126
  }, [startResize]);
95
- /**
96
- * TODO: Do we even want this?
97
- * - + 32px padding is hardcoded now, fix this
98
- * - Need to find widest element in column, not the header itself.
99
- * - Should doubleclick just reset to defaultWidth? Or add a autoWidth prop.
100
- */
101
- const handleDoubleClick = useCallback((event) => {
102
- const th = event.target.closest("th");
103
- const contentEl = th.getElementsByClassName("aksel-data-table__th-content")[0];
104
- const range = document.createRange();
105
- range.selectNodeContents(contentEl);
106
- const contentWidth = range.getBoundingClientRect().width;
107
- setWidth(contentWidth + 32);
108
- }, [setWidth]);
127
+ // Auto-size column to fit content on double click. NB: Doesn't work with block content!
128
+ const handleDoubleClick = useCallback(() => {
129
+ const newColumnWidth = getAutoColumnWidth(thRef);
130
+ if (newColumnWidth) {
131
+ setClampedWidth(newColumnWidth);
132
+ }
133
+ }, [setClampedWidth, thRef]);
109
134
  if (tableContext.layout !== "fixed") {
110
135
  return {
111
136
  style,
112
137
  enabled: false,
113
138
  };
114
139
  }
140
+ if (!resizable) {
141
+ return {
142
+ style: Object.assign(Object.assign({}, style), { width }),
143
+ enabled: false,
144
+ };
145
+ }
115
146
  return {
116
147
  style: Object.assign(Object.assign({}, style), { width }),
117
148
  resizeHandlerProps: {
@@ -120,6 +151,7 @@ function useTableColumnResize(args) {
120
151
  onKeyDown: handleKeyDown,
121
152
  onBlur: () => setIsResizingWithKeyboard(false),
122
153
  onDoubleClick: handleDoubleClick,
154
+ onClick: handleOnClick,
123
155
  },
124
156
  isResizingWithKeyboard,
125
157
  enabled: true,
@@ -138,5 +170,64 @@ function parseWidth(width) {
138
170
  }
139
171
  return undefined;
140
172
  }
173
+ function getAutoColumnWidth(thRef) {
174
+ var _a;
175
+ const th = thRef.current;
176
+ const thContent = th.querySelector(".aksel-data-table__th-content");
177
+ const thPaddingEl = th.querySelector("div");
178
+ const rows = (_a = th.closest("table")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("tbody tr, tfoot tr");
179
+ if (!thContent || !thPaddingEl || !rows) {
180
+ return;
181
+ }
182
+ // Find needed width for header cell
183
+ const contentWidth = thContent.scrollWidth;
184
+ const paddingElStyle = window.getComputedStyle(thPaddingEl);
185
+ const thInlinePadding = parseInt(paddingElStyle.paddingLeft, 10) +
186
+ parseInt(paddingElStyle.paddingRight, 10);
187
+ let newColumnWidth = contentWidth + thInlinePadding;
188
+ // Find column position
189
+ let columnPosition = 1;
190
+ let prevSibling = th.previousElementSibling;
191
+ while (prevSibling) {
192
+ columnPosition += prevSibling.colSpan;
193
+ prevSibling = prevSibling.previousElementSibling;
194
+ }
195
+ // Find needed width for each cell in column in tbody and tfoot
196
+ const range = document.createRange();
197
+ let skipRows = 0;
198
+ for (const row of rows) {
199
+ // Skip rows where the cell in this column is covered by a rowspan from a previous row
200
+ if (skipRows > 0) {
201
+ skipRows--;
202
+ continue;
203
+ }
204
+ // Find cell
205
+ let cell = row.firstChild;
206
+ let currentPosition = cell.colSpan;
207
+ while (columnPosition > currentPosition && cell.nextElementSibling) {
208
+ cell = cell.nextElementSibling;
209
+ currentPosition += cell.colSpan;
210
+ }
211
+ skipRows = cell.rowSpan - 1;
212
+ // Find needed width
213
+ const cellContent = cell.firstChild;
214
+ range.selectNodeContents(cellContent);
215
+ const cellContentWidth = range.getBoundingClientRect().width;
216
+ const contentElStyle = window.getComputedStyle(cellContent);
217
+ const inlinePadding = parseInt(contentElStyle.paddingLeft, 10) +
218
+ parseInt(contentElStyle.paddingRight, 10);
219
+ const widthNeededForThisCell = (cellContentWidth + inlinePadding) / cell.colSpan;
220
+ if (widthNeededForThisCell > newColumnWidth) {
221
+ newColumnWidth = widthNeededForThisCell;
222
+ }
223
+ }
224
+ // Make sure new width is not wider than the table container since that would be impractical
225
+ const container = th.closest("div");
226
+ const maxColWidth = ((container === null || container === void 0 ? void 0 : container.offsetWidth) || document.documentElement.clientWidth * 0.9) *
227
+ 0.95;
228
+ return newColumnWidth > maxColWidth
229
+ ? Math.floor(maxColWidth)
230
+ : Math.ceil(newColumnWidth);
231
+ }
141
232
  export { useTableColumnResize };
142
233
  //# sourceMappingURL=useTableColumnResize.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTableColumnResize.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/useTableColumnResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AA8DpE;;;;;GAKG;AACH,SAAS,oBAAoB,CAC3B,IAA2B;IAE3B,MAAM,EACJ,GAAG,EACH,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,OAAO,GACR,GAAG,IAAI,CAAC;IAET,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAE3C,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,oBAAoB,CAAC;QAC9C,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,CAAC,CAAC,GAAG,GAAG;QAClD;;;;WAIG;QACH,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,CAAC,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAAgB,EAAE,EAAE;;QACnB,MAAM,YAAY,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,WAAW,CAAC;QACtC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,CAAC,CAAC;QACtC,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,QAAQ,CAAC;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;QAEvD,IAAI,QAAQ,IAAI,YAAY,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;YAC/C,SAAS,CAAC,QAAQ,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,QAAQ,IAAI,YAAY,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;YAC/C,SAAS,CAAC,YAAY,CAAC,CAAC;YACxB,OAAO;QACT,CAAC;QAED,SAAS,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,CAAC,CACrC,CAAC;IAEF,MAAM,aAAa,GACjB,WAAW,CACT,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,yBAAyB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;YAC3C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;YAC1B,MAAM,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC;YAElC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CACnC,CAAC;IAEJ,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,EAAwB,EAAE,MAAc,EAAE,EAAE;QAC3C,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC;QAElC,SAAS,aAAa,CAAC,OAAe;YACpC,QAAQ,CAAC,UAAU,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;QAC5C,CAAC;QAED,SAAS,WAAW,CAAC,CAAa;YAChC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC;QAED,SAAS,WAAW,CAAC,CAAa;YAChC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAED,SAAS,OAAO;YACd,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACjD,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;YAClD,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YACrD,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACxE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC9C,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,eAAe,GACnB,WAAW,CACT,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;QAC1B,WAAW,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEJ,MAAM,gBAAgB,GACpB,WAAW,CACT,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;QAC1B,WAAW,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEJ;;;;;OAKG;IACH,MAAM,iBAAiB,GACrB,WAAW,CACT,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;QAE1B,MAAM,SAAS,GAAG,EAAE,CAAC,sBAAsB,CACzC,8BAA8B,CAC/B,CAAC,CAAC,CAAC,CAAC;QACL,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,YAAY,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAEzD,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEJ,IAAI,YAAY,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QACpC,OAAO;YACL,KAAK;YACL,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;IAED,OAAO;QACL,KAAK,kCACA,KAAK,KACR,KAAK,GACN;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,eAAe;YAC5B,YAAY,EAAE,gBAAgB;YAC9B,SAAS,EAAE,aAAa;YACxB,MAAM,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC;YAC9C,aAAa,EAAE,iBAAiB;SACjC;QACD,sBAAsB;QACtB,OAAO,EAAE,IAAI;KACd,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,KAA8B;IAChD,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACnC,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACnD,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
1
+ {"version":3,"file":"useTableColumnResize.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/useTableColumnResize.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,24 @@
1
+ type TableRowEntryId = string | number;
2
+ type CollectTableRowEntriesArgs<T> = {
3
+ items: T[];
4
+ getRowId?: (rowData: T, index: number) => TableRowEntryId;
5
+ getSubRows?: (rowData: T) => T[];
6
+ isSubRowExpandable?: (rowData: T) => boolean;
7
+ };
8
+ interface ItemDetail<T> {
9
+ id: string | number;
10
+ level: number;
11
+ parent: null | T;
12
+ children: readonly T[];
13
+ }
14
+ type CollectTableRowEntriesReturn<T> = {
15
+ itemDetails: Map<T, ItemDetail<T>>;
16
+ /**
17
+ * Direct child ids for each row, used to traverse nested selection groups
18
+ * without storing every descendant list on each ancestor.
19
+ */
20
+ childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
21
+ };
22
+ declare function collectTableRowEntries<T>({ items, getRowId, getSubRows, isSubRowExpandable, }: CollectTableRowEntriesArgs<T>): CollectTableRowEntriesReturn<T>;
23
+ export { collectTableRowEntries };
24
+ export type { CollectTableRowEntriesArgs, CollectTableRowEntriesReturn, TableRowEntryId, ItemDetail, };
@@ -0,0 +1,33 @@
1
+ function collectTableRowEntries({ items, getRowId, getSubRows, isSubRowExpandable, }) {
2
+ const itemDetailsMap = new Map();
3
+ const childRowIdsById = new Map();
4
+ const traverseRow = (rowData, rowIndex, level, parent, parentId) => {
5
+ var _a, _b, _c;
6
+ const rowId = (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(rowData, rowIndex)) !== null && _a !== void 0 ? _a : (parentId == null ? rowIndex : `${parentId}-${rowIndex}`);
7
+ const isRowExpandable = (_b = isSubRowExpandable === null || isSubRowExpandable === void 0 ? void 0 : isSubRowExpandable(rowData)) !== null && _b !== void 0 ? _b : true;
8
+ const children = (_c = (isRowExpandable ? getSubRows === null || getSubRows === void 0 ? void 0 : getSubRows(rowData) : [])) !== null && _c !== void 0 ? _c : [];
9
+ itemDetailsMap.set(rowData, {
10
+ id: rowId,
11
+ level,
12
+ parent,
13
+ children,
14
+ });
15
+ const childRowIds = [];
16
+ for (let childIndex = 0; childIndex < children.length; childIndex++) {
17
+ const childRow = children[childIndex];
18
+ const childRowId = traverseRow(childRow, childIndex, level + 1, rowData, rowId);
19
+ childRowIds.push(childRowId);
20
+ }
21
+ childRowIdsById.set(rowId, childRowIds);
22
+ return rowId;
23
+ };
24
+ for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
25
+ traverseRow(items[rowIndex], rowIndex, 0, null);
26
+ }
27
+ return {
28
+ itemDetails: itemDetailsMap,
29
+ childRowIdsById,
30
+ };
31
+ }
32
+ export { collectTableRowEntries };
33
+ //# sourceMappingURL=collectTableRowEntries.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"collectTableRowEntries.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/collectTableRowEntries.ts"],"names":[],"mappings":"AAyBA,SAAS,sBAAsB,CAAI,EACjC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,kBAAkB,GACY;IAC9B,MAAM,cAAc,GAAG,IAAI,GAAG,EAAoB,CAAC;IACnD,MAAM,eAAe,GAAG,IAAI,GAAG,EAAsC,CAAC;IAEtE,MAAM,WAAW,GAAG,CAClB,OAAU,EACV,QAAgB,EAChB,KAAa,EACb,MAAgB,EAChB,QAA0B,EACT,EAAE;;QACnB,MAAM,KAAK,GACT,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,EAAE,QAAQ,CAAC,mCAC7B,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,QAAQ,EAAE,CAAC,CAAC;QAC5D,MAAM,eAAe,GAAG,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,OAAO,CAAC,mCAAI,IAAI,CAAC;QAC9D,MAAM,QAAQ,GAAG,MAAA,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,mCAAI,EAAE,CAAC;QAEtE,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE;YAC1B,EAAE,EAAE,KAAK;YACT,KAAK;YACL,MAAM;YACN,QAAQ;SACT,CAAC,CAAC;QAEH,MAAM,WAAW,GAAsB,EAAE,CAAC;QAE1C,KAAK,IAAI,UAAU,GAAG,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC;YACpE,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;YACtC,MAAM,UAAU,GAAG,WAAW,CAC5B,QAAQ,EACR,UAAU,EACV,KAAK,GAAG,CAAC,EACT,OAAO,EACP,KAAK,CACN,CAAC;YACF,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/B,CAAC;QAED,eAAe,CAAC,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAExC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;QAC3D,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,OAAO;QACL,WAAW,EAAE,cAAc;QAC3B,eAAe;KAChB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}