@navikt/ds-react 8.5.0 → 8.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/data/table/helpers/table-grid-nav.d.ts +9 -15
- package/cjs/data/table/helpers/table-grid-nav.js +18 -25
- package/cjs/data/table/helpers/table-grid-nav.js.map +1 -1
- package/cjs/data/table/helpers/table-keyboard.d.ts +1 -1
- package/cjs/data/table/helpers/table-keyboard.js +1 -6
- package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.d.ts +14 -4
- package/cjs/data/table/root/DataTableRoot.js +4 -6
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/root/useTableKeyboardNav.d.ts +1 -1
- package/cjs/data/table/root/useTableKeyboardNav.js +32 -19
- package/cjs/data/table/root/useTableKeyboardNav.js.map +1 -1
- package/cjs/data/token-filter/AutoSuggest.d.ts +21 -0
- package/cjs/data/token-filter/AutoSuggest.js +129 -0
- package/cjs/data/token-filter/AutoSuggest.js.map +1 -0
- package/cjs/data/token-filter/TokenFilter.d.ts +11 -0
- package/cjs/data/token-filter/TokenFilter.js +91 -0
- package/cjs/data/token-filter/TokenFilter.js.map +1 -0
- package/cjs/data/token-filter/TokenFilter.types.d.ts +46 -0
- package/cjs/data/token-filter/TokenFilter.types.js +3 -0
- package/cjs/data/token-filter/TokenFilter.types.js.map +1 -0
- package/cjs/data/token-filter/helpers/generate-autocomplete-options.d.ts +70 -0
- package/cjs/data/token-filter/helpers/generate-autocomplete-options.js +171 -0
- package/cjs/data/token-filter/helpers/generate-autocomplete-options.js.map +1 -0
- package/cjs/data/token-filter/helpers/parse-query-text.d.ts +31 -0
- package/cjs/data/token-filter/helpers/parse-query-text.js +91 -0
- package/cjs/data/token-filter/helpers/parse-query-text.js.map +1 -0
- package/cjs/tooltip/Tooltip.js +1 -1
- package/cjs/tooltip/Tooltip.js.map +1 -1
- package/cjs/utils/i18n/locales/nb.d.ts +75 -154
- package/cjs/utils/i18n/locales/nb.js +75 -154
- package/cjs/utils/i18n/locales/nb.js.map +1 -1
- package/esm/data/table/helpers/table-grid-nav.d.ts +9 -15
- package/esm/data/table/helpers/table-grid-nav.js +18 -25
- package/esm/data/table/helpers/table-grid-nav.js.map +1 -1
- package/esm/data/table/helpers/table-keyboard.d.ts +1 -1
- package/esm/data/table/helpers/table-keyboard.js +1 -6
- package/esm/data/table/helpers/table-keyboard.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.d.ts +14 -4
- package/esm/data/table/root/DataTableRoot.js +4 -6
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/root/useTableKeyboardNav.d.ts +1 -1
- package/esm/data/table/root/useTableKeyboardNav.js +32 -19
- package/esm/data/table/root/useTableKeyboardNav.js.map +1 -1
- package/esm/data/token-filter/AutoSuggest.d.ts +21 -0
- package/esm/data/token-filter/AutoSuggest.js +93 -0
- package/esm/data/token-filter/AutoSuggest.js.map +1 -0
- package/esm/data/token-filter/TokenFilter.d.ts +11 -0
- package/esm/data/token-filter/TokenFilter.js +55 -0
- package/esm/data/token-filter/TokenFilter.js.map +1 -0
- package/esm/data/token-filter/TokenFilter.types.d.ts +46 -0
- package/esm/data/token-filter/TokenFilter.types.js +2 -0
- package/esm/data/token-filter/TokenFilter.types.js.map +1 -0
- package/esm/data/token-filter/helpers/generate-autocomplete-options.d.ts +70 -0
- package/esm/data/token-filter/helpers/generate-autocomplete-options.js +169 -0
- package/esm/data/token-filter/helpers/generate-autocomplete-options.js.map +1 -0
- package/esm/data/token-filter/helpers/parse-query-text.d.ts +31 -0
- package/esm/data/token-filter/helpers/parse-query-text.js +87 -0
- package/esm/data/token-filter/helpers/parse-query-text.js.map +1 -0
- package/esm/tooltip/Tooltip.js +2 -2
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/esm/utils/i18n/locales/nb.d.ts +75 -154
- package/esm/utils/i18n/locales/nb.js +75 -154
- package/esm/utils/i18n/locales/nb.js.map +1 -1
- package/package.json +3 -3
- package/src/data/table/helpers/table-grid-nav.test.ts +659 -0
- package/src/data/table/helpers/table-grid-nav.ts +19 -38
- package/src/data/table/helpers/table-keyboard.ts +1 -10
- package/src/data/table/root/DataTableRoot.tsx +21 -10
- package/src/data/table/root/useTableKeyboardNav.ts +35 -23
- package/src/data/token-filter/AutoSuggest.tsx +179 -0
- package/src/data/token-filter/TokenFilter.tsx +124 -0
- package/src/data/token-filter/TokenFilter.types.ts +79 -0
- package/src/data/token-filter/helpers/generate-autocomplete-options.ts +244 -0
- package/src/data/token-filter/helpers/parse-query-text.test.ts +410 -0
- package/src/data/token-filter/helpers/parse-query-text.ts +148 -0
- package/src/tooltip/Tooltip.tsx +3 -3
- package/src/utils/i18n/locales/nb.ts +4 -83
|
@@ -9,17 +9,27 @@ import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr.js";
|
|
|
9
9
|
interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
|
|
10
10
|
children: React.ReactNode;
|
|
11
11
|
rowDensity?: "condensed" | "normal" | "spacious";
|
|
12
|
+
/**
|
|
13
|
+
* Zebra striped table
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
zebraStripes?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Truncate content in cells and show ellipsis for overflowed text.
|
|
19
|
+
* @default true
|
|
20
|
+
*/
|
|
21
|
+
truncateContent?: boolean;
|
|
12
22
|
/**
|
|
13
23
|
* Enables keyboard navigation for table rows and cells.
|
|
14
24
|
* @default false
|
|
15
25
|
*/
|
|
16
26
|
withKeyboardNav?: boolean;
|
|
17
27
|
/**
|
|
18
|
-
*
|
|
19
|
-
*
|
|
28
|
+
* Custom callback to determine if navigation should be blocked.
|
|
29
|
+
* Called before default blocking logic.
|
|
30
|
+
* Requires `withKeyboardNav` to be `true`.
|
|
20
31
|
*/
|
|
21
|
-
|
|
22
|
-
truncateContent?: boolean;
|
|
32
|
+
shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
|
|
23
33
|
}
|
|
24
34
|
interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> {
|
|
25
35
|
/**
|
|
@@ -21,18 +21,16 @@ import { DataTableThead, } from "../thead/DataTableThead.js";
|
|
|
21
21
|
import { DataTableTr } from "../tr/DataTableTr.js";
|
|
22
22
|
import { useTableKeyboardNav } from "./useTableKeyboardNav.js";
|
|
23
23
|
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"]);
|
|
24
|
+
var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation"]);
|
|
25
25
|
const [tableRef, setTableRef] = useState(null);
|
|
26
26
|
const mergedRef = useMergeRefs(forwardedRef, setTableRef);
|
|
27
|
-
const {
|
|
27
|
+
const { tabIndex } = useTableKeyboardNav(tableRef, {
|
|
28
28
|
enabled: withKeyboardNav,
|
|
29
|
+
shouldBlockNavigation,
|
|
29
30
|
});
|
|
30
31
|
return (React.createElement("div", { className: "aksel-data-table__border-wrapper" },
|
|
31
32
|
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 })))));
|
|
33
|
+
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, tabIndex: tabIndex })))));
|
|
36
34
|
});
|
|
37
35
|
DataTable.Caption = DataTableCaption;
|
|
38
36
|
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;
|
|
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;AA2H5D,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EAQC,EACD,YAAY,EACZ,EAAE;QAVF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,EACtB,qBAAqB,OAEtB,EADI,IAAI,cAPT,0GAQC,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,EACxB,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
|
-
|
|
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
|
-
|
|
35
|
-
|
|
32
|
+
}
|
|
33
|
+
case "home": {
|
|
34
|
+
if (!currentPos) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
nextCell = findFirstCellInRow(grid, currentPos.y);
|
|
36
38
|
break;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
+
}
|
|
40
|
+
case "end": {
|
|
41
|
+
if (!currentPos) {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
nextCell = findLastCellInRow(grid, currentPos.y);
|
|
39
45
|
break;
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
}
|
|
47
|
+
case "tableStart": {
|
|
48
|
+
nextCell = findFirstCell(grid);
|
|
42
49
|
break;
|
|
43
|
-
|
|
44
|
-
|
|
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 (
|
|
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
|
-
|
|
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":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAC;AACpE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAEL,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAWrD,SAAS,mBAAmB,CAC1B,QAAiC,EACjC,EAAE,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAA8B;IAE7E,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,YAAY,CAC9D,QAAQ,EACR,OAAO,CACR,CAAC;IAEF;;OAEG;IACH,MAAM,uBAAuB,GAAG,gBAAgB,CAC9C,CAAC,MAAwB,EAAE,EAAE;QAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,WAAW,GAAG,UAAU,CAAC;QAC7B,WAAW,aAAX,WAAW,cAAX,WAAW,IAAX,WAAW,GAAK,uBAAuB,CAAC,QAAQ,CAAC,EAAC;QAElD,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAE9C,
|
|
1
|
+
{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface AutoSuggestOption {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
tags?: string[];
|
|
6
|
+
filteringTags?: string[];
|
|
7
|
+
description?: string;
|
|
8
|
+
}
|
|
9
|
+
interface AutoSuggestGroup {
|
|
10
|
+
label: string;
|
|
11
|
+
options: AutoSuggestOption[];
|
|
12
|
+
}
|
|
13
|
+
interface AutoSuggestProps {
|
|
14
|
+
options: AutoSuggestGroup[];
|
|
15
|
+
value: string;
|
|
16
|
+
filterText: string;
|
|
17
|
+
onSelect: (value: string) => void;
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
declare const AutoSuggest: React.ForwardRefExoticComponent<AutoSuggestProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
export { AutoSuggest };
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { forwardRef, useMemo } from "react";
|
|
13
|
+
import { cl } from "../../utils/helpers/index.js";
|
|
14
|
+
const AutoSuggest = forwardRef(({ options, value, filterText, onSelect, className }, ref) => {
|
|
15
|
+
console.info({ options, value, filterText });
|
|
16
|
+
/* const highlightedText = filterText === undefined ? value : filterText; */
|
|
17
|
+
/* const filterValue = (value || "").toLowerCase();
|
|
18
|
+
|
|
19
|
+
const filteredGroups = options
|
|
20
|
+
.map((group) => ({
|
|
21
|
+
...group,
|
|
22
|
+
options: group.options.filter((option) => {
|
|
23
|
+
const searchableText = [
|
|
24
|
+
option.label,
|
|
25
|
+
option.description,
|
|
26
|
+
...(option.filteringTags ?? []),
|
|
27
|
+
...(option.tags ?? []),
|
|
28
|
+
]
|
|
29
|
+
.filter(Boolean)
|
|
30
|
+
.join(" ")
|
|
31
|
+
.toLowerCase();
|
|
32
|
+
return searchableText.includes(filterValue);
|
|
33
|
+
}),
|
|
34
|
+
}))
|
|
35
|
+
.filter((group) => group.options.length > 0); */
|
|
36
|
+
const { items } = useAutosuggestItems({ options, filterValue: filterText });
|
|
37
|
+
console.info({ items });
|
|
38
|
+
return (React.createElement("div", { ref: ref, className: cl("aksel-auto-suggest", className) }, options.map((group) => (React.createElement("div", { key: group.label, className: "aksel-auto-suggest__group" },
|
|
39
|
+
React.createElement("div", { className: "aksel-auto-suggest__group-label" }, group.label),
|
|
40
|
+
React.createElement("ul", { className: "aksel-auto-suggest__list" }, group.options.map((option) => (React.createElement("li", { key: option.value, className: "aksel-auto-suggest__item" },
|
|
41
|
+
React.createElement("button", { type: "button", className: "aksel-auto-suggest__button", onClick: () => onSelect(option.value) },
|
|
42
|
+
React.createElement("span", { className: "aksel-auto-suggest__label" }, option.label),
|
|
43
|
+
option.description && (React.createElement("span", { className: "aksel-auto-suggest__description" }, option.description)),
|
|
44
|
+
option.tags && option.tags.length > 0 && (React.createElement("div", { className: "aksel-auto-suggest__tags" }, option.tags.map((tag) => (React.createElement("span", { key: tag, className: "aksel-auto-suggest__tag" }, tag)))))))))))))));
|
|
45
|
+
});
|
|
46
|
+
function useAutosuggestItems({ options, filterValue }) {
|
|
47
|
+
const { items } = useMemo(() => createItems(options), [options]);
|
|
48
|
+
const filteredItems = useMemo(() => {
|
|
49
|
+
const localFilteredItems = items;
|
|
50
|
+
if (filterValue) {
|
|
51
|
+
localFilteredItems.unshift({
|
|
52
|
+
value: filterValue,
|
|
53
|
+
type: "use-entered",
|
|
54
|
+
label: `Use "${filterValue}"`,
|
|
55
|
+
option: { value: filterValue },
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
return localFilteredItems;
|
|
59
|
+
}, [items, filterValue]);
|
|
60
|
+
return { items: filteredItems };
|
|
61
|
+
}
|
|
62
|
+
function createItems(options) {
|
|
63
|
+
const items = [];
|
|
64
|
+
const itemToGroup = new WeakMap();
|
|
65
|
+
for (const option of options) {
|
|
66
|
+
if (isGroup(option)) {
|
|
67
|
+
for (const item of flattenGroup(option, itemToGroup)) {
|
|
68
|
+
items.push(item);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
items.push(Object.assign(Object.assign({}, option), { option }));
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
return { items };
|
|
76
|
+
}
|
|
77
|
+
function flattenGroup(group, map) {
|
|
78
|
+
var _a;
|
|
79
|
+
const { options } = group, rest = __rest(group, ["options"]);
|
|
80
|
+
const groupItem = Object.assign(Object.assign({}, rest), { type: "parent", option: group });
|
|
81
|
+
const items = [groupItem];
|
|
82
|
+
for (const option of options) {
|
|
83
|
+
const childOption = Object.assign(Object.assign({}, option), { type: "child", disabled: (_a = option.disabled) !== null && _a !== void 0 ? _a : false, option, parent: group });
|
|
84
|
+
items.push(childOption);
|
|
85
|
+
map.set(childOption, groupItem);
|
|
86
|
+
}
|
|
87
|
+
return items;
|
|
88
|
+
}
|
|
89
|
+
function isGroup(optionOrGroup) {
|
|
90
|
+
return "options" in optionOrGroup;
|
|
91
|
+
}
|
|
92
|
+
export { AutoSuggest };
|
|
93
|
+
//# sourceMappingURL=AutoSuggest.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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,55 @@
|
|
|
1
|
+
import React, { forwardRef, useState } from "react";
|
|
2
|
+
import { Popover } from "../../popover/index.js";
|
|
3
|
+
import { cl } from "../../utils/helpers/index.js";
|
|
4
|
+
import { generateAutoCompleteOptions } from "./helpers/generate-autocomplete-options.js";
|
|
5
|
+
import { parseQueryText } from "./helpers/parse-query-text.js";
|
|
6
|
+
export const TokenFilter = forwardRef(({ query, className, filteringProperties, filteringOptions }, ref) => {
|
|
7
|
+
const [inputAnchor, setInputAnchor] = useState(null);
|
|
8
|
+
const [filterText, setFilterText] = useState("");
|
|
9
|
+
const { properties, options } = derrivedFilterState(filteringProperties, filteringOptions);
|
|
10
|
+
const queryState = parseQueryText(filterText, properties);
|
|
11
|
+
const autoCompleteOptions = generateAutoCompleteOptions(queryState, properties, options);
|
|
12
|
+
/* const handleSelectOption = (value: string) => {
|
|
13
|
+
setFilterText(value);
|
|
14
|
+
}; */
|
|
15
|
+
return (React.createElement("div", { ref: ref, className: cl("aksel-property-filter", className), role: "search" },
|
|
16
|
+
React.createElement("input", { type: "text", className: "aksel-property-filter__input", placeholder: "Type to filter...", ref: setInputAnchor, value: filterText, onChange: (e) => setFilterText(e.target.value) }),
|
|
17
|
+
React.createElement(Popover, { anchorEl: inputAnchor, open: filterText.length > 0, onClose: () => setFilterText("") }, "a"),
|
|
18
|
+
query.tokens.map((token, index) => {
|
|
19
|
+
return (React.createElement("div", { key: index, className: "aksel-property-filter__token" },
|
|
20
|
+
React.createElement("strong", null, token.propertyKey),
|
|
21
|
+
" ",
|
|
22
|
+
token.operator,
|
|
23
|
+
" "));
|
|
24
|
+
}),
|
|
25
|
+
React.createElement("ul", null, filteringProperties.map((prop) => (React.createElement("li", { key: prop.key }, prop.propertyLabel)))),
|
|
26
|
+
React.createElement("pre", null, JSON.stringify(queryState, null, 2)),
|
|
27
|
+
React.createElement("pre", null, JSON.stringify(autoCompleteOptions, null, 2))));
|
|
28
|
+
});
|
|
29
|
+
function derrivedFilterState(filteringProperties, filteringOptions) {
|
|
30
|
+
var _a, _b;
|
|
31
|
+
const propertyMap = new Map();
|
|
32
|
+
for (const property of filteringProperties) {
|
|
33
|
+
propertyMap.set(property.key, {
|
|
34
|
+
propertyKey: property.key,
|
|
35
|
+
propertyLabel: (_a = property === null || property === void 0 ? void 0 : property.propertyLabel) !== null && _a !== void 0 ? _a : "",
|
|
36
|
+
groupValuesLabel: (_b = property === null || property === void 0 ? void 0 : property.groupValuesLabel) !== null && _b !== void 0 ? _b : "",
|
|
37
|
+
propertyGroup: property === null || property === void 0 ? void 0 : property.group,
|
|
38
|
+
/* operators: (property?.operators ?? []).map(op => (typeof op === 'string' ? op : op.operator)), */
|
|
39
|
+
/* defaultOperator: property?.defaultOperator ?? '=', */
|
|
40
|
+
externalProperty: property,
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
const internalOptions = filteringOptions.map((option) => {
|
|
44
|
+
var _a, _b, _c, _d, _e;
|
|
45
|
+
return ({
|
|
46
|
+
property: (_a = propertyMap.get(option.propertyKey)) !== null && _a !== void 0 ? _a : null,
|
|
47
|
+
value: option.value,
|
|
48
|
+
label: (_c = (_b = option.label) !== null && _b !== void 0 ? _b : option.value) !== null && _c !== void 0 ? _c : "",
|
|
49
|
+
tags: (_d = option.tags) !== null && _d !== void 0 ? _d : [],
|
|
50
|
+
filteringTags: (_e = option.filteringTags) !== null && _e !== void 0 ? _e : [],
|
|
51
|
+
});
|
|
52
|
+
});
|
|
53
|
+
return { properties: [...propertyMap.values()], options: internalOptions };
|
|
54
|
+
}
|
|
55
|
+
//# 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,46 @@
|
|
|
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 QueryFilteringProperty = {
|
|
26
|
+
key: string;
|
|
27
|
+
propertyLabel: string;
|
|
28
|
+
groupValuesLabel: string;
|
|
29
|
+
group: string;
|
|
30
|
+
};
|
|
31
|
+
type QueryFilteringProperties = QueryFilteringProperty[];
|
|
32
|
+
type ParsedProperty = {
|
|
33
|
+
propertyKey: string;
|
|
34
|
+
propertyLabel: string;
|
|
35
|
+
groupValuesLabel: string;
|
|
36
|
+
propertyGroup: string;
|
|
37
|
+
externalProperty: QueryFilteringProperty;
|
|
38
|
+
};
|
|
39
|
+
type ParsedOption = {
|
|
40
|
+
property: ParsedProperty | null;
|
|
41
|
+
value: any;
|
|
42
|
+
label: string;
|
|
43
|
+
tags: string[];
|
|
44
|
+
filteringTags: string[];
|
|
45
|
+
};
|
|
46
|
+
export type { QueryFilterOperator, QueryFilterQuery, QueryFilteringOptions, QueryFilteringProperty, QueryFilterOperation, QueryFilteringProperties, ParsedProperty, ParsedOption, QueryFilteringOption, QueryFilteringOptionGroup, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TokenFilter.types.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import type { ParsedOption, ParsedProperty } from "../TokenFilter.types.js";
|
|
2
|
+
import { type ParsedText } from "./parse-query-text.js";
|
|
3
|
+
interface OptionGroup<T> {
|
|
4
|
+
label: string;
|
|
5
|
+
options: T[];
|
|
6
|
+
}
|
|
7
|
+
interface AutoCompleteOption {
|
|
8
|
+
value: string;
|
|
9
|
+
label: string;
|
|
10
|
+
tags?: string[];
|
|
11
|
+
filteringTags?: string[];
|
|
12
|
+
description?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Grouping option for autocomplete suggestions structures:
|
|
16
|
+
*
|
|
17
|
+
* Step: "free-text" + empty value:
|
|
18
|
+
* - Group: "Properties" with all properties.
|
|
19
|
+
*
|
|
20
|
+
* Step: "free-text" with non-empty value:
|
|
21
|
+
* - Group: "Properties". All properties including the filter text in label or description or tags. String match.
|
|
22
|
+
* - Group: "Values". All "property = value" combinations where either the property label or value label or description or tags include the filter text. String match.
|
|
23
|
+
* - - Ignore all other operators than "=" for value suggestions.
|
|
24
|
+
*
|
|
25
|
+
* Step: "property" + empty value:
|
|
26
|
+
* - Group: "Operators". All operators valid for the selected property.
|
|
27
|
+
*
|
|
28
|
+
* Step: "property" + non-empty value:
|
|
29
|
+
* - Group: "Operators". All operators valid for the selected property with string match. Only relevant for multi letter operators like "!="
|
|
30
|
+
*
|
|
31
|
+
* Step: "operator" + empty value:
|
|
32
|
+
* - Group: "<Property> values". All values valid for the selected property and operator. String match on value label, description and tags.
|
|
33
|
+
*
|
|
34
|
+
* Step: "operator" + non-empty value:
|
|
35
|
+
* - Group: "<Property> values". All values valid for the selected property and operator with string match. String match on value label, description and tags.
|
|
36
|
+
*
|
|
37
|
+
*
|
|
38
|
+
* TODO:
|
|
39
|
+
* - Handle custom groups
|
|
40
|
+
* - Multi vs single-select: Allow operators for each options where user can define type to be enum: { operator: "=", tokenType: "enum" }. Enum-type options allow selecting multiple values, i.e state = ("active", "pending"))
|
|
41
|
+
*/
|
|
42
|
+
/**
|
|
43
|
+
* TODO: Update based on instructions above.
|
|
44
|
+
*/
|
|
45
|
+
declare function generateAutoCompleteOptions(queryState: ParsedText, filteringProperties?: ParsedProperty[], filteringOptions?: ParsedOption[]): {
|
|
46
|
+
value: string;
|
|
47
|
+
options: {
|
|
48
|
+
label: string;
|
|
49
|
+
options: {
|
|
50
|
+
value: string;
|
|
51
|
+
label: string;
|
|
52
|
+
tags: string[];
|
|
53
|
+
filteringTags: string[];
|
|
54
|
+
}[];
|
|
55
|
+
}[];
|
|
56
|
+
} | {
|
|
57
|
+
value: string;
|
|
58
|
+
options: (OptionGroup<ParsedProperty> | {
|
|
59
|
+
options: {
|
|
60
|
+
value: string;
|
|
61
|
+
label: string;
|
|
62
|
+
description: string;
|
|
63
|
+
}[];
|
|
64
|
+
label: string;
|
|
65
|
+
})[];
|
|
66
|
+
} | {
|
|
67
|
+
value: string;
|
|
68
|
+
options: (OptionGroup<ParsedProperty> | OptionGroup<AutoCompleteOption>)[];
|
|
69
|
+
};
|
|
70
|
+
export { generateAutoCompleteOptions };
|