@navikt/ds-react 8.5.0 → 8.5.2

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 (135) hide show
  1. package/cjs/data/table/helpers/table-grid-nav.d.ts +9 -15
  2. package/cjs/data/table/helpers/table-grid-nav.js +18 -25
  3. package/cjs/data/table/helpers/table-grid-nav.js.map +1 -1
  4. package/cjs/data/table/helpers/table-keyboard.d.ts +1 -1
  5. package/cjs/data/table/helpers/table-keyboard.js +1 -6
  6. package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
  7. package/cjs/data/table/root/DataTableRoot.d.ts +41 -4
  8. package/cjs/data/table/root/DataTableRoot.js +10 -6
  9. package/cjs/data/table/root/DataTableRoot.js.map +1 -1
  10. package/cjs/data/table/root/useTableKeyboardNav.d.ts +1 -1
  11. package/cjs/data/table/root/useTableKeyboardNav.js +32 -19
  12. package/cjs/data/table/root/useTableKeyboardNav.js.map +1 -1
  13. package/cjs/data/table/td/DataTableTd.d.ts +5 -4
  14. package/cjs/data/table/td/DataTableTd.js +2 -2
  15. package/cjs/data/table/td/DataTableTd.js.map +1 -1
  16. package/cjs/data/token-filter/AutoSuggest.d.ts +9 -0
  17. package/cjs/data/token-filter/AutoSuggest.js +56 -0
  18. package/cjs/data/token-filter/AutoSuggest.js.map +1 -0
  19. package/cjs/data/token-filter/AutoSuggest.types.d.ts +12 -0
  20. package/cjs/data/token-filter/AutoSuggest.types.js +3 -0
  21. package/cjs/data/token-filter/AutoSuggest.types.js.map +1 -0
  22. package/cjs/data/token-filter/TokenFilter.d.ts +11 -0
  23. package/cjs/data/token-filter/TokenFilter.js +102 -0
  24. package/cjs/data/token-filter/TokenFilter.js.map +1 -0
  25. package/cjs/data/token-filter/TokenFilter.types.d.ts +52 -0
  26. package/cjs/data/token-filter/TokenFilter.types.js +3 -0
  27. package/cjs/data/token-filter/TokenFilter.types.js.map +1 -0
  28. package/cjs/data/token-filter/helpers/generate-autocomplete-options.d.ts +24 -0
  29. package/cjs/data/token-filter/helpers/generate-autocomplete-options.js +197 -0
  30. package/cjs/data/token-filter/helpers/generate-autocomplete-options.js.map +1 -0
  31. package/cjs/data/token-filter/helpers/grouping.d.ts +28 -0
  32. package/cjs/data/token-filter/helpers/grouping.js +61 -0
  33. package/cjs/data/token-filter/helpers/grouping.js.map +1 -0
  34. package/cjs/data/token-filter/helpers/operators.d.ts +22 -0
  35. package/cjs/data/token-filter/helpers/operators.js +66 -0
  36. package/cjs/data/token-filter/helpers/operators.js.map +1 -0
  37. package/cjs/data/token-filter/helpers/parse-query-text.d.ts +25 -0
  38. package/cjs/data/token-filter/helpers/parse-query-text.js +46 -0
  39. package/cjs/data/token-filter/helpers/parse-query-text.js.map +1 -0
  40. package/cjs/data/token-filter/helpers/query-builder.d.ts +20 -0
  41. package/cjs/data/token-filter/helpers/query-builder.js +38 -0
  42. package/cjs/data/token-filter/helpers/query-builder.js.map +1 -0
  43. package/cjs/data/token-filter/helpers/text-matching.d.ts +16 -0
  44. package/cjs/data/token-filter/helpers/text-matching.js +47 -0
  45. package/cjs/data/token-filter/helpers/text-matching.js.map +1 -0
  46. package/cjs/form/combobox/Input/InputController.js +1 -1
  47. package/cjs/form/combobox/Input/InputController.js.map +1 -1
  48. package/cjs/form/file-upload/dropzone/FileUploadDropzone.js +1 -1
  49. package/cjs/form/file-upload/dropzone/FileUploadDropzone.js.map +1 -1
  50. package/cjs/tooltip/Tooltip.js +1 -1
  51. package/cjs/tooltip/Tooltip.js.map +1 -1
  52. package/cjs/utils/i18n/locales/nb.d.ts +75 -154
  53. package/cjs/utils/i18n/locales/nb.js +75 -154
  54. package/cjs/utils/i18n/locales/nb.js.map +1 -1
  55. package/esm/data/table/helpers/table-grid-nav.d.ts +9 -15
  56. package/esm/data/table/helpers/table-grid-nav.js +18 -25
  57. package/esm/data/table/helpers/table-grid-nav.js.map +1 -1
  58. package/esm/data/table/helpers/table-keyboard.d.ts +1 -1
  59. package/esm/data/table/helpers/table-keyboard.js +1 -6
  60. package/esm/data/table/helpers/table-keyboard.js.map +1 -1
  61. package/esm/data/table/root/DataTableRoot.d.ts +41 -4
  62. package/esm/data/table/root/DataTableRoot.js +10 -6
  63. package/esm/data/table/root/DataTableRoot.js.map +1 -1
  64. package/esm/data/table/root/useTableKeyboardNav.d.ts +1 -1
  65. package/esm/data/table/root/useTableKeyboardNav.js +32 -19
  66. package/esm/data/table/root/useTableKeyboardNav.js.map +1 -1
  67. package/esm/data/table/td/DataTableTd.d.ts +5 -4
  68. package/esm/data/table/td/DataTableTd.js +2 -2
  69. package/esm/data/table/td/DataTableTd.js.map +1 -1
  70. package/esm/data/token-filter/AutoSuggest.d.ts +9 -0
  71. package/esm/data/token-filter/AutoSuggest.js +20 -0
  72. package/esm/data/token-filter/AutoSuggest.js.map +1 -0
  73. package/esm/data/token-filter/AutoSuggest.types.d.ts +12 -0
  74. package/esm/data/token-filter/AutoSuggest.types.js +2 -0
  75. package/esm/data/token-filter/AutoSuggest.types.js.map +1 -0
  76. package/esm/data/token-filter/TokenFilter.d.ts +11 -0
  77. package/esm/data/token-filter/TokenFilter.js +66 -0
  78. package/esm/data/token-filter/TokenFilter.js.map +1 -0
  79. package/esm/data/token-filter/TokenFilter.types.d.ts +52 -0
  80. package/esm/data/token-filter/TokenFilter.types.js +2 -0
  81. package/esm/data/token-filter/TokenFilter.types.js.map +1 -0
  82. package/esm/data/token-filter/helpers/generate-autocomplete-options.d.ts +24 -0
  83. package/esm/data/token-filter/helpers/generate-autocomplete-options.js +195 -0
  84. package/esm/data/token-filter/helpers/generate-autocomplete-options.js.map +1 -0
  85. package/esm/data/token-filter/helpers/grouping.d.ts +28 -0
  86. package/esm/data/token-filter/helpers/grouping.js +59 -0
  87. package/esm/data/token-filter/helpers/grouping.js.map +1 -0
  88. package/esm/data/token-filter/helpers/operators.d.ts +22 -0
  89. package/esm/data/token-filter/helpers/operators.js +60 -0
  90. package/esm/data/token-filter/helpers/operators.js.map +1 -0
  91. package/esm/data/token-filter/helpers/parse-query-text.d.ts +25 -0
  92. package/esm/data/token-filter/helpers/parse-query-text.js +44 -0
  93. package/esm/data/token-filter/helpers/parse-query-text.js.map +1 -0
  94. package/esm/data/token-filter/helpers/query-builder.d.ts +20 -0
  95. package/esm/data/token-filter/helpers/query-builder.js +34 -0
  96. package/esm/data/token-filter/helpers/query-builder.js.map +1 -0
  97. package/esm/data/token-filter/helpers/text-matching.d.ts +16 -0
  98. package/esm/data/token-filter/helpers/text-matching.js +45 -0
  99. package/esm/data/token-filter/helpers/text-matching.js.map +1 -0
  100. package/esm/form/combobox/Input/InputController.js +1 -1
  101. package/esm/form/combobox/Input/InputController.js.map +1 -1
  102. package/esm/form/file-upload/dropzone/FileUploadDropzone.js +1 -1
  103. package/esm/form/file-upload/dropzone/FileUploadDropzone.js.map +1 -1
  104. package/esm/tooltip/Tooltip.js +2 -2
  105. package/esm/tooltip/Tooltip.js.map +1 -1
  106. package/esm/utils/i18n/locales/nb.d.ts +75 -154
  107. package/esm/utils/i18n/locales/nb.js +75 -154
  108. package/esm/utils/i18n/locales/nb.js.map +1 -1
  109. package/package.json +3 -3
  110. package/src/data/table/helpers/table-grid-nav.test.ts +659 -0
  111. package/src/data/table/helpers/table-grid-nav.ts +19 -38
  112. package/src/data/table/helpers/table-keyboard.ts +1 -10
  113. package/src/data/table/root/DataTableRoot.tsx +50 -10
  114. package/src/data/table/root/useTableKeyboardNav.ts +35 -23
  115. package/src/data/table/td/DataTableTd.tsx +13 -6
  116. package/src/data/token-filter/AutoSuggest.tsx +55 -0
  117. package/src/data/token-filter/AutoSuggest.types.ts +14 -0
  118. package/src/data/token-filter/TokenFilter.tsx +129 -0
  119. package/src/data/token-filter/TokenFilter.types.ts +85 -0
  120. package/src/data/token-filter/helpers/generate-autocomplete-options.test.ts +896 -0
  121. package/src/data/token-filter/helpers/generate-autocomplete-options.ts +289 -0
  122. package/src/data/token-filter/helpers/grouping.test.ts +206 -0
  123. package/src/data/token-filter/helpers/grouping.ts +73 -0
  124. package/src/data/token-filter/helpers/operators.test.ts +281 -0
  125. package/src/data/token-filter/helpers/operators.ts +91 -0
  126. package/src/data/token-filter/helpers/parse-query-text.test.ts +201 -0
  127. package/src/data/token-filter/helpers/parse-query-text.ts +86 -0
  128. package/src/data/token-filter/helpers/query-builder.test.ts +126 -0
  129. package/src/data/token-filter/helpers/query-builder.ts +41 -0
  130. package/src/data/token-filter/helpers/text-matching.test.ts +125 -0
  131. package/src/data/token-filter/helpers/text-matching.ts +58 -0
  132. package/src/form/combobox/Input/InputController.tsx +0 -1
  133. package/src/form/file-upload/dropzone/FileUploadDropzone.tsx +0 -1
  134. package/src/tooltip/Tooltip.tsx +3 -3
  135. package/src/utils/i18n/locales/nb.ts +4 -83
@@ -8,18 +8,49 @@ import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThea
8
8
  import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr.js";
9
9
  interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
10
10
  children: React.ReactNode;
11
- rowDensity?: "condensed" | "normal" | "spacious";
12
11
  /**
13
- * Enables keyboard navigation for table rows and cells.
14
- * @default false
12
+ * Controls vertical cell padding.
13
+ * @default "normal"
15
14
  */
16
- withKeyboardNav?: boolean;
15
+ rowDensity?: "condensed" | "normal" | "spacious";
17
16
  /**
18
17
  * Zebra striped table
19
18
  * @default false
20
19
  */
21
20
  zebraStripes?: boolean;
21
+ /**
22
+ * Truncate content in cells and show ellipsis for overflowed text.
23
+ *
24
+ * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
25
+ * @default true
26
+ */
22
27
  truncateContent?: boolean;
28
+ /**
29
+ * Enables keyboard navigation for table rows and cells.
30
+ * @default false
31
+ */
32
+ withKeyboardNav?: boolean;
33
+ /**
34
+ * Custom callback to determine if navigation should be blocked.
35
+ * Called before default blocking logic.
36
+ * Requires `withKeyboardNav` to be `true`.
37
+ */
38
+ shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
39
+ /**
40
+ * Controls table layout.
41
+ *
42
+ * ### fixed
43
+ * Gives you full control of column widths. This is required for resizable columns.
44
+ *
45
+ * ### auto
46
+ * Makes the columns resize automatically based on the content.
47
+ * The table will take up at least 100% of available width.
48
+ *
49
+ * **NB:** When using this with `truncateContent`, you have to manually
50
+ * set a `contentMaxWidth` on cells that should be truncated.
51
+ * @default "fixed"
52
+ */
53
+ layout?: "fixed" | "auto";
23
54
  }
24
55
  interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> {
25
56
  /**
@@ -113,6 +144,12 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTab
113
144
  */
114
145
  Tfoot: typeof DataTableTfoot;
115
146
  }
147
+ /**
148
+ * TODO Component description etc.
149
+ *
150
+ * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
151
+ * TODO example
152
+ */
116
153
  declare const DataTable: DataTableRootComponent;
117
154
  export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
118
155
  export default DataTable;
@@ -20,19 +20,23 @@ import { DataTableTh } from "../th/DataTableTh.js";
20
20
  import { DataTableThead, } from "../thead/DataTableThead.js";
21
21
  import { DataTableTr } from "../tr/DataTableTr.js";
22
22
  import { useTableKeyboardNav } from "./useTableKeyboardNav.js";
23
+ /**
24
+ * TODO Component description etc.
25
+ *
26
+ * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
27
+ * TODO example
28
+ */
23
29
  const DataTable = forwardRef((_a, forwardedRef) => {
24
- var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent"]);
30
+ var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed" } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout"]);
25
31
  const [tableRef, setTableRef] = useState(null);
26
32
  const mergedRef = useMergeRefs(forwardedRef, setTableRef);
27
- const { tableTabIndex } = useTableKeyboardNav(tableRef, {
33
+ const { tabIndex } = useTableKeyboardNav(tableRef, {
28
34
  enabled: withKeyboardNav,
35
+ shouldBlockNavigation,
29
36
  });
30
37
  return (React.createElement("div", { className: "aksel-data-table__border-wrapper" },
31
38
  React.createElement("div", { className: "aksel-data-table__scroll-wrapper" },
32
- React.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table", className, {
33
- "aksel-data-table--zebra-stripes": zebraStripes,
34
- "aksel-data-table--truncate-content": truncateContent,
35
- }), "data-density": rowDensity, tabIndex: tableTabIndex })))));
39
+ 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 })))));
36
40
  });
37
41
  DataTable.Caption = DataTableCaption;
38
42
  DataTable.Thead = DataTableThead;
@@ -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,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,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAiH5D,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EAOC,EACD,YAAY,EACZ,EAAE;QATF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,OAEvB,EADI,IAAI,cANT,iFAOC,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,aAAa,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE;QACtD,OAAO,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,+CACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;oBAC3C,iCAAiC,EAAE,YAAY;oBAC/C,oCAAoC,EAAE,eAAe;iBACtD,CAAC,kBACY,UAAU,EACxB,QAAQ,EAAE,aAAa,IACvB,CACE,CACF,CACP,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;AAEjC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,GACZ,CAAC;AACF,eAAe,SAAS,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,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,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAgJ5D;;;;;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,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,6BAAK,SAAS,EAAC,kCAAkC;YAC/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,CACP,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;AAEjC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,GACZ,CAAC;AACF,eAAe,SAAS,CAAC"}
@@ -7,7 +7,7 @@ type UseTableKeyboardNavOptions = {
7
7
  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
8
8
  };
9
9
  declare function useTableKeyboardNav(tableRef: HTMLTableElement | null, { enabled, shouldBlockNavigation: customBlockFn }: UseTableKeyboardNavOptions): {
10
- tableTabIndex: number | undefined;
10
+ tabIndex: number | undefined;
11
11
  };
12
12
  export { useTableKeyboardNav };
13
13
  export type { UseTableKeyboardNavOptions };
@@ -21,39 +21,52 @@ function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customB
21
21
  }
22
22
  const { grid, positions } = getTableGrid(tableRef);
23
23
  const currentPos = positions.get(currentCell);
24
- if (!currentPos &&
25
- action.type !== "tableStart" &&
26
- action.type !== "tableEnd") {
27
- return null;
28
- }
29
24
  let nextCell = null;
30
25
  switch (action.type) {
31
- case "delta":
26
+ case "delta": {
27
+ if (!currentPos) {
28
+ return null;
29
+ }
32
30
  nextCell = findNextFocusableCell(grid, currentPos, action.delta, currentCell);
33
31
  break;
34
- case "home":
35
- nextCell = findFirstCellInRow(grid, positions, currentCell);
32
+ }
33
+ case "home": {
34
+ if (!currentPos) {
35
+ return null;
36
+ }
37
+ nextCell = findFirstCellInRow(grid, currentPos.y);
36
38
  break;
37
- case "end":
38
- nextCell = findLastCellInRow(grid, positions, currentCell);
39
+ }
40
+ case "end": {
41
+ if (!currentPos) {
42
+ return null;
43
+ }
44
+ nextCell = findLastCellInRow(grid, currentPos.y);
39
45
  break;
40
- case "tableStart":
41
- nextCell = findFirstCell(grid, currentCell);
46
+ }
47
+ case "tableStart": {
48
+ nextCell = findFirstCell(grid);
42
49
  break;
43
- case "tableEnd":
44
- nextCell = findLastCell(grid, currentCell);
50
+ }
51
+ case "tableEnd": {
52
+ nextCell = findLastCell(grid);
45
53
  break;
54
+ }
55
+ }
56
+ if (!nextCell || nextCell === currentCell) {
57
+ return null;
46
58
  }
47
- return nextCell
48
- ? focusCellAndUpdateTabIndex(nextCell, currentCell)
49
- : null;
59
+ return focusCellAndUpdateTabIndex(nextCell, currentCell);
50
60
  });
51
61
  /**
52
62
  * Handles keyboard navigation with arrow keys, Home/End, and PageUp/PageDown.
53
63
  * Checks if navigation should be blocked based on current focus context.
54
64
  */
55
65
  const handleTableKeyDown = useEventCallback((event) => {
56
- if (shouldBlockNavigation(event, customBlockFn)) {
66
+ if (customBlockFn === null || customBlockFn === void 0 ? void 0 : customBlockFn(event)) {
67
+ return;
68
+ }
69
+ if (shouldBlockNavigation(event)) {
57
70
  return;
58
71
  }
59
72
  const action = getNavigationAction(event);
@@ -102,7 +115,7 @@ function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customB
102
115
  }, [tableRef, handleTableKeyDown, handleTableFocusIn, enabled]);
103
116
  return {
104
117
  /* Table should only have tabIndex until the focus is moved inside and is enabled */
105
- tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
118
+ tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
106
119
  };
107
120
  }
108
121
  export { useTableKeyboardNav };
@@ -1 +1 @@
1
- {"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
@@ -1,10 +1,11 @@
1
1
  import React from "react";
2
- interface DataTableTdProps extends React.HTMLAttributes<HTMLTableCellElement> {
2
+ interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
3
3
  /**
4
- * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
4
+ * Sets a max-width on the content wrapper div inside the cell.
5
+ * This is only needed when using `layout="auto"` together with
6
+ * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
5
7
  */
6
- colSpan?: number;
7
- rowSpan?: number;
8
+ contentMaxWidth?: number | `${number}${string}`;
8
9
  }
9
10
  declare const DataTableTd: React.ForwardRefExoticComponent<DataTableTdProps & React.RefAttributes<HTMLTableCellElement>>;
10
11
  export { DataTableTd };
@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import React, { forwardRef } from "react";
13
13
  import { cl } from "../../../utils/helpers/index.js";
14
14
  const DataTableTd = forwardRef((_a, forwardedRef) => {
15
- var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
15
+ var { className, children, contentMaxWidth } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth"]);
16
16
  return (React.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__td", className) }),
17
- React.createElement("div", null, children)));
17
+ React.createElement("div", { style: { maxWidth: contentMaxWidth } }, children)));
18
18
  });
19
19
  export { DataTableTd };
20
20
  //# sourceMappingURL=DataTableTd.js.map
@@ -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;AAU5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,iCAAM,QAAQ,CAAO,CAClB,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,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;AAiB5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAiD,EAAE,YAAY,EAAE,EAAE;QAAnE,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,OAAW,EAAN,IAAI,cAA/C,4CAAiD,CAAF;IAC9C,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAG,QAAQ,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types.js";
3
+ interface AutoSuggestProps {
4
+ options: OptionGroup<AutoCompleteOption>[];
5
+ onSelect: (value: string) => void;
6
+ className?: string;
7
+ }
8
+ declare const AutoSuggest: React.ForwardRefExoticComponent<AutoSuggestProps & React.RefAttributes<HTMLDivElement>>;
9
+ export { AutoSuggest };
@@ -0,0 +1,20 @@
1
+ import React, { forwardRef } from "react";
2
+ import { Box } from "../../primitives/box/index.js";
3
+ import { VStack } from "../../primitives/stack/index.js";
4
+ import { Label } from "../../typography/index.js";
5
+ const AutoSuggest = forwardRef(({ options, onSelect }, ref) => {
6
+ return (React.createElement(Box, { ref: ref, padding: "space-6" }, options.map((group) => (React.createElement("div", { key: group.label },
7
+ React.createElement(Label, { as: "div" }, group.label),
8
+ React.createElement(VStack, { gap: "space-4" }, group.options.map((option) => {
9
+ var _a, _b;
10
+ return (React.createElement("div", { key: option.value },
11
+ React.createElement("button", { type: "button", onClick: () => { var _a;
12
+ /* @ts-expect-error TODO: We need to convert the data properly */
13
+ return onSelect((_a = option.value) !== null && _a !== void 0 ? _a : option.propertyKey); } },
14
+ React.createElement("span", null, (_b = (_a = option.value) !== null && _a !== void 0 ? _a : option.label) !== null && _b !== void 0 ? _b : option.propertyLabel),
15
+ option.description && React.createElement("span", null, option.description),
16
+ option.tags && option.tags.length > 0 && (React.createElement("div", null, option.tags.map((tag) => (React.createElement("span", { key: tag }, tag))))))));
17
+ })))))));
18
+ });
19
+ export { AutoSuggest };
20
+ //# sourceMappingURL=AutoSuggest.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AASzC,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7B,OAAO,CACL,oBAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,SAAS,IAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,6BAAK,GAAG,EAAE,KAAK,CAAC,KAAK;QACnB,oBAAC,KAAK,IAAC,EAAE,EAAC,KAAK,IAAE,KAAK,CAAC,KAAK,CAAS;QACrC,oBAAC,MAAM,IAAC,GAAG,EAAC,SAAS,IAClB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;YAC5B,OAAO,CACL,6BAAK,GAAG,EAAE,MAAM,CAAC,KAAK;gBACpB,gCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE;oBACZ,iEAAiE;oBACjE,OAAA,QAAQ,CAAC,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,WAAW,CAAC,CAAA,EAAA;oBAG9C,kCAEG,MAAA,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,aAAa,CAChD;oBACN,MAAM,CAAC,WAAW,IAAI,kCAAO,MAAM,CAAC,WAAW,CAAQ;oBACvD,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC,iCACG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACxB,8BAAM,GAAG,EAAE,GAAG,IAAG,GAAG,CAAQ,CAC7B,CAAC,CACE,CACP,CACM,CACL,CACP,CAAC;QACJ,CAAC,CAAC,CACK,CACL,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -0,0 +1,12 @@
1
+ interface OptionGroup<T> {
2
+ label: string;
3
+ options: T[];
4
+ }
5
+ interface AutoCompleteOption {
6
+ value: string;
7
+ label: string;
8
+ tags?: string[];
9
+ filteringTags?: string[];
10
+ description?: string;
11
+ }
12
+ export type { AutoCompleteOption, OptionGroup };
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=AutoSuggest.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AutoSuggest.types.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,11 @@
1
+ import React from "react";
2
+ import type { QueryFilterQuery, QueryFilteringOptions, QueryFilteringProperties } from "./TokenFilter.types.js";
3
+ type TokenFilterProps = {
4
+ query: QueryFilterQuery;
5
+ onChange: (newQuery: QueryFilterQuery) => void;
6
+ className?: string;
7
+ filteringOptions: QueryFilteringOptions;
8
+ filteringProperties: QueryFilteringProperties;
9
+ };
10
+ export declare const TokenFilter: React.ForwardRefExoticComponent<TokenFilterProps & React.RefAttributes<HTMLDivElement>>;
11
+ export {};
@@ -0,0 +1,66 @@
1
+ import React, { forwardRef, useState } from "react";
2
+ import { Popover } from "../../popover/index.js";
3
+ import { cl } from "../../utils/helpers/index.js";
4
+ import { AutoSuggest } from "./AutoSuggest.js";
5
+ import { generateAutoCompleteOptions } from "./helpers/generate-autocomplete-options.js";
6
+ import { parseQueryText } from "./helpers/parse-query-text.js";
7
+ export const TokenFilter = forwardRef(({ query, className, filteringProperties, filteringOptions }, ref) => {
8
+ const [inputAnchor, setInputAnchor] = useState(null);
9
+ const [filterText, setFilterText] = useState("");
10
+ const { properties, options } = derrivedFilterState(filteringProperties, filteringOptions);
11
+ const queryState = parseQueryText(filterText, properties);
12
+ const autoCompleteOptions = generateAutoCompleteOptions(queryState, properties, options);
13
+ const handleSelectOption = (value) => {
14
+ setFilterText(value);
15
+ setCustomOpen(false);
16
+ };
17
+ const [customOpen, setCustomOpen] = useState(false);
18
+ return (React.createElement("div", { ref: ref, className: cl("aksel-property-filter", className), role: "search" },
19
+ React.createElement("input", { type: "text", className: "aksel-property-filter__input", placeholder: "Type to filter...", ref: setInputAnchor, value: filterText, onChange: (e) => setFilterText(e.target.value), onFocus: () => setCustomOpen(true) }),
20
+ React.createElement(Popover, { anchorEl: inputAnchor, open: customOpen, onClose: () => {
21
+ setFilterText("");
22
+ setCustomOpen(false);
23
+ } },
24
+ React.createElement(AutoSuggest
25
+ /* @ts-expect-error TODO: handle conversion better */
26
+ , {
27
+ /* @ts-expect-error TODO: handle conversion better */
28
+ options: autoCompleteOptions.options, onSelect: handleSelectOption })),
29
+ query.tokens.map((token, index) => {
30
+ return (React.createElement("div", { key: index, className: "aksel-property-filter__token" },
31
+ React.createElement("strong", null, token.propertyKey),
32
+ " ",
33
+ token.operator,
34
+ " "));
35
+ }),
36
+ React.createElement("ul", null, filteringProperties.map((prop) => (React.createElement("li", { key: prop.key }, prop.propertyLabel)))),
37
+ React.createElement("pre", null, JSON.stringify(queryState, null, 2)),
38
+ React.createElement("pre", null, JSON.stringify(autoCompleteOptions, null, 2))));
39
+ });
40
+ function derrivedFilterState(filteringProperties, filteringOptions) {
41
+ var _a, _b, _c;
42
+ const propertyMap = new Map();
43
+ for (const property of filteringProperties) {
44
+ propertyMap.set(property.key, {
45
+ propertyKey: property.key,
46
+ propertyLabel: (_a = property === null || property === void 0 ? void 0 : property.propertyLabel) !== null && _a !== void 0 ? _a : "",
47
+ groupValuesLabel: (_b = property === null || property === void 0 ? void 0 : property.groupValuesLabel) !== null && _b !== void 0 ? _b : "",
48
+ propertyGroup: property === null || property === void 0 ? void 0 : property.group,
49
+ operators: (_c = property === null || property === void 0 ? void 0 : property.operators) !== null && _c !== void 0 ? _c : [],
50
+ /* defaultOperator: property?.defaultOperator ?? '=', */
51
+ externalProperty: property,
52
+ });
53
+ }
54
+ const internalOptions = filteringOptions.map((option) => {
55
+ var _a, _b, _c, _d, _e;
56
+ return ({
57
+ property: (_a = propertyMap.get(option.propertyKey)) !== null && _a !== void 0 ? _a : null,
58
+ value: option.value,
59
+ label: (_c = (_b = option.label) !== null && _b !== void 0 ? _b : option.value) !== null && _c !== void 0 ? _c : "",
60
+ tags: (_d = option.tags) !== null && _d !== void 0 ? _d : [],
61
+ filteringTags: (_e = option.filteringTags) !== null && _e !== void 0 ? _e : [],
62
+ });
63
+ });
64
+ return { properties: [...propertyMap.values()], options: internalOptions };
65
+ }
66
+ //# sourceMappingURL=TokenFilter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TokenFilter.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,52 @@
1
+ type QueryFilterOperator = "<" | "<=" | ">" | ">=" | ":" | "!:" | "=" | "!=" | "^" | "!^" | (string & {});
2
+ type QueryFilterOperation = "and" | "or";
3
+ type QueryFilterToken = {
4
+ propertyKey: string;
5
+ operator: QueryFilterOperator;
6
+ value: any;
7
+ };
8
+ type QueryFilterQuery = {
9
+ tokens: QueryFilterToken[];
10
+ operation: QueryFilterOperation;
11
+ };
12
+ type QueryFilteringOption = {
13
+ propertyKey: string;
14
+ value: any;
15
+ label?: string;
16
+ tags?: string[];
17
+ filteringTags?: string[];
18
+ disabled?: boolean;
19
+ };
20
+ type QueryFilteringOptions = QueryFilteringOption[];
21
+ type QueryFilteringOptionGroup = {
22
+ label: string;
23
+ options: QueryFilteringOptions;
24
+ };
25
+ type QueryFilteringScopedOperator = string | {
26
+ operator: string;
27
+ tokenType: "single" | "multiple";
28
+ };
29
+ type QueryFilteringProperty = {
30
+ key: string;
31
+ propertyLabel: string;
32
+ groupValuesLabel?: string;
33
+ group?: string;
34
+ operators?: QueryFilteringScopedOperator[];
35
+ };
36
+ type QueryFilteringProperties = QueryFilteringProperty[];
37
+ type ParsedProperty = {
38
+ propertyKey: string;
39
+ propertyLabel: string;
40
+ groupValuesLabel: string;
41
+ propertyGroup: string;
42
+ operators: QueryFilteringScopedOperator[];
43
+ externalProperty: QueryFilteringProperty;
44
+ };
45
+ type ParsedOption = {
46
+ property: ParsedProperty | null;
47
+ value: any;
48
+ label: string;
49
+ tags: string[];
50
+ filteringTags: string[];
51
+ };
52
+ export type { QueryFilterOperator, QueryFilterQuery, QueryFilteringOptions, QueryFilteringProperty, QueryFilterOperation, QueryFilteringProperties, ParsedProperty, ParsedOption, QueryFilteringOption, QueryFilteringOptionGroup, };
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=TokenFilter.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TokenFilter.types.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,24 @@
1
+ import type { AutoCompleteOption, OptionGroup } from "../AutoSuggest.types.js";
2
+ import type { ParsedOption, ParsedProperty } from "../TokenFilter.types.js";
3
+ import { type ParsedText } from "./parse-query-text.js";
4
+ /**
5
+ * Generates "options" to be used as autosuggest-ottion based on the current query state.
6
+ *
7
+ * The query parser recognizes three states:
8
+ * - "property": User has selected/matched a property and operator ("Status = active")
9
+ * - "operator": User has matched a property but is typing the operator ("Status" or "Status !")
10
+ * - "free-text": User is typing freely without a property match (e.g., "act" or "!: test")
11
+ *
12
+ * @returns
13
+ * - value: The canonical query string representation for the current state.
14
+ * Used by the UI to determine cursor position and input replacement.
15
+ * - options: Grouped suggestions to display (properties, operators, or values).
16
+ */
17
+ declare function generateAutoCompleteOptions(queryState: ParsedText, filteringProperties?: ParsedProperty[], filteringOptions?: ParsedOption[]): {
18
+ value: string;
19
+ options: OptionGroup<AutoCompleteOption>[];
20
+ } | {
21
+ value: string;
22
+ options: OptionGroup<ParsedProperty>[];
23
+ };
24
+ export { generateAutoCompleteOptions };