@navikt/ds-react 8.6.0 → 8.8.0

package/cjs/data/table/th/useTableColumnResize.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableColumnResize = useTableColumnResize;
+const react_1 = require("react");
+const hooks_1 = require("../../../utils/hooks");
+const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
+/**
+ * TODO:
+ * - Do we allow % widths?
+ * - Auto-width mode is hard now since that might cause layout-shifts on mount. But would be preferable to
+ * be able to set "1fr" or similar and have it fill remaining space.
+ */
+function useTableColumnResize(args) {
+    const { ref, width: userWidth, defaultWidth, onWidthChange, maxWidth = Infinity, minWidth = 40, style, colSpan, } = args;
+    const tableContext = (0, DataTableRoot_context_1.useDataTableContext)();
+    const [width, _setWidth] = (0, hooks_1.useControllableState)({
+        value: userWidth,
+        defaultValue: defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : (colSpan !== null && colSpan !== void 0 ? colSpan : 1) * 140,
+        /**
+         * TODO:
+         * - Potential optimization: Only call when width as "stopped" changing, e.g. on mouse up or after a debounce when resizing with keyboard.
+         * Otherwise, this could cause excessive calls when resizing quickly.
+         */
+        onChange: onWidthChange,
+    });
+    const [isResizingWithKeyboard, setIsResizingWithKeyboard] = (0, react_1.useState)(false);
+    const [, setIsResizingWithMouse] = (0, react_1.useState)(false);
+    const setWidth = (0, react_1.useCallback)((newWidth) => {
+        var _a, _b;
+        const currentWidth = ref === null || ref === void 0 ? void 0 : ref.offsetWidth;
+        if (!currentWidth) {
+            return;
+        }
+        const min = (_a = parseWidth(minWidth)) !== null && _a !== void 0 ? _a : 0;
+        const max = (_b = parseWidth(maxWidth)) !== null && _b !== void 0 ? _b : Infinity;
+        const clamped = Math.min(Math.max(newWidth, min), max);
+        if (newWidth <= currentWidth && newWidth > max) {
+            _setWidth(newWidth);
+            return;
+        }
+        if (newWidth >= currentWidth && newWidth > max) {
+            _setWidth(currentWidth);
+            return;
+        }
+        _setWidth(clamped);
+    }, [minWidth, maxWidth, _setWidth, ref]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            setIsResizingWithKeyboard((prev) => !prev);
+            return;
+        }
+        if (!isResizingWithKeyboard) {
+            return;
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            event.preventDefault();
+            const th = event.target.closest("th");
+            const startWidth = th.offsetWidth;
+            const delta = event.key === "ArrowRight" ? 20 : -20;
+            setWidth(startWidth + delta);
+        }
+    }, [isResizingWithKeyboard, setWidth]);
+    const startResize = (0, react_1.useCallback)((th, startX) => {
+        setIsResizingWithMouse(true);
+        const startWidth = th.offsetWidth;
+        function onPointerMove(clientX) {
+            setWidth(startWidth + (clientX - startX));
+        }
+        function onMouseMove(e) {
+            onPointerMove(e.clientX);
+        }
+        function onTouchMove(e) {
+            e.preventDefault();
+            onPointerMove(e.touches[0].clientX);
+        }
+        function cleanup() {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("touchmove", onTouchMove);
+            document.removeEventListener("mouseup", cleanup);
+            document.removeEventListener("touchend", cleanup);
+            document.removeEventListener("touchcancel", cleanup);
+            setIsResizingWithMouse(false);
+        }
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("touchmove", onTouchMove, { passive: false });
+        document.addEventListener("mouseup", cleanup);
+        document.addEventListener("touchend", cleanup);
+        document.addEventListener("touchcancel", cleanup);
+    }, [setWidth]);
+    const handleMouseDown = (0, react_1.useCallback)((event) => {
+        const th = event.target.closest("th");
+        startResize(th, event.clientX);
+    }, [startResize]);
+    const handleTouchStart = (0, react_1.useCallback)((event) => {
+        const th = event.target.closest("th");
+        startResize(th, event.touches[0].clientX);
+    }, [startResize]);
+    /**
+     * TODO: Do we even want this?
+     * - + 32px padding is hardcoded now, fix this
+     * - Need to find widest element in column, not the header itself.
+     * - Should doubleclick just reset to defaultWidth? Or add a autoWidth prop.
+     */
+    const handleDoubleClick = (0, react_1.useCallback)((event) => {
+        const th = event.target.closest("th");
+        const contentEl = th.getElementsByClassName("aksel-data-table__th-content")[0];
+        const range = document.createRange();
+        range.selectNodeContents(contentEl);
+        const contentWidth = range.getBoundingClientRect().width;
+        setWidth(contentWidth + 32);
+    }, [setWidth]);
+    if (tableContext.layout !== "fixed") {
+        return {
+            style,
+            enabled: false,
+        };
+    }
+    return {
+        style: Object.assign(Object.assign({}, style), { width }),
+        resizeHandlerProps: {
+            onMouseDown: handleMouseDown,
+            onTouchStart: handleTouchStart,
+            onKeyDown: handleKeyDown,
+            onBlur: () => setIsResizingWithKeyboard(false),
+            onDoubleClick: handleDoubleClick,
+        },
+        isResizingWithKeyboard,
+        enabled: true,
+    };
+}
+function parseWidth(width) {
+    if (width == null) {
+        return undefined;
+    }
+    if (typeof width === "number") {
+        return width;
+    }
+    if (typeof width === "string") {
+        const parsed = parseInt(width, 10);
+        return Number.isNaN(parsed) ? undefined : parsed;
+    }
+    return undefined;
+}
+//# sourceMappingURL=useTableColumnResize.js.map

package/cjs/data/table/th/useTableColumnResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableColumnResize.js","sourceRoot":"","sources":["../../../../src/data/table/th/useTableColumnResize.ts"],"names":[],"mappings":";;AAkRS,oDAAoB;AAlR7B,iCAAkE;AAClE,gDAA4D;AAC5D,yEAAoE;AA8DpE;;;;;GAKG;AACH,SAAS,oBAAoB,CAC3B,IAA2B;IAE3B,MAAM,EACJ,GAAG,EACH,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,QAAQ,GAAG,QAAQ,EACnB,QAAQ,GAAG,EAAE,EACb,KAAK,EACL,OAAO,GACR,GAAG,IAAI,CAAC;IAET,MAAM,YAAY,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAE3C,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAG,IAAA,4BAAoB,EAAC;QAC9C,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,CAAC,CAAC,GAAG,GAAG;QAClD;;;;WAIG;QACH,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5E,MAAM,CAAC,EAAE,sBAAsB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,QAAgB,EAAE,EAAE;;QACnB,MAAM,YAAY,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,WAAW,CAAC;QACtC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,CAAC,CAAC;QACtC,MAAM,GAAG,GAAG,MAAA,UAAU,CAAC,QAAQ,CAAC,mCAAI,QAAQ,CAAC;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;QAEvD,IAAI,QAAQ,IAAI,YAAY,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;YAC/C,SAAS,CAAC,QAAQ,CAAC,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,QAAQ,IAAI,YAAY,IAAI,QAAQ,GAAG,GAAG,EAAE,CAAC;YAC/C,SAAS,CAAC,YAAY,CAAC,CAAC;YACxB,OAAO;QACT,CAAC;QAED,SAAS,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,CAAC,CACrC,CAAC;IAEF,MAAM,aAAa,GACjB,IAAA,mBAAW,EACT,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,yBAAyB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;YAC3C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE,CAAC;YAC5D,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;YAC1B,MAAM,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC;YAElC,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CACnC,CAAC;IAEJ,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,EAAwB,EAAE,MAAc,EAAE,EAAE;QAC3C,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,MAAM,UAAU,GAAG,EAAE,CAAC,WAAW,CAAC;QAElC,SAAS,aAAa,CAAC,OAAe;YACpC,QAAQ,CAAC,UAAU,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC;QAC5C,CAAC;QAED,SAAS,WAAW,CAAC,CAAa;YAChC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC;QAED,SAAS,WAAW,CAAC,CAAa;YAChC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAED,SAAS,OAAO;YACd,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACjD,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;YAClD,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YACrD,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACxE,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC9C,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,eAAe,GACnB,IAAA,mBAAW,EACT,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;QAC1B,WAAW,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEJ,MAAM,gBAAgB,GACpB,IAAA,mBAAW,EACT,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;QAC1B,WAAW,CAAC,EAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEJ;;;;;OAKG;IACH,MAAM,iBAAiB,GACrB,IAAA,mBAAW,EACT,CAAC,KAAK,EAAE,EAAE;QACR,MAAM,EAAE,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAC9C,IAAI,CACmB,CAAC;QAE1B,MAAM,SAAS,GAAG,EAAE,CAAC,sBAAsB,CACzC,8BAA8B,CAC/B,CAAC,CAAC,CAAC,CAAC;QACL,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,YAAY,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAEzD,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEJ,IAAI,YAAY,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QACpC,OAAO;YACL,KAAK;YACL,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;IAED,OAAO;QACL,KAAK,kCACA,KAAK,KACR,KAAK,GACN;QACD,kBAAkB,EAAE;YAClB,WAAW,EAAE,eAAe;YAC5B,YAAY,EAAE,gBAAgB;YAC9B,SAAS,EAAE,aAAa;YACxB,MAAM,EAAE,GAAG,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC;YAC9C,aAAa,EAAE,iBAAiB;SACjC;QACD,sBAAsB;QACtB,OAAO,EAAE,IAAI;KACd,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,KAA8B;IAChD,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;QAClB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACnC,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACnD,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/cjs/data/table/thead/DataTableThead.context.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const DataTableTheadContext: React.Context<boolean>;
+declare function useDataTableThead(): boolean;
+export { DataTableTheadContext, useDataTableThead };

package/cjs/data/table/thead/DataTableThead.context.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableTheadContext = void 0;
+exports.useDataTableThead = useDataTableThead;
+const react_1 = __importStar(require("react"));
+const DataTableTheadContext = (0, react_1.createContext)(false);
+exports.DataTableTheadContext = DataTableTheadContext;
+function useDataTableThead() {
+    const context = react_1.default.useContext(DataTableTheadContext);
+    return context;
+}
+//# sourceMappingURL=DataTableThead.context.js.map

package/cjs/data/table/thead/DataTableThead.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableThead.context.js","sourceRoot":"","sources":["../../../../src/data/table/thead/DataTableThead.context.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASgC,8CAAiB;AATjD,+CAA6C;AAE7C,MAAM,qBAAqB,GAAG,IAAA,qBAAa,EAAU,KAAK,CAAC,CAAC;AAOnD,sDAAqB;AAL9B,SAAS,iBAAiB;IACxB,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IACxD,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/cjs/data/table/thead/DataTableThead.js

@@ -47,9 +47,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableThead = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
+const DataTableThead_context_1 = require("./DataTableThead.context");
 const DataTableThead = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("thead", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__thead", className) })));
+    return (react_1.default.createElement(DataTableThead_context_1.DataTableTheadContext.Provider, { value: true },
+        react_1.default.createElement("thead", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__thead", className) }))));
 });
 exports.DataTableThead = DataTableThead;
 //# sourceMappingURL=DataTableThead.js.map

package/cjs/data/table/thead/DataTableThead.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableThead.js","sourceRoot":"","sources":["../../../../src/data/table/thead/DataTableThead.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAI5C,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}
+{"version":3,"file":"DataTableThead.js","sourceRoot":"","sources":["../../../../src/data/table/thead/DataTableThead.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,qEAAiE;AAIjE,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,8BAAC,8CAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI;QACzC,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CAC6B,CAClC,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}

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

@@ -47,11 +47,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableTr = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
+const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
 const DataTableTr = (0, react_1.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 { layout } = (0, DataTableRoot_context_1.useDataTableContext)();
+    const renderFillerCell = layout === "fixed" && children;
     return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__tr", className, {
             "aksel-data-table__tr--selected": selected,
-        }) })));
+        }) }),
+        children,
+        renderFillerCell && (
+        /* TODO: Consider chaning between th and td based on context */
+        /* using div causes illegal dom structure */
+        react_1.default.createElement("td", { "aria-hidden": true, className: "aksel-data-table__th aksel-data-table__filler-cell", "data-block-keyboard-nav": true }))));
 });
 exports.DataTableTr = DataTableTr;
 //# sourceMappingURL=DataTableTr.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAM5C,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAwC,EAAE,YAAY,EAAE,EAAE;QAA1D,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAtC,yBAAwC,CAAF;IACrC,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,gCAAgC,EAAE,QAAQ;SAC3C,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}
+{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,yEAAoE;AAMpE,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAkD,EAAE,YAAY,EAAE,EAAE;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAhD,qCAAkD,CAAF;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAEzC,MAAM,gBAAgB,GAAG,MAAM,KAAK,OAAO,IAAI,QAAQ,CAAC;IAExD,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,gCAAgC,EAAE,QAAQ;SAC3C,CAAC;QAED,QAAQ;QACR,gBAAgB,IAAI;QACnB,+DAA+D;QAC/D,4CAA4C;QAC5C,2DAEE,SAAS,EAAC,oDAAoD,oCAE9D,CACH,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}

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

@@ -2,8 +2,12 @@ import React from "react";
 import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types";
 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/cjs/data/token-filter/AutoSuggest.js

@@ -32,22 +32,55 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoSuggest = void 0;
 const react_1 = __importStar(require("react"));
-const box_1 = require("../../primitives/box");
+const search_1 = require("../../form/search");
 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) => {
-            return (react_1.default.createElement("div", { key: option.value },
-                react_1.default.createElement("button", { type: "button", onClick: () => onSelect(option.value) },
-                    react_1.default.createElement("span", null, option.label),
-                    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))))))));
-        })))))));
+const ListboxRoot_1 = __importDefault(require("../../utils/components/Listbox/root/ListboxRoot"));
+const DismissableLayer_1 = require("../../utils/components/dismissablelayer/DismissableLayer");
+const Floating_1 = require("../../utils/components/floating/Floating");
+const hooks_1 = require("../../utils/hooks");
+const AutoSuggest = (0, react_1.forwardRef)(({ options, onSelect, value, onChange, open, setOpen }, ref) => {
+    const [virtuallyFocusedOptionId, setVirtuallyFocusedOptionId] = (0, react_1.useState)("");
+    const [inputRef, setInputRef] = (0, react_1.useState)(null);
+    /* Unsure why N version works, but not regular here */
+    const mergedRef = (0, hooks_1.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_1.default.createElement(Floating_1.Floating, null,
+        react_1.default.createElement(ListboxRoot_1.default, { setVirtuallyFocusedOptionId: setVirtuallyFocusedOptionId },
+            react_1.default.createElement(Floating_1.Floating.Anchor, null,
+                react_1.default.createElement(ListboxRoot_1.default.InputSlot, null,
+                    react_1.default.createElement(search_1.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_1.default.createElement(AutoSuggestPopup, { options: options, onSelect: handleSelectOption, focusedValue: virtuallyFocusedOptionId, setFocusedValue: setVirtuallyFocusedOptionId, onClose: handleClose, safeZoneAnchor: inputRef })))));
 });
 exports.AutoSuggest = AutoSuggest;
+const AutoSuggestPopup = (0, react_1.forwardRef)(({ options, onSelect, focusedValue, setFocusedValue, onClose, safeZoneAnchor, }, ref) => {
+    return (react_1.default.createElement(DismissableLayer_1.DismissableLayer, { asChild: true, onDismiss: onClose, safeZone: { anchor: safeZoneAnchor } },
+        react_1.default.createElement(Floating_1.Floating.Content, { ref: ref, align: "start", side: "bottom", fallbackPlacements: [], sideOffset: 8, className: "aksel-property-filter__popup" },
+            react_1.default.createElement("div", { className: "aksel-property-filter__popup-inner" },
+                react_1.default.createElement(ListboxRoot_1.default.Options, { setVirtuallyFocusedOptionId: setFocusedValue }, options.map((group) => (react_1.default.createElement(ListboxRoot_1.default.Group, { key: group.label, label: group.label }, group.options.map((item) => (react_1.default.createElement(ListboxRoot_1.default.Option, { key: item.value, id: item.value, onClick: () => onSelect(item), hasVirtualFocus: focusedValue === item.value },
+                    react_1.default.createElement(stack_1.VStack, { gap: "space-0" },
+                        react_1.default.createElement(typography_1.Label, { as: "div" }, item.label),
+                        item.description && (react_1.default.createElement(typography_1.Detail, { as: "div" }, item.description))))))))))))));
+});
 //# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;oBAErC,4CAAO,MAAM,CAAC,KAAK,CAAQ;oBAC1B,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"}
+{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import React from "react";
-import type { QueryFilterQuery, QueryFilteringOptions, QueryFilteringProperties } from "./TokenFilter.types";
+import type { ExternalOptions, ExternalPropertyDefinitions, ExternalQuery } from "./TokenFilter.types";
 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/cjs/data/token-filter/TokenFilter.js

@@ -35,7 +35,8 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TokenFilter = void 0;
 const react_1 = __importStar(require("react"));
-const popover_1 = require("../../popover");
+const chips_1 = require("../../chips");
+const stack_1 = require("../../primitives/stack");
 const helpers_1 = require("../../utils/helpers");
 const AutoSuggest_1 = require("./AutoSuggest");
 const generate_autocomplete_options_1 = require("./helpers/generate-autocomplete-options");
@@ -45,57 +46,119 @@ const parse_query_text_1 = require("./helpers/parse-query-text");
  * - 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).
  */
-exports.TokenFilter = (0, react_1.forwardRef)(({ query, className, filteringProperties, filteringOptions }, ref) => {
-    const [inputAnchor, setInputAnchor] = (0, react_1.useState)(null);
+exports.TokenFilter = (0, react_1.forwardRef)(({ query, className, propertyDefinitions, options, onChange }, ref) => {
     const [filterText, setFilterText] = (0, react_1.useState)("");
-    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) => {
-        setFilterText(value);
-        setCustomOpen(false);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const { parsedPropertyDefinitions, parsedPropertyOptions } = derrivedFilterState(propertyDefinitions, options);
+    const queryState = (0, parse_query_text_1.parseQueryText)(filterText, parsedPropertyDefinitions);
+    const autoCompleteOptions = (0, generate_autocomplete_options_1.generateAutoCompleteOptions)(queryState, parsedPropertyDefinitions, parsedPropertyOptions);
+    const { addToken, removeToken } = createActionHandlers({
+        query,
+        onChange,
+    });
+    const createToken = (newText) => {
+        const newQueryState = (0, parse_query_text_1.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 = (0, parse_query_text_1.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] = (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), 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, { 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),
-                " ",
-                token.operator,
-                " "));
-        }),
-        react_1.default.createElement("ul", null, filteringProperties.map((prop) => (react_1.default.createElement("li", { key: prop.key }, prop.propertyLabel)))),
-        react_1.default.createElement("pre", null, JSON.stringify(autoCompleteOptions, null, 2))));
+        react_1.default.createElement(AutoSuggest_1.AutoSuggest, { onSelect: handleSelectOption, options: autoCompleteOptions.options, value: filterText, onChange: setFilterText, open: open, setOpen: setOpen }),
+        react_1.default.createElement(stack_1.HStack, { marginBlock: "space-8", gap: "space-8" }, query.tokens.map((token, index) => {
+            return (react_1.default.createElement(react_1.default.Fragment, { key: `${token.propertyKey}-${token.operator}-${token.value}-${index}` },
+                react_1.default.createElement(chips_1.Chips.Removable, { key: index, onClick: () => {
+                        removeToken(index);
+                    } }, `${token.propertyKey} ${token.operator} ${token.value}`),
+                index < query.tokens.length - 1 && (react_1.default.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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,uCAAoC;AACpC,kDAAgD;AAChD,iDAAyC;AACzC,+CAA4C;AAW5C,2FAAsF;AACtF,iEAA4D;AAU5D;;;;GAIG;AACU,QAAA,WAAW,GAAG,IAAA,kBAAU,EACnC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,GACxD,mBAAmB,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,IAAA,iCAAc,EAAC,UAAU,EAAE,yBAAyB,CAAC,CAAC;IAEzE,MAAM,mBAAmB,GAAG,IAAA,2DAA2B,EACrD,UAAU,EACV,yBAAyB,EACzB,qBAAqB,CACtB,CAAC;IAEF,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,oBAAoB,CAAC;QACrD,KAAK;QACL,QAAQ;KACT,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,CAAC,OAAe,EAAW,EAAE;QAC/C,MAAM,aAAa,GAAG,IAAA,iCAAc,EAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC;QAEzE,IAAI,QAAQ,GAAyB,IAAI,CAAC;QAE1C,QAAQ,aAAa,CAAC,IAAI,EAAE,CAAC;YAC3B,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,IAAI,aAAa,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;oBAC/B,OAAO,KAAK,CAAC;gBACf,CAAC;gBACD,QAAQ,GAAG;oBACT,WAAW,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG;oBACvC,QAAQ,EAAE,aAAa,CAAC,QAAQ;oBAChC,KAAK,EAAE,aAAa,CAAC,KAAK;iBAC3B,CAAC;gBACF,MAAM;YACR,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,MAAM;YACR,CAAC;QACH,CAAC;QACD,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,aAAa,CAAC,EAAE,CAAC,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,MAA0B,EAAE,EAAE;QACxD,MAAM,aAAa,GAAG,IAAA,iCAAc,EAClC,MAAM,CAAC,KAAK,EACZ,yBAAyB,CAC1B,CAAC;QAEF,IACE,CAAC,aAAa,CAAC,IAAI,KAAK,UAAU,IAAI,aAAa,CAAC,KAAK,KAAK,EAAE,CAAC;YACjE,aAAa,CAAC,IAAI,KAAK,UAAU,EACjC,CAAC;YACD,2CAA2C;YAC3C,uCAAuC;YACvC,aAAa,CAAC,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;YAClC,OAAO,KAAK,CAAC;QACf,CAAC;QACD,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,OAAO,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,uCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,YAAE,EAAC,uBAAuB,EAAE,SAAS,CAAC,EACjD,IAAI,EAAC,QAAQ;QAEb,8BAAC,yBAAW,IACV,QAAQ,EAAE,kBAAkB,EAC5B,OAAO,EAAE,mBAAmB,CAAC,OAAO,EACpC,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB;QACF,8BAAC,cAAM,IAAC,WAAW,EAAC,SAAS,EAAC,GAAG,EAAC,SAAS,IACxC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACjC,OAAO,CACL,8BAAC,eAAK,CAAC,QAAQ,IACb,GAAG,EAAE,GAAG,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,EAAE;gBAErE,8BAAC,aAAK,CAAC,SAAS,IACd,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE;wBACZ,WAAW,CAAC,KAAK,CAAC,CAAC;oBACrB,CAAC,IAEA,GAAG,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,EAAE,CACxC;gBACjB,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAClC,4CAAO,KAAK,CAAC,SAAS,CAAQ,CAC/B,CACc,CAClB,CAAC;QACJ,CAAC,CAAC,CACK,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,mBAAmB,CAC1B,mBAAgD,EAChD,eAAgC;;IAKhC,MAAM,WAAW,GAAG,IAAI,GAAG,EAAsC,CAAC;IAElE,KAAK,MAAM,QAAQ,IAAI,mBAAmB,EAAE,CAAC;QAC3C,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;YAC5B,GAAG,EAAE,QAAQ,CAAC,GAAG;YACjB,KAAK,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,mCAAI,EAAE;YAC5B,UAAU,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,mCAAI,EAAE;YACtC,KAAK,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,mCAAI,EAAE;YAC5B,SAAS,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,mCAAI,EAAE;YACpC,gBAAgB,EAAE,QAAQ;SAC3B,CAAC,CAAC;IACL,CAAC;IAED,MAAM,eAAe,GAA6B,EAAE,CAAC;IAErD,KAAK,MAAM,MAAM,IAAI,eAAe,EAAE,CAAC;QACrC,eAAe,CAAC,IAAI,CAAC;YACnB,QAAQ,EAAE,MAAA,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,mCAAI,IAAI;YACrD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAA,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,mCAAI,EAAE;YACzC,IAAI,EAAE,MAAA,MAAM,CAAC,IAAI,mCAAI,EAAE;SACxB,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,yBAAyB,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;QACpD,qBAAqB,EAAE,eAAe;KACvC,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,YAAY,GAAG,CAAC,QAAuB,EAAE,EAAE;QAC/C,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;QACxC,YAAY,iCAAM,KAAK,KAAE,MAAM,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,IAAG,CAAC;IAC/D,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,WAAmB,EAAE,YAA2B,EAAE,EAAE;QACvE,YAAY,iCACP,KAAK,KACR,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACxC,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAC7C,IACD,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,SAAqB,EAAE,EAAE;QAChD,YAAY,iCAAM,KAAK,KAAE,SAAS,IAAG,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,WAAmB,EAAE,EAAE;QAC1C,YAAY,iCACP,KAAK,KACR,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,WAAW,CAAC,IAChE,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,YAAY,iCAAM,KAAK,KAAE,MAAM,EAAE,EAAE,IAAG,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,WAAW;QACX,eAAe;QACf,WAAW;QACX,eAAe;KAChB,CAAC;AACJ,CAAC"}