@navikt/ds-react 8.5.1 → 8.5.2

package/cjs/data/table/root/DataTableRoot.d.ts

@@ -8,6 +8,10 @@ import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThea
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
     children: React.ReactNode;
+    /**
+     * Controls vertical cell padding.
+     * @default "normal"
+     */
     rowDensity?: "condensed" | "normal" | "spacious";
     /**
      * Zebra striped table
@@ -16,6 +20,8 @@ interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
     zebraStripes?: boolean;
     /**
      * Truncate content in cells and show ellipsis for overflowed text.
+     *
+     * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
      * @default true
      */
     truncateContent?: boolean;
@@ -30,6 +36,21 @@ interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
      * Requires `withKeyboardNav` to be `true`.
      */
     shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+    /**
+     * Controls table layout.
+     *
+     * ### fixed
+     * Gives you full control of column widths. This is required for resizable columns.
+     *
+     * ### auto
+     * Makes the columns resize automatically based on the content.
+     * The table will take up at least 100% of available width.
+     *
+     * **NB:** When using this with `truncateContent`, you have to manually
+     * set a `contentMaxWidth` on cells that should be truncated.
+     * @default "fixed"
+     */
+    layout?: "fixed" | "auto";
 }
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> {
     /**
@@ -123,6 +144,12 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTab
      */
     Tfoot: typeof DataTableTfoot;
 }
+/**
+ * TODO Component description etc.
+ *
+ * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
+ * TODO example
+ */
 declare const DataTable: DataTableRootComponent;
 export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
 export default DataTable;

package/cjs/data/table/root/DataTableRoot.js

@@ -63,8 +63,14 @@ Object.defineProperty(exports, "DataTableThead", { enumerable: true, get: functi
 const DataTableTr_1 = require("../tr/DataTableTr");
 Object.defineProperty(exports, "DataTableTr", { enumerable: true, get: function () { return DataTableTr_1.DataTableTr; } });
 const useTableKeyboardNav_1 = require("./useTableKeyboardNav");
+/**
+ * TODO Component description etc.
+ *
+ * **NB:** To get sticky headers, you have to set a height restriction on the table container. You can use VStack for this:
+ * TODO example
+ */
 const DataTable = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation"]);
+    var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed" } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout"]);
     const [tableRef, setTableRef] = (0, react_1.useState)(null);
     const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setTableRef);
     const { tabIndex } = (0, useTableKeyboardNav_1.useTableKeyboardNav)(tableRef, {
@@ -73,7 +79,7 @@ const DataTable = (0, react_1.forwardRef)((_a, forwardedRef) => {
     });
     return (react_1.default.createElement("div", { className: "aksel-data-table__border-wrapper" },
         react_1.default.createElement("div", { className: "aksel-data-table__scroll-wrapper" },
-            react_1.default.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, tabIndex: tabIndex })))));
+            react_1.default.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex })))));
 });
 exports.DataTable = DataTable;
 DataTable.Caption = DataTableCaption_1.DataTableCaption;

package/cjs/data/table/root/DataTableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,oDAA4C;AAC5C,gDAAoD;AACpD,kEAGqC;AA4LnC,iGA9LA,mCAAgB,OA8LA;AA3LlB,4DAGiC;AAyL/B,+FA3LA,+BAAc,OA2LA;AAxLhB,mDAAuE;AAyLrE,4FAzLO,yBAAW,OAyLP;AAxLb,4DAGiC;AAsL/B,+FAxLA,+BAAc,OAwLA;AArLhB,mDAAuE;AAsLrE,4FAtLO,yBAAW,OAsLP;AArLb,4DAGiC;AAmL/B,+FArLA,+BAAc,OAqLA;AAlLhB,mDAAuE;AAmLrE,4FAnLO,yBAAW,OAmLP;AAlLb,+DAA4D;AA2H5D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,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,IAAA,gBAAQ,EAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,yCAAmB,EAAC,QAAQ,EAAE;QACjD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAC,kCAAkC;QAC/C,uCAAK,SAAS,EAAC,kCAAkC;YAC/C,yDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,kBAAkB,EAAE,SAAS,CAAC,wBACxB,YAAY,2BACT,eAAe,kBACxB,UAAU,EACxB,QAAQ,EAAE,QAAQ,IAClB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACwB,CAAC;AAW1B,8BAAS;AATX,SAAS,CAAC,OAAO,GAAG,mCAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AAYjC,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,oDAA4C;AAC5C,gDAAoD;AACpD,kEAGqC;AAyNnC,iGA3NA,mCAAgB,OA2NA;AAxNlB,4DAGiC;AAsN/B,+FAxNA,+BAAc,OAwNA;AArNhB,mDAAuE;AAsNrE,4FAtNO,yBAAW,OAsNP;AArNb,4DAGiC;AAmN/B,+FArNA,+BAAc,OAqNA;AAlNhB,mDAAuE;AAmNrE,4FAnNO,yBAAW,OAmNP;AAlNb,4DAGiC;AAgN/B,+FAlNA,+BAAc,OAkNA;AA/MhB,mDAAuE;AAgNrE,4FAhNO,yBAAW,OAgNP;AA/Mb,+DAA4D;AAgJ5D;;;;;GAKG;AACH,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,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,IAAA,gBAAQ,EAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,yCAAmB,EAAC,QAAQ,EAAE;QACjD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAC,kCAAkC;QAC/C,uCAAK,SAAS,EAAC,kCAAkC;YAC/C,yDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,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;AAW1B,8BAAS;AATX,SAAS,CAAC,OAAO,GAAG,mCAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AAYjC,kBAAe,SAAS,CAAC"}

package/cjs/data/table/td/DataTableTd.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
-interface DataTableTdProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     /**
-     * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+     * Sets a max-width on the content wrapper div inside the cell.
+     * This is only needed when using `layout="auto"` together with
+     * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
      */
-    colSpan?: number;
-    rowSpan?: number;
+    contentMaxWidth?: number | `${number}${string}`;
 }
 declare const DataTableTd: React.ForwardRefExoticComponent<DataTableTdProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTd };

package/cjs/data/table/td/DataTableTd.js

@@ -48,9 +48,9 @@ exports.DataTableTd = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
 const DataTableTd = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    var { className, children, contentMaxWidth } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth"]);
     return (react_1.default.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__td", className) }),
-        react_1.default.createElement("div", null, children)));
+        react_1.default.createElement("div", { style: { maxWidth: contentMaxWidth } }, children)));
 });
 exports.DataTableTd = DataTableTd;
 //# sourceMappingURL=DataTableTd.js.map

package/cjs/data/table/td/DataTableTd.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAU5C,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,2CAAM,QAAQ,CAAO,CAClB,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}
+{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAiB5C,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAiD,EAAE,YAAY,EAAE,EAAE;QAAnE,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,OAAW,EAAN,IAAI,cAA/C,4CAAiD,CAAF;IAC9C,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAG,QAAQ,CAAO,CACxD,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}

package/cjs/data/token-filter/AutoSuggest.d.ts

@@ -1,19 +1,7 @@
 import React from "react";
-interface AutoSuggestOption {
-    value: string;
-    label: string;
-    tags?: string[];
-    filteringTags?: string[];
-    description?: string;
-}
-interface AutoSuggestGroup {
-    label: string;
-    options: AutoSuggestOption[];
-}
+import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types";
 interface AutoSuggestProps {
-    options: AutoSuggestGroup[];
-    value: string;
-    filterText: string;
+    options: OptionGroup<AutoCompleteOption>[];
     onSelect: (value: string) => void;
     className?: string;
 }

package/cjs/data/token-filter/AutoSuggest.js

@@ -32,98 +32,25 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoSuggest = void 0;
 const react_1 = __importStar(require("react"));
-const helpers_1 = require("../../utils/helpers");
-const AutoSuggest = (0, react_1.forwardRef)(({ options, value, filterText, onSelect, className }, ref) => {
-    console.info({ options, value, filterText });
-    /* const highlightedText = filterText === undefined ? value : filterText; */
-    /* const filterValue = (value || "").toLowerCase();
-
-    const filteredGroups = options
-      .map((group) => ({
-        ...group,
-        options: group.options.filter((option) => {
-          const searchableText = [
-            option.label,
-            option.description,
-            ...(option.filteringTags ?? []),
-            ...(option.tags ?? []),
-          ]
-            .filter(Boolean)
-            .join(" ")
-            .toLowerCase();
-          return searchableText.includes(filterValue);
-        }),
-      }))
-      .filter((group) => group.options.length > 0); */
-    const { items } = useAutosuggestItems({ options, filterValue: filterText });
-    console.info({ items });
-    return (react_1.default.createElement("div", { ref: ref, className: (0, helpers_1.cl)("aksel-auto-suggest", className) }, options.map((group) => (react_1.default.createElement("div", { key: group.label, className: "aksel-auto-suggest__group" },
-        react_1.default.createElement("div", { className: "aksel-auto-suggest__group-label" }, group.label),
-        react_1.default.createElement("ul", { className: "aksel-auto-suggest__list" }, group.options.map((option) => (react_1.default.createElement("li", { key: option.value, className: "aksel-auto-suggest__item" },
-            react_1.default.createElement("button", { type: "button", className: "aksel-auto-suggest__button", onClick: () => onSelect(option.value) },
-                react_1.default.createElement("span", { className: "aksel-auto-suggest__label" }, option.label),
-                option.description && (react_1.default.createElement("span", { className: "aksel-auto-suggest__description" }, option.description)),
-                option.tags && option.tags.length > 0 && (react_1.default.createElement("div", { className: "aksel-auto-suggest__tags" }, option.tags.map((tag) => (react_1.default.createElement("span", { key: tag, className: "aksel-auto-suggest__tag" }, tag)))))))))))))));
+const box_1 = require("../../primitives/box");
+const stack_1 = require("../../primitives/stack");
+const typography_1 = require("../../typography");
+const AutoSuggest = (0, react_1.forwardRef)(({ options, onSelect }, ref) => {
+    return (react_1.default.createElement(box_1.Box, { ref: ref, padding: "space-6" }, options.map((group) => (react_1.default.createElement("div", { key: group.label },
+        react_1.default.createElement(typography_1.Label, { as: "div" }, group.label),
+        react_1.default.createElement(stack_1.VStack, { gap: "space-4" }, group.options.map((option) => {
+            var _a, _b;
+            return (react_1.default.createElement("div", { key: option.value },
+                react_1.default.createElement("button", { type: "button", onClick: () => { var _a; 
+                    /* @ts-expect-error TODO: We need to convert the data properly */
+                    return onSelect((_a = option.value) !== null && _a !== void 0 ? _a : option.propertyKey); } },
+                    react_1.default.createElement("span", null, (_b = (_a = option.value) !== null && _a !== void 0 ? _a : option.label) !== null && _b !== void 0 ? _b : option.propertyLabel),
+                    option.description && react_1.default.createElement("span", null, option.description),
+                    option.tags && option.tags.length > 0 && (react_1.default.createElement("div", null, option.tags.map((tag) => (react_1.default.createElement("span", { key: tag }, tag))))))));
+        })))))));
 });
 exports.AutoSuggest = AutoSuggest;
-function useAutosuggestItems({ options, filterValue }) {
-    const { items } = (0, react_1.useMemo)(() => createItems(options), [options]);
-    const filteredItems = (0, react_1.useMemo)(() => {
-        const localFilteredItems = items;
-        if (filterValue) {
-            localFilteredItems.unshift({
-                value: filterValue,
-                type: "use-entered",
-                label: `Use "${filterValue}"`,
-                option: { value: filterValue },
-            });
-        }
-        return localFilteredItems;
-    }, [items, filterValue]);
-    return { items: filteredItems };
-}
-function createItems(options) {
-    const items = [];
-    const itemToGroup = new WeakMap();
-    for (const option of options) {
-        if (isGroup(option)) {
-            for (const item of flattenGroup(option, itemToGroup)) {
-                items.push(item);
-            }
-        }
-        else {
-            items.push(Object.assign(Object.assign({}, option), { option }));
-        }
-    }
-    return { items };
-}
-function flattenGroup(group, map) {
-    var _a;
-    const { options } = group, rest = __rest(group, ["options"]);
-    const groupItem = Object.assign(Object.assign({}, rest), { type: "parent", option: group });
-    const items = [groupItem];
-    for (const option of options) {
-        const childOption = Object.assign(Object.assign({}, option), { type: "child", disabled: (_a = option.disabled) !== null && _a !== void 0 ? _a : false, option, parent: group });
-        items.push(childOption);
-        map.set(childOption, groupItem);
-    }
-    return items;
-}
-function isGroup(optionOrGroup) {
-    return "options" in optionOrGroup;
-}
 //# sourceMappingURL=AutoSuggest.js.map

package/cjs/data/token-filter/AutoSuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,8CAA2C;AAC3C,kDAAgD;AAChD,iDAAyC;AASzC,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7B,OAAO,CACL,8BAAC,SAAG,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,SAAS,IAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,uCAAK,GAAG,EAAE,KAAK,CAAC,KAAK;QACnB,8BAAC,kBAAK,IAAC,EAAE,EAAC,KAAK,IAAE,KAAK,CAAC,KAAK,CAAS;QACrC,8BAAC,cAAM,IAAC,GAAG,EAAC,SAAS,IAClB,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;YAC5B,OAAO,CACL,uCAAK,GAAG,EAAE,MAAM,CAAC,KAAK;gBACpB,0CACE,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,4CAEG,MAAA,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,aAAa,CAChD;oBACN,MAAM,CAAC,WAAW,IAAI,4CAAO,MAAM,CAAC,WAAW,CAAQ;oBACvD,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC,2CACG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACxB,wCAAM,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;AAEO,kCAAW"}

package/cjs/data/token-filter/AutoSuggest.types.d.ts

@@ -0,0 +1,12 @@
+interface OptionGroup<T> {
+    label: string;
+    options: T[];
+}
+interface AutoCompleteOption {
+    value: string;
+    label: string;
+    tags?: string[];
+    filteringTags?: string[];
+    description?: string;
+}
+export type { AutoCompleteOption, OptionGroup };

package/cjs/data/token-filter/AutoSuggest.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=AutoSuggest.types.js.map

package/cjs/data/token-filter/AutoSuggest.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSuggest.types.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.types.ts"],"names":[],"mappings":""}

package/cjs/data/token-filter/TokenFilter.js

@@ -37,6 +37,7 @@ exports.TokenFilter = void 0;
 const react_1 = __importStar(require("react"));
 const popover_1 = require("../../popover");
 const helpers_1 = require("../../utils/helpers");
+const AutoSuggest_1 = require("./AutoSuggest");
 const generate_autocomplete_options_1 = require("./helpers/generate-autocomplete-options");
 const parse_query_text_1 = require("./helpers/parse-query-text");
 exports.TokenFilter = (0, react_1.forwardRef)(({ query, className, filteringProperties, filteringOptions }, ref) => {
@@ -45,12 +46,22 @@ exports.TokenFilter = (0, react_1.forwardRef)(({ query, className, filteringProp
     const { properties, options } = derrivedFilterState(filteringProperties, filteringOptions);
     const queryState = (0, parse_query_text_1.parseQueryText)(filterText, properties);
     const autoCompleteOptions = (0, generate_autocomplete_options_1.generateAutoCompleteOptions)(queryState, properties, options);
-    /* const handleSelectOption = (value: string) => {
-      setFilterText(value);
-    }; */
+    const handleSelectOption = (value) => {
+        setFilterText(value);
+        setCustomOpen(false);
+    };
+    const [customOpen, setCustomOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement("div", { ref: ref, className: (0, helpers_1.cl)("aksel-property-filter", className), role: "search" },
-        react_1.default.createElement("input", { type: "text", className: "aksel-property-filter__input", placeholder: "Type to filter...", ref: setInputAnchor, value: filterText, onChange: (e) => setFilterText(e.target.value) }),
-        react_1.default.createElement(popover_1.Popover, { anchorEl: inputAnchor, open: filterText.length > 0, onClose: () => setFilterText("") }, "a"),
+        react_1.default.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) }),
+        react_1.default.createElement(popover_1.Popover, { anchorEl: inputAnchor, open: customOpen, onClose: () => {
+                setFilterText("");
+                setCustomOpen(false);
+            } },
+            react_1.default.createElement(AutoSuggest_1.AutoSuggest
+            /* @ts-expect-error TODO: handle conversion better */
+            , { 
+                /* @ts-expect-error TODO: handle conversion better */
+                options: autoCompleteOptions.options, onSelect: handleSelectOption })),
         query.tokens.map((token, index) => {
             return (react_1.default.createElement("div", { key: index, className: "aksel-property-filter__token" },
                 react_1.default.createElement("strong", null, token.propertyKey),
@@ -63,7 +74,7 @@ exports.TokenFilter = (0, react_1.forwardRef)(({ query, className, filteringProp
         react_1.default.createElement("pre", null, JSON.stringify(autoCompleteOptions, null, 2))));
 });
 function derrivedFilterState(filteringProperties, filteringOptions) {
-    var _a, _b;
+    var _a, _b, _c;
     const propertyMap = new Map();
     for (const property of filteringProperties) {
         propertyMap.set(property.key, {
@@ -71,7 +82,7 @@ function derrivedFilterState(filteringProperties, filteringOptions) {
             propertyLabel: (_a = property === null || property === void 0 ? void 0 : property.propertyLabel) !== null && _a !== void 0 ? _a : "",
             groupValuesLabel: (_b = property === null || property === void 0 ? void 0 : property.groupValuesLabel) !== null && _b !== void 0 ? _b : "",
             propertyGroup: property === null || property === void 0 ? void 0 : property.group,
-            /* operators: (property?.operators ?? []).map(op => (typeof op === 'string' ? op : op.operator)), */
+            operators: (_c = property === null || property === void 0 ? void 0 : property.operators) !== null && _c !== void 0 ? _c : [],
             /* defaultOperator: property?.defaultOperator ?? '=', */
             externalProperty: property,
         });

package/cjs/data/token-filter/TokenFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TokenFilter.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TokenFilter.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.tsx"],"names":[],"mappings":"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"}

package/cjs/data/token-filter/TokenFilter.types.d.ts

@@ -22,11 +22,16 @@ type QueryFilteringOptionGroup = {
     label: string;
     options: QueryFilteringOptions;
 };
+type QueryFilteringScopedOperator = string | {
+    operator: string;
+    tokenType: "single" | "multiple";
+};
 type QueryFilteringProperty = {
     key: string;
     propertyLabel: string;
-    groupValuesLabel: string;
-    group: string;
+    groupValuesLabel?: string;
+    group?: string;
+    operators?: QueryFilteringScopedOperator[];
 };
 type QueryFilteringProperties = QueryFilteringProperty[];
 type ParsedProperty = {
@@ -34,6 +39,7 @@ type ParsedProperty = {
     propertyLabel: string;
     groupValuesLabel: string;
     propertyGroup: string;
+    operators: QueryFilteringScopedOperator[];
     externalProperty: QueryFilteringProperty;
 };
 type ParsedOption = {

package/cjs/data/token-filter/helpers/generate-autocomplete-options.d.ts

@@ -1,70 +1,24 @@
+import type { AutoCompleteOption, OptionGroup } from "../AutoSuggest.types";
 import type { ParsedOption, ParsedProperty } from "../TokenFilter.types";
 import { type ParsedText } from "./parse-query-text";
-interface OptionGroup<T> {
-    label: string;
-    options: T[];
-}
-interface AutoCompleteOption {
-    value: string;
-    label: string;
-    tags?: string[];
-    filteringTags?: string[];
-    description?: string;
-}
 /**
- * Grouping option for autocomplete suggestions structures:
- *
- * Step: "free-text" + empty value:
- * - Group: "Properties" with all properties.
- *
- * Step: "free-text" with non-empty value:
- * - Group: "Properties". All properties including the filter text in label or description or tags. String match.
- * - Group: "Values". All "property = value" combinations where either the property label or value label or description or tags include the filter text. String match.
- * - - Ignore all other operators than "=" for value suggestions.
- *
- * Step: "property" + empty value:
- * - Group: "Operators". All operators valid for the selected property.
- *
- * Step: "property" + non-empty value:
- * - Group: "Operators". All operators valid for the selected property with string match. Only relevant for multi letter operators like "!="
- *
- * Step: "operator" + empty value:
- * - Group: "<Property> values". All values valid for the selected property and operator. String match on value label, description and tags.
+ * Generates "options" to be used as autosuggest-ottion based on the current query state.
  *
- * Step: "operator" + non-empty value:
- * - Group: "<Property> values". All values valid for the selected property and operator with string match. String match on value label, description and tags.
+ * The query parser recognizes three states:
+ * - "property": User has selected/matched a property and operator ("Status = active")
+ * - "operator": User has matched a property but is typing the operator ("Status" or "Status !")
+ * - "free-text": User is typing freely without a property match (e.g., "act" or "!: test")
  *
- *
- * TODO:
- * - Handle custom groups
- * - 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"))
- */
-/**
- * TODO: Update based on instructions above.
+ * @returns
+ * - value: The canonical query string representation for the current state.
+ *   Used by the UI to determine cursor position and input replacement.
+ * - options: Grouped suggestions to display (properties, operators, or values).
  */
 declare function generateAutoCompleteOptions(queryState: ParsedText, filteringProperties?: ParsedProperty[], filteringOptions?: ParsedOption[]): {
     value: string;
-    options: {
-        label: string;
-        options: {
-            value: string;
-            label: string;
-            tags: string[];
-            filteringTags: string[];
-        }[];
-    }[];
-} | {
-    value: string;
-    options: (OptionGroup<ParsedProperty> | {
-        options: {
-            value: string;
-            label: string;
-            description: string;
-        }[];
-        label: string;
-    })[];
+    options: OptionGroup<AutoCompleteOption>[];
 } | {
     value: string;
-    options: (OptionGroup<ParsedProperty> | OptionGroup<AutoCompleteOption>)[];
+    options: OptionGroup<ParsedProperty>[];
 };
 export { generateAutoCompleteOptions };