@navikt/ds-react 8.6.0 → 8.7.0

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

@@ -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;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"}
+{"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,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,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,oBAAC,wBAAwB,IAAC,MAAM,EAAE,MAAM;QACtC,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,kCAAkC;gBAC/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,CACmB,CAC5B,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"}

package/esm/data/table/th/DataTableTh.d.ts

@@ -1,9 +1,24 @@
 import React from "react";
+type SortDirection = "asc" | "desc" | "none";
 interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
     resizeHandler?: (event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => void;
     size?: number;
-    sortDirection?: "asc" | "desc" | "none" | false;
-    onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
+    /**
+     * Makes the column header sortable. The entire header cell content becomes
+     * a clickable button when true.
+     */
+    sortable?: boolean;
+    /**
+     * Current sort direction. Only relevant when `sortable` is true.
+     * Uses values matching the `aria-sort` attribute directly.
+     * @default "none"
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Called when the user clicks the sortable header.
+     * The consumer is responsible for determining and setting the next sort state.
+     */
+    onSortClick?: (event: React.MouseEvent<HTMLElement>) => void;
     render?: {
         filterMenu?: {
             title: string;
@@ -15,6 +30,7 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
      */
     colSpan?: number;
     rowSpan?: number;
+    keyboardResizingHandler?: (size: number) => void;
 }
 /**
  * TODO:

package/esm/data/table/th/DataTableTh.js

@@ -10,35 +10,60 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from "react";
-import { FunnelIcon, SortDownIcon, SortUpIcon } from "@navikt/aksel-icons";
-import { ActionMenu } from "../../../action-menu/index.js";
-import { HStack, Spacer } from "../../../primitives/stack/index.js";
+import { ArrowsUpDownIcon, CaretLeftCircleFillIcon, CaretRightCircleFillIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
 import { cl } from "../../../utils/helpers/index.js";
-import { DataTableThActions } from "./DataTableThActions.js";
-import { DataTableThSortHandle } from "./DataTableThSortHandle.js";
+const SORT_ICON = {
+    asc: SortUpIcon,
+    desc: SortDownIcon,
+    none: ArrowsUpDownIcon,
+};
 /**
  * TODO:
  * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
  */
 const DataTableTh = forwardRef((_a, forwardedRef) => {
-    var { className, children, resizeHandler, size, sortDirection, onSortChange, style, render } = _a, rest = __rest(_a, ["className", "children", "resizeHandler", "size", "sortDirection", "onSortChange", "style", "render"]);
-    const { filterMenu } = render || {};
-    return (React.createElement("th", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__th", className), style: Object.assign({ width: size }, style) }),
-        React.createElement(HStack, { align: "center", gap: "space-8", wrap: false },
-            React.createElement("div", { className: "aksel-data-table__th-content" }, children),
-            React.createElement(DataTableThSortHandle, { sortDirection: sortDirection, onSortChange: onSortChange }),
-            React.createElement(Spacer, null),
-            React.createElement(DataTableThActions, null,
-                sortDirection && (React.createElement(ActionMenu.Group, { label: "Sortering" },
-                    React.createElement(ActionMenu.Item, { onSelect: (event) => onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange("desc", event), icon: React.createElement(SortUpIcon, { "aria-hidden": true }) }, sortDirection === "desc" ? "Fjern sortering" : "A-Z"),
-                    React.createElement(ActionMenu.Item, { onSelect: (event) => onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange("asc", event), icon: React.createElement(SortDownIcon, { "aria-hidden": true }) }, sortDirection === "asc" ? "Fjern sortering" : "Z-A"))),
-                filterMenu && (React.createElement(ActionMenu.Group, { label: "Filter" },
-                    React.createElement(ActionMenu.Sub, null,
-                        React.createElement(ActionMenu.SubTrigger, { icon: React.createElement(FunnelIcon, { "aria-hidden": true }) }, filterMenu.title),
-                        React.createElement(ActionMenu.SubContent, null, filterMenu.content)))))),
+    var { className, children, resizeHandler, size, sortable = false, sortDirection = "none", onSortClick, style, keyboardResizingHandler } = _a, rest = __rest(_a, ["className", "children", "resizeHandler", "size", "sortable", "sortDirection", "onSortClick", "style", "keyboardResizingHandler"]);
+    const [resizeHandlerActive, setResizeHandlerActive] = React.useState(false);
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    const contentRef = React.useRef(null);
+    const keyDownHandler = (event) => {
+        if (keyboardResizingHandler) {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                setResizeHandlerActive((active) => !active);
+            }
+            else if (resizeHandlerActive &&
+                (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+                event.preventDefault();
+                keyboardResizingHandler(event.key === "ArrowRight" ? 10 : -10);
+            }
+        }
+    };
+    const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
+    return (React.createElement("th", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__th", className), "data-sortable": sortable, style: Object.assign({ width: size }, style), "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, onPointerEnter: () => {
+            const el = contentRef.current;
+            setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
+            console.info("is overflowing", isOverflowing);
+        }, onPointerLeave: () => setIsOverflowing(false) }),
+        sortable ? (React.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: sortable ? onSortClick : undefined },
+            SortIcon && (React.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon" })),
+            React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children))) : (React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children)),
         resizeHandler && (React.createElement("button", { 
             // TODO: Should probably not be a button since it doesn't have onClick
-            onMouseDown: resizeHandler, onTouchStart: resizeHandler, className: "aksel-data-table__th-resize-handle" }))));
+            onMouseDown: resizeHandler, onTouchStart: resizeHandler, onBlur: () => setResizeHandlerActive(false), className: "aksel-data-table__th-resize-handle", "data-active": resizeHandlerActive, "data-block-keyboard-nav": true, onKeyDown: keyDownHandler }, resizeHandlerActive && (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start" },
+                React.createElement(CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
+            React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end" },
+                React.createElement(CaretRightCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" }))))))));
 });
+function getAriaSort(sortDirection) {
+    if (sortDirection === "asc")
+        return "ascending";
+    if (sortDirection === "desc")
+        return "descending";
+    if (sortDirection === "none")
+        return "none";
+    return undefined;
+}
 export { DataTableTh };
 //# sourceMappingURL=DataTableTh.js.map

package/esm/data/table/th/DataTableTh.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAwBhE;;;GAGG;AACH,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAUC,EACD,YAAY,EACZ,EAAE;QAZF,EACE,SAAS,EACT,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,KAAK,EACL,MAAM,OAEP,EADI,IAAI,cATT,sGAUC,CADQ;IAIT,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEpC,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,KAAK,kBAAI,KAAK,EAAE,IAAI,IAAK,KAAK;QAE9B,oBAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAC,IAAI,EAAE,KAAK;YAC9C,6BAAK,SAAS,EAAC,8BAA8B,IAAE,QAAQ,CAAO;YAE9D,oBAAC,qBAAqB,IACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,GAC1B;YACF,oBAAC,MAAM,OAAG;YAEV,oBAAC,kBAAkB;gBAGhB,aAAa,IAAI,CAChB,oBAAC,UAAU,CAAC,KAAK,IAAC,KAAK,EAAC,WAAW;oBACjC,oBAAC,UAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,MAAM,EAAE,KAAK,CAAC,EAClD,IAAI,EAAE,oBAAC,UAAU,0BAAe,IAE/B,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACrC;oBAClB,oBAAC,UAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,EAAE,KAAK,CAAC,EACjD,IAAI,EAAE,oBAAC,YAAY,0BAAe,IAEjC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACpC,CACD,CACpB;gBACA,UAAU,IAAI,CACb,oBAAC,UAAU,CAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;oBAC9B,oBAAC,UAAU,CAAC,GAAG;wBACb,oBAAC,UAAU,CAAC,UAAU,IAAC,IAAI,EAAE,oBAAC,UAAU,0BAAe,IACpD,UAAU,CAAC,KAAK,CACK;wBACxB,oBAAC,UAAU,CAAC,UAAU,QAEnB,UAAU,CAAC,OAAO,CACG,CACT,CACA,CACpB,CACkB,CACd;QAER,aAAa,IAAI,CAChB;YACE,sEAAsE;YACtE,WAAW,EAAE,aAAa,EAC1B,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAC,oCAAoC,GAC9C,CACH,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":"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"}

package/esm/data/table/tr/DataTableTr.js

@@ -11,11 +11,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers/index.js";
+import { useDataTableContext } from "../root/DataTableRoot.context.js";
 const DataTableTr = forwardRef((_a, forwardedRef) => {
-    var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
+    var { className, children, selected = false } = _a, rest = __rest(_a, ["className", "children", "selected"]);
+    const rootContext = useDataTableContext();
+    const renderFillerCell = rootContext.layout === "fixed" && children;
     return (React.createElement("tr", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__tr", className, {
             "aksel-data-table__tr--selected": selected,
-        }) })));
+        }) }),
+        children,
+        renderFillerCell && (
+        /* TODO: Consider chaning between th and td based on context */
+        React.createElement("div", { className: "aksel-data-table__th aksel-data-table__filler-cell" }))));
 });
 export { DataTableTr };
 //# sourceMappingURL=DataTableTr.js.map

package/esm/data/table/tr/DataTableTr.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAM5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAwC,EAAE,YAAY,EAAE,EAAE;QAA1D,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAtC,yBAAwC,CAAF;IACrC,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,gCAAgC,EAAE,QAAQ;SAC3C,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAMpE,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAkD,EAAE,YAAY,EAAE,EAAE;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAhD,qCAAkD,CAAF;IAC/C,MAAM,WAAW,GAAG,mBAAmB,EAAE,CAAC;IAE1C,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,KAAK,OAAO,IAAI,QAAQ,CAAC;IAEpE,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,gCAAgC,EAAE,QAAQ;SAC3C,CAAC;QAED,QAAQ;QACR,gBAAgB,IAAI;QACnB,+DAA+D;QAC/D,6BAAK,SAAS,EAAC,oDAAoD,GAAG,CACvE,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -2,8 +2,12 @@ import React from "react";
 import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types.js";
 interface AutoSuggestProps {
     options: OptionGroup<AutoCompleteOption>[];
-    onSelect: (value: string) => void;
+    onSelect: (option: AutoCompleteOption) => boolean;
     className?: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
 }
-declare const AutoSuggest: React.ForwardRefExoticComponent<AutoSuggestProps & React.RefAttributes<HTMLDivElement>>;
+declare const AutoSuggest: React.ForwardRefExoticComponent<AutoSuggestProps & React.RefAttributes<HTMLInputElement>>;
 export { AutoSuggest };

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

@@ -1,17 +1,49 @@
-import React, { forwardRef } from "react";
-import { Box } from "../../primitives/box/index.js";
+import React, { forwardRef, useState } from "react";
+import { Search } from "../../form/search/index.js";
 import { VStack } from "../../primitives/stack/index.js";
-import { Label } from "../../typography/index.js";
-const AutoSuggest = forwardRef(({ options, onSelect }, ref) => {
-    return (React.createElement(Box, { ref: ref, padding: "space-6" }, options.map((group) => (React.createElement("div", { key: group.label },
-        React.createElement(Label, { as: "div" }, group.label),
-        React.createElement(VStack, { gap: "space-4" }, group.options.map((option) => {
-            return (React.createElement("div", { key: option.value },
-                React.createElement("button", { type: "button", onClick: () => onSelect(option.value) },
-                    React.createElement("span", null, option.label),
-                    option.description && React.createElement("span", null, option.description),
-                    option.tags && option.tags.length > 0 && (React.createElement("div", null, option.tags.map((tag) => (React.createElement("span", { key: tag }, tag))))))));
-        })))))));
+import { Detail, Label } from "../../typography/index.js";
+import { ListboxGroup } from "../../utils/components/Listbox/group/ListboxGroup.js";
+import { ListboxItem } from "../../utils/components/Listbox/item/ListboxItem.js";
+import Listbox from "../../utils/components/Listbox/root/ListboxRoot.js";
+import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer.js";
+import { Floating } from "../../utils/components/floating/Floating.js";
+import { useMergeRefsN } from "../../utils/hooks/index.js";
+const AutoSuggest = forwardRef(({ options, onSelect, value, onChange, open, setOpen }, ref) => {
+    const [virtuallyFocusedItemId, setVirtuallyFocusedItemId] = useState("");
+    const [inputRef, setInputRef] = useState(null);
+    /* Unsure why N version works, but not regular here */
+    const mergedRef = useMergeRefsN([setInputRef, ref]);
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleChange = (newValue) => {
+        onChange(newValue);
+        setOpen(true);
+    };
+    const handleSelectOption = (option) => {
+        const createdNewToken = onSelect(option);
+        if (createdNewToken) {
+            inputRef === null || inputRef === void 0 ? void 0 : inputRef.focus();
+            setOpen(false);
+        }
+    };
+    return (React.createElement(Floating, null,
+        React.createElement(Listbox, { setVirtuallyFocusedItemId: setVirtuallyFocusedItemId },
+            React.createElement(Floating.Anchor, null,
+                React.createElement(Listbox.InputSlot, null,
+                    React.createElement(Search, { label: "Tabells\u00F8k", variant: "simple", className: "aksel-property-filter__input", placeholder: "Type to filter...", ref: mergedRef, value: value, onChange: handleChange, onClick: () => {
+                            setOpen(true);
+                        }, onFocus: () => setOpen(true) }))),
+            open && (React.createElement(AutoSuggestPopup, { options: options, onSelect: handleSelectOption, focusedValue: virtuallyFocusedItemId, setFocusedValue: setVirtuallyFocusedItemId, onClose: handleClose, safeZoneAnchor: inputRef })))));
+});
+const AutoSuggestPopup = forwardRef(({ options, onSelect, focusedValue, setFocusedValue, onClose, safeZoneAnchor, }, ref) => {
+    return (React.createElement(DismissableLayer, { asChild: true, onDismiss: onClose, safeZone: { anchor: safeZoneAnchor } },
+        React.createElement(Floating.Content, { ref: ref, align: "start", side: "bottom", fallbackPlacements: [], sideOffset: 8, className: "aksel-property-filter__popup" },
+            React.createElement("div", { className: "aksel-property-filter__popup-inner" },
+                React.createElement(Listbox.List, { setVirtuallyFocusedItemId: setFocusedValue }, options.map((group) => (React.createElement(ListboxGroup, { key: group.label, label: group.label }, group.options.map((item) => (React.createElement(ListboxItem, { key: item.value, id: item.value, onClick: () => onSelect(item), hasVirtualFocus: focusedValue === item.value },
+                    React.createElement(VStack, { gap: "space-0" },
+                        React.createElement(Label, { as: "div" }, item.label),
+                        item.description && (React.createElement(Detail, { as: "div" }, item.description))))))))))))));
 });
 export { AutoSuggest };
 //# sourceMappingURL=AutoSuggest.js.map

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

@@ -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,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;oBAErC,kCAAO,MAAM,CAAC,KAAK,CAAQ;oBAC1B,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"}
+{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"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"}

package/esm/data/token-filter/TokenFilter.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import type { QueryFilterQuery, QueryFilteringOptions, QueryFilteringProperties } from "./TokenFilter.types.js";
+import type { ExternalOptions, ExternalPropertyDefinitions, ExternalQuery } from "./TokenFilter.types.js";
 type TokenFilterProps = {
-    query: QueryFilterQuery;
-    onChange: (newQuery: QueryFilterQuery) => void;
+    query: ExternalQuery;
+    onChange: (newQuery: ExternalQuery) => void;
     className?: string;
-    filteringOptions: QueryFilteringOptions;
-    filteringProperties: QueryFilteringProperties;
+    propertyDefinitions: ExternalPropertyDefinitions;
+    options: ExternalOptions;
 };
 /**
  * TODO:

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

@@ -1,5 +1,6 @@
 import React, { forwardRef, useState } from "react";
-import { Popover } from "../../popover/index.js";
+import { Chips } from "../../chips/index.js";
+import { HStack } from "../../primitives/stack/index.js";
 import { cl } from "../../utils/helpers/index.js";
 import { AutoSuggest } from "./AutoSuggest.js";
 import { generateAutoCompleteOptions } from "./helpers/generate-autocomplete-options.js";
@@ -9,57 +10,119 @@ import { parseQueryText } from "./helpers/parse-query-text.js";
  * - Implement onChange handler to update query state when user selects an autocomplete option.
  * - Handle token rendering and editing (e.g., show tokens for matched properties/operators/values, allow deleting tokens).
  */
-export const TokenFilter = forwardRef(({ query, className, filteringProperties, filteringOptions }, ref) => {
-    const [inputAnchor, setInputAnchor] = useState(null);
+export const TokenFilter = forwardRef(({ query, className, propertyDefinitions, options, onChange }, ref) => {
     const [filterText, setFilterText] = useState("");
-    const { properties, options } = derrivedFilterState(filteringProperties, filteringOptions);
-    const queryState = parseQueryText(filterText, properties);
-    const autoCompleteOptions = generateAutoCompleteOptions(queryState, properties, options);
-    const handleSelectOption = (value) => {
-        setFilterText(value);
-        setCustomOpen(false);
+    const [open, setOpen] = useState(false);
+    const { parsedPropertyDefinitions, parsedPropertyOptions } = derrivedFilterState(propertyDefinitions, options);
+    const queryState = parseQueryText(filterText, parsedPropertyDefinitions);
+    const autoCompleteOptions = generateAutoCompleteOptions(queryState, parsedPropertyDefinitions, parsedPropertyOptions);
+    const { addToken, removeToken } = createActionHandlers({
+        query,
+        onChange,
+    });
+    const createToken = (newText) => {
+        const newQueryState = parseQueryText(newText, parsedPropertyDefinitions);
+        let newToken = null;
+        switch (newQueryState.step) {
+            case "property": {
+                if (newQueryState.value === "") {
+                    return false;
+                }
+                newToken = {
+                    propertyKey: newQueryState.property.key,
+                    operator: newQueryState.operator,
+                    value: newQueryState.value,
+                };
+                break;
+            }
+            case "free-text": {
+                break;
+            }
+            case "operator": {
+                break;
+            }
+        }
+        if (newToken) {
+            addToken(newToken);
+            setFilterText("");
+            return true;
+        }
+        return false;
+    };
+    const handleSelectOption = (option) => {
+        const newQueryState = parseQueryText(option.value, parsedPropertyDefinitions);
+        if ((newQueryState.step === "property" && newQueryState.value === "") ||
+            newQueryState.step === "operator") {
+            /* Add space after for better formatting */
+            /* TODO: Handle this scenario better */
+            setFilterText(`${option.value} `);
+            return false;
+        }
+        setFilterText(option.value);
+        return createToken(option.value);
     };
-    const [customOpen, setCustomOpen] = useState(false);
     return (React.createElement("div", { ref: ref, className: cl("aksel-property-filter", className), role: "search" },
-        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) }),
-        React.createElement(Popover, { anchorEl: inputAnchor, open: customOpen, onClose: () => {
-                setFilterText("");
-                setCustomOpen(false);
-            } },
-            React.createElement(AutoSuggest, { options: autoCompleteOptions.options, onSelect: handleSelectOption })),
-        query.tokens.map((token, index) => {
-            return (React.createElement("div", { key: index, className: "aksel-property-filter__token" },
-                React.createElement("strong", null, token.propertyKey),
-                " ",
-                token.operator,
-                " "));
-        }),
-        React.createElement("ul", null, filteringProperties.map((prop) => (React.createElement("li", { key: prop.key }, prop.propertyLabel)))),
-        React.createElement("pre", null, JSON.stringify(autoCompleteOptions, null, 2))));
+        React.createElement(AutoSuggest, { onSelect: handleSelectOption, options: autoCompleteOptions.options, value: filterText, onChange: setFilterText, open: open, setOpen: setOpen }),
+        React.createElement(HStack, { marginBlock: "space-8", gap: "space-8" }, query.tokens.map((token, index) => {
+            return (React.createElement(React.Fragment, { key: `${token.propertyKey}-${token.operator}-${token.value}-${index}` },
+                React.createElement(Chips.Removable, { key: index, onClick: () => {
+                        removeToken(index);
+                    } }, `${token.propertyKey} ${token.operator} ${token.value}`),
+                index < query.tokens.length - 1 && (React.createElement("span", null, query.operation))));
+        }))));
 });
-function derrivedFilterState(filteringProperties, filteringOptions) {
-    var _a, _b, _c;
+function derrivedFilterState(propertyDefinitions, propteryOptions) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const propertyMap = new Map();
-    for (const property of filteringProperties) {
+    for (const property of propertyDefinitions) {
         propertyMap.set(property.key, {
-            propertyKey: property.key,
-            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: (_c = property === null || property === void 0 ? void 0 : property.operators) !== null && _c !== void 0 ? _c : [],
-            /* defaultOperator: property?.defaultOperator ?? '=', */
+            key: property.key,
+            label: (_a = property === null || property === void 0 ? void 0 : property.label) !== null && _a !== void 0 ? _a : "",
+            groupLabel: (_b = property === null || property === void 0 ? void 0 : property.groupLabel) !== null && _b !== void 0 ? _b : "",
+            group: (_c = property === null || property === void 0 ? void 0 : property.group) !== null && _c !== void 0 ? _c : "",
+            operators: (_d = property === null || property === void 0 ? void 0 : property.operators) !== null && _d !== void 0 ? _d : [],
             externalProperty: property,
         });
     }
-    const internalOptions = filteringOptions.map((option) => {
-        var _a, _b, _c, _d;
-        return ({
-            property: (_a = propertyMap.get(option.propertyKey)) !== null && _a !== void 0 ? _a : null,
+    const internalOptions = [];
+    for (const option of propteryOptions) {
+        internalOptions.push({
+            property: (_e = propertyMap.get(option.propertyKey)) !== null && _e !== void 0 ? _e : null,
             value: option.value,
-            label: (_c = (_b = option.label) !== null && _b !== void 0 ? _b : option.value) !== null && _c !== void 0 ? _c : "",
-            tags: (_d = option.tags) !== null && _d !== void 0 ? _d : [],
+            label: (_g = (_f = option.label) !== null && _f !== void 0 ? _f : option.value) !== null && _g !== void 0 ? _g : "",
+            tags: (_h = option.tags) !== null && _h !== void 0 ? _h : [],
         });
-    });
-    return { properties: [...propertyMap.values()], options: internalOptions };
+    }
+    return {
+        parsedPropertyDefinitions: [...propertyMap.values()],
+        parsedPropertyOptions: internalOptions,
+    };
+}
+function createActionHandlers({ query, onChange, }) {
+    const handleChange = (newQuery) => {
+        onChange(newQuery);
+    };
+    const addToken = (token) => {
+        handleChange(Object.assign(Object.assign({}, query), { tokens: [...query.tokens, token] }));
+    };
+    const updateToken = (updateIndex, updatedToken) => {
+        handleChange(Object.assign(Object.assign({}, query), { tokens: query.tokens.map((token, index) => index === updateIndex ? updatedToken : token) }));
+    };
+    const updateOperation = (operation) => {
+        handleChange(Object.assign(Object.assign({}, query), { operation }));
+    };
+    const removeToken = (removeIndex) => {
+        handleChange(Object.assign(Object.assign({}, query), { tokens: query.tokens.filter((_, index) => index !== removeIndex) }));
+    };
+    const removeAllTokens = () => {
+        handleChange(Object.assign(Object.assign({}, query), { tokens: [] }));
+    };
+    return {
+        addToken,
+        updateToken,
+        updateOperation,
+        removeToken,
+        removeAllTokens,
+    };
 }
 //# sourceMappingURL=TokenFilter.js.map

package/esm/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/esm/data/token-filter/TokenFilter.types.d.ts

@@ -1,50 +1,68 @@
-type QueryFilterOperator = "<" | "<=" | ">" | ">=" | ":" | "!:" | "=" | "!=" | "^" | "!^" | (string & {});
-type QueryFilterOperation = "and" | "or";
-type QueryFilterToken = {
+type OperatorT = "<" | "<=" | ">" | ">=" | ":" | "!:" | "=" | "!=" | "^" | "!^" | (string & {});
+type OperationT = "and" | "or";
+type ExternalToken = {
     propertyKey: string;
-    operator: QueryFilterOperator;
-    value: any;
+    operator: OperatorT;
+    value: string;
 };
-type QueryFilterQuery = {
-    tokens: QueryFilterToken[];
-    operation: QueryFilterOperation;
+type ExternalQuery = {
+    tokens: ExternalToken[];
+    operation: OperationT;
 };
-type QueryFilteringOption = {
+type ExternalOption = {
     propertyKey: string;
-    value: any;
+    value: string;
     label?: string;
     tags?: string[];
     disabled?: boolean;
 };
-type QueryFilteringOptions = QueryFilteringOption[];
-type QueryFilteringOptionGroup = {
+type ExternalOptions = ExternalOption[];
+type ExternalPropertyGroup = {
     label: string;
-    options: QueryFilteringOptions;
+    options: ExternalOptions;
 };
-type QueryFilteringScopedOperator = string | {
+type ExternalPropertyDefinition = {
+    key: string;
+    label: string;
+    groupLabel?: string;
+    group?: string;
+    operators?: ExternalPropertyOperator[];
+};
+type ExternalPropertyDefinitions = ExternalPropertyDefinition[];
+type ExternalPropertyOperator = string | {
     operator: string;
-    tokenType: "single" | "multiple";
+    type: "single" | "multiple";
 };
-type QueryFilteringProperty = {
+export type { ExternalOption, ExternalOptions, ExternalPropertyDefinition, ExternalPropertyDefinitions, ExternalPropertyGroup, ExternalQuery, ExternalToken, OperationT, OperatorT, };
+type InternalPropertyDefinition = {
     key: string;
-    propertyLabel: string;
-    groupValuesLabel?: string;
-    group?: string;
-    operators?: QueryFilteringScopedOperator[];
+    label: string;
+    groupLabel: string;
+    group: string;
+    operators: ExternalPropertyOperator[];
+    externalProperty: ExternalPropertyDefinition;
 };
-type QueryFilteringProperties = QueryFilteringProperty[];
-type ParsedProperty = {
-    propertyKey: string;
-    propertyLabel: string;
-    groupValuesLabel: string;
-    propertyGroup: string;
-    operators: QueryFilteringScopedOperator[];
-    externalProperty: QueryFilteringProperty;
-};
-type ParsedOption = {
-    property: ParsedProperty | null;
-    value: any;
+type InternalPropertyOption = {
+    property: InternalPropertyDefinition | null;
+    value: string;
     label: string;
     tags: string[];
 };
-export type { QueryFilterOperator, QueryFilterQuery, QueryFilteringOptions, QueryFilteringProperty, QueryFilterOperation, QueryFilteringProperties, ParsedProperty, ParsedOption, QueryFilteringOption, QueryFilteringOptionGroup, };
+type InternalParsedTextState = {
+    /** User has typed property + complete operator + value (e.g., "Status != active") */
+    step: "property";
+    property: InternalPropertyDefinition;
+    operator: OperatorT;
+    value: string;
+} | {
+    /** User is typing the operator after property (e.g., "Status !") */
+    step: "operator";
+    property: InternalPropertyDefinition;
+    operatorPrefix: string;
+} | {
+    /** No property match; treat as free-text search */
+    step: "free-text";
+    value: string;
+    operator?: OperatorT;
+};
+export type { InternalPropertyDefinition, InternalPropertyOption, InternalParsedTextState, };