@geotab/zenith 1.26.6 → 2.0.0-beta.1

package/esm/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
+import { CheckboxCell } from "./checkboxCell";
+import { CheckboxHeaderCell } from "./checkboxHeaderCell";
+export var SelectionState;
+(function (SelectionState) {
+    SelectionState[SelectionState["All"] = 0] = "All";
+    SelectionState[SelectionState["CurrentPage"] = 1] = "CurrentPage";
+    SelectionState[SelectionState["Partial"] = 2] = "Partial";
+    SelectionState[SelectionState["None"] = 3] = "None";
+})(SelectionState || (SelectionState = {}));
+export class CheckboxColumnWrapper extends SimpleEventHandler {
+    constructor(selections, options, menuTriggerRef) {
+        super();
+        Object.defineProperty(this, "selections", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: selections
+        });
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+        Object.defineProperty(this, "menuTriggerRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: menuTriggerRef
+        });
+        Object.defineProperty(this, "condition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "disabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: SelectionState.None
+        });
+        Object.defineProperty(this, "actionsClickHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: e => {
+                this.fire("toggle", [e, e.target]);
+            }
+        });
+        Object.defineProperty(this, "changeHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (id, checked) => {
+                this.fire("change", [id, checked]);
+            }
+        });
+        Object.defineProperty(this, "changeHandlerAll", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (checked) => {
+                this.selectionState = checked ? SelectionState.All : SelectionState.None;
+                this.fire("change-all", [checked]);
+            }
+        });
+        this.condition = options.condition || (() => true);
+        this.disabled = options.disabled;
+    }
+    get selectionState() {
+        return this.state;
+    }
+    set selectionState(state) {
+        this.state = state;
+    }
+    // cloning nodes is twice as fast as creating a new one
+    render(value, entity) {
+        if (!entity) {
+            return null;
+        }
+        const allowed = this.condition(entity);
+        const isDisable = this.disabled ? this.disabled(entity) : this.state === SelectionState.All;
+        const cell = _jsx(CheckboxCell, { id: entity.id, className: allowed ? "" : "zen-checkbox-column--no-checkbox", checked: this.state === SelectionState.All || this.selections.has(entity.id), indeterminate: false, disabled: isDisable, label: this.options.createTitle(entity), onChange: this.changeHandler, children: _jsx(CheckboxCell.Content, { children: value }) });
+        return cell;
+    }
+    renderHeader(title) {
+        if (this.options.header === false) {
+            return title;
+        }
+        const cell = _jsxs(CheckboxHeaderCell, { label: this.options.headerTitle || "", actions: true, checked: this.state === SelectionState.CurrentPage || this.state === SelectionState.All, indeterminate: this.state === SelectionState.Partial, onChange: this.changeHandlerAll, children: [_jsx(CheckboxHeaderCell.Actions, { ref: this.menuTriggerRef, onClick: this.actionsClickHandler }), _jsx(CheckboxHeaderCell.Content, { children: title })] });
+        return cell;
+    }
+}
+Object.defineProperty(CheckboxColumnWrapper, "translations", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: [
+        "Multiple row selection menu"
+    ]
+});

package/esm/dataGrid/columns/checkboxColumn/checkboxHeaderCell.d.ts

@@ -0,0 +1,22 @@
+import { FC, ForwardRefExoticComponent, MouseEventHandler, PropsWithChildren, ReactElement } from "react";
+import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
+import { ITranslatable } from "../../../commonHelpers/translatable";
+import "./checkboxColumn.less";
+interface ICheckboxHandler extends ITranslatable {
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+interface ICheckboxHeaderCellProps extends IZenComponentProps {
+    label: string;
+    actions: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled?: boolean;
+    children?: ReactElement<typeof CheckboxHeaderCell.Content | typeof CheckboxHeaderCell.Actions>[];
+    onChange?: (checked: boolean) => void;
+}
+export interface ICheckboxHeaderCell extends FC<ICheckboxHeaderCellProps> {
+    Actions: ForwardRefExoticComponent<ICheckboxHandler & React.RefAttributes<HTMLButtonElement>>;
+    Content: FC<PropsWithChildren>;
+}
+export declare const CheckboxHeaderCell: ICheckboxHeaderCell;
+export {};

package/esm/dataGrid/columns/checkboxColumn/checkboxHeaderCell.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef } from "react";
+import { ButtonIconPosition, TextIconButton } from "../../../textIconButton/textIconButton";
+import { ButtonType } from "../../../button/buttonType";
+import { Checkbox } from "../../../checkbox/checkbox";
+import { IconChevronDownSmall } from "../../../icons/iconChevronDownSmall";
+import { useLanguage } from "../../../utils/localization/useLanguage";
+const CheckboxHandler = forwardRef(function inner({ onClick }, ref) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { translate } = useLanguage();
+    return _jsx(TextIconButton, { ref: ref, className: "zen-checkbox-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: ButtonType.Light, onClick: onClick });
+});
+export const CheckboxHeaderCell = ({ label, actions, checked, indeterminate, disabled, children, onChange }) => {
+    const actionsComp = Children.toArray(children).find(child => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Actions"; });
+    const contentComp = Children.toArray(children).find(child => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "Content"; });
+    return _jsxs("div", { className: "zen-checkbox-column zen-checkbox-column--with-actions", children: [_jsxs("div", { className: "zen-checkbox-column__controls", children: [_jsx(Checkbox, { className: "zen-checkbox-column__checkbox", checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, "aria-label": label, onChange: e => onChange && onChange(e.target.checked) }), actions ? actionsComp : null] }), contentComp] });
+};
+CheckboxHeaderCell.Actions = CheckboxHandler;
+CheckboxHeaderCell.Actions.displayName = "Actions";
+CheckboxHeaderCell.Content = function content({ children }) { return _jsx("div", { className: "zen-checkbox-column__content", children: children }); };
+CheckboxHeaderCell.Content.displayName = "Content";

package/esm/dataGrid/columns/checkboxColumn/limitedCheckboxColumnWrapper.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { IEntityWithId } from "../../../commonHelpers/entity";
+import { CheckboxColumnWrapper, ICheckboxColumnOptions } from "./checkboxColumnWrapper";
+export interface ILimitedCheckboxColumnOptions<T> extends ICheckboxColumnOptions<T> {
+    limit: number;
+}
+export declare class LimitedCheckboxColumnWrapper<T extends IEntityWithId> extends CheckboxColumnWrapper<T> {
+    private readonly selected;
+    private readonly opts;
+    constructor(selections: Set<string>, options: ILimitedCheckboxColumnOptions<T>, menuTriggerRef: React.RefObject<HTMLButtonElement>);
+    renderHeader(title: ReactNode): import("react/jsx-runtime").JSX.Element;
+}

package/esm/dataGrid/columns/checkboxColumn/limitedCheckboxColumnWrapper.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckboxHeaderCell } from "./checkboxHeaderCell";
+import { CheckboxColumnWrapper } from "./checkboxColumnWrapper";
+export class LimitedCheckboxColumnWrapper extends CheckboxColumnWrapper {
+    constructor(selections, options, menuTriggerRef) {
+        super(selections, Object.assign(Object.assign({}, options), { disabled: options.disabled ? options.disabled : (entity) => !this.selected.has(entity.id) && this.selected.size >= this.opts.limit }), menuTriggerRef);
+        Object.defineProperty(this, "selected", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "opts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.selected = selections;
+        this.opts = options;
+    }
+    renderHeader(title) {
+        return _jsx(CheckboxHeaderCell.Content, { children: title });
+    }
+}

package/esm/dataGrid/columns/mainColumn/mainColumn.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { IListColumnBasic } from "../../listColumn";
+import { BasicColumn } from "../basicColumn";
+import { IMainColumnOptions } from "./mainColumnWrapper";
+export interface IMainColumn<T, N = T> extends IListColumnBasic<T, N> {
+    renderIcon(entity: T | N, isNested: boolean): ReactNode;
+}
+export declare class MainColumn<T, N = T> extends BasicColumn<T, ReactNode, N> implements IMainColumn<T, N> {
+    private readonly columnId;
+    private readonly isMobile;
+    private readonly wrapper;
+    protected renderCell(elt: ReactNode, entity: T, isNested?: boolean): ReactNode;
+    protected renderHeaderCell(title: ReactNode): ReactNode;
+    constructor(columnId: string, isMobile: boolean, options: IMainColumnOptions<T | N>, renderHeader?: (title: ReactNode) => ReactNode);
+    renderFeed(_: string, entity: T | N, isNested?: boolean): [ReactNode, ReactNode];
+    renderIcon(entity: T, isNested: boolean): ReactNode;
+}

package/esm/dataGrid/columns/mainColumn/mainColumn.js

@@ -0,0 +1,47 @@
+import { BasicColumn } from "../basicColumn";
+import { MainColumnWrapper } from "./mainColumnWrapper";
+export class MainColumn extends BasicColumn {
+    renderCell(elt, entity, isNested) {
+        return this.wrapper.render(elt, entity, isNested);
+    }
+    renderHeaderCell(title) {
+        if (this.isMobile) {
+            return "";
+        }
+        return this.wrapper.renderHeader(title);
+    }
+    constructor(columnId, isMobile, options, renderHeader) {
+        const renderTextDefault = (entity) => entity[this.columnId];
+        const renderHeaderDefault = (title) => title;
+        super({
+            render: renderTextDefault,
+            renderHeader: renderHeader ? renderHeader : renderHeaderDefault
+        });
+        Object.defineProperty(this, "columnId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: columnId
+        });
+        Object.defineProperty(this, "isMobile", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: isMobile
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.wrapper = new MainColumnWrapper(options);
+    }
+    renderFeed(_, entity, isNested) {
+        const value = entity[this.columnId];
+        return [null, this.wrapper.renderFeed(value, entity, isNested)];
+    }
+    renderIcon(entity, isNested) {
+        return this.wrapper.renderIcon(entity, isNested);
+    }
+}

package/esm/dataGrid/columns/mainColumn/mainColumnWrapper.d.ts

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from "react";
+import { IListColumnWrapper } from "../../listColumn";
+import { IIcon } from "../../../icons/icon";
+import "./mainColumn.less";
+import { TIconSize } from "../../../icons/iconSize";
+type TOnClick<T> = (entity: T, e: React.MouseEvent<HTMLButtonElement>) => void;
+interface IActionIcon<T> {
+    createIcon: (entity: T, isNested: boolean) => FC<IIcon> | undefined;
+    createSize?: (entity: T) => TIconSize;
+    createTitle?: (entity: T, isNested: boolean) => string | undefined;
+    createLink?: (entity: T, isNested: boolean) => string | undefined;
+    condition?: (entity: T, isNested: boolean) => boolean;
+    onClick?: TOnClick<T>;
+    className?: string | undefined;
+    parentClassName?: string | undefined;
+}
+interface IMainText<T> {
+    className?: string | undefined;
+    createText?: (entity: T, isNested: boolean) => ReactNode;
+    createLink?: (entity: T, isNested: boolean) => string | undefined;
+}
+interface IDescriptionText<T> {
+    className?: string | undefined;
+    createDescription: (entity: T, isNested: boolean) => string | undefined;
+}
+export interface IMainColumnOptions<T> {
+    icon?: IActionIcon<T>;
+    mainText?: IMainText<T>;
+    descriptionText?: IDescriptionText<T>;
+    render?: (entity: T) => JSX.Element;
+}
+export interface IMainColumnWrapper<T, N = T> extends IListColumnWrapper<T, N> {
+    renderIcon: (entity: T | N, isNested: boolean) => ReactNode;
+    renderFeed: (value: ReactNode, entity?: T | N, isNested?: boolean) => ReactNode;
+}
+export declare class MainColumnWrapper<T, N = T> implements IMainColumnWrapper<T, N> {
+    private readonly options;
+    private renderCell;
+    constructor(options: IMainColumnOptions<T | N>);
+    render(elt: ReactNode, entity?: T | N, isNested?: boolean): import("react/jsx-runtime").JSX.Element | null;
+    renderFeed(elt: ReactNode, entity?: T | N, isNested?: boolean): import("react/jsx-runtime").JSX.Element | null;
+    renderHeader(title: ReactNode): ReactNode;
+    renderIcon(entity: T | N, isNested: boolean): import("react/jsx-runtime").JSX.Element | null;
+}
+export {};

package/esm/dataGrid/columns/mainColumn/mainColumnWrapper.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../../commonHelpers/classNames/classNames";
+import { PrimaryIcon } from "../../../primaryIcon/primaryIcon";
+export class MainColumnWrapper {
+    renderCell(elt, entity, isNested, isFeed) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const SideItems = this.options.render ? this.options.render(entity) : null;
+        const description = this.options.descriptionText ? this.options.descriptionText.createDescription(entity, isNested) : null;
+        const mainTextLink = (_b = (_a = this.options.mainText) === null || _a === void 0 ? void 0 : _a.createLink) === null || _b === void 0 ? void 0 : _b.call(_a, entity, isNested);
+        const mainTextClassName = classNames(["zen-main-column__name", ((_c = this.options.mainText) === null || _c === void 0 ? void 0 : _c.className) || "", mainTextLink ? "zen-main-column__name--link" : ""]);
+        const descriptionTextClassName = classNames(["zen-main-column__groups", ((_d = this.options.descriptionText) === null || _d === void 0 ? void 0 : _d.className) || ""]);
+        const mainText = ((_f = (_e = this.options.mainText) === null || _e === void 0 ? void 0 : _e.createText) === null || _f === void 0 ? void 0 : _f.call(_e, entity, isNested)) || elt;
+        const icon = !isFeed ? this.renderIcon(entity, isNested || false) : null;
+        const iconParentClassName = (_g = this.options.icon) === null || _g === void 0 ? void 0 : _g.parentClassName;
+        return _jsxs("div", { className: "zen-main-column", children: [icon ? _jsx("div", { className: classNames(["zen-main-column__icon", iconParentClassName || ""]), children: icon }) : null, _jsxs("div", { className: "zen-main-column__content", children: [mainTextLink ?
+                            _jsx("a", { href: mainTextLink, className: mainTextClassName, children: mainText }) :
+                            _jsx("div", { className: mainTextClassName, children: mainText }), description && _jsx("div", { className: descriptionTextClassName, children: description })] }), SideItems] });
+    }
+    constructor(options) {
+        Object.defineProperty(this, "options", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: options
+        });
+    }
+    render(elt, entity, isNested) {
+        if (!entity) {
+            return null;
+        }
+        return this.renderCell(elt, entity, isNested || false, false);
+    }
+    renderFeed(elt, entity, isNested) {
+        if (!entity) {
+            return null;
+        }
+        return this.renderCell(elt, entity, isNested || false, true);
+    }
+    renderHeader(title) {
+        return title;
+    }
+    renderIcon(entity, isNested) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const Icon = this.options.icon ? this.options.icon.createIcon(entity, isNested) : null;
+        if (!Icon) {
+            return null;
+        }
+        const entityActions = ((_a = this.options.icon) === null || _a === void 0 ? void 0 : _a.condition) === undefined || this.options.icon.condition(entity, isNested);
+        const isDisabled = !entityActions;
+        const onClick = (_b = this.options.icon) === null || _b === void 0 ? void 0 : _b.onClick;
+        const handleOnClick = onClick ? (e) => {
+            onClick(entity, e);
+        } : undefined;
+        const link = (_d = (_c = this.options.icon) === null || _c === void 0 ? void 0 : _c.createLink) === null || _d === void 0 ? void 0 : _d.call(_c, entity, isNested);
+        const title = (_f = (_e = this.options.icon) === null || _e === void 0 ? void 0 : _e.createTitle) === null || _f === void 0 ? void 0 : _f.call(_e, entity, isNested);
+        const iconClassName = (_g = this.options.icon) === null || _g === void 0 ? void 0 : _g.className;
+        return _jsx(PrimaryIcon, { icon: Icon, className: iconClassName, style: isNested ? "secondary" : undefined, onClick: handleOnClick, link: link, title: title, disabled: isDisabled });
+    }
+}

package/esm/dataGrid/columns/textColumn/textColumn.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { IListColumnBasic } from "../../listColumn";
+import { BasicColumn } from "../basicColumn";
+import { IRowEntity } from "../../row/row";
+import { IEntityWithId } from "../../../commonHelpers/entity";
+export declare class TextColumn<T extends IRowEntity<N>, N extends IEntityWithId = T> extends BasicColumn<T, ReactNode, N> implements IListColumnBasic<T, N> {
+    protected renderCell(value: ReactNode): ReactNode;
+}

package/esm/dataGrid/columns/textColumn/textColumn.js

@@ -0,0 +1,6 @@
+import { BasicColumn } from "../basicColumn";
+export class TextColumn extends BasicColumn {
+    renderCell(value) {
+        return value;
+    }
+}

package/esm/dataGrid/dataGrid.d.ts

@@ -0,0 +1,35 @@
+import "./dataGrid.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { IListColumn } from "./listColumn";
+import React, { FC, ForwardedRef, PropsWithChildren } from "react";
+import { IRowEntity } from "./row/row";
+import { TRowClassName } from "./getRowClassName";
+import { IEntityWithId } from "../commonHelpers/entity";
+export interface IDataGrid<T, N = T> extends IZenComponentProps {
+    entities: T[];
+    columns: IListColumn<T, N>[];
+    description?: string;
+    emptyCellTitle?: string;
+    resetScroll?: boolean;
+    children?: ReturnType<typeof EmptyList> | ReturnType<typeof Footer>;
+    rowClassName?: TRowClassName<T>;
+    expandedRows?: string[];
+    onExpandedChange?: (id: string, isExpanded: boolean) => void;
+}
+export declare const NOT_INTERACTIVE_MODIFIER = "zen-data-grid--not-interactive";
+export declare const DRAGGING_MODIFIER = "zen-data-grid--dragging";
+export declare const HORIZONTAL_SCROLL_MODIFIER = "zen-data-grid--horizontal-scroll";
+export declare const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll";
+export declare const MIN_CELL_WIDTH = 100;
+export declare const EmptyList: FC<PropsWithChildren>;
+export declare const Footer: FC<PropsWithChildren>;
+declare const DataGridInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, className, description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange }: IDataGrid<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export interface IDataGridStaticProps {
+    EmptyList: typeof EmptyList;
+    Footer: typeof Footer;
+}
+declare const DataGrid: (<T extends IRowEntity<N>, N extends IEntityWithId = T>(props: IDataGrid<T, N> & {
+    ref?: React.ForwardedRef<HTMLElement>;
+}) => ReturnType<typeof DataGridInner>) & IDataGridStaticProps;
+export { DataGrid };
+export declare const TRANSLATIONS: string[];

package/esm/dataGrid/dataGrid.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { DataGridRow } from "./row/row";
+import { DataGridHeaderCell } from "./headerCell/headerCell";
+import { findVisibleRows } from "./extensions/findVisible";
+import { toBasicColumn } from "./extensions/toBasicColumn";
+import { useResize } from "../commonHelpers/hooks/useResize";
+import { useResizeObserver } from "../commonHelpers/hooks/useResizeObserver";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { getRowClassName } from "./getRowClassName";
+export const NOT_INTERACTIVE_MODIFIER = "zen-data-grid--not-interactive";
+export const DRAGGING_MODIFIER = "zen-data-grid--dragging";
+export const HORIZONTAL_SCROLL_MODIFIER = "zen-data-grid--horizontal-scroll";
+export const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll";
+export const MIN_CELL_WIDTH = 100;
+const renderHeaderWrappers = (wrappers, value) => wrappers.reduce((result, wrapper) => wrapper.renderHeader(result), value);
+const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
+export const EmptyList = ({ children }) => _jsx("div", { className: "zen-data-grid__empty", children: children });
+export const Footer = ({ children }) => _jsx("div", { className: "zen-data-grid__footer", children: children });
+const FIRST_RENDERED_ROWS = 100;
+const DataGridInner = ({ entities, columns, className = "", description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange }, ref) => {
+    const { translate } = useLanguage();
+    const emptyCellTitleValue = emptyCellTitle || translate("Action");
+    // States
+    const columnsList = useMemo(() => columns.map(toBasicColumn), [columns]);
+    const initialVisibleRows = useMemo(() => entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [entities]);
+    const [visibleRows, setVisibleRows] = useState(new Set(initialVisibleRows));
+    const [horizontalScrollApplied, setHorizontalScrollApplied] = useState(false);
+    const [verticalScrollApplied, setVerticalScrollApplied] = useState(false);
+    // Refs
+    const gridRef = useRef(null);
+    const bodyRef = useRef(null);
+    const lazyRenderTimerRef = useRef(0);
+    const rowsMap = useMemo(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
+    const emptyList = useMemo(() => Children.toArray(children).find(child => child.type === EmptyList), [children]);
+    const footer = useMemo(() => Children.toArray(children).find(child => child.type === Footer), [children]);
+    useImperativeHandle(ref, () => gridRef.current, []);
+    const getVisibleRows = () => {
+        if (!gridRef.current || !bodyRef.current) {
+            return [];
+        }
+        const { top, bottom } = gridRef.current.getBoundingClientRect();
+        return findVisibleRows([...bodyRef.current.children], top, bottom);
+    };
+    const scheduleVisibleChanges = useCallback(() => requestAnimationFrame(() => {
+        const visible = getVisibleRows();
+        const newVisibleRows = visible.filter(row => {
+            const id = row.dataset.rowId;
+            if (id === undefined) {
+                return false;
+            }
+            const entity = rowsMap.get(id);
+            if (entity === undefined) {
+                return false;
+            }
+            return row;
+        }).map(row => row.dataset.rowId);
+        const hasNewRows = newVisibleRows.some(id => !visibleRows.has(id));
+        if (hasNewRows) {
+            const newRowsSet = new Set(visibleRows);
+            newVisibleRows.forEach(row => newRowsSet.add(row));
+            setVisibleRows(newRowsSet);
+        }
+    }), [rowsMap, setVisibleRows, visibleRows]);
+    const scheduleLazyRender = useCallback(() => {
+        cancelAnimationFrame(lazyRenderTimerRef.current);
+        lazyRenderTimerRef.current = scheduleVisibleChanges();
+    }, [scheduleVisibleChanges]);
+    useEffect(() => {
+        const visible = new Set(entities.slice(0, FIRST_RENDERED_ROWS).map(r => r.id));
+        const currentlyVisibleRows = getVisibleRows();
+        currentlyVisibleRows.forEach(row => {
+            const id = row.dataset.rowId;
+            if (id) {
+                visible.add(id);
+            }
+        });
+        setVisibleRows(visible);
+    }, [entities]);
+    const listOfDefaultWidthColumns = useMemo(() => columnsList.map(column => column.meta.defaultWidth), [columnsList]);
+    const { result: observerResult } = useResizeObserver({ target: gridRef.current });
+    const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width) => acc + (width === undefined ? 0 : getColumnWidth(width)), 0);
+    const unallocatedSpace = observerResult && (observerResult.contentRect.width - allocatedSpace) || 0;
+    const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
+    const flexibleColumnWidth = getColumnWidth(unallocatedSpace / flexibleColumnsQty);
+    const updateScroll = useCallback(() => {
+        if (!gridRef.current) {
+            return;
+        }
+        const scrollLeft = gridRef.current.scrollLeft;
+        const scrollTop = gridRef.current.scrollTop;
+        if (horizontalScrollApplied !== scrollLeft > 0) {
+            setHorizontalScrollApplied(scrollLeft > 0);
+        }
+        if (verticalScrollApplied !== scrollTop > 0) {
+            setVerticalScrollApplied(scrollTop > 0);
+        }
+    }, [horizontalScrollApplied, setHorizontalScrollApplied, verticalScrollApplied, setVerticalScrollApplied]);
+    const handleScroll = useCallback(() => {
+        updateScroll();
+        scheduleLazyRender();
+    }, [updateScroll, scheduleLazyRender]);
+    const getCellParams = useCallback((columnIndex) => {
+        const defaultWidth = listOfDefaultWidthColumns[columnIndex];
+        const limited = !!defaultWidth && defaultWidth > 0;
+        const isFirst = columnIndex === 0;
+        const isLast = columnIndex === listOfDefaultWidthColumns.length - 1;
+        // If the column is the last one or doesn't have a default width, it should be limited to the remaining space
+        const width = getColumnWidth(defaultWidth || flexibleColumnWidth);
+        return { limited, isFirst, isLast, width };
+    }, [listOfDefaultWidthColumns, flexibleColumnWidth]);
+    const renderHeaderCell = useCallback((column, columnIndex) => {
+        var _a;
+        const { isFirst, isLast, width } = getCellParams(columnIndex);
+        const text = ((_a = column.columnComponent.renderHeader) === null || _a === void 0 ? void 0 : _a.bind(column.columnComponent)) ? column.columnComponent.renderHeader(column.title) : column.title;
+        return _jsx(DataGridHeaderCell, { id: column.id, isFirst: isFirst, isLast: isLast, name: column.name, width: width, hidden: !text, children: _jsx("div", { className: "zen-data-grid__header-cell-content", children: renderHeaderWrappers(column.wrappers, _jsx("div", { className: classNames(["zen-data-grid-header", column.title ? "" : "zen-visually-hidden"]), children: column.title ? text : emptyCellTitleValue })) }) }, `header_${column.name}`);
+    }, [getCellParams, emptyCellTitleValue]);
+    const isTreeGrid = useMemo(() => !!entities.find(e => e.children && e.children.length > 0), [entities]);
+    const renderRow = useCallback((entity, entityIndex, total) => _jsx(DataGridRow, { id: entity.id, isLastRow: entityIndex === total - 1, columns: columnsList, entity: entity, visibleRows: visibleRows, flexibleColumnWidth: flexibleColumnWidth, className: getRowClassName(rowClassName, entity), expanded: expandedRows && expandedRows.indexOf(entity.id) > -1, onExpandedChange: entity.children && entity.children.length > 0 ? (isExpanded) => onExpandedChange && onExpandedChange(entity.id, isExpanded) : undefined, isTreeGrid: isTreeGrid, ariaPosinset: entityIndex + 1, ariaSetsize: total }, entity.id), [columnsList, expandedRows, flexibleColumnWidth, onExpandedChange, rowClassName, visibleRows, isTreeGrid]);
+    const body = useMemo(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
+    const headerContent = useMemo(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
+    useResize(() => {
+        handleScroll();
+    }, true);
+    const gridClasses = classNames([
+        "zen-data-grid",
+        className,
+        horizontalScrollApplied ? HORIZONTAL_SCROLL_MODIFIER : "",
+        verticalScrollApplied ? VERTICAL_SCROLL_MODIFIER : ""
+    ]);
+    return _jsx("div", { className: "zen-data-grid-wrapper", children: _jsxs("div", { className: gridClasses, ref: gridRef, onScroll: handleScroll, children: [_jsxs("table", { className: "zen-data-grid__table", "aria-label": description, role: isTreeGrid ? "treegrid" : undefined, children: [_jsx("thead", { className: "zen-data-grid__header", children: _jsx("tr", { className: "zen-data-grid__header-row", children: headerContent }) }), _jsx("tbody", { ref: bodyRef, children: body })] }), emptyList && entities.length === 0 ? emptyList : null, footer] }) });
+};
+const DataGrid = forwardRef(DataGridInner);
+DataGrid.EmptyList = EmptyList;
+DataGrid.Footer = Footer;
+export { DataGrid };
+export const TRANSLATIONS = [
+    "Action"
+];

package/esm/dataGrid/emptySearchList/emptySearchList.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { IZenComponentProps } from "../../commonHelpers/zenComponent";
+import "./emptySearchList.less";
+export interface IEmptySearchList extends IZenComponentProps {
+    description?: string;
+    image?: ReactNode;
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
+    translate?: (s: string) => string;
+}
+export declare const EmptySearchList: {
+    ({ className, children, description, image }: IEmptySearchList): import("react/jsx-runtime").JSX.Element;
+    translations: string[];
+};

package/esm/dataGrid/emptySearchList/emptySearchList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { ImageNothingFound } from "../../images/imageNothingFound";
+import { useLanguage } from "../../utils/localization/useLanguage";
+export const EmptySearchList = ({ className, children, description, image }) => {
+    const { translate } = useLanguage();
+    return _jsxs("div", { className: classNames(["zen-empty-list-search", className || ""]), children: [image
+                ? _jsx("div", { className: "zen-empty-list-search__image", children: image })
+                : _jsx(ImageNothingFound, { className: "zen-empty-list-search__image" }), _jsx("h2", { className: "zen-empty-list-search__header", children: children }), _jsx("div", { className: "zen-empty-list-search__description", children: description || translate("Try adjusting your search or filter.") })] });
+};
+EmptySearchList.translations = [
+    "Try adjusting your search or filter."
+];

package/esm/dataGrid/entitiesListActions/actions/columnsListButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ITranslatable } from "../../../commonHelpers/translatable";
+export interface IColumnsListButton extends ITranslatable {
+    onClick?: () => void;
+    translate?: (key: string) => string;
+}
+export declare const ColumnsListButton: import("react").ForwardRefExoticComponent<IColumnsListButton & import("react").RefAttributes<HTMLButtonElement>> & {
+    translations: string[];
+};

package/esm/dataGrid/entitiesListActions/actions/columnsListButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { SvgIconSize } from "../../../svgIcon/svgIconSize";
+import { ButtonIconPosition, TextIconButton } from "../../../textIconButton/textIconButton";
+import { ButtonType } from "../../../button/buttonType";
+import { IconSettings3 } from "../../../icons/iconSettings3";
+import { useLanguage } from "../../../utils/localization/useLanguage";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const ColumnsListButtonInner = forwardRef(function Inner({ onClick }, ref) {
+    const { translate } = useLanguage();
+    return _jsx(TextIconButton, { ref: ref, icon: IconSettings3, iconSize: SvgIconSize.Large, iconPosition: ButtonIconPosition.Start, "aria-label": translate("Show list of columns"), title: translate("Show list of columns"), onClick: onClick, type: ButtonType.TertiaryBlack });
+});
+export const ColumnsListButton = Object.assign(ColumnsListButtonInner, { translations: [
+        "Show list of columns"
+    ] });

package/esm/dataGrid/entitiesListActions/actions/fullscreenButton.d.ts

@@ -0,0 +1,12 @@
+import { IZenTranslatableComponent } from "../../../commonHelpers/translatable";
+export interface IFullScreenButton {
+    fullScreen?: boolean;
+    /**
+    * @deprecated
+    * @param translate - will be removed in the next major release
+    */
+    translate?: (s: string) => string;
+    onClick?: (isFulScreen: boolean) => void;
+    title?: string;
+}
+export declare const FullScreenButton: IZenTranslatableComponent<IFullScreenButton>;