@geotab/zenith 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/table/table.test.js

@@ -0,0 +1,844 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const table_1 = require("./table");
+const useResizeObserver_1 = require("../commonHelpers/hooks/useResizeObserver");
+const react_2 = require("react");
+const tableEmpty_1 = require("./children/tableEmpty");
+const tableFooter_1 = require("./children/tableFooter");
+const tableFullscreen_1 = require("./children/tableFullscreen");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const tablePagination_1 = require("./children/tablePagination");
+const tableBulkActions_1 = require("./children/tableBulkActions");
+const bulkActions_1 = require("../dataGrid/withSelectableRows/components/bulkActions/bulkActions");
+const iconMap_1 = require("../icons/iconMap");
+const iconClose_1 = require("../icons/iconClose");
+const interfaces_1 = require("./sortable/interfaces");
+jest.mock("../commonHelpers/hooks/useMobile");
+jest.mock("../commonHelpers/hooks/useResizeObserver");
+useMobile_1.useMobile.mockReturnValue(false);
+useResizeObserver_1.useResizeObserver.mockReturnValue({ result: { contentRect: { width: 800 } } });
+const waitPromise = (ms) => new Promise(res => setTimeout(() => res(true), ms));
+const columns = [
+    { id: "name", title: "Name" },
+    { id: "date", title: "Date" }
+];
+const entities = [
+    { id: "1", name: "Entity 1", date: "2025-01-05" },
+    { id: "2", name: "Entity 2", date: "2025-01-05" }
+];
+const renderAsync = async (component) => (0, react_2.act)(async () => {
+    const result = (0, react_1.render)(component);
+    await Promise.resolve();
+    return result;
+});
+describe("Table", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        useMobile_1.useMobile.mockReturnValue(false);
+    });
+    test("renders without crashing", async () => {
+        const { getByText } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns }));
+        expect(getByText("Name")).not.toBeNull();
+    });
+    test("displays entities", async () => {
+        await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns }));
+        expect(react_1.screen.getByText("Entity 1")).not.toBeNull();
+        expect(react_1.screen.getByText("Entity 2")).not.toBeNull();
+    });
+    test("sets height", async () => {
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, height: "378px", className: "custom-grid" }));
+        expect(container.querySelector(".custom-grid")?.style.height).toBe("378px");
+    });
+    test("displays loading state", async () => {
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: [], columns: columns, isLoading: true }));
+        expect(container.querySelector(".zen-skeleton")).not.toBeNull();
+        expect(container.querySelectorAll(".zen-data-grid__row")).toHaveLength(50);
+    });
+    test("displays loading state", async () => {
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: [], columns: columns, isLoading: true }));
+        expect(container.querySelector(".zen-skeleton")).not.toBeNull();
+        expect(container.querySelectorAll(".zen-data-grid__row")).toHaveLength(50);
+    });
+    test("displays loading state for a row", async () => {
+        const entities2 = [{ id: "1", name: "Entity 1", date: "2025-01-04", isLoading: true }];
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities2, columns: columns }));
+        expect(container.querySelectorAll(".zen-skeleton")).toHaveLength(2);
+        expect(container.querySelectorAll(".zen-data-grid__row")).toHaveLength(1);
+    });
+    test("empty state", async () => {
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: [], columns: columns, children: (0, jsx_runtime_1.jsx)(tableEmpty_1.TableEmpty, { description: "Empty text" }) }));
+        expect(react_1.screen.getByText("Empty text")).not.toBeNull();
+        expect(container.querySelector(".zen-empty-list-search")).not.toBeNull();
+    });
+    test("footer", async () => {
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, children: (0, jsx_runtime_1.jsx)(tableFooter_1.TableFooter, { children: (0, jsx_runtime_1.jsx)("div", { className: "table-footer", children: "Footer content" }) }) }));
+        expect(react_1.screen.getByText("Footer content")).not.toBeNull();
+        expect(container.querySelector(".table-footer")).not.toBeNull();
+    });
+    test("fullscreen", async () => {
+        const onChange = jest.fn();
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, children: (0, jsx_runtime_1.jsx)(tableFullscreen_1.TableFullscreen, { isFullscreen: true, onChange: onChange }) }));
+        const fullscreenButton = container.querySelector("[title='Convert table to full screen']");
+        expect(fullscreenButton).not.toBeNull();
+        react_1.fireEvent.click(fullscreenButton);
+        expect(onChange).toHaveBeenCalled();
+    });
+    test("pagination", async () => {
+        const onChangePage = jest.fn();
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, children: (0, jsx_runtime_1.jsx)(tablePagination_1.TablePagination, { activePage: 0, total: 10, perPage: 5, onChange: onChangePage }) }));
+        expect(react_1.screen.getByText("Showing 1 - 5 of 10")).not.toBeNull();
+        react_1.fireEvent.click(container.querySelector("[title='Next page']"));
+        expect(onChangePage).toHaveBeenCalledWith(1);
+    });
+    test("no pagination on mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const { container } = await renderAsync((0, jsx_runtime_1.jsxs)(table_1.Table, { entities: entities, columns: columns, children: [(0, jsx_runtime_1.jsx)(tablePagination_1.TablePagination, { activePage: 0, total: 10, perPage: 5, onChange: jest.fn() }), (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: jest.fn(), type: "tertiary-destructive" })] })] }));
+        expect(container.querySelector(".zen-pagination")).toBeNull();
+    });
+    test("mobile version", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns }));
+        expect(container.querySelector(".zen-data-feed")).not.toBeNull();
+        expect(container.querySelector(".zen-feed-item__label")).not.toBeNull();
+        expect(container.querySelector(".zen-feed-item__label")?.textContent).toBe("Name");
+        expect(container.querySelector(".zen-feed-item__value")?.textContent).toBe("Entity 1");
+    });
+    test("selectable", async () => {
+        const selectable = {
+            selection: { all: false, selected: [] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelectorAll(".zen-checkbox")).toHaveLength(3);
+        expect(container.querySelector(".zen-bulk-actions__number-of-selected")).toBeNull();
+    });
+    test("selectable with loading (checkboxes should be hidden)", async () => {
+        const selectable = {
+            selection: { all: false, selected: [] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { isLoading: true, entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelectorAll(".zen-checkbox")).toHaveLength(0);
+        expect(container.querySelector(".zen-bulk-actions__number-of-selected")).toBeNull();
+        expect(container.querySelectorAll(".zen-skeleton").length).not.toBe(0);
+    });
+    test("selectable: partial selection", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["2"] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelectorAll(".zen-checkbox__input:checked")).toHaveLength(1);
+        expect(container.querySelector(".zen-bulk-actions__number-of-selected")).not.toBeNull();
+        expect(container.querySelector(".zen-bulk-actions__number-of-selected")?.textContent).toBe("1 selected");
+        expect(container.querySelector(".zen-bulk-actions__action-button")).not.toBeNull();
+    });
+    test("selectable: all selected", async () => {
+        const selectable = {
+            selection: { all: true, selected: [] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelectorAll(".zen-checkbox__input:checked")).toHaveLength(3);
+        expect(container.querySelector(".zen-bulk-actions__number-of-selected")).not.toBeNull();
+        expect(container.querySelector(".zen-bulk-actions__number-of-selected")?.textContent).toBe("All selected");
+        expect(container.querySelector(".zen-bulk-actions__action-button")).not.toBeNull();
+    });
+    test("selectable: turn off all selected", async () => {
+        const selectable = {
+            selection: { all: false, selected: [] },
+            onSelect: jest.fn(),
+            turnOffSelectAll: true
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        const button = container.querySelector(".zen-selectable-column__popup");
+        expect(document.querySelector(".zen-popup")).toBeNull();
+        // open popup with select options
+        await (0, react_2.act)(() => react_1.fireEvent.click(button));
+        expect(document.querySelector(".zen-popup")).not.toBeNull();
+        const menuItems = document.querySelectorAll(".zen-popup ul.zen-menu > li");
+        expect(menuItems.length).toBe(1);
+        expect(menuItems[0].textContent).toBe("Select current page");
+    });
+    test("selectable: turn off all selected (if item selected)", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            turnOffSelectAll: true
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        const button = container.querySelector(".zen-selectable-column__popup");
+        expect(document.querySelector(".zen-popup")).toBeNull();
+        // open popup with select options
+        await (0, react_2.act)(() => react_1.fireEvent.click(button));
+        expect(document.querySelector(".zen-popup")).not.toBeNull();
+        const menuItems = document.querySelectorAll(".zen-popup ul.zen-menu > li");
+        expect(menuItems.length).toBe(2);
+        expect(menuItems[0].textContent).toBe("Select current page");
+        expect(menuItems[1].textContent).toBe("Deselect all");
+    });
+    test("selectable: turn off all selected (if current page selected)", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1", "2"] },
+            onSelect: jest.fn(),
+            turnOffSelectAll: true
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        const button = container.querySelector(".zen-selectable-column__popup");
+        expect(document.querySelector(".zen-popup")).toBeNull();
+        // open popup with select options
+        await (0, react_2.act)(() => react_1.fireEvent.click(button));
+        expect(document.querySelector(".zen-popup")).not.toBeNull();
+        const menuItems = document.querySelectorAll(".zen-popup ul.zen-menu > li");
+        expect(menuItems.length).toBe(1);
+        expect(menuItems[0].textContent).toBe("Deselect all");
+    });
+    test("selectable: click on header checkbox selects all", async () => {
+        const selectable = {
+            selection: { all: false, selected: [] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        await (0, react_2.act)(() => react_1.fireEvent.click(container.querySelector(".zen-checkbox__input")));
+        expect(selectable.onSelect).toHaveBeenCalledWith({ all: true, selected: [] });
+    });
+    test("selectable: select none", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1", "2"] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        await (0, react_2.act)(() => react_1.fireEvent.click(container.querySelector(".zen-checkbox__input")));
+        expect(selectable.onSelect).toHaveBeenCalledWith({ all: false, selected: [] });
+    });
+    test("selectable: select one row", async () => {
+        const selectable = {
+            selection: { all: false, selected: [] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        await (0, react_2.act)(() => react_1.fireEvent.click(container.querySelector("[data-row-id='1'] .zen-checkbox__input")));
+        expect(selectable.onSelect).toHaveBeenCalledWith({ all: false, selected: ["1"] });
+    });
+    test("selectable: deselect one row", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        await (0, react_2.act)(() => react_1.fireEvent.click(container.querySelector("[data-row-id='1'] .zen-checkbox__input")));
+        expect(selectable.onSelect).toHaveBeenCalledWith({ all: false, selected: [] });
+    });
+    test("selectable: headerTitle", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            headerTitle: () => "Custom header title"
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector(".zen-checkbox__input[aria-label='Custom header title']")).not.toBeNull();
+    });
+    test("selectable: checkboxTitle", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            checkboxTitle: (e) => "Custom checkbox title " + e.name
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector("[aria-label='Custom checkbox title Entity 1']")).not.toBeNull();
+    });
+    test("selectable: checkboxDisabled", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            checkboxDisabled: (e) => e.id === "1"
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector("[data-row-id='1'] .zen-checkbox__input:disabled")).not.toBeNull();
+    });
+    test("selectable: checkboxVisible", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            checkboxVisible: (e) => e.id !== "1"
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector("[data-row-id='1'] .zen-selectable-column--no-checkbox")).not.toBeNull();
+    });
+    test("selectable: checkboxInHeader", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            checkboxInHeader: false
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector(".zen-data-grid__header-cell-content .zen-checkbox__input")).toBeNull();
+    });
+    test("selectable: header", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            header: false
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector("[data-column-id='name'] .zen-data-grid-header")).toBeNull();
+    });
+    test("selectable: selection limit disabled", async () => {
+        const selectable = {
+            selection: { all: false, selected: [] },
+            onSelect: jest.fn(),
+            selectionLimit: 1
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector(".zen-checkbox__input:disabled")).toBeNull();
+    });
+    test("selectable: selection limit", async () => {
+        const selectable = {
+            selection: { all: false, selected: ["1"] },
+            onSelect: jest.fn(),
+            selectionLimit: 1
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelector("[data-row-id='2'] .zen-checkbox__input:disabled")).not.toBeNull();
+    });
+    test("selectable: partial selection on mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const selectable = {
+            selection: { all: false, selected: ["2"] },
+            onSelect: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        expect(container.querySelectorAll(".zen-checkbox__input:checked")).toHaveLength(1);
+        expect(document.body.querySelector(".zen-data-feed-select-panel .zen-bulk-actions__number-of-selected")).not.toBeNull();
+        expect(document.body.querySelector(".zen-data-feed-select-panel .zen-bulk-actions__number-of-selected")?.textContent).toBe("1 selected");
+        expect(document.body.querySelector(".zen-data-feed-select-panel .zen-bulk-actions__action-button")).not.toBeNull();
+        selectable.onSelect.mockClear();
+        await (0, react_2.act)(async () => {
+            react_1.fireEvent.click(document.querySelector(".zen-bulk-actions__button-clear"));
+            await waitPromise(300);
+        });
+        expect(selectable.onSelect).toHaveBeenCalledWith({ all: false, selected: [] });
+        expect(container.querySelectorAll(".zen-checkbox")).toHaveLength(0);
+    });
+    test("selectable: hide FeedSelectionPanel on escape", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const selectable = {
+            selection: { all: false, selected: ["2"] },
+            onSelect: jest.fn()
+        };
+        await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, selectable: selectable, children: (0, jsx_runtime_1.jsxs)(tableBulkActions_1.TableBulkActions, { children: [(0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionLink, { title: "View on map", icon: iconMap_1.IconMap, link: "#yourlink", type: "primary" }), (0, jsx_runtime_1.jsx)(bulkActions_1.BulkActions.ActionButton, { title: "Delete", icon: iconClose_1.IconClose, clickHandler: () => { selectable.onSelect({ all: false, selected: [] }); }, type: "tertiary-destructive" })] }) }));
+        selectable.onSelect.mockClear();
+        await (0, react_2.act)(async () => {
+            react_1.fireEvent.keyDown(document.querySelector(".zen-data-feed-select-panel"), { key: "Escape" });
+            await waitPromise(300);
+        });
+        await (0, react_1.waitFor)(() => document.querySelector(".zen-data-feed-select-panel") === null);
+    });
+    test("sortable columns", async () => {
+        const sortable = {
+            pageName: "testPageName",
+            value: { sortColumn: "date", sortDirection: interfaces_1.ColumnSortDirection.Ascending },
+            onChange: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, sortable: sortable }));
+        expect(container.querySelectorAll(".zen-sortable-column")).toHaveLength(2);
+        await (0, react_2.act)(() => react_1.fireEvent.click(container.querySelector("[data-column-id='date'] .zen-sortable-column__button")));
+        await (0, react_1.waitFor)(() => expect(sortable.onChange).toHaveBeenCalledWith({ sortColumn: "date", sortDirection: interfaces_1.ColumnSortDirection.Descending }));
+    });
+    test("sortable columns: off for a column", async () => {
+        const columns2 = [
+            { id: "name", title: "Name" },
+            { id: "date", title: "Date", sortable: false }
+        ];
+        const sortable = {
+            pageName: "testPageName",
+            value: undefined,
+            onChange: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns2, sortable: sortable }));
+        expect(container.querySelectorAll(".zen-sortable-column")).toHaveLength(1);
+    });
+    test("sortable columns: mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const sortable = {
+            pageName: "testPageName",
+            value: undefined,
+            onChange: jest.fn()
+        };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, sortable: sortable }));
+        await (0, react_1.waitFor)(() => expect(container.querySelector(".zen-sortable-column--mobile")).not.toBeNull());
+        await (0, react_2.act)(() => react_1.fireEvent.click(container.querySelector(".zen-sortable-column--mobile button")));
+        await (0, react_1.waitFor)(() => expect(sortable.onChange).toHaveBeenCalledWith({ sortColumn: "name", sortDirection: "asc" }));
+    });
+    test("flexible columns", async () => {
+        const flexible = { pageName: "testPageName" };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, flexible: flexible }));
+        expect(container.querySelectorAll(".zen-flexible-column--draggable")).toHaveLength(2);
+        const columnsButton = container.querySelector("[title='Show list of columns']");
+        expect(columnsButton).not.toBeNull();
+    });
+    test("flexible columns: mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const flexible = { pageName: "testPageName" };
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, flexible: flexible }));
+        expect(container.querySelectorAll(".zen-flexible-column--draggable")).toHaveLength(0);
+        const columnsButton = container.querySelector("[title='Show list of columns']");
+        expect(columnsButton).not.toBeNull();
+    });
+    test("feed expandable (default)", async () => {
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, feedExpandable: {} }));
+        expect(container.querySelector(".zen-data-feed-expand-control")).toBeNull();
+    });
+    test("feed expandable (default): mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, feedExpandable: {} }));
+        expect(container.querySelector(".zen-data-feed-expand-control")).not.toBeNull();
+    });
+    test("feed expandable (isExpanded: true): mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, feedExpandable: { visibleColumns: 1, isExpanded: true } }));
+        expect(container.querySelector(".zen-data-feed-expand-control")).not.toBeNull();
+        // expanded
+        // (1(main feedback item row) + 1(column))  * 2 (entities)
+        expect(container.querySelectorAll(".zen-feed-item__label")).toHaveLength(4);
+        const expandButton = container.querySelector(".zen-data-feed-expand-control");
+        expect(expandButton).not.toBeNull();
+        await (0, react_2.act)(async () => {
+            react_1.fireEvent.click(expandButton);
+            await Promise.resolve();
+        });
+        // 1(main feedback item row) * 2 (entities)
+        expect(container.querySelectorAll(".zen-feed-item__label")).toHaveLength(2);
+    });
+    test("feed expandable (isExpanded: false): mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, feedExpandable: { visibleColumns: 1, isExpanded: false } }));
+        // collapsed
+        // 1(main feedback item row) * 2 (entities)
+        expect(container.querySelectorAll(".zen-feed-item__label")).toHaveLength(2);
+        expect(container.querySelector(".zen-data-feed-expand-control")).not.toBeNull();
+    });
+    test("feed expandable (isExpanded: true): mobile", async () => {
+        useMobile_1.useMobile.mockReturnValue(true);
+        const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entities, columns: columns, feedExpandable: { visibleColumns: 1, isExpanded: true } }));
+        // collapsed
+        // 2(main + secondary feedback item row) * 2 (entities)
+        expect(container.querySelectorAll(".zen-feed-item__label")).toHaveLength(4);
+        expect(container.querySelector(".zen-data-feed-expand-control")).not.toBeNull();
+    });
+    test("table helpers are defined", () => {
+        expect(table_1.getEmptySelection).toBeDefined();
+        expect(interfaces_1.ColumnSortDirection).toBeDefined();
+        expect(table_1.getSortableValue).toBeDefined();
+        expect(table_1.ActionsColumn).toBeDefined();
+        expect(table_1.MainColumn).toBeDefined();
+        expect(table_1.CheckboxColumn).toBeDefined();
+        expect(table_1.ActionLinkColumn).toBeDefined();
+    });
+    // Nested Table Tests
+    describe("Nested Table functionality", () => {
+        const nestedEntities = [
+            {
+                id: "1",
+                name: "Parent 1",
+                date: "2025-01-05",
+                children: [
+                    { id: "1-1", childName: "Child 1-1", childValue: 10, parentId: "1" },
+                    { id: "1-2", childName: "Child 1-2", childValue: 20, parentId: "1" }
+                ]
+            },
+            {
+                id: "2",
+                name: "Parent 2",
+                date: "2025-01-06",
+                children: [
+                    { id: "2-1", childName: "Child 2-1", childValue: 30, parentId: "2" }
+                ]
+            },
+            {
+                id: "3",
+                name: "Parent 3",
+                date: "2025-01-07"
+                // No children
+            }
+        ];
+        const nestedColumns = [
+            {
+                id: "name",
+                title: "Name",
+                columnComponent: {
+                    render: (entity) => entity.name,
+                    renderNested: (entity) => `Child: ${entity.childName}`
+                }
+            },
+            {
+                id: "date",
+                title: "Date/Value",
+                columnComponent: {
+                    render: (entity) => entity.date,
+                    renderNested: (entity) => entity.childValue.toString()
+                }
+            }
+        ];
+        test("renders nested table with expandable rows", async () => {
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns }));
+            // Should render parent rows
+            expect(react_1.screen.getByText("Parent 1")).not.toBeNull();
+            expect(react_1.screen.getByText("Parent 2")).not.toBeNull();
+            expect(react_1.screen.getByText("Parent 3")).not.toBeNull();
+            // Should not show child rows initially (collapsed)
+            expect(react_1.screen.queryByText("Child: Child 1-1")).toBeNull();
+            expect(react_1.screen.queryByText("Child: Child 1-2")).toBeNull();
+            // Should show expand buttons for rows with children
+            const expandButtons = container.querySelectorAll(".zen-nested-button__button");
+            expect(expandButtons.length).toBe(2); // Parent 1 and Parent 2 have children, Parent 3 does not
+        });
+        test("expands and collapses nested rows on click", async () => {
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns }));
+            // Find first expand button (for Parent 1)
+            const firstRow = container.querySelectorAll(".zen-data-grid__row")[0];
+            const expandButton = firstRow.querySelector(".zen-nested-button__button");
+            expect(expandButton).not.toBeNull();
+            // Click to expand
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(expandButton);
+            });
+            await (0, react_1.waitFor)(() => {
+                // Should now show child rows
+                expect(react_1.screen.queryByText("Child: Child 1-1")).not.toBeNull();
+                expect(react_1.screen.queryByText("Child: Child 1-2")).not.toBeNull();
+            });
+            // Click to collapse
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(expandButton);
+            });
+            await (0, react_1.waitFor)(() => {
+                // Should hide child rows again
+                expect(react_1.screen.queryByText("Child: Child 1-1")).toBeNull();
+                expect(react_1.screen.queryByText("Child: Child 1-2")).toBeNull();
+            });
+        });
+        test("handles controlled expanded state", async () => {
+            const onExpand = jest.fn();
+            const expandedRows = ["1"];
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns, expandedRows: expandedRows, onExpand: onExpand }));
+            // Should show expanded child rows initially
+            expect(react_1.screen.queryByText("Child: Child 1-1")).not.toBeNull();
+            expect(react_1.screen.queryByText("Child: Child 1-2")).not.toBeNull();
+            // Find and click expand button to collapse
+            const firstRow = container.querySelectorAll(".zen-data-grid__row")[0];
+            const expandButton = firstRow.querySelector(".zen-nested-button__button");
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(expandButton);
+            });
+            expect(onExpand).toHaveBeenCalledWith("1", false);
+        });
+        test("handles entities without children", async () => {
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns }));
+            // Parent 3 has no children, should not have expand button
+            const allRows = container.querySelectorAll(".zen-data-grid__row");
+            const parent3Row = Array.from(allRows).find(row => row.textContent?.includes("Parent 3"));
+            expect(parent3Row).toBeTruthy();
+            expect(parent3Row?.querySelector(".zen-nested-button__button")).toBeNull();
+        });
+        test("uses same interface for parent and child when renderNested not provided", async () => {
+            const simpleColumns = [
+                { id: "name", title: "Name" },
+                { id: "date", title: "Date" }
+            ];
+            const simpleEntities = [
+                {
+                    id: "1",
+                    name: "Parent 1",
+                    date: "2025-01-05",
+                    children: [
+                        { id: "1-1", name: "Child 1-1", date: "2025-01-06" },
+                        { id: "1-2", name: "Child 1-2", date: "2025-01-07" }
+                    ]
+                }
+            ];
+            await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: simpleEntities, columns: simpleColumns, expandedRows: ["1"] }));
+            // Should render both parent and child with same renderer
+            expect(react_1.screen.queryByText("Parent 1")).not.toBeNull();
+        });
+        test("handles multiple expanded rows", async () => {
+            const expandedRows = ["1", "2"];
+            await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns, expandedRows: expandedRows }));
+            // Should show child rows for both expanded parents
+            expect(react_1.screen.queryByText("Child: Child 1-1")).not.toBeNull();
+            expect(react_1.screen.queryByText("Child: Child 1-2")).not.toBeNull();
+            expect(react_1.screen.queryByText("Child: Child 2-1")).not.toBeNull();
+        });
+        test("nested table on mobile (feed view)", async () => {
+            useMobile_1.useMobile.mockReturnValue(true);
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns, expandedRows: ["1"] }));
+            // Should render as feed
+            expect(container.querySelector(".zen-data-feed")).not.toBeNull();
+            // Should show parent items
+            expect(container.querySelector(".zen-feed-item")).not.toBeNull();
+            // Should handle nested data in feed view
+            const feedItems = container.querySelectorAll(".zen-feed-item");
+            expect(feedItems.length).toBeGreaterThan(0);
+        });
+        test("mobile nested table expand/collapse children", async () => {
+            useMobile_1.useMobile.mockReturnValue(true);
+            const onExpand = jest.fn();
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns, onExpand: onExpand }));
+            // Should render as feed
+            expect(container.querySelector(".zen-data-feed")).not.toBeNull();
+            // Find nested button for Parent 1 (should have expand button)
+            const expandButtons = container.querySelectorAll(".zen-nested-button__button");
+            expect(expandButtons.length).toBe(2); // Parent 1 and Parent 2 have children
+            // Initially, child rows should not be visible (collapsed state)
+            expect(react_1.screen.queryByText("Child: Child 1-1")).toBeNull();
+            expect(react_1.screen.queryByText("Child: Child 1-2")).toBeNull();
+            // Click the expand button for Parent 1
+            const firstExpandButton = expandButtons[0];
+            expect(firstExpandButton).toHaveAttribute("aria-label", "Expand");
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(firstExpandButton);
+            });
+            // Should call onExpand with correct parameters
+            await (0, react_1.waitFor)(() => {
+                expect(onExpand).toHaveBeenCalledWith("1", true);
+            });
+            // Test with controlled expanded state - render again with expanded row
+            const { container: expandedContainer } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns, expandedRows: ["1"], onExpand: onExpand }));
+            // Now child items should be visible in the nested data section
+            await (0, react_1.waitFor)(() => {
+                const nestedSections = expandedContainer.querySelectorAll(".zen-feed-item__nested");
+                expect(nestedSections.length).toBeGreaterThan(0);
+                // Check for child content in nested sections
+                const hasChildContent = Array.from(nestedSections).some(section => section.textContent?.includes("Child: Child 1-1") ||
+                    section.textContent?.includes("Child: Child 1-2"));
+                expect(hasChildContent).toBeTruthy();
+            });
+            // Find expand button in expanded state (should now be "Collapse")
+            const collapseButtons = expandedContainer.querySelectorAll(".zen-nested-button__button");
+            const firstCollapseButton = collapseButtons[0];
+            expect(firstCollapseButton).toHaveAttribute("aria-label", "Collapse");
+            // Click to collapse
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(firstCollapseButton);
+            });
+            // Should call onExpand with collapse
+            await (0, react_1.waitFor)(() => {
+                expect(onExpand).toHaveBeenCalledWith("1", false);
+            });
+        });
+        test("mobile nested table with multiple expandable rows", async () => {
+            useMobile_1.useMobile.mockReturnValue(true);
+            const onExpand = jest.fn();
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns, expandedRows: ["1", "2"], onExpand: onExpand }));
+            // Should render as feed with multiple expanded sections
+            expect(container.querySelector(".zen-data-feed")).not.toBeNull();
+            // Should show nested content for both expanded parents
+            const nestedSections = container.querySelectorAll(".zen-feed-item__nested");
+            expect(nestedSections.length).toBeGreaterThanOrEqual(2);
+            // Verify child content is present for both parents
+            const allNestedText = Array.from(nestedSections).map(section => section.textContent).join(" ");
+            expect(allNestedText).toContain("Child: Child 1-1");
+            expect(allNestedText).toContain("Child: Child 1-2");
+            expect(allNestedText).toContain("Child: Child 2-1");
+        });
+        test("mobile nested table with no children doesn't show expand behavior", async () => {
+            useMobile_1.useMobile.mockReturnValue(true);
+            const onExpand = jest.fn();
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: nestedColumns, onExpand: onExpand }));
+            // Find Parent 3 which has no children
+            const parent3Item = Array.from(container.querySelectorAll(".zen-feed-item")).find(item => item.textContent?.includes("Parent 3"));
+            expect(parent3Item).toBeTruthy();
+            // Click on Parent 3
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(parent3Item);
+            });
+            // onExpand should not be called for items without children
+            // or if called, it should handle gracefully
+            await (0, react_1.waitFor)(() => {
+                // Either not called, or called but no visual change
+                const nestedSections = container.querySelectorAll(".zen-feed-item__nested");
+                const parent3NestedContent = Array.from(nestedSections).find(section => section.closest(".zen-feed-item")?.textContent?.includes("Parent 3"));
+                expect(parent3NestedContent).toBeFalsy();
+            });
+        });
+        test("nested table with loading state", async () => {
+            const entitiesWithLoading = [
+                {
+                    id: "1",
+                    name: "Parent 1",
+                    date: "2025-01-05",
+                    children: [
+                        { id: "1-1", childName: "Child 1-1", childValue: 10, parentId: "1", isLoading: true }
+                    ]
+                }
+            ];
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entitiesWithLoading, columns: nestedColumns, expandedRows: ["1"] }));
+            // Should show loading skeleton for nested loading row
+            expect(container.querySelector(".zen-skeleton")).not.toBeNull();
+        });
+        test("nested table with custom column renderers", async () => {
+            const customColumns = [
+                {
+                    id: "name",
+                    title: "Custom Name",
+                    columnComponent: {
+                        render: (entity) => (0, jsx_runtime_1.jsx)("strong", { children: entity.name }),
+                        renderNested: (entity) => (0, jsx_runtime_1.jsxs)("em", { children: ["Nested: ", entity.childName] }),
+                        renderHeader: (title) => (0, jsx_runtime_1.jsx)("span", { className: "custom-header", children: title })
+                    }
+                }
+            ];
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: customColumns, expandedRows: ["1"] }));
+            // Should use custom header renderer
+            expect(container.querySelector(".custom-header")).not.toBeNull();
+            // Should use custom parent renderer
+            const strongElements = container.querySelectorAll("strong");
+            expect(strongElements.length).toBeGreaterThan(0);
+            expect(strongElements[0].textContent).toBe("Parent 1");
+            // Should use custom nested renderer
+            const emElements = container.querySelectorAll("em");
+            expect(emElements.length).toBeGreaterThan(0);
+            expect(emElements[0].textContent).toContain("Nested: Child 1-1");
+        });
+        test("nested table with feed render", async () => {
+            const feedColumns = [
+                {
+                    id: "name",
+                    title: "Name",
+                    columnComponent: {
+                        render: (entity) => entity.name,
+                        renderNested: (entity) => entity.childName,
+                        renderFeed: (title, entity) => [title, `Feed Parent: ${entity.name}`]
+                    }
+                }
+            ];
+            useMobile_1.useMobile.mockReturnValue(true);
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: feedColumns, expandedRows: ["1"] }));
+            // Should render feed with custom feed renderer
+            expect(container.textContent).toContain("Feed Parent: Parent 1");
+        });
+        test("nested table row click handlers", async () => {
+            const onRowClick = jest.fn();
+            const onNestedRowClick = jest.fn();
+            const clickableColumns = [
+                {
+                    id: "name",
+                    title: "Name",
+                    columnComponent: {
+                        render: (entity) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => onRowClick(entity.id), children: entity.name })),
+                        renderNested: (entity) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => onNestedRowClick(entity.id), children: entity.childName }))
+                    }
+                }
+            ];
+            await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: clickableColumns, expandedRows: ["1"] }));
+            // Click parent row button
+            const parentButton = react_1.screen.getByText("Parent 1");
+            react_1.fireEvent.click(parentButton);
+            expect(onRowClick).toHaveBeenCalledWith("1");
+            // Click child row button
+            const childButton = react_1.screen.getByText("Child 1-1");
+            react_1.fireEvent.click(childButton);
+            expect(onNestedRowClick).toHaveBeenCalledWith("1-1");
+        });
+        test("nested table with empty children array", async () => {
+            const entitiesWithEmptyChildren = [
+                {
+                    id: "1",
+                    name: "Parent 1",
+                    date: "2025-01-05",
+                    children: []
+                }
+            ];
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: entitiesWithEmptyChildren, columns: nestedColumns }));
+            // Expand button might be present even for empty arrays, but clicking shouldn't show children
+            const expandButton = container.querySelector(".zen-nested-button__button");
+            if (expandButton) {
+                react_1.fireEvent.click(expandButton);
+                // Should not show any child content
+                expect(react_1.screen.queryByText("Child:")).toBeNull();
+            }
+            // At minimum, should render the parent
+            expect(react_1.screen.queryByText("Parent 1")).not.toBeNull();
+        });
+        test("handles deeply nested structure", async () => {
+            // Test with more complex nesting scenarios
+            const deepNestedEntities = [
+                {
+                    id: "1",
+                    name: "Parent 1",
+                    date: "2025-01-05",
+                    children: new Array(10).fill(null).map((_, index) => ({
+                        id: `1-${index}`,
+                        childName: `Child ${index}`,
+                        childValue: index * 10,
+                        parentId: "1"
+                    }))
+                }
+            ];
+            await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: deepNestedEntities, columns: nestedColumns, expandedRows: ["1"] }));
+            // Should render all 10 children
+            for (let i = 0; i < 10; i++) {
+                expect(react_1.screen.queryByText(`Child: Child ${i}`)).not.toBeNull();
+            }
+        });
+        test("renders and executes primary actions for parent and nested rows", async () => {
+            const mockParentHandler = jest.fn();
+            const mockNestedHandler = jest.fn();
+            const actionsColumn = {
+                id: "actions",
+                title: "Actions",
+                columnComponent: new table_1.ActionsColumn({
+                    title: "Actions",
+                    primaryActions: (entity, isNested) => {
+                        const id = entity.id;
+                        return isNested
+                            ? ([{
+                                    id: `nested-edit-${id}`,
+                                    icon: iconMap_1.IconMap,
+                                    createTitle: () => `Edit Child ${id}`,
+                                    handler: (ent) => mockNestedHandler(ent, isNested)
+                                }])
+                            : ([{
+                                    id: `parent-edit-${id}`,
+                                    icon: iconMap_1.IconMap,
+                                    createTitle: () => `Edit Parent ${id}`,
+                                    handler: (ent) => mockParentHandler(ent, isNested)
+                                }]);
+                    },
+                    render: () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}))
+                })
+            };
+            const allColumns = [...nestedColumns, actionsColumn];
+            const { container } = await renderAsync((0, jsx_runtime_1.jsx)(table_1.Table, { entities: nestedEntities, columns: allColumns, expandedRows: ["1"] }));
+            // Find first expand and action buttons (for Parent 1)
+            const firstRow = container.querySelectorAll(".zen-data-grid__row")[0];
+            const actionButton = firstRow.querySelector(".zen-actions-column__action");
+            const expandButton = firstRow.querySelector(".zen-nested-button__button");
+            expect(actionButton).not.toBeNull();
+            expect(expandButton).not.toBeNull();
+            expect(actionButton).toHaveAttribute("title", "Edit Parent 1");
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(actionButton);
+            });
+            // Check if the parent handler was called with the parent entity and isNested=false
+            expect(mockParentHandler).toHaveBeenCalledTimes(1);
+            expect(mockParentHandler).toHaveBeenCalledWith(expect.objectContaining({ id: "1", name: "Parent 1" }), false);
+            // Test Nested Action (Row 1-1)
+            const nestedRow = container.querySelectorAll(".zen-data-grid__row")[1];
+            const nestedActionButton = nestedRow.querySelector(".zen-actions-column__action");
+            expect(nestedActionButton).toHaveAttribute("title", "Edit Child 1-1");
+            (0, react_2.act)(() => {
+                react_1.fireEvent.click(nestedActionButton);
+            });
+            // Check if the nested handler was called with the child entity and isNested=true
+            expect(mockNestedHandler).toHaveBeenCalledTimes(1);
+            expect(mockNestedHandler).toHaveBeenCalledWith(expect.objectContaining({ id: "1-1", childName: "Child 1-1" }), true);
+        });
+        afterEach(() => {
+            useMobile_1.useMobile.mockReturnValue(false);
+        });
+    });
+});
+//# sourceMappingURL=table.test.js.map