@geotab/zenith 1.26.6-beta.3 → 2.0.0-beta.0

package/esm/table/flexible/mergeColumnSettings.js

@@ -0,0 +1,32 @@
+const createColumnSettings = (c) => ({
+    name: c.id,
+    visible: c.visible || true,
+    width: (c.meta || {}).defaultWidth
+});
+const findPrevColumnIndex = (columns, settings, index) => {
+    if (index === 0) {
+        return 0;
+    }
+    const name = columns[index - 1].id;
+    return settings.findIndex(s => s.name === name) + 1;
+};
+export const mergeColumnsSettings = (columns, savedSettings) => {
+    const columnSettingsMap = new Set(savedSettings.map(s => s.name));
+    let settings = savedSettings;
+    if (settings.length === 0) {
+        return columns.map(createColumnSettings);
+    }
+    // we should add all new columns that we don't have in settings
+    for (let i = 0; i < columns.length; ++i) {
+        const column = columns[i];
+        if (!columnSettingsMap.has(column.id)) {
+            const index = findPrevColumnIndex(columns, settings, i);
+            settings = [
+                ...settings.slice(0, index),
+                createColumnSettings(column),
+                ...settings.slice(index)
+            ];
+        }
+    }
+    return settings;
+};

package/esm/table/flexible/useFlexibleColumns.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from "react";
+import { IColumnSettings, IColumnSettingsStorage } from "./interfaces";
+import { IListColumn } from "../table";
+import "./flexibleColumns.less";
+import { IRowEntity } from "../../dataGrid/row/row";
+import { IEntityWithId } from "../../commonHelpers/entity";
+export interface IFlexibleColumnsOptions {
+    pageName: string;
+    storage?: IColumnSettingsStorage;
+    value?: IColumnSettings[] | undefined;
+    onChange?: (newSettings: IColumnSettings[]) => void;
+    columnsPopup?: boolean;
+    sortGroups?: (groupA: string, groupB: string) => number;
+    sortColumns?: (groupA: string, groupB: string) => number;
+}
+export declare const getColumnSettings: (pageName: string, defaultValue?: IColumnSettings[] | undefined) => import("./columnSettingsStorage").IColumnSettings[] | undefined;
+export declare const useFlexibleColumns: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], flexible: IFlexibleColumnsOptions | undefined, gridRef: RefObject<HTMLElement>, columnsPopupRef: RefObject<HTMLElement> | undefined, isFeed: boolean) => {
+    flexibleColumns: IListColumn<T, N>[];
+    columnsPopup: import("react/jsx-runtime").JSX.Element | null;
+};

package/esm/table/flexible/useFlexibleColumns.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { FlexibleHeader } from "./flexibleHeader";
+import { FlexibleColumnResizer } from "../../dataGrid/withFlexibleColumns/flexibleColumnsResizer";
+import { FlexibleColumnReorder } from "../../dataGrid/withFlexibleColumns/flexibleColumnsReorder";
+import { useSettingsStorage } from "./useSettingsStorage";
+import { getDefaultSettings } from "./getDefaultSettings";
+import { ColumnsPopup } from "./columnsPopup";
+import { ColumnSettingsStorage } from "./columnSettingsStorage";
+import { ActionsColumn } from "../../dataGrid/columns/actionsColumn/actionsColumn";
+import { mergeColumnsSettings } from "./mergeColumnSettings";
+export const getColumnSettings = (pageName, defaultValue) => {
+    const storage = new ColumnSettingsStorage(pageName || "", localStorage, defaultValue);
+    return storage.getItem();
+};
+const FlexibleWrapperName = "Flexible";
+export const useFlexibleColumns = (columns, flexible, gridRef, columnsPopupRef, isFeed) => {
+    const { settingsStorage, saveSettingsToTheStorage } = useSettingsStorage((flexible === null || flexible === void 0 ? void 0 : flexible.pageName) || "", flexible === null || flexible === void 0 ? void 0 : flexible.storage);
+    const defaultColumnSettings = useMemo(() => getDefaultSettings(columns), [columns]);
+    const columnSettingsFromStorage = settingsStorage.getItem();
+    const [columnSettingsState, setColumnSettingsState] = useState(columnSettingsFromStorage && columnSettingsFromStorage.length > 0 ? columnSettingsFromStorage : defaultColumnSettings);
+    const columnSettings = useMemo(() => {
+        const value = flexible && flexible.value ? flexible.value : columnSettingsState;
+        if (value.length === 0) {
+            return defaultColumnSettings;
+        }
+        return mergeColumnsSettings(columns, value);
+    }, [columnSettingsState, columns, defaultColumnSettings, flexible]);
+    const onChangeColumnSettings = useCallback((newSettings) => {
+        var _a;
+        setColumnSettingsState(newSettings);
+        (_a = flexible === null || flexible === void 0 ? void 0 : flexible.onChange) === null || _a === void 0 ? void 0 : _a.call(flexible, newSettings);
+    }, [flexible]);
+    const onResetListener = useCallback(async () => {
+        await saveSettingsToTheStorage([]);
+        onChangeColumnSettings(defaultColumnSettings);
+    }, [defaultColumnSettings, onChangeColumnSettings, saveSettingsToTheStorage]);
+    const onChangeListener = useCallback(async (newSettings) => {
+        await saveSettingsToTheStorage(newSettings);
+        onChangeColumnSettings(newSettings);
+    }, [onChangeColumnSettings, saveSettingsToTheStorage]);
+    const flexibleColumns = useMemo(() => {
+        if (!flexible) {
+            return columns;
+        }
+        const visibleColumnsMap = new Map(columns.map(c => [c.id, c]));
+        return columnSettings.map((s, index) => {
+            var _a;
+            const column = visibleColumnsMap.get(s.name);
+            if (column === undefined || !s.visible) {
+                return undefined;
+            }
+            const wrapper = {
+                name: FlexibleWrapperName,
+                render: (value) => value,
+                renderHeader: (title) => _jsx(FlexibleHeader, { title: title, draggable: !(column.columnComponent instanceof ActionsColumn || column.draggable === false), resizable: index !== 0 })
+            };
+            const wrappers = (column.wrappers || []).filter(w => w.name !== FlexibleWrapperName);
+            const width = s.width || ((_a = column.meta) === null || _a === void 0 ? void 0 : _a.defaultWidth);
+            return (Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, (column.meta || {})), { defaultWidth: width }), wrappers: [
+                    ...wrappers,
+                    wrapper
+                ] }));
+        }).filter(c => c !== undefined);
+    }, [columnSettings, columns, flexible]);
+    const columnsPopup = useMemo(() => {
+        if (!flexible) {
+            return null;
+        }
+        if (!columnsPopupRef) {
+            return null;
+        }
+        if (flexible.columnsPopup === false) {
+            return null;
+        }
+        if (flexibleColumns.length === 0) {
+            return null;
+        }
+        return _jsx(ColumnsPopup, { columns: columns.filter(c => !(c.columnComponent instanceof ActionsColumn)), columnSettings: columnSettings, triggerRef: columnsPopupRef, sortGroups: flexible.sortGroups, sortColumns: flexible.sortColumns, onReset: onResetListener, onChange: onChangeListener });
+    }, [columnSettings, columns, columnsPopupRef, flexible, flexibleColumns.length, onChangeListener, onResetListener]);
+    const onReorderListener = useCallback(async ([from, to]) => {
+        if (from === to) {
+            return;
+        }
+        const column = flexibleColumns[from];
+        // we should avoid moving actions column
+        const limitedTo = Math.min(to, flexibleColumns.length - 1);
+        const where = flexibleColumns[limitedTo];
+        if (column === undefined) {
+            return;
+        }
+        // update order in settings
+        const settingsWithoutColumn = columnSettings.filter(s => s.name !== column.id);
+        const originalSettings = columnSettings.filter(s => s.name === column.id)[0];
+        const sIndex = settingsWithoutColumn.findIndex(s => s.name === where.id);
+        const newColumnSettings = [
+            ...settingsWithoutColumn.slice(0, sIndex),
+            originalSettings,
+            ...settingsWithoutColumn.slice(sIndex)
+        ];
+        await saveSettingsToTheStorage(newColumnSettings);
+        onChangeColumnSettings(newColumnSettings);
+    }, [flexibleColumns, columnSettings, saveSettingsToTheStorage, onChangeColumnSettings]);
+    const onResizeColumn = useCallback(async ([index, width]) => {
+        const column = flexibleColumns[index];
+        if (column === undefined) {
+            return;
+        }
+        const newColumnSettings = columnSettings.map(s => {
+            if (s.name === column.id) {
+                return Object.assign(Object.assign({}, s), { width });
+            }
+            return s;
+        });
+        await saveSettingsToTheStorage(newColumnSettings);
+        onChangeColumnSettings(newColumnSettings);
+    }, [flexibleColumns, columnSettings, saveSettingsToTheStorage, onChangeColumnSettings]);
+    const isDraggable = useCallback((index) => {
+        const column = flexibleColumns[index];
+        return !(column.columnComponent instanceof ActionsColumn || column.draggable === false);
+    }, [flexibleColumns]);
+    useEffect(() => {
+        if (!gridRef.current) {
+            return () => { };
+        }
+        const resizer = new FlexibleColumnResizer(gridRef.current);
+        resizer.attach("resize", onResizeColumn);
+        resizer.add(flexibleColumns);
+        // reorder
+        const reorder = new FlexibleColumnReorder(gridRef.current, resizer, isDraggable);
+        reorder.attach("reorder", onReorderListener);
+        reorder.add();
+        return () => {
+            resizer.detach("resize");
+            resizer.remove();
+            reorder.detach("reorder");
+            reorder.remove();
+            return;
+        };
+    }, [onResizeColumn, onReorderListener, gridRef, flexibleColumns, isFeed, isDraggable]);
+    return { flexibleColumns, columnsPopup };
+};

package/esm/table/flexible/useSettingsStorage.d.ts

@@ -0,0 +1,5 @@
+import { IColumnSettings, IColumnSettingsStorage } from "./interfaces";
+export declare const useSettingsStorage: (pageName: string, storage: IColumnSettingsStorage | undefined) => {
+    settingsStorage: IColumnSettingsStorage;
+    saveSettingsToTheStorage: (newSettings: IColumnSettings[]) => Promise<void>;
+};

package/esm/table/flexible/useSettingsStorage.js

@@ -0,0 +1,19 @@
+import { useCallback, useMemo } from "react";
+import { ColumnsSettingsStorage } from "../../dataGrid/withFlexibleColumns/flexibleColumnsStorage";
+export const useSettingsStorage = (pageName, storage) => {
+    const settingsStorage = useMemo(() => storage || new ColumnsSettingsStorage(pageName || "", localStorage), [pageName, storage]);
+    const saveSettingsToTheStorage = useCallback((newSettings) => 
+    // not to block main thread this operation can be postponed
+    new Promise((resolve, reject) => {
+        setTimeout(() => {
+            try {
+                settingsStorage.setItem(newSettings);
+                resolve();
+            }
+            catch (e) {
+                reject(e);
+            }
+        }, 0);
+    }), [settingsStorage]);
+    return { settingsStorage, saveSettingsToTheStorage };
+};

package/esm/table/loading/useLoading.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import { IListColumn } from "../table";
+import { IListColumnBasic } from "../../dataGrid/listColumn";
+import { IRowEntity } from "../../dataGrid/row/row";
+import { IEntityWithId } from "../../commonHelpers/entity";
+export declare const DEFAULT_LOADING_ROWS = 50;
+export interface ILoadingOptions {
+    rows?: number;
+    addToEnd?: boolean;
+}
+export interface ILoading {
+    isLoading?: boolean;
+}
+export interface ILoadingEntity<N> extends ILoading {
+    children?: (N & ILoading)[];
+}
+export declare const useLoading: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isLoading: boolean | undefined, loading: ILoadingOptions | undefined) => {
+    loadingColumns: {
+        meta: {
+            renderPlaceholder: () => import("react/jsx-runtime").JSX.Element;
+            renderFeedPlaceholder: (_: ReactNode) => [ReactNode, ReactNode];
+            defaultWidth?: number | undefined;
+            initialSortDirection?: import("../table").ColumnSortDirection | undefined;
+        };
+        columnComponent: IListColumnBasic<T & ILoadingEntity<N>, N & ILoading>;
+        id: string;
+        title: string;
+        defaultValue?: string | undefined;
+        visibleOnHover?: boolean | undefined;
+        wrappers?: import("../table").IListColumnWrapper<T, N>[] | undefined;
+        sortable?: boolean | undefined;
+        draggable?: boolean | undefined;
+        colspan?: number | ((entity: T | N) => number | undefined) | undefined;
+        group?: string | undefined;
+        visible?: boolean | undefined;
+    }[];
+    loadingEntities: T[];
+};

package/esm/table/loading/useLoading.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { generateId } from "../../commonHelpers/generateId";
+import { defaultColumnComponent } from "../../dataGrid/extensions/defaultColumnComponent";
+import { Skeleton } from "../../skeleton/skeleton";
+export const DEFAULT_LOADING_ROWS = 50;
+const LoadingCell = ({ width, className }) => _jsx(Skeleton, { width: width, className: className });
+export const useLoading = (columns, entities, isLoading, loading) => {
+    const sampleEntity = useMemo(() => columns.map((column) => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el))), [columns]);
+    const generateLoadingEntities = useCallback(() => (new Array((loading === null || loading === void 0 ? void 0 : loading.rows) || DEFAULT_LOADING_ROWS).fill(undefined)).map(() => (Object.assign(Object.assign({}, sampleEntity), { isLoading: true, id: generateId() }))), [loading === null || loading === void 0 ? void 0 : loading.rows, sampleEntity]);
+    const loadingColumns = useMemo(() => columns.map(column => {
+        const columnComponent = column.columnComponent || defaultColumnComponent(column.id);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const renderNested = columnComponent.renderNested;
+        const renderFeed = columnComponent.renderFeed ? columnComponent.renderFeed.bind(columnComponent) : undefined;
+        const renderIcon = ("renderIcon" in columnComponent)
+            ? (entity, isNested) => entity.isLoading ? null : columnComponent.renderIcon(entity, isNested)
+            : undefined;
+        const loadingClassName = "zen-table__cell-loading";
+        return Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, (column.meta || {})), { renderPlaceholder: () => _jsx(LoadingCell, { className: loadingClassName }), renderFeedPlaceholder: (_) => [
+                    _jsx(LoadingCell, { className: loadingClassName }, `${column.id}_label`),
+                    _jsx(LoadingCell, { className: loadingClassName }, `${column.id}_value`)
+                ] }), columnComponent: {
+                render: (entity, isNested) => entity.isLoading ? _jsx(LoadingCell, { className: loadingClassName }) : columnComponent.render(entity, isNested),
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                renderNested: renderNested
+                    ? (entity) => entity.isLoading
+                        ? _jsx(LoadingCell, { className: loadingClassName })
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        : renderNested(entity)
+                    : undefined,
+                renderHeader: columnComponent.renderHeader ? columnComponent.renderHeader.bind(columnComponent) : undefined,
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                renderFeed: renderFeed || renderNested
+                    ? (title, entity, isNested) => entity.isLoading
+                        ? [
+                            _jsx(LoadingCell, { className: loadingClassName }, `${column.id}_${entity.id}_label`),
+                            _jsx(LoadingCell, { className: loadingClassName }, `${column.id}_${entity.id}_value`)
+                        ]
+                        : renderFeed
+                            ? renderFeed(title, entity, isNested)
+                            : [title, isNested
+                                    ? renderNested(entity)
+                                    : entity[column.id]
+                            ]
+                    : undefined,
+                renderIcon: renderIcon
+            } });
+    }), [columns]);
+    const loadingEntities = useMemo(() => {
+        if (!isLoading) {
+            return entities;
+        }
+        if (loading === null || loading === void 0 ? void 0 : loading.addToEnd) {
+            return [...entities, ...generateLoadingEntities()];
+        }
+        return generateLoadingEntities();
+    }, [entities, generateLoadingEntities, isLoading, loading === null || loading === void 0 ? void 0 : loading.addToEnd]);
+    return { loadingColumns, loadingEntities };
+};

package/esm/table/nested/nestedData.d.ts

@@ -0,0 +1,13 @@
+import { IEntityWithId } from "../../commonHelpers/entity";
+export declare const NestedData: <TParent extends IEntityWithId, TChild extends IEntityWithId>({ entities, children, expandedRows, useChildrenDataHook, maxHooks }: {
+    entities: TParent[];
+    expandedRows: string[];
+    useChildrenDataHook: (parentId: string, enabled: boolean) => {
+        data?: TChild[];
+        isLoading: boolean;
+        error: Error | null;
+        isError: boolean;
+    };
+    children: React.ReactNode;
+    maxHooks?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/esm/table/nested/nestedData.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, memo, useMemo } from "react";
+const NestedDataInt = ({ entities, children, expandedRows, useChildrenDataHook, maxHooks = 100 }) => {
+    // Call hooks in a consistent order - this MUST be at the top level and cannot be wrapped in useEffect
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const hookResults = [];
+    for (let i = 0; i < maxHooks; i++) {
+        const entity = entities[i];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const parentId = entity ? entity.id : `placeholder-${i}`;
+        const enabled = expandedRows.includes(parentId);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const queryResult = useChildrenDataHook(parentId, enabled);
+        hookResults[i] = queryResult;
+    }
+    // Memoize the entities with children calculation to avoid unnecessary re-renders
+    const entitiesWithChildren = useMemo(() => entities.map((entity, index) => {
+        const isExpanded = expandedRows.includes(entity.id);
+        if (index < maxHooks) {
+            const { data: childrenData, isLoading, error, isError } = hookResults[index];
+            if (isLoading || !isExpanded) {
+                return Object.assign(Object.assign({}, entity), { children: new Array(3)
+                        .fill("")
+                        .map((_1, j) => ({ id: `loading-${entity.id}-${j}`, isLoading: true })) });
+            }
+            if (isError && error) {
+                return Object.assign(Object.assign({}, entity), { children: [] });
+            }
+            if (childrenData) {
+                return Object.assign(Object.assign({}, entity), { children: childrenData });
+            }
+        }
+        return entity;
+    }), [entities, expandedRows, maxHooks, hookResults]);
+    const table = useMemo(() => cloneElement(children, {
+        entities: entitiesWithChildren
+    }), [children, entitiesWithChildren]);
+    return _jsx(_Fragment, { children: table });
+};
+export const NestedData = memo(NestedDataInt);

package/esm/table/nested/useNestedRows.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { IListColumn } from "../../dataGrid/listColumn";
+import { IRowEntity } from "../../dataGrid/row/row";
+import "./nestedButton.less";
+import { IEntityWithId } from "../../commonHelpers/entity";
+export declare const useNestedRows: <T extends IRowEntity<N>, N extends IEntityWithId>(expandedRows: string[] | undefined, onExpand: ((id: string, isExpanded: boolean) => void) | undefined, columns: IListColumn<T, N>[], isMobile: boolean) => {
+    nestedColumns: {
+        id: string;
+        name?: string | keyof T | undefined;
+        title: string;
+        meta?: import("../../dataGrid/listColumn").IListColumnMeta<T, N> | undefined;
+        columnComponent?: import("../../dataGrid/listColumn").IColumnComponent<T, N> | undefined;
+        wrappers?: import("../../dataGrid/listColumn").IListColumnWrapper<T, N>[] | undefined;
+        colspan?: number | ((entity: T | N) => number | undefined) | undefined;
+    }[];
+    nestedFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
+    expanded: string[];
+    onExpandedChange: (id: string, isExpanded: boolean) => void;
+};

package/esm/table/nested/useNestedRows.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { IconChevronTop } from "../../icons/iconChevronTop";
+import { IconChevronBottom } from "../../icons/iconChevronBottom";
+import { useLanguage } from "../../utils/localization/useLanguage";
+const NestedWrapperName = "Nested";
+export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
+    const { translate } = useLanguage();
+    const [intExpanded, setExpanded] = useState([]);
+    const expanded = useMemo(() => {
+        if (expandedRows) {
+            return expandedRows;
+        }
+        return intExpanded;
+    }, [expandedRows, intExpanded]);
+    const onExpandedChange = useCallback((id, isExpanded) => {
+        if (onExpand) {
+            onExpand(id, isExpanded);
+            return;
+        }
+        if (isExpanded) {
+            setExpanded([id]);
+        }
+        else {
+            setExpanded(intExpanded.filter(i => i !== id));
+        }
+    }, [intExpanded, onExpand]);
+    const firstColumnId = useMemo(() => columns.length > 0 ? columns[0].id : null, [columns]);
+    const wrapper = useMemo(() => ({
+        name: NestedWrapperName,
+        render(value, entity, isNested) {
+            if (!entity) {
+                return null;
+            }
+            if (isMobile) {
+                return value;
+            }
+            if (isNested) {
+                return value;
+            }
+            const isExpanded = expanded.indexOf(entity.id) !== -1;
+            const onExpandCallback = () => {
+                onExpandedChange(entity.id, !isExpanded);
+            };
+            if ("children" in entity) {
+                return _jsxs("div", { className: "zen-nested-button", children: [_jsx("button", { className: "zen-nested-button__button", onClick: onExpandCallback, "aria-label": translate(isExpanded ? "Collapse" : "Expand"), children: isExpanded ? _jsx(IconChevronTop, { size: "large" }) : _jsx(IconChevronBottom, { size: "large" }) }), _jsx("div", { className: "zen-nested-button__content", children: value })] });
+            }
+            return value;
+        },
+        renderHeader(title) {
+            return title;
+        }
+    }), [expanded, onExpandedChange, isMobile, translate]);
+    const nestedColumns = useMemo(() => {
+        const newColumns = columns.map(c => (Object.assign({}, c)));
+        // Add nested wrapper to the first column
+        const firstColumn = newColumns.find(c => c.id === firstColumnId);
+        if (firstColumn) {
+            firstColumn.wrappers = [...firstColumn.wrappers || [], wrapper];
+        }
+        return newColumns;
+    }, [columns, firstColumnId, wrapper]);
+    const nestedFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
+        if (!entity.children) {
+            return [primaryData, secondaryData];
+        }
+        if (isNested) {
+            return [primaryData, secondaryData];
+        }
+        if (!isMobile) {
+            return [primaryData, secondaryData];
+        }
+        const isExpanded = expanded.indexOf(entity.id) !== -1;
+        const onExpandCallback = () => {
+            onExpandedChange(entity.id, !isExpanded);
+        };
+        return [
+            _jsxs("div", { className: "zen-nested-button", children: [_jsx("button", { className: "zen-nested-button__button", onClick: onExpandCallback, "aria-label": translate(isExpanded ? "Collapse" : "Expand"), children: isExpanded ? _jsx(IconChevronTop, { size: "large" }) : _jsx(IconChevronBottom, { size: "large" }) }), _jsx("div", { className: "zen-nested-button__content", children: primaryData })] }, "nested-button"),
+            _jsx("div", { className: "zen-nested-button__padding", children: secondaryData }, "nested-value")
+        ];
+    }, [expanded, onExpandedChange, isMobile, translate]);
+    return { nestedColumns, nestedFeedWrapper, expanded, onExpandedChange };
+};

package/esm/table/selectable/interfaces.d.ts

@@ -0,0 +1,10 @@
+export declare enum SelectionState {
+    All = "all",
+    CurrentPage = "page",
+    Partial = "partial",
+    None = "none"
+}
+export interface ISelectionValue {
+    all: boolean;
+    selected: string[];
+}

package/esm/table/selectable/interfaces.js

@@ -0,0 +1,7 @@
+export var SelectionState;
+(function (SelectionState) {
+    SelectionState["All"] = "all";
+    SelectionState["CurrentPage"] = "page";
+    SelectionState["Partial"] = "partial";
+    SelectionState["None"] = "none";
+})(SelectionState || (SelectionState = {}));

package/esm/table/selectable/selectableHeader.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import { SelectionState } from "./interfaces";
+interface ISelectableHeader extends IZenComponentProps {
+    label: string;
+    title: ReactNode;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    calculateSelectionState: () => SelectionState;
+    onSelect?: (selectionState: SelectionState) => void;
+    checkboxInHeader?: boolean;
+    header?: boolean;
+    turnOffSelectAll?: boolean;
+}
+export declare const SelectableHeader: ({ label, title, checked, indeterminate, disabled, onChange, calculateSelectionState, onSelect, checkboxInHeader, header, turnOffSelectAll }: ISelectableHeader) => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[];
+export {};

package/esm/table/selectable/selectableHeader.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
+import { IconChevronDownSmall } from "../../icons/iconChevronDownSmall";
+import { Menu } from "../../menu/menu";
+import { Checkbox } from "../../checkbox/checkbox";
+import { SelectionState } from "./interfaces";
+const selectionOptions = [{
+        id: "all",
+        value: SelectionState.All,
+        element: "all",
+        label: "Select all"
+    }, {
+        id: "page",
+        value: SelectionState.CurrentPage,
+        element: "page",
+        label: "Select current page"
+    }, {
+        id: "none",
+        value: SelectionState.None,
+        element: "none",
+        label: "Deselect all"
+    }];
+export const SelectableHeader = ({ label, title, checked, indeterminate, disabled, onChange, calculateSelectionState, onSelect, checkboxInHeader, header, turnOffSelectAll }) => {
+    const { translate } = useLanguage();
+    const listItems = useMemo(() => selectionOptions
+        .filter(option => !turnOffSelectAll || option.value !== SelectionState.All)
+        .map(option => ({
+        id: option.id,
+        name: translate(option.label),
+        onClick: () => onSelect && onSelect(option.id)
+    }))
+        .filter(option => option.id !== calculateSelectionState()), [calculateSelectionState, onSelect, translate, turnOffSelectAll]);
+    const actionsMenu = useMemo(() => _jsx(Menu, { title: translate("Select menu"), className: "zen-selectable-column__menu", trigger: _jsx(TextIconButton, { className: "zen-selectable-column__popup", iconClasses: "zen-icon--no-events", icon: IconChevronDownSmall, iconPosition: ButtonIconPosition.Start, iconSize: "large", title: translate("Multiple row selection menu"), "aria-label": translate("Multiple row selection menu"), type: "tertiary-black" }), children: listItems.map(item => _jsx(Menu.Item, { id: item.id, name: item.name, onClick: item.onClick }, item.id)) }), [listItems, translate]);
+    return _jsxs("div", { className: "zen-selectable-column zen-selectable-column--with-actions", children: [checkboxInHeader !== false
+                ? _jsxs("div", { className: "zen-selectable-column__checkbox", children: [_jsx("div", { className: "zen-selectable-column__checkbox-input", children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, "aria-label": label, onChange: e => onChange && onChange(e.target.checked) }) }), actionsMenu] })
+                : null, header !== false
+                ? _jsx("div", { className: "zen-selectable-column__content", children: title })
+                : null] });
+};
+export const TRANSLATIONS = [
+    "Select menu",
+    "Select all",
+    "Select current page",
+    "Deselect all",
+    "Select menu",
+    "Multiple row selection menu"
+];

package/esm/table/selectable/useSelectableRows.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { IListColumn } from "../table";
+import { ISelectionValue, SelectionState } from "./interfaces";
+import "./selectableColumn.less";
+import { IRowEntity } from "../../dataGrid/row/row";
+import { IEntityWithId } from "../../commonHelpers/entity";
+export type TSelectionStrategy = "main" | "nested";
+export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEntityWithId> {
+    selection: ISelectionValue | undefined;
+    onSelect: (selection: ISelectionValue) => void;
+    checkboxDisabled?: (entity: T | N, isNested?: boolean) => boolean;
+    checkboxVisible?: (entity: T | N, isNested?: boolean) => boolean;
+    checkboxInHeader?: boolean;
+    selectionLimit?: number;
+    header?: boolean;
+    checkboxTitle?: (entity: T | N) => string;
+    headerTitle?: (state: SelectionState) => string;
+    turnOffSelectAll?: boolean;
+    checkboxPlaceholder?: boolean;
+    strategy?: TSelectionStrategy;
+    selectAll?: boolean;
+}
+export declare const getEmptySelection: () => {
+    all: boolean;
+    selected: string[];
+};
+export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>) => {
+    selectableColumns: IListColumn<T, N>[];
+    selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
+};
+export declare const TRANSLATIONS: string[];