@webiny/admin-ui 0.0.0-unstable.a4f3e4ea8b → 0.0.0-unstable.a85ef555b2

package/Checkbox/primitives/presenters/CheckboxPresenter.jsxLabel.test.js

@@ -0,0 +1,61 @@
+import react from "react";
+import { describe, expect, it, vi } from "vitest";
+import { CheckboxPresenter } from "./CheckboxPresenter.js";
+const createCyclicLabel = ()=>{
+    const fiber = {
+        tag: 0
+    };
+    fiber.return = fiber;
+    fiber.child = fiber;
+    const element = react.createElement("span", null, "Card");
+    return {
+        ...element,
+        _owner: fiber
+    };
+};
+describe("CheckboxPresenter with a React node label", ()=>{
+    it("keeps the label by reference and does not overflow the stack", ()=>{
+        const label = createCyclicLabel();
+        const presenter = new CheckboxPresenter();
+        const init = ()=>{
+            presenter.init({
+                onCheckedChange: vi.fn(),
+                id: "box",
+                label,
+                checked: true
+            });
+        };
+        expect(init).not.toThrow();
+        expect(presenter.vm.item?.label).toBe(label);
+        expect(presenter.vm.item?.hasLabel).toBe(true);
+        expect(presenter.vm.item?.checked).toBe(true);
+    });
+    it("still reports a change", ()=>{
+        const onCheckedChange = vi.fn();
+        const label = createCyclicLabel();
+        const presenter = new CheckboxPresenter();
+        presenter.init({
+            onCheckedChange,
+            label
+        });
+        presenter.changeChecked(true);
+        expect(onCheckedChange).toHaveBeenCalledWith(true);
+    });
+    it("recomputes the item when init is called again", ()=>{
+        const label = createCyclicLabel();
+        const presenter = new CheckboxPresenter();
+        presenter.init({
+            onCheckedChange: vi.fn(),
+            label,
+            checked: false
+        });
+        presenter.init({
+            onCheckedChange: vi.fn(),
+            label,
+            checked: true
+        });
+        expect(presenter.vm.item?.checked).toBe(true);
+    });
+});
+
+//# sourceMappingURL=CheckboxPresenter.jsxLabel.test.js.map

package/Checkbox/primitives/presenters/CheckboxPresenter.jsxLabel.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox/primitives/presenters/CheckboxPresenter.jsxLabel.test.js","sources":["../../../../src/Checkbox/primitives/presenters/CheckboxPresenter.jsxLabel.test.ts"],"sourcesContent":["import React from \"react\";\nimport { describe } from \"vitest\";\nimport { expect } from \"vitest\";\nimport { it } from \"vitest\";\nimport { vi } from \"vitest\";\nimport { CheckboxPresenter } from \"./CheckboxPresenter.js\";\n\n/*\n * A React element created during a render points at its owner fiber, and a fiber points back at\n * its parent and children. A deep observable walks that whole cycle and overflows the stack.\n */\nconst createCyclicLabel = () => {\n    const fiber: Record<string, unknown> = { tag: 0 };\n    fiber.return = fiber;\n    fiber.child = fiber;\n    const element = React.createElement(\"span\", null, \"Card\");\n    return { ...element, _owner: fiber };\n};\n\ndescribe(\"CheckboxPresenter with a React node label\", () => {\n    it(\"keeps the label by reference and does not overflow the stack\", () => {\n        const label = createCyclicLabel();\n        const presenter = new CheckboxPresenter();\n\n        const init = () => {\n            presenter.init({ onCheckedChange: vi.fn(), id: \"box\", label, checked: true });\n        };\n\n        expect(init).not.toThrow();\n        expect(presenter.vm.item?.label).toBe(label);\n        expect(presenter.vm.item?.hasLabel).toBe(true);\n        expect(presenter.vm.item?.checked).toBe(true);\n    });\n\n    it(\"still reports a change\", () => {\n        const onCheckedChange = vi.fn();\n        const label = createCyclicLabel();\n        const presenter = new CheckboxPresenter();\n        presenter.init({ onCheckedChange, label });\n\n        presenter.changeChecked(true);\n\n        expect(onCheckedChange).toHaveBeenCalledWith(true);\n    });\n\n    it(\"recomputes the item when init is called again\", () => {\n        const label = createCyclicLabel();\n        const presenter = new CheckboxPresenter();\n        presenter.init({ onCheckedChange: vi.fn(), label, checked: false });\n        presenter.init({ onCheckedChange: vi.fn(), label, checked: true });\n\n        expect(presenter.vm.item?.checked).toBe(true);\n    });\n});\n"],"names":["createCyclicLabel","fiber","element","React","describe","it","label","presenter","CheckboxPresenter","init","vi","expect","onCheckedChange"],"mappings":";;;AAWA,MAAMA,oBAAoB;IACtB,MAAMC,QAAiC;QAAE,KAAK;IAAE;IAChDA,MAAM,MAAM,GAAGA;IACfA,MAAM,KAAK,GAAGA;IACd,MAAMC,UAAUC,MAAAA,aAAmB,CAAC,QAAQ,MAAM;IAClD,OAAO;QAAE,GAAGD,OAAO;QAAE,QAAQD;IAAM;AACvC;AAEAG,SAAS,6CAA6C;IAClDC,GAAG,gEAAgE;QAC/D,MAAMC,QAAQN;QACd,MAAMO,YAAY,IAAIC;QAEtB,MAAMC,OAAO;YACTF,UAAU,IAAI,CAAC;gBAAE,iBAAiBG,GAAG,EAAE;gBAAI,IAAI;gBAAOJ;gBAAO,SAAS;YAAK;QAC/E;QAEAK,OAAOF,MAAM,GAAG,CAAC,OAAO;QACxBE,OAAOJ,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,IAAI,CAACD;QACtCK,OAAOJ,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,IAAI,CAAC;QACzCI,OAAOJ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,IAAI,CAAC;IAC5C;IAEAF,GAAG,0BAA0B;QACzB,MAAMO,kBAAkBF,GAAG,EAAE;QAC7B,MAAMJ,QAAQN;QACd,MAAMO,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAEK;YAAiBN;QAAM;QAExCC,UAAU,aAAa,CAAC;QAExBI,OAAOC,iBAAiB,oBAAoB,CAAC;IACjD;IAEAP,GAAG,iDAAiD;QAChD,MAAMC,QAAQN;QACd,MAAMO,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YAAE,iBAAiBG,GAAG,EAAE;YAAIJ;YAAO,SAAS;QAAM;QACjEC,UAAU,IAAI,CAAC;YAAE,iBAAiBG,GAAG,EAAE;YAAIJ;YAAO,SAAS;QAAK;QAEhEK,OAAOJ,UAAU,EAAE,CAAC,IAAI,EAAE,SAAS,IAAI,CAAC;IAC5C;AACJ"}

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js

@@ -1,4 +1,4 @@
-import { makeAutoObservable } from "mobx";
+import { makeAutoObservable, observableRef } from "mobx";
 import { CheckboxItem } from "../../../Checkbox/domains/CheckboxItem.js";
 import { CheckboxItemMapper } from "../../../Checkbox/domains/CheckboxItemMapper.js";
 class CheckboxGroupPresenter {
@@ -14,7 +14,10 @@ class CheckboxGroupPresenter {
             this.items = this.getItems(this.params.items, newValues);
             this.params.onCheckedChange?.(newValues);
         };
-        makeAutoObservable(this);
+        makeAutoObservable(this, {
+            params: observableRef,
+            items: observableRef
+        });
     }
     init(params) {
         this.params = params;

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js","sources":["../../../../src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CheckboxGroupPrimitiveVm } from \"../CheckboxGroupPrimitive.js\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem.js\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper.js\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\n\ninterface CheckboxGroupPresenterParams<TValue = string | number> {\n    items: CheckboxItemDto[];\n    values: TValue[];\n    onCheckedChange?: (values: TValue[]) => void;\n}\n\ninterface ICheckboxGroupPresenter<TValue = string | number> {\n    vm: CheckboxGroupPrimitiveVm;\n    init: (params: CheckboxGroupPresenterParams<TValue>) => void;\n    changeChecked: (value: TValue) => void;\n}\n\nclass CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {\n    private params?: CheckboxGroupPresenterParams<TValue> = undefined;\n    private items: CheckboxItem[] = [];\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init(params: CheckboxGroupPresenterParams<TValue>): void {\n        this.params = params;\n        this.items = this.getItems(params.items, params.values);\n    }\n\n    get vm(): CheckboxGroupPrimitiveVm {\n        return {\n            items: this.items.map(item => CheckboxItemMapper.toFormatted(item))\n        };\n    }\n\n    public changeChecked = (value: TValue) => {\n        if (!this.params?.items) {\n            return;\n        }\n\n        const currentValues = [...this.params.values];\n        const newValues = this.getUpdatedValues(currentValues, value);\n        this.items = this.getItems(this.params.items, newValues);\n        this.params.onCheckedChange?.(newValues);\n    };\n\n    private getUpdatedValues(currentValues: TValue[], value: TValue): TValue[] {\n        const index = currentValues.indexOf(value);\n\n        if (index > -1) {\n            return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];\n        }\n\n        return [...currentValues, value];\n    }\n\n    private getItems(items: CheckboxItemDto[], values: TValue[]): CheckboxItem[] {\n        if (!items.length) {\n            return [];\n        }\n\n        return items.map(item =>\n            CheckboxItem.create({\n                ...item,\n                checked: values.some(value => value === item.value)\n            })\n        );\n    }\n}\n\nexport { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };\n"],"names":["CheckboxGroupPresenter","undefined","value","currentValues","newValues","makeAutoObservable","params","item","CheckboxItemMapper","index","items","values","CheckboxItem"],"mappings":";;;AAkBA,MAAMA;IAIF,aAAc;aAHN,MAAM,GAA0CC;aAChD,KAAK,GAAmB,EAAE;aAiB3B,aAAa,GAAG,CAACC;YACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OACd;YAGJ,MAAMC,gBAAgB;mBAAI,IAAI,CAAC,MAAM,CAAC,MAAM;aAAC;YAC7C,MAAMC,YAAY,IAAI,CAAC,gBAAgB,CAACD,eAAeD;YACvD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAEE;YAC9C,IAAI,CAAC,MAAM,CAAC,eAAe,GAAGA;QAClC;QAvBIC,mBAAmB,IAAI;IAC3B;IAEO,KAAKC,MAA4C,EAAQ;QAC5D,IAAI,CAAC,MAAM,GAAGA;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAACA,OAAO,KAAK,EAAEA,OAAO,MAAM;IAC1D;IAEA,IAAI,KAA+B;QAC/B,OAAO;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC,CAAAA,OAAQC,mBAAmB,WAAW,CAACD;QACjE;IACJ;IAaQ,iBAAiBJ,aAAuB,EAAED,KAAa,EAAY;QACvE,MAAMO,QAAQN,cAAc,OAAO,CAACD;QAEpC,IAAIO,QAAQ,IACR,OAAO;eAAIN,cAAc,KAAK,CAAC,GAAGM;eAAWN,cAAc,KAAK,CAACM,QAAQ;SAAG;QAGhF,OAAO;eAAIN;YAAeD;SAAM;IACpC;IAEQ,SAASQ,KAAwB,EAAEC,MAAgB,EAAkB;QACzE,IAAI,CAACD,MAAM,MAAM,EACb,OAAO,EAAE;QAGb,OAAOA,MAAM,GAAG,CAACH,CAAAA,OACbK,aAAa,MAAM,CAAC;gBAChB,GAAGL,IAAI;gBACP,SAASI,OAAO,IAAI,CAACT,CAAAA,QAASA,UAAUK,KAAK,KAAK;YACtD;IAER;AACJ"}
+{"version":3,"file":"CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js","sources":["../../../../src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport { observableRef } from \"mobx\";\nimport type { CheckboxGroupPrimitiveVm } from \"../CheckboxGroupPrimitive.js\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem.js\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper.js\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\n\ninterface CheckboxGroupPresenterParams<TValue = string | number> {\n    items: CheckboxItemDto[];\n    values: TValue[];\n    onCheckedChange?: (values: TValue[]) => void;\n}\n\ninterface ICheckboxGroupPresenter<TValue = string | number> {\n    vm: CheckboxGroupPrimitiveVm;\n    init: (params: CheckboxGroupPresenterParams<TValue>) => void;\n    changeChecked: (value: TValue) => void;\n}\n\nclass CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {\n    private params?: CheckboxGroupPresenterParams<TValue> = undefined;\n    private items: CheckboxItem[] = [];\n\n    constructor() {\n        makeAutoObservable<CheckboxGroupPresenter<TValue>, \"params\" | \"items\">(this, {\n            params: observableRef,\n            items: observableRef\n        });\n    }\n\n    public init(params: CheckboxGroupPresenterParams<TValue>): void {\n        this.params = params;\n        this.items = this.getItems(params.items, params.values);\n    }\n\n    get vm(): CheckboxGroupPrimitiveVm {\n        return {\n            items: this.items.map(item => CheckboxItemMapper.toFormatted(item))\n        };\n    }\n\n    public changeChecked = (value: TValue) => {\n        if (!this.params?.items) {\n            return;\n        }\n\n        const currentValues = [...this.params.values];\n        const newValues = this.getUpdatedValues(currentValues, value);\n        this.items = this.getItems(this.params.items, newValues);\n        this.params.onCheckedChange?.(newValues);\n    };\n\n    private getUpdatedValues(currentValues: TValue[], value: TValue): TValue[] {\n        const index = currentValues.indexOf(value);\n\n        if (index > -1) {\n            return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];\n        }\n\n        return [...currentValues, value];\n    }\n\n    private getItems(items: CheckboxItemDto[], values: TValue[]): CheckboxItem[] {\n        if (!items.length) {\n            return [];\n        }\n\n        return items.map(item =>\n            CheckboxItem.create({\n                ...item,\n                checked: values.some(value => value === item.value)\n            })\n        );\n    }\n}\n\nexport { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };\n"],"names":["CheckboxGroupPresenter","undefined","value","currentValues","newValues","makeAutoObservable","observableRef","params","item","CheckboxItemMapper","index","items","values","CheckboxItem"],"mappings":";;;AAmBA,MAAMA;IAIF,aAAc;aAHN,MAAM,GAA0CC;aAChD,KAAK,GAAmB,EAAE;aAoB3B,aAAa,GAAG,CAACC;YACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OACd;YAGJ,MAAMC,gBAAgB;mBAAI,IAAI,CAAC,MAAM,CAAC,MAAM;aAAC;YAC7C,MAAMC,YAAY,IAAI,CAAC,gBAAgB,CAACD,eAAeD;YACvD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAEE;YAC9C,IAAI,CAAC,MAAM,CAAC,eAAe,GAAGA;QAClC;QA1BIC,mBAAuE,IAAI,EAAE;YACzE,QAAQC;YACR,OAAOA;QACX;IACJ;IAEO,KAAKC,MAA4C,EAAQ;QAC5D,IAAI,CAAC,MAAM,GAAGA;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAACA,OAAO,KAAK,EAAEA,OAAO,MAAM;IAC1D;IAEA,IAAI,KAA+B;QAC/B,OAAO;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC,CAAAA,OAAQC,mBAAmB,WAAW,CAACD;QACjE;IACJ;IAaQ,iBAAiBL,aAAuB,EAAED,KAAa,EAAY;QACvE,MAAMQ,QAAQP,cAAc,OAAO,CAACD;QAEpC,IAAIQ,QAAQ,IACR,OAAO;eAAIP,cAAc,KAAK,CAAC,GAAGO;eAAWP,cAAc,KAAK,CAACO,QAAQ;SAAG;QAGhF,OAAO;eAAIP;YAAeD;SAAM;IACpC;IAEQ,SAASS,KAAwB,EAAEC,MAAgB,EAAkB;QACzE,IAAI,CAACD,MAAM,MAAM,EACb,OAAO,EAAE;QAGb,OAAOA,MAAM,GAAG,CAACH,CAAAA,OACbK,aAAa,MAAM,CAAC;gBAChB,GAAGL,IAAI;gBACP,SAASI,OAAO,IAAI,CAACV,CAAAA,QAASA,UAAUM,KAAK,KAAK;YACtD;IAER;AACJ"}

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.jsxLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.jsxLabel.test.js

@@ -0,0 +1,108 @@
+import react from "react";
+import { describe, expect, it, vi } from "vitest";
+import { CheckboxGroupPresenter } from "./CheckboxGroupPresenter.js";
+const createCyclicLabel = ()=>{
+    const fiber = {
+        tag: 0
+    };
+    fiber.return = fiber;
+    fiber.child = fiber;
+    const element = react.createElement("span", null, "Card");
+    return {
+        ...element,
+        _owner: fiber
+    };
+};
+describe("CheckboxGroupPresenter with a React node label", ()=>{
+    it("keeps the label by reference and does not overflow the stack", ()=>{
+        const label = createCyclicLabel();
+        const presenter = new CheckboxGroupPresenter();
+        const init = ()=>{
+            presenter.init({
+                items: [
+                    {
+                        value: "a",
+                        label
+                    },
+                    {
+                        value: "b",
+                        label: "Plain"
+                    }
+                ],
+                values: [
+                    "a"
+                ],
+                onCheckedChange: vi.fn()
+            });
+        };
+        const ticked = ()=>presenter.vm.items.map((item)=>item.checked);
+        expect(init).not.toThrow();
+        expect(ticked()).toEqual([
+            true,
+            false
+        ]);
+        expect(presenter.vm.items[0].label).toBe(label);
+    });
+    it("toggles a value on and reports the next values", ()=>{
+        const onCheckedChange = vi.fn();
+        const presenter = new CheckboxGroupPresenter();
+        presenter.init({
+            items: [
+                {
+                    value: "a",
+                    label: createCyclicLabel()
+                },
+                {
+                    value: "b",
+                    label: createCyclicLabel()
+                }
+            ],
+            values: [
+                "a"
+            ],
+            onCheckedChange
+        });
+        presenter.changeChecked("b");
+        const ticked = presenter.vm.items.map((item)=>item.checked);
+        expect(onCheckedChange).toHaveBeenCalledWith([
+            "a",
+            "b"
+        ]);
+        expect(ticked).toEqual([
+            true,
+            true
+        ]);
+    });
+    it("toggles a value off and reports the remaining values", ()=>{
+        const onCheckedChange = vi.fn();
+        const presenter = new CheckboxGroupPresenter();
+        presenter.init({
+            items: [
+                {
+                    value: "a",
+                    label: createCyclicLabel()
+                },
+                {
+                    value: "b",
+                    label: createCyclicLabel()
+                }
+            ],
+            values: [
+                "a",
+                "b"
+            ],
+            onCheckedChange
+        });
+        presenter.changeChecked("a");
+        const ticked = presenter.vm.items.map((item)=>item.checked);
+        expect(onCheckedChange).toHaveBeenCalledWith([
+            "b"
+        ]);
+        expect(ticked).toEqual([
+            false,
+            true
+        ]);
+    });
+});
+
+//# sourceMappingURL=CheckboxGroupPresenter.jsxLabel.test.js.map

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.jsxLabel.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.jsxLabel.test.js","sources":["../../../../src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.jsxLabel.test.ts"],"sourcesContent":["import React from \"react\";\nimport { describe } from \"vitest\";\nimport { expect } from \"vitest\";\nimport { it } from \"vitest\";\nimport { vi } from \"vitest\";\nimport { CheckboxGroupPresenter } from \"./CheckboxGroupPresenter.js\";\n\n/*\n * A React element created during a render points at its owner fiber, and a fiber points back at\n * its parent and children. A deep observable walks that whole cycle and overflows the stack.\n */\nconst createCyclicLabel = () => {\n    const fiber: Record<string, unknown> = { tag: 0 };\n    fiber.return = fiber;\n    fiber.child = fiber;\n    const element = React.createElement(\"span\", null, \"Card\");\n    return { ...element, _owner: fiber };\n};\n\ndescribe(\"CheckboxGroupPresenter with a React node label\", () => {\n    it(\"keeps the label by reference and does not overflow the stack\", () => {\n        const label = createCyclicLabel();\n        const presenter = new CheckboxGroupPresenter();\n\n        const init = () => {\n            presenter.init({\n                items: [\n                    { value: \"a\", label },\n                    { value: \"b\", label: \"Plain\" }\n                ],\n                values: [\"a\"],\n                onCheckedChange: vi.fn()\n            });\n        };\n\n        const ticked = () => presenter.vm.items.map(item => item.checked);\n\n        expect(init).not.toThrow();\n        expect(ticked()).toEqual([true, false]);\n        expect(presenter.vm.items[0].label).toBe(label);\n    });\n\n    it(\"toggles a value on and reports the next values\", () => {\n        const onCheckedChange = vi.fn();\n        const presenter = new CheckboxGroupPresenter();\n        presenter.init({\n            items: [\n                { value: \"a\", label: createCyclicLabel() },\n                { value: \"b\", label: createCyclicLabel() }\n            ],\n            values: [\"a\"],\n            onCheckedChange\n        });\n\n        presenter.changeChecked(\"b\");\n\n        const ticked = presenter.vm.items.map(item => item.checked);\n        expect(onCheckedChange).toHaveBeenCalledWith([\"a\", \"b\"]);\n        expect(ticked).toEqual([true, true]);\n    });\n\n    it(\"toggles a value off and reports the remaining values\", () => {\n        const onCheckedChange = vi.fn();\n        const presenter = new CheckboxGroupPresenter();\n        presenter.init({\n            items: [\n                { value: \"a\", label: createCyclicLabel() },\n                { value: \"b\", label: createCyclicLabel() }\n            ],\n            values: [\"a\", \"b\"],\n            onCheckedChange\n        });\n\n        presenter.changeChecked(\"a\");\n\n        const ticked = presenter.vm.items.map(item => item.checked);\n        expect(onCheckedChange).toHaveBeenCalledWith([\"b\"]);\n        expect(ticked).toEqual([false, true]);\n    });\n});\n"],"names":["createCyclicLabel","fiber","element","React","describe","it","label","presenter","CheckboxGroupPresenter","init","vi","ticked","item","expect","onCheckedChange"],"mappings":";;;AAWA,MAAMA,oBAAoB;IACtB,MAAMC,QAAiC;QAAE,KAAK;IAAE;IAChDA,MAAM,MAAM,GAAGA;IACfA,MAAM,KAAK,GAAGA;IACd,MAAMC,UAAUC,MAAAA,aAAmB,CAAC,QAAQ,MAAM;IAClD,OAAO;QAAE,GAAGD,OAAO;QAAE,QAAQD;IAAM;AACvC;AAEAG,SAAS,kDAAkD;IACvDC,GAAG,gEAAgE;QAC/D,MAAMC,QAAQN;QACd,MAAMO,YAAY,IAAIC;QAEtB,MAAMC,OAAO;YACTF,UAAU,IAAI,CAAC;gBACX,OAAO;oBACH;wBAAE,OAAO;wBAAKD;oBAAM;oBACpB;wBAAE,OAAO;wBAAK,OAAO;oBAAQ;iBAChC;gBACD,QAAQ;oBAAC;iBAAI;gBACb,iBAAiBI,GAAG,EAAE;YAC1B;QACJ;QAEA,MAAMC,SAAS,IAAMJ,UAAU,EAAE,CAAC,KAAK,CAAC,GAAG,CAACK,CAAAA,OAAQA,KAAK,OAAO;QAEhEC,OAAOJ,MAAM,GAAG,CAAC,OAAO;QACxBI,OAAOF,UAAU,OAAO,CAAC;YAAC;YAAM;SAAM;QACtCE,OAAON,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAACD;IAC7C;IAEAD,GAAG,kDAAkD;QACjD,MAAMS,kBAAkBJ,GAAG,EAAE;QAC7B,MAAMH,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YACX,OAAO;gBACH;oBAAE,OAAO;oBAAK,OAAOP;gBAAoB;gBACzC;oBAAE,OAAO;oBAAK,OAAOA;gBAAoB;aAC5C;YACD,QAAQ;gBAAC;aAAI;YACbc;QACJ;QAEAP,UAAU,aAAa,CAAC;QAExB,MAAMI,SAASJ,UAAU,EAAE,CAAC,KAAK,CAAC,GAAG,CAACK,CAAAA,OAAQA,KAAK,OAAO;QAC1DC,OAAOC,iBAAiB,oBAAoB,CAAC;YAAC;YAAK;SAAI;QACvDD,OAAOF,QAAQ,OAAO,CAAC;YAAC;YAAM;SAAK;IACvC;IAEAN,GAAG,wDAAwD;QACvD,MAAMS,kBAAkBJ,GAAG,EAAE;QAC7B,MAAMH,YAAY,IAAIC;QACtBD,UAAU,IAAI,CAAC;YACX,OAAO;gBACH;oBAAE,OAAO;oBAAK,OAAOP;gBAAoB;gBACzC;oBAAE,OAAO;oBAAK,OAAOA;gBAAoB;aAC5C;YACD,QAAQ;gBAAC;gBAAK;aAAI;YAClBc;QACJ;QAEAP,UAAU,aAAa,CAAC;QAExB,MAAMI,SAASJ,UAAU,EAAE,CAAC,KAAK,CAAC,GAAG,CAACK,CAAAA,OAAQA,KAAK,OAAO;QAC1DC,OAAOC,iBAAiB,oBAAoB,CAAC;YAAC;SAAI;QAClDD,OAAOF,QAAQ,OAAO,CAAC;YAAC;YAAO;SAAK;IACxC;AACJ"}

package/Command/components/List.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 type ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
-declare const List: ({ className, ...props }: ListProps) => React.JSX.Element;
+declare const List: ({ className, style, onScroll, ...props }: ListProps) => React.JSX.Element;
 export { List, type ListProps };

package/Command/components/List.js

@@ -1,12 +1,16 @@
 import { Command } from "cmdk";
 import { cn } from "../../utils.js";
+import { ScrollArea } from "../../ScrollArea/index.js";
 import * as __rspack_external_react from "react";
-const List = ({ className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Command.List, {
-        className: cn([
-            "block max-h-96 w-full py-sm overflow-y-auto overflow-x-hidden bg-neutral-base text-neutral-strong"
-        ], className),
+const List = ({ className, style, onScroll, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(ScrollArea, {
+        className: cn("w-full bg-neutral-base", className),
+        style: style,
+        viewportClassName: "max-h-96 overflow-x-hidden",
+        onViewportScroll: onScroll
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Command.List, {
+        className: "block w-full py-sm text-neutral-strong",
         ...props
-    });
+    }));
 export { List };
 
 //# sourceMappingURL=List.js.map

package/Command/components/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command/components/List.js","sources":["../../../src/Command/components/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils.js\";\n\ntype ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nconst List = ({ className, ...props }: ListProps) => {\n    return (\n        <CommandPrimitive.List\n            className={cn(\n                [\n                    \"block max-h-96 w-full py-sm overflow-y-auto overflow-x-hidden bg-neutral-base text-neutral-strong\"\n                ],\n                className\n            )}\n            {...props}\n        />\n    );\n};\n\nexport { List, type ListProps };\n"],"names":["List","className","props","CommandPrimitive","cn"],"mappings":";;;AAMA,MAAMA,OAAO,CAAC,EAAEC,SAAS,EAAE,GAAGC,OAAkB,GACrC,WAAP,GACI,sCAACC,QAAAA,IAAqB;QAClB,WAAWC,GACP;YACI;SACH,EACDH;QAEH,GAAGC,KAAK"}
+{"version":3,"file":"Command/components/List.js","sources":["../../../src/Command/components/List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn } from \"~/utils.js\";\nimport { ScrollArea } from \"~/ScrollArea/index.js\";\n\ntype ListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nconst List = ({ className, style, onScroll, ...props }: ListProps) => {\n    /*\n     * The list scrolls inside a `ScrollArea`, whose scrollbar is an element rather than the\n     * operating system's own, so it can keep focus on the input while it is dragged. Layout and\n     * scroll props go to the scroll area, since that is the element that scrolls now.\n     */\n    return (\n        <ScrollArea\n            className={cn(\"w-full bg-neutral-base\", className)}\n            style={style}\n            viewportClassName={\"max-h-96 overflow-x-hidden\"}\n            onViewportScroll={onScroll}\n        >\n            <CommandPrimitive.List\n                className={\"block w-full py-sm text-neutral-strong\"}\n                {...props}\n            />\n        </ScrollArea>\n    );\n};\n\nexport { List, type ListProps };\n"],"names":["List","className","style","onScroll","props","ScrollArea","cn","CommandPrimitive"],"mappings":";;;;AAOA,MAAMA,OAAO,CAAC,EAAEC,SAAS,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAAkB,GAMtD,WAAP,GACI,sCAACC,YAAUA;QACP,WAAWC,GAAG,0BAA0BL;QACxC,OAAOC;QACP,mBAAmB;QACnB,kBAAkBC;qBAElB,sCAACI,QAAAA,IAAqB;QAClB,WAAW;QACV,GAAGH,KAAK"}

package/DataTable/DataTable.d.ts

@@ -1,5 +1,15 @@
 import React from "react";
-import type { ColumnSort, OnChangeFn, Row, SortingState, VisibilityState } from "@tanstack/react-table";
+import type { ColumnSort, ColumnVisibilityState, OnChangeFn, Row, RowData, SortingState } from "@tanstack/react-table";
+declare const features: {
+    columnResizingFeature: import("@tanstack/table-core").TableFeature;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature;
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature;
+    rowSortingFeature: import("@tanstack/table-core").TableFeature;
+    sortedRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+};
+type Features = typeof features;
 interface DataTableColumn<T> {
     header?: string | number | React.JSX.Element;
     cell?: (row: T) => string | number | React.JSX.Element | null;
@@ -18,13 +28,13 @@ type DataTableDefaultData = {
     id: string;
     $selectable?: boolean;
 };
-type DataTableRow<T> = Row<DataTableDefaultData & T>;
+type DataTableRow<T extends RowData> = Row<Features, DataTableDefaultData & T>;
 type DataTableSorting = SortingState;
 type DataTableColumnSort = ColumnSort;
 type OnDataTableSortingChange = OnChangeFn<DataTableSorting>;
-type DataTableColumnVisibility = VisibilityState;
+type DataTableColumnVisibility = ColumnVisibilityState;
 type OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;
-interface DataTableProps<TEntry> {
+interface DataTableProps<TEntry extends RowData> {
     /**
      * Show or hide borders.
      */
@@ -52,7 +62,7 @@ interface DataTableProps<TEntry> {
     /**
      * Callback that is called to determine if the row is selectable.
      */
-    isRowSelectable?: (row: Row<TEntry>) => boolean;
+    isRowSelectable?: (row: Row<Features, TEntry>) => boolean;
     /**
      * Render the skeleton state while data are loading.
      */
@@ -106,4 +116,4 @@ declare const DataTable: typeof DecoratableDataTable & {
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { DataTable, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };
+export { DataTable, type Features, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };

package/DataTable/DataTable.js

@@ -1,10 +1,19 @@
 import react, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createCoreRowModel, createSortedRowModel, flexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 import { CheckboxPrimitive } from "../Checkbox/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { Table } from "../Table/index.js";
 import { ColumnSorter, ColumnsVisibility } from "./components/index.js";
 import { cn, makeDecoratable } from "../utils.js";
+const features = tableFeatures({
+    columnResizingFeature: columnResizingFeature,
+    columnSizingFeature: columnSizingFeature,
+    columnVisibilityFeature: columnVisibilityFeature,
+    rowSelectionFeature: rowSelectionFeature,
+    rowSortingFeature: rowSortingFeature,
+    sortedRowModel: createSortedRowModel(),
+    coreRowModel: createCoreRowModel()
+});
 const defineColumns = (columns, options)=>{
     const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;
     return useMemo(()=>{
@@ -158,7 +167,8 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         onToggleRow,
         loading
     });
-    const table = useReactTable({
+    const table = useTable({
+        features: features,
         columnResizeMode: "onChange",
         columns,
         data,
@@ -167,8 +177,6 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         enableRowSelection: isRowSelectable,
         enableSorting: !!onSortingChange,
         enableSortingRemoval: false,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
         manualSorting: true,
         onColumnVisibilityChange,
         onRowSelectionChange,

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    OnChangeFn,\n    Row,\n    RowSelectionState,\n    SortingState,\n    VisibilityState\n} from \"@tanstack/react-table\";\nimport {\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | React.JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | React.JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Should truncate?\n     */\n    truncate?: boolean;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n    /*\n     * Accessor key for the column data path.\n     */\n    accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T> = Row<DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = VisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T,>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const {\n                accessorKey,\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                truncate = true,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: accessorKey || id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className,\n                    truncate\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        if (!props) {\n                            return null;\n                        }\n\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        if (!props) {\n                            return null;\n                        }\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n    cell: Cell<T, unknown>;\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n    selected: boolean;\n    cells: Cell<T, unknown>[];\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useReactTable<T>({\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<T>): number => {\n            // Non-resizable columns (e.g. row-selection, actions) keep their fixed size.\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            /**\n             * Resizable columns share the space left after the fixed columns, proportionally to\n             * their own size. This makes the table always fill the full container width — even when\n             * columns are hidden — so trailing content (e.g. the columns-visibility cog) stays\n             * flush right instead of drifting left as columns are removed.\n             */\n            const visibleColumns = table.getVisibleLeafColumns();\n            const fixedTotal = visibleColumns\n                .filter(col => !col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n            const resizableTotal = visibleColumns\n                .filter(col => col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n\n            if (resizableTotal === 0) {\n                return column.getSize();\n            }\n\n            const available = Math.max(tableWidth - fixedTotal, 0);\n\n            return Math.ceil((column.getSize() * available) / resizableTotal);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div\n                                                    className={cn({\n                                                        \"w-full overflow-hidden whitespace-nowrap\": true,\n                                                        truncate: !isLastCell\n                                                    })}\n                                                >\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"names":["defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","useMemo","columnsList","Object","key","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","truncate","id","size","props","String","columnsDefs","firstColumn","isSelectable","CheckboxPrimitive","e","React","value","cn","Skeleton","typedMemo","memo","TableCell","getColumnWidth","width","Table","flexRender","MemoTableCell","TableRow","selected","cells","MemoTableRow","emptyArray","Array","DecoratableDataTable","bordered","columnVisibility","initialColumns","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","useRef","tableWidth","setTableWidth","useState","data","useEffect","updateElementWidth","window","rowSelection","acc","item","recordIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","x","parseInt","selection","tableSorting","table","useReactTable","getCoreRowModel","getSortedRowModel","useCallback","visibleColumns","fixedTotal","col","total","resizableTotal","available","Math","tableRows","headerGroup","index","isLastCell","ColumnSorter","ColumnsVisibility","row","DataTable","makeDecoratable"],"mappings":"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"}
+{"version":3,"file":"DataTable/DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    ColumnVisibilityState,\n    OnChangeFn,\n    Row,\n    RowData,\n    RowSelectionState,\n    SortingState\n} from \"@tanstack/react-table\";\nimport {\n    columnResizingFeature,\n    columnSizingFeature,\n    columnVisibilityFeature,\n    createCoreRowModel,\n    createSortedRowModel,\n    flexRender,\n    rowSelectionFeature,\n    rowSortingFeature,\n    tableFeatures,\n    useTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\nconst features = tableFeatures({\n    columnResizingFeature,\n    columnSizingFeature,\n    columnVisibilityFeature,\n    rowSelectionFeature,\n    rowSortingFeature,\n    sortedRowModel: createSortedRowModel(),\n    coreRowModel: createCoreRowModel()\n});\n\ntype Features = typeof features;\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | React.JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | React.JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Should truncate?\n     */\n    truncate?: boolean;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n    /*\n     * Accessor key for the column data path.\n     */\n    accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T extends RowData> = Row<Features, DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = ColumnVisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry extends RowData> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<Features, TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry extends RowData> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T extends RowData>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<Features, T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<Features, T>[] = columnsList.map(column => {\n            const {\n                accessorKey,\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                truncate = true,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: accessorKey || id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className,\n                    truncate\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        if (!props) {\n                            return null;\n                        }\n\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        if (!props) {\n                            return null;\n                        }\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T extends RowData> {\n    cell: Cell<Features, T, unknown>;\n    getColumnWidth: (column: Column<Features, T>) => number;\n}\n\nconst TableCell = <T extends RowData>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T extends RowData> {\n    selected: boolean;\n    cells: Cell<Features, T, unknown>[];\n    getColumnWidth: (column: Column<Features, T>) => number;\n}\n\nconst TableRow = <T extends RowData>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useTable<typeof features, T>({\n        features,\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<Features, T>): number => {\n            // Non-resizable columns (e.g. row-selection, actions) keep their fixed size.\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            /**\n             * Resizable columns share the space left after the fixed columns, proportionally to\n             * their own size. This makes the table always fill the full container width — even when\n             * columns are hidden — so trailing content (e.g. the columns-visibility cog) stays\n             * flush right instead of drifting left as columns are removed.\n             */\n            const visibleColumns = table.getVisibleLeafColumns();\n            const fixedTotal = visibleColumns\n                .filter(col => !col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n            const resizableTotal = visibleColumns\n                .filter(col => col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n\n            if (resizableTotal === 0) {\n                return column.getSize();\n            }\n\n            const available = Math.max(tableWidth - fixedTotal, 0);\n\n            return Math.ceil((column.getSize() * available) / resizableTotal);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div\n                                                    className={cn({\n                                                        \"w-full overflow-hidden whitespace-nowrap\": true,\n                                                        truncate: !isLastCell\n                                                    })}\n                                                >\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type Features,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"names":["features","tableFeatures","columnResizingFeature","columnSizingFeature","columnVisibilityFeature","rowSelectionFeature","rowSortingFeature","createSortedRowModel","createCoreRowModel","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","useMemo","columnsList","Object","key","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","truncate","id","size","props","String","columnsDefs","firstColumn","isSelectable","CheckboxPrimitive","e","React","value","cn","Skeleton","typedMemo","memo","TableCell","getColumnWidth","width","Table","flexRender","MemoTableCell","TableRow","selected","cells","MemoTableRow","emptyArray","Array","DecoratableDataTable","bordered","columnVisibility","initialColumns","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","useRef","tableWidth","setTableWidth","useState","data","useEffect","updateElementWidth","window","rowSelection","acc","item","recordIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","x","parseInt","selection","tableSorting","table","useTable","useCallback","visibleColumns","fixedTotal","col","total","resizableTotal","available","Math","tableRows","headerGroup","index","isLastCell","ColumnSorter","ColumnsVisibility","row","DataTable","makeDecoratable"],"mappings":";;;;;;;AA+BA,MAAMA,WAAWC,cAAc;IAC3BC,uBAAqBA;IACrBC,qBAAmBA;IACnBC,yBAAuBA;IACvBC,qBAAmBA;IACnBC,mBAAiBA;IACjB,gBAAgBC;IAChB,cAAcC;AAClB;AAyIA,MAAMC,gBAAgB,CAClBC,SACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,WAAW,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGJ;IAEhE,OAAOK,QAAQ;QACX,MAAMC,cAAcC,OAAO,IAAI,CAACR,SAAS,GAAG,CAACS,CAAAA,MAAQ;gBACjD,IAAIA;gBACJ,GAAGT,OAAO,CAACS,IAA4B;YAC3C;QAEA,MAAMC,WAAqCH,YAAY,GAAG,CAACI,CAAAA;YACvD,MAAM,EACFC,WAAW,EACXC,IAAI,EACJC,SAAS,EACTC,eAAe,IAAI,EACnBC,iBAAiB,IAAI,EACrBC,gBAAgB,KAAK,EACrBC,MAAM,EACNC,WAAW,IAAI,EACfC,EAAE,EACFC,OAAO,GAAG,EACb,GAAGV;YAEJ,OAAO;gBACHS;gBACA,aAAaR,eAAeQ;gBAC5B,QAAQ,IAAMF;gBACd,MAAMI,CAAAA;oBACF,IAAIT,QAAQ,AAAgB,cAAhB,OAAOA,MACf,OAAOA,KAAKS,MAAM,GAAG,CAAC,QAAQ;oBAM9B,OAAOA,MAAM,QAAQ,KAAKC,OAAOD,MAAM,QAAQ,MAAM;gBAE7D;gBACAL;gBACA,MAAM;oBACFH;oBACAK;gBACJ;gBACAH;gBACAK;gBACAN;YACJ;QACJ;QAEA,IAAIS,cAAcd;QAClB,MAAMe,cAAcf,QAAQ,CAAC,EAAE;QAC/B,MAAMgB,eAAetB,eAAeD;QAEpC,IAAIuB,gBAAgBD,aAChBD,cAAc;YACV;gBACI,GAAGC,WAAW;gBACd,aAAaA,YAAY,EAAE;gBAC3B,QAAQH,CAAAA;oBACJ,IAAI,CAACA,OACD,OAAO;oBAGX,OAAO,WAAP,GACI,oBAAC;wBAAI,WAAW;qCACZ,oBAACK,mBAAiBA;wBACd,eAAeL,MAAM,KAAK,CAAC,qBAAqB;wBAChD,SAASA,MAAM,KAAK,CAAC,oBAAoB;wBACzC,UAAUA,MAAM,KAAK,CAAC,yBAAyB;wBAC/C,cAAW;wBACX,UAAU,CAACpB;wBACX,SAAS0B,CAAAA,IAAKA,EAAE,eAAe;wBAElCH,YAAY,MAAM,iBACbI,MAAAA,aAAmB,CAACJ,YAAY,MAAM,EAAEH,SACxC;gBAGlB;gBACA,MAAMA,CAAAA;oBACF,IAAI,CAACA,OACD,OAAO;oBAEX,OAAO,WAAP,GACI,oBAAC;wBAAI,WAAW;qCACZ,oBAACK,mBAAiBA;wBACd,SAASL,MAAM,GAAG,CAAC,aAAa;wBAChC,UAAUQ,CAAAA,QAASR,MAAM,GAAG,CAAC,cAAc,CAAC,CAAC,CAACQ;wBAC9C,UAAU,CAACR,MAAM,GAAG,CAAC,YAAY;wBACjC,cAAW;wBACX,WAAWS,GAAG,AAACT,MAAM,GAAG,CAAC,YAAY,KAAmB,KAAd;wBAE7CG,YAAY,IAAI,iBACXI,MAAAA,aAAmB,CAACJ,YAAY,IAAI,EAAEH,SACtC;gBAGlB;YACJ;eACGZ,SAAS,KAAK,CAAC;SACrB;QAGL,OAAOc,YAAY,GAAG,CAACb,CAAAA;YACnB,IAAIN,SACA,OAAO;gBACH,GAAGM,MAAM;gBACT,MAAM,kBAAM,oBAACqB,UAAQA;wBAAC,MAAM;wBAAQ,MAAM;;YAC9C;YAGJ,OAAOrB;QACX;IACJ,GAAG;QAACX;QAASG;QAAaC;QAAaC;KAAQ;AACnD;AAEA,MAAM4B,YAAoCC;AAO1C,MAAMC,YAAY,CAAoB,EAAEtB,IAAI,EAAEuB,cAAc,EAAqB;IAC7E,MAAMC,QAAQD,eAAevB,KAAK,MAAM;IAExC,OAAO,WAAP,GACI,oBAACyB,MAAM,IAAI;QAAE,GAAGzB,KAAK,MAAM,CAAC,SAAS,CAAC,IAAI;QAAE,OAAO;YAAEwB;YAAO,UAAUA;QAAM;OACvEE,WAAW1B,KAAK,MAAM,CAAC,SAAS,CAAC,IAAI,EAAEA,KAAK,UAAU;AAGnE;AAEA,MAAM2B,gBAAgBP,UAAUE;AAQhC,MAAMM,WAAW,CAAoB,EAAEC,QAAQ,EAAEC,KAAK,EAAEP,cAAc,EAAoB,GAC/E,WAAP,GACI,oBAACE,MAAM,GAAG;QAAC,UAAUI;OAChBC,MAAM,GAAG,CAAC9B,CAAAA,OAAAA,WAAAA,GACP,oBAAC2B,eAAaA;YAAI,KAAK3B,KAAK,EAAE;YAAE,MAAMA;YAAM,gBAAgBuB;;AAM5E,MAAMQ,eAAeX,UAAUQ;AAK/B,MAAMI,aAAaC,MAAM,IAAI,IAAI,CAAC,CAAC;AAEnC,MAAMC,uBAAuB,CAAuD,EAChFC,QAAQ,EACR9C,mBAAmB,IAAI,EACvB+C,gBAAgB,EAChB,SAASC,cAAc,EACvB,MAAMC,WAAW,EACjBC,cAAc,EACdC,eAAe,EACfhD,OAAO,EACPiD,wBAAwB,EACxBnD,WAAW,EACXoD,eAAe,EACfnD,WAAW,EACXoD,eAAe,EAAE,EACjBC,OAAO,EACPC,YAAY,EACI;IAChB,MAAMC,WAAWC,OAAuB;IACxC,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;IAE7C,MAAMC,OAAO3D,UAAUwC,aAAaM;IAEpCc,UAAU;QACN,MAAMC,qBAAqB;YACvB,IAAIP,SAAS,OAAO,EAAE;gBAClB,MAAMtB,QAAQsB,SAAS,OAAO,CAAC,WAAW;gBAC1CG,cAAczB;YAClB;QACJ;QAEA6B;QAEAC,OAAO,gBAAgB,CAAC,UAAUD;QAElC,OAAO;YACHC,OAAO,mBAAmB,CAAC,UAAUD;QACzC;IACJ,GAAG;QAACP,SAAS,OAAO;KAAC;IAErB,MAAMS,eAAe9D,QAAQ,IAClBkD,aAAa,MAAM,CAAoB,CAACa,KAAKC;YAChD,MAAMC,cAAcP,KAAK,SAAS,CAACQ,CAAAA,MAAOA,IAAI,EAAE,KAAKF,KAAK,EAAE;YAC5D,OAAO;gBAAE,GAAGD,GAAG;gBAAE,CAACE,YAAY,EAAE;YAAK;QACzC,GAAG,CAAC,IACL;QAACf;QAAcQ;KAAK;IAEvB,MAAMS,uBAAsDC,CAAAA;QACxD,MAAMC,eAAe,AAAmB,cAAnB,OAAOD,UAAyBA,QAAQN,gBAAgBM;QAW7E,MAAME,cAAc;eACbpE,OAAO,IAAI,CAAC4D,cAAc,MAAM,CAACS,CAAAA,IAAK,CAAEA,CAAAA,KAAKF,YAAW;eACxDnE,OAAO,IAAI,CAACmE,cAAc,MAAM,CAACE,CAAAA,IAAK,CAAEA,CAAAA,KAAKT,YAAW;SAC9D;QAGD,IAAIQ,AAAuB,MAAvBA,YAAY,MAAM,IAAU,AAAuB,cAAvB,OAAOxE,aAA4B,YAC/DA,YAAY4D,IAAI,CAACc,SAASF,WAAW,CAAC,EAAE,EAAE;QAEvC,IAAI,AAAuB,cAAvB,OAAOzE,aAA4B;YAC1C,MAAM4E,YAAYvE,OAAO,IAAI,CAACmE,cAAc,GAAG,CAAClE,CAAAA,MAAOuD,IAAI,CAACc,SAASrE,KAAK;YAC1EN,YAAY4E;QAChB;IACJ;IAEA,MAAMC,eAAe1E,QAAQ;QACzB,IAAI,CAACwC,MAAM,OAAO,CAACW,YAAY,CAACA,QAAQ,MAAM,EAC1C,OAAOL;QAEX,OAAOK;IACX,GAAG;QAACA;KAAQ;IAEZ,MAAMzD,UAAUD,cAAcmD,gBAAgB;QAC1ChD;QACAC;QACAC;QACAC;IACJ;IAEA,MAAM4E,QAAQC,SAA6B;QACvC5F,UAAAA;QACA,kBAAkB;QAClBU;QACAgE;QACA,sBAAsB;QACtB,cAAc,CAAC,CAACV;QAChB,oBAAoBD;QACpB,eAAe,CAAC,CAACE;QACjB,sBAAsB;QACtB,eAAe;QACfD;QACAmB;QACAlB;QACA,OAAO;YACHN;YACAmB;YACA,SAASY;QACb;IACJ;IAEA,MAAM5C,iBAAiB+C,YACnB,CAACxE;QAEG,IAAI,CAACA,OAAO,YAAY,IACpB,OAAOA,OAAO,OAAO;QASzB,MAAMyE,iBAAiBH,MAAM,qBAAqB;QAClD,MAAMI,aAAaD,eACd,MAAM,CAACE,CAAAA,MAAO,CAACA,IAAI,YAAY,IAC/B,MAAM,CAAC,CAACC,OAAOD,MAAQC,QAAQD,IAAI,OAAO,IAAI;QACnD,MAAME,iBAAiBJ,eAClB,MAAM,CAACE,CAAAA,MAAOA,IAAI,YAAY,IAC9B,MAAM,CAAC,CAACC,OAAOD,MAAQC,QAAQD,IAAI,OAAO,IAAI;QAEnD,IAAIE,AAAmB,MAAnBA,gBACA,OAAO7E,OAAO,OAAO;QAGzB,MAAM8E,YAAYC,KAAK,GAAG,CAAC7B,aAAawB,YAAY;QAEpD,OAAOK,KAAK,IAAI,CAAE/E,OAAO,OAAO,KAAK8E,YAAaD;IACtD,GACA;QAACP;QAAOpB;KAAW;IAMvB,MAAM8B,YAAYrF,QAAQ,IACf2E,MAAM,WAAW,GAAG,IAAI,EAChC;QAACA;QAAOjB;QAAMhE;KAAQ;IAEzB,OAAO,WAAP,GACI,oBAAC;QAAI,KAAK2D;qBACN,oBAACrB,OAAKA;QAAC,UAAUU;QAAU,QAAQU;qBAC/B,oBAACpB,MAAM,MAAM;QAAC,QAAQoB;OACjBuB,MAAM,eAAe,GAAG,GAAG,CAACW,CAAAA,cAAAA,WAAAA,GACzB,oBAACtD,MAAM,GAAG;YAAC,KAAKsD,YAAY,EAAE;WACzBA,YAAY,OAAO,CAAC,GAAG,CAAC,CAAC1E,QAAQ2E;YAC9B,MAAMC,aAAaD,UAAUD,YAAY,OAAO,CAAC,MAAM,GAAG;YAC1D,MAAMvD,QAAQD,eAAelB,OAAO,MAAM;YAE1C,OAAO,WAAP,GACI,oBAACoB,MAAM,IAAI;gBACP,KAAKpB,OAAO,EAAE;gBACb,GAAGA,OAAO,MAAM,CAAC,SAAS,CAAC,IAAI;gBAChC,SAASA,OAAO,OAAO;gBACvB,OAAO;oBAAEmB;oBAAO,UAAUA;gBAAM;eAE/BnB,OAAO,aAAa,GAAG,OAAO,WAAP,GACpB,oBAAC6E,cAAYA;gBACT,SAAS7E,OAAO,MAAM,CAAC,uBAAuB;gBAC9C,UAAUA,OAAO,MAAM,CAAC,UAAU;6BAElC,oBAAC;gBACG,WAAWa,GAAG;oBACV,4CAA4C;oBAC5C,UAAU,CAAC+D;gBACf;eAECvD,WACGrB,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,EAC9BA,OAAO,UAAU,oBAGzB,oBAACoB,MAAM,SAAS;gBACZ,WAAWpB,OAAO,MAAM,CAAC,WAAW,MAAM;gBAE7C4E,cAAc,WAAdA,GACG,oBAAC;gBAAI,WAAW;6BACZ,oBAACE,mBAAiBA;gBACd,SAASf,MAAM,aAAa;kBAM/C/D,OAAO,MAAM,CAAC,YAAY,MAAM,WAAN,GACvB,oBAACoB,MAAM,OAAO;gBACV,aAAapB,OAAO,gBAAgB;gBACpC,cAAcA,OAAO,gBAAgB;gBACrC,YAAYA,OAAO,MAAM,CAAC,aAAa;;QAK3D,qBAIZ,oBAACoB,MAAM,IAAI,QACNqD,UAAU,GAAG,CAACM,CAAAA;QACX,MAAM7E,KAAK6E,IAAI,QAAQ,CAAC,EAAE,IAAIA,IAAI,EAAE;QACpC,OAAO,WAAP,GACI,oBAACrD,cAAYA;YACT,KAAKxB;YACL,OAAO6E,IAAI,eAAe;YAC1B,UAAUA,IAAI,aAAa;YAC3B,gBAAgB7D;;IAG5B;AAKpB;AAEA,MAAM8D,YAAYC,gBAAgB,aAAapD"}

package/DataTable/components/ColumnsVisibility.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
-import type { Column } from "@tanstack/react-table";
-interface ColumnsVisibilityProps<T> {
-    columns: Column<T>[];
+import type { Column, RowData } from "@tanstack/react-table";
+import type { Features } from "../DataTable.js";
+interface ColumnsVisibilityProps<T extends RowData> {
+    columns: Column<Features, T>[];
 }
-export declare const ColumnsVisibility: <T>(props: ColumnsVisibilityProps<T>) => React.JSX.Element | null;
+export declare const ColumnsVisibility: <T extends RowData>(props: ColumnsVisibilityProps<T>) => React.JSX.Element | null;
 export {};

package/DataTable/components/ColumnsVisibility.js

@@ -7,14 +7,17 @@ const ColumnsVisibility = (props)=>{
     const getHeaderName = useCallback((column)=>{
         const { header } = column.columnDef;
         if ("string" == typeof header) return header;
-        if ("function" == typeof header) return header();
+        if ("function" == typeof header) {
+            const flatHeader = column.table.getFlatHeaders().find((h)=>h.column.id === column.id);
+            if (flatHeader) return header(flatHeader.getContext());
+        }
         return column.id;
     }, []);
     const options = useMemo(()=>props.columns.filter((column)=>column.getCanHide()).map((column)=>({
                 id: column.id,
                 header: getHeaderName(column),
-                onChange: column.toggleVisibility,
-                getValue: column.getIsVisible
+                onChange: (value)=>column.toggleVisibility(value),
+                getValue: ()=>column.getIsVisible()
             })), [
         props.columns
     ]);

package/DataTable/components/ColumnsVisibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/components/ColumnsVisibility.js","sources":["../../../src/DataTable/components/ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        preventClose\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["ColumnsVisibility","props","getHeaderName","useCallback","column","header","options","useMemo","DropdownMenu","IconButton","SettingsIcon","option","Checkbox"],"mappings":";;;;;AAkBO,MAAMA,oBAAoB,CAAKC;IAMlC,MAAMC,gBAAgBC,YAAY,CAACC;QAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGD,OAAO,SAAS;QAEnC,IAAI,AAAkB,YAAlB,OAAOC,QACP,OAAOA;QAGX,IAAI,AAAkB,cAAlB,OAAOA,QAEP,OAAOA;QAGX,OAAOD,OAAO,EAAE;IACpB,GAAG,EAAE;IAEL,MAAME,UAAoBC,QAAQ,IACvBN,MAAM,OAAO,CACf,MAAM,CAACG,CAAAA,SAAUA,OAAO,UAAU,IAClC,GAAG,CAACA,CAAAA,SACM;gBACH,IAAIA,OAAO,EAAE;gBACb,QAAQF,cAAcE;gBACtB,UAAUA,OAAO,gBAAgB;gBACjC,UAAUA,OAAO,YAAY;YACjC,KAET;QAACH,MAAM,OAAO;KAAC;IAElB,IAAIK,AAAmB,MAAnBA,QAAQ,MAAM,EACd,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,gBAAYA;YAAK,SAAS;YAAS,MAAM;;qBAErE,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBF,QAAQ,GAAG,CAACK,CAAAA,SACF,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKG,OAAO,EAAE;YACd;YACA,oBACI,oBAACC,UAAQA;gBACL,OAAOD,OAAO,MAAM;gBACpB,UAAUA,OAAO,QAAQ;gBACzB,SAASA,OAAO,QAAQ;;;AAQxD"}
+{"version":3,"file":"DataTable/components/ColumnsVisibility.js","sources":["../../../src/DataTable/components/ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column, RowData } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport type { Features } from \"../DataTable.js\";\n\ninterface ColumnsVisibilityProps<T extends RowData> {\n    columns: Column<Features, T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T extends RowData>(props: ColumnsVisibilityProps<T>) => {\n    const getHeaderName = useCallback((column: Column<Features, T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            const flatHeader = column.table.getFlatHeaders().find(h => h.column.id === column.id);\n\n            if (flatHeader) {\n                return header(flatHeader.getContext());\n            }\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: (value?: boolean) => column.toggleVisibility(value),\n                    getValue: () => column.getIsVisible()\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        preventClose\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["ColumnsVisibility","props","getHeaderName","useCallback","column","header","flatHeader","h","options","useMemo","value","DropdownMenu","IconButton","SettingsIcon","option","Checkbox"],"mappings":";;;;;AAmBO,MAAMA,oBAAoB,CAAoBC;IACjD,MAAMC,gBAAgBC,YAAY,CAACC;QAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGD,OAAO,SAAS;QAEnC,IAAI,AAAkB,YAAlB,OAAOC,QACP,OAAOA;QAGX,IAAI,AAAkB,cAAlB,OAAOA,QAAuB;YAC9B,MAAMC,aAAaF,OAAO,KAAK,CAAC,cAAc,GAAG,IAAI,CAACG,CAAAA,IAAKA,EAAE,MAAM,CAAC,EAAE,KAAKH,OAAO,EAAE;YAEpF,IAAIE,YACA,OAAOD,OAAOC,WAAW,UAAU;QAE3C;QAEA,OAAOF,OAAO,EAAE;IACpB,GAAG,EAAE;IAEL,MAAMI,UAAoBC,QAAQ,IACvBR,MAAM,OAAO,CACf,MAAM,CAACG,CAAAA,SAAUA,OAAO,UAAU,IAClC,GAAG,CAACA,CAAAA,SACM;gBACH,IAAIA,OAAO,EAAE;gBACb,QAAQF,cAAcE;gBACtB,UAAU,CAACM,QAAoBN,OAAO,gBAAgB,CAACM;gBACvD,UAAU,IAAMN,OAAO,YAAY;YACvC,KAET;QAACH,MAAM,OAAO;KAAC;IAElB,IAAIO,AAAmB,MAAnBA,QAAQ,MAAM,EACd,OAAO;IAGX,OAAO,WAAP,GACI,oBAACG,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,gBAAYA;YAAK,SAAS;YAAS,MAAM;;qBAErE,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBH,QAAQ,GAAG,CAACM,CAAAA,SACF,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKG,OAAO,EAAE;YACd;YACA,oBACI,oBAACC,UAAQA;gBACL,OAAOD,OAAO,MAAM;gBACpB,UAAUA,OAAO,QAAQ;gBACzB,SAASA,OAAO,QAAQ;;;AAQxD"}

package/DatePicker/DatePicker.stories.d.ts

@@ -12,6 +12,16 @@ export declare const WithErrors: Story;
 export declare const Disabled: Story;
 export declare const FullExample: Story;
 export declare const WithPresets: Story;
+/**
+ * Picks a date one step at a time: a day, then a month, then a year (newest first). Built for
+ * dates far in the past, like a date of birth. The value is a `YYYY-MM-DD` string.
+ */
+export declare const TypeBirthday: Story;
+/**
+ * With `minDate` and `maxDate`, years run from the latest allowed one down to the earliest,
+ * and days and months that can't make an allowed date are dimmed. Here: 18 to 100 years old.
+ */
+export declare const TypeBirthdayWithLimits: Story;
 export declare const TypeTime: Story;
 export declare const TypeDateTimeLocal: Story;
 export declare const TypeDateTimeTz: Story;