@geotab/zenith 2.0.0-beta.2 → 3.0.0-beta.0

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, RefObject } from "react";
 import { IListColumnWrapper } from "../../listColumn";
 import "./checkboxColumn.less";
 import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
@@ -35,10 +35,10 @@ export declare class CheckboxColumnWrapper<T extends IEntityWithId> extends Simp
     private readonly actionsClickHandler;
     private readonly changeHandler;
     private readonly changeHandlerAll;
-    constructor(selections: Set<string>, options: ICheckboxColumnOptions<T>, menuTriggerRef: React.RefObject<HTMLButtonElement>);
+    constructor(selections: Set<string>, options: ICheckboxColumnOptions<T>, menuTriggerRef: RefObject<HTMLButtonElement | null>);
     get selectionState(): SelectionState;
     set selectionState(state: SelectionState);
     render(value: ReactNode, entity?: T): import("react/jsx-runtime").JSX.Element | null;
-    renderHeader(title: ReactNode): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    renderHeader(title: ReactNode): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
     static readonly translations: string[];
 }

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

@@ -1,9 +1,9 @@
-import { FC, ForwardRefExoticComponent, MouseEventHandler, PropsWithChildren, ReactElement } from "react";
+import { FC, MouseEventHandler, PropsWithChildren, ReactElement, RefObject } from "react";
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
-import { ITranslatable } from "../../../commonHelpers/translatable";
 import "./checkboxColumn.less";
-interface ICheckboxHandler extends ITranslatable {
+interface ICheckboxHandler {
     onClick: MouseEventHandler<HTMLButtonElement>;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
 interface ICheckboxHeaderCellProps extends IZenComponentProps {
     label: string;
@@ -15,7 +15,7 @@ interface ICheckboxHeaderCellProps extends IZenComponentProps {
     onChange?: (checked: boolean) => void;
 }
 export interface ICheckboxHeaderCell extends FC<ICheckboxHeaderCellProps> {
-    Actions: ForwardRefExoticComponent<ICheckboxHandler & React.RefAttributes<HTMLButtonElement>>;
+    Actions: FC<ICheckboxHandler>;
     Content: FC<PropsWithChildren>;
 }
 export declare const CheckboxHeaderCell: ICheckboxHeaderCell;

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, forwardRef } from "react";
+import { Children } 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) {
+const CheckboxHandler = ({ 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"; });

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, RefObject } from "react";
 import { IEntityWithId } from "../../../commonHelpers/entity";
 import { CheckboxColumnWrapper, ICheckboxColumnOptions } from "./checkboxColumnWrapper";
 export interface ILimitedCheckboxColumnOptions<T> extends ICheckboxColumnOptions<T> {
@@ -7,6 +7,6 @@ export interface ILimitedCheckboxColumnOptions<T> extends ICheckboxColumnOptions
 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>);
+    constructor(selections: Set<string>, options: ILimitedCheckboxColumnOptions<T>, menuTriggerRef: RefObject<HTMLButtonElement | null>);
     renderHeader(title: ReactNode): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -27,7 +27,7 @@ export interface IMainColumnOptions<T> {
     icon?: IActionIcon<T>;
     mainText?: IMainText<T>;
     descriptionText?: IDescriptionText<T>;
-    render?: (entity: T) => JSX.Element;
+    render?: (entity: T) => React.JSX.Element;
 }
 export interface IMainColumnWrapper<T, N = T> extends IListColumnWrapper<T, N> {
     renderIcon: (entity: T | N, isNested: boolean) => ReactNode;

package/esm/dataGrid/dataGrid.d.ts

@@ -5,7 +5,7 @@ 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 {
+export interface IDataGrid<T, N = T> extends Omit<IZenComponentProps, "children"> {
     entities: T[];
     columns: IListColumn<T, N>[];
     description?: string;

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

@@ -4,11 +4,6 @@ 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;

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

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

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

@@ -1,15 +1,13 @@
 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 ColumnsListButtonInner = ({ 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

@@ -1,12 +1,9 @@
-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>;
+export declare const FullScreenButton: {
+    ({ fullScreen, title, onClick }: IFullScreenButton): import("react/jsx-runtime").JSX.Element;
+    translations: string[];
+};

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

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from "react";
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 import "./entitiesListActions.less";
 import { DeviceType } from "../../commonHelpers/hooks/deviceType";
-export interface IEntitiesListActionsProps extends IZenComponentProps {
+export interface IEntitiesListActionsProps extends Omit<IZenComponentProps, "children"> {
     gridType?: DeviceType | null;
     children?: ReturnType<typeof EntitiesListActions.Actions> | ReturnType<typeof EntitiesListActions.Pagination> | ReturnType<typeof EntitiesListActions.PostActions>;
 }

package/esm/dataGrid/withActions/withActions.d.ts

@@ -3,7 +3,11 @@ import { ComponentType, RefObject } from "react";
 import { IEntityWithId } from "../../commonHelpers/entity";
 import { IListColumn } from "../listColumn";
 export interface IActionColumnsProps<T extends IEntityWithId> {
-    popupTriggerRef?: RefObject<HTMLElement>;
+    popupTriggerRef?: RefObject<HTMLElement | null>;
     columns: IListColumn<T, T>[];
+    ref?: RefObject<HTMLElement | null>;
 }
-export declare const withActions: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<IActionColumnsProps<T> & P> & import("react").RefAttributes<HTMLElement>>;
+export declare const withActions: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+    (props: IActionColumnsProps<T> & P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/dataGrid/withActions/withActions.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { toBasicColumn } from "../extensions/toBasicColumn";
 import { ActionsColumn } from "../columns/actionsColumn/actionsColumn";
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const withActions = (DataGridComponent) => forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerColumnsList(props, ref) {
-    const { columns } = props;
-    let actions = undefined;
-    let actionsAsync = undefined;
-    const columnsWithActions = columns.find(el => el.columnComponent instanceof ActionsColumn);
-    if (columnsWithActions && columnsWithActions.columnComponent) {
-        const colComp = columnsWithActions.columnComponent;
-        const colActions = colComp.columnActions;
-        actions = colActions ? colActions : undefined;
-        actionsAsync = colComp.columnActionsAsync;
-    }
-    const allColumns = useMemo(() => columns.filter(el => !(el.columnComponent instanceof ActionsColumn)).map(column => (Object.assign({}, toBasicColumn(Object.assign({}, column))))), [columns]);
-    return _jsx(DataGridComponent, Object.assign({}, props, { columns: [...allColumns], actions: actions, actionsAsync: actionsAsync, ref: ref }), "grid");
-});
+export const withActions = (DataGridComponent) => {
+    const WithActionsInner = (props) => {
+        const { columns } = props;
+        let actions = undefined;
+        let actionsAsync = undefined;
+        const columnsWithActions = columns.find(el => el.columnComponent instanceof ActionsColumn);
+        if (columnsWithActions && columnsWithActions.columnComponent) {
+            const colComp = columnsWithActions.columnComponent;
+            const colActions = colComp.columnActions;
+            actions = colActions ? colActions : undefined;
+            actionsAsync = colComp.columnActionsAsync;
+        }
+        const allColumns = useMemo(() => columns.filter(el => !(el.columnComponent instanceof ActionsColumn)).map(column => (Object.assign({}, toBasicColumn(Object.assign({}, column))))), [columns]);
+        return _jsx(DataGridComponent, Object.assign({}, props, { columns: [...allColumns], actions: actions, actionsAsync: actionsAsync, ref: props.ref }), "grid");
+    };
+    WithActionsInner.displayName = `withActions(${DataGridComponent.displayName || DataGridComponent.name})`;
+    return WithActionsInner;
+};

package/esm/dataGrid/withFlexibleColumns/components/columnSettings.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { ITranslatable } from "../../../commonHelpers/translatable";
 import { IZenComponentProps } from "../../../commonHelpers/zenComponent";
-interface IColumnSettings extends IZenComponentProps, ITranslatable {
+import { RefObject } from "react";
+interface IColumnSettings extends IZenComponentProps {
     onReset: () => void;
     showFooter?: boolean;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const ColumnSettings: import("react").ForwardRefExoticComponent<IColumnSettings & import("react").RefAttributes<HTMLDivElement>> & {
+export declare const ColumnSettings: (({ onReset, showFooter, children, ref }: IColumnSettings) => import("react/jsx-runtime").JSX.Element) & {
     translations: string[];
 };
 export {};

package/esm/dataGrid/withFlexibleColumns/components/columnSettings.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { Button } from "../../../button/button";
 import { ButtonType } from "../../../button/buttonType";
 import { useLanguage } from "../../../utils/localization/useLanguage";
-const ColumnSettingsInner = ({ onReset, showFooter = true, children }, ref) => {
+const ColumnSettingsInner = ({ onReset, showFooter = true, children, ref }) => {
     const { translate } = useLanguage();
     return _jsxs("div", { className: "zen-columns-list", ref: ref, children: [_jsx("div", { className: "zen-columns-list__content", children: children }), showFooter
                 ? _jsx("div", { className: "zen-columns-list__footer", children: _jsx(Button, { "aria-label": translate("Reset column settings"), className: "zen-columns-list__reset", type: ButtonType.Tertiary, onClick: onReset, children: translate("Reset") }) })
                 : null] });
 };
-const ColumnSettingsComp = forwardRef(ColumnSettingsInner);
+const ColumnSettingsComp = ColumnSettingsInner;
 export const ColumnSettings = Object.assign(ColumnSettingsComp, { translations: [
         "Reset column settings",
         "Reset"

package/esm/dataGrid/withFlexibleColumns/components/columnSettingsSidePanel.js

@@ -5,7 +5,7 @@ import { Button } from "../../../button/button";
 import { useLanguage } from "../../../utils/localization/useLanguage";
 const ColumnSettingsSidePanelComp = ({ triggerRef, isOpen, onOpen, onClose, onReset, children }) => {
     const { translate } = useLanguage();
-    const abortEventsControllerRef = useRef();
+    const abortEventsControllerRef = useRef(null);
     useEffect(() => {
         var _a;
         if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {

package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.d.ts

@@ -13,21 +13,20 @@ interface IColumnSettingsStorageOptions {
     isFeed?: boolean;
 }
 export interface IFlexibleColumnsListProps<T> {
-    popupTriggerRef?: RefObject<HTMLElement>;
+    popupTriggerRef?: RefObject<HTMLElement | null>;
     columns: IListFlexibleColumn<T, T>[];
     options: IColumnSettingsStorageOptions;
     onChangeSettings: (newSettings: IColumnSettings[]) => void;
     onResetSettings?: () => void;
     sortGroups?: (groupA: string, groupB: string) => number;
     sortColumns?: (groupA: string, groupB: string) => number;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
+    ref?: RefObject<HTMLElement | null>;
 }
 export declare const withFlexibleColumns: {
-    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<IFlexibleColumnsListProps<T> & P> & import("react").RefAttributes<HTMLElement>>;
+    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): {
+        (props: IFlexibleColumnsListProps<T> & P): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     translations: string[];
 };
 export {};

package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { ColumnsSettingsStorage, mergeColumnsSettings } from "./flexibleColumnsStorage";
 import { FlexibleColumnResizer } from "./flexibleColumnsResizer";
 import { FlexibleColumnReorder } from "./flexibleColumnsReorder";
@@ -13,131 +13,133 @@ import { ColumnSettingsSidePanel } from "./components/columnSettingsSidePanel";
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const withFlexibleColumns = (DataGridComponent) => forwardRef(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerFlColumnsList(props, ref) {
-    var _a, _b;
-    const { columns, options, popupTriggerRef, onChangeSettings, onResetSettings = () => { }, sortGroups, sortColumns } = props;
-    const settingsStore = useMemo(() => { var _a, _b; return new ColumnsSettingsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage); }, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
-    const [isPanelOpen, setIsPanelOpen] = useState(false);
-    const allColumns = useMemo(() => columns.map(column => (Object.assign(Object.assign({}, toBasicColumn(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
-    const columnsSettings = useMemo(() => mergeColumnsSettings(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
-    const visibleColumns = useMemo(() => {
-        const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
-        return columnsSettings.map((s, index) => {
-            const column = visibleColumnsMap.get(s.name);
-            if (column === undefined || !s.visible) {
-                return undefined;
+export const withFlexibleColumns = (DataGridComponent) => {
+    const FlexibleColumnsComponent = (props) => {
+        var _a, _b;
+        const { columns, options, popupTriggerRef, onChangeSettings, onResetSettings = () => { }, sortGroups, sortColumns } = props;
+        const settingsStore = useMemo(() => { var _a, _b; return new ColumnsSettingsStorage(((_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName) || "", (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage); }, [(_a = options.columnsSettingsStorage) === null || _a === void 0 ? void 0 : _a.pageName, (_b = options.columnsSettingsStorage) === null || _b === void 0 ? void 0 : _b.storage]);
+        const [isPanelOpen, setIsPanelOpen] = useState(false);
+        const allColumns = useMemo(() => columns.map(column => (Object.assign(Object.assign({}, toBasicColumn(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
+        const columnsSettings = useMemo(() => mergeColumnsSettings(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
+        const visibleColumns = useMemo(() => {
+            const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
+            return columnsSettings.map((s, index) => {
+                const column = visibleColumnsMap.get(s.name);
+                if (column === undefined || !s.visible) {
+                    return undefined;
+                }
+                const wrappers = column.wrappers;
+                return (Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, column.meta), { defaultWidth: s.width }), wrappers: wrappers.some(w => w instanceof FlexibleColumnWrapper) ? wrappers : [
+                        ...wrappers,
+                        new FlexibleColumnWrapper({
+                            draggable: !(column.columnComponent instanceof ActionsColumn),
+                            resizable: index !== 0
+                        })
+                    ] }));
+            }).filter(c => c !== undefined);
+        }, [allColumns, columnsSettings]);
+        const gridRef = useRef(null);
+        const resizerRef = useRef(null);
+        const reordererRef = useRef(null);
+        useImperativeHandle(props.ref, () => gridRef.current, []);
+        const saveSettingsToTheStore = useCallback((newSettings) => 
+        // not to block main thread this operation can be postponed
+        new Promise((resolve, reject) => {
+            setTimeout(() => {
+                try {
+                    settingsStore.setItem(newSettings);
+                    resolve();
+                }
+                catch (e) {
+                    reject(e);
+                }
+            }, 0);
+        }), [settingsStore]);
+        const listOfColumns = useMemo(() => {
+            var _a;
+            const firstColumn = (((_a = visibleColumns[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
+            const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
+            return _jsx(ColumnSettingsList, { columns: allColumns.filter(c => c.title), settings: columnSettingsMap, firstColumn: firstColumn, onChange: async (newSettings) => {
+                    const settings = (columnsSettings.map(s => {
+                        const visible = newSettings.get(s.name) !== false;
+                        return Object.assign(Object.assign({}, s), { visible });
+                    }));
+                    await saveSettingsToTheStore(settings);
+                    onChangeSettings(settings);
+                }, sortGroups: sortGroups, sortColumns: sortColumns });
+        }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, visibleColumns, sortGroups, sortColumns]);
+        const onReorderListener = useCallback(async ([from, to]) => {
+            if (from === to) {
+                return;
+            }
+            const column = visibleColumns[from];
+            // we should avoid moving actions column
+            const limitedTo = Math.min(to, visibleColumns.length - 1);
+            const where = visibleColumns[limitedTo];
+            if (column === undefined) {
+                return;
+            }
+            // update order in settings
+            const settingsWithoutColumn = columnsSettings.filter(s => s.name !== column.name);
+            const originalSettings = columnsSettings.filter(s => s.name === column.name)[0];
+            const sIndex = settingsWithoutColumn.findIndex(s => s.name === where.name);
+            const newColumnSettings = [
+                ...settingsWithoutColumn.slice(0, sIndex),
+                originalSettings,
+                ...settingsWithoutColumn.slice(sIndex)
+            ];
+            await saveSettingsToTheStore(newColumnSettings);
+            onChangeSettings(newColumnSettings);
+        }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
+        const onResizeColumn = useCallback(async ([index, width]) => {
+            const column = visibleColumns[index];
+            if (column === undefined) {
+                return;
             }
-            const wrappers = column.wrappers;
-            return (Object.assign(Object.assign({}, column), { meta: Object.assign(Object.assign({}, column.meta), { defaultWidth: s.width }), wrappers: wrappers.some(w => w instanceof FlexibleColumnWrapper) ? wrappers : [
-                    ...wrappers,
-                    new FlexibleColumnWrapper({
-                        draggable: !(column.columnComponent instanceof ActionsColumn),
-                        resizable: index !== 0
-                    })
-                ] }));
-        }).filter(c => c !== undefined);
-    }, [allColumns, columnsSettings]);
-    const gridRef = useRef(null);
-    const resizerRef = useRef();
-    const reordererRef = useRef();
-    useImperativeHandle(ref, () => gridRef.current, []);
-    const saveSettingsToTheStore = useCallback((newSettings) => 
-    // not to block main thread this operation can be postponed
-    new Promise((resolve, reject) => {
-        setTimeout(() => {
-            try {
-                settingsStore.setItem(newSettings);
-                resolve();
+            const newColumnSettings = columnsSettings.map(s => {
+                if (s.name === column.name) {
+                    return Object.assign(Object.assign({}, s), { width });
+                }
+                return s;
+            });
+            await saveSettingsToTheStore(newColumnSettings);
+            onChangeSettings(newColumnSettings);
+        }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
+        useEffect(() => {
+            if (!gridRef.current) {
+                return;
             }
-            catch (e) {
-                reject(e);
+            // resizer
+            if (!resizerRef.current) {
+                const resizer = new FlexibleColumnResizer(gridRef.current);
+                resizerRef.current = resizer;
             }
-        }, 0);
-    }), [settingsStore]);
-    const listOfColumns = useMemo(() => {
-        var _a;
-        const firstColumn = (((_a = visibleColumns[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
-        const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
-        return _jsx(ColumnSettingsList, { columns: allColumns.filter(c => c.title), settings: columnSettingsMap, firstColumn: firstColumn, onChange: async (newSettings) => {
-                const settings = (columnsSettings.map(s => {
-                    const visible = newSettings.get(s.name) !== false;
-                    return Object.assign(Object.assign({}, s), { visible });
-                }));
-                await saveSettingsToTheStore(settings);
-                onChangeSettings(settings);
-            }, sortGroups: sortGroups, sortColumns: sortColumns });
-    }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, visibleColumns, sortGroups, sortColumns]);
-    const onReorderListener = useCallback(async ([from, to]) => {
-        if (from === to) {
-            return;
-        }
-        const column = visibleColumns[from];
-        // we should avoid moving actions column
-        const limitedTo = Math.min(to, visibleColumns.length - 1);
-        const where = visibleColumns[limitedTo];
-        if (column === undefined) {
-            return;
-        }
-        // update order in settings
-        const settingsWithoutColumn = columnsSettings.filter(s => s.name !== column.name);
-        const originalSettings = columnsSettings.filter(s => s.name === column.name)[0];
-        const sIndex = settingsWithoutColumn.findIndex(s => s.name === where.name);
-        const newColumnSettings = [
-            ...settingsWithoutColumn.slice(0, sIndex),
-            originalSettings,
-            ...settingsWithoutColumn.slice(sIndex)
-        ];
-        await saveSettingsToTheStore(newColumnSettings);
-        onChangeSettings(newColumnSettings);
-    }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
-    const onResizeColumn = useCallback(async ([index, width]) => {
-        const column = visibleColumns[index];
-        if (column === undefined) {
-            return;
-        }
-        const newColumnSettings = columnsSettings.map(s => {
-            if (s.name === column.name) {
-                return Object.assign(Object.assign({}, s), { width });
+            resizerRef.current.detach("resize");
+            resizerRef.current.attach("resize", onResizeColumn);
+            resizerRef.current.add(visibleColumns);
+            // reorder
+            if (!reordererRef.current) {
+                const reorder = new FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
+                reordererRef.current = reorder;
             }
-            return s;
-        });
-        await saveSettingsToTheStore(newColumnSettings);
-        onChangeSettings(newColumnSettings);
-    }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
-    useEffect(() => {
-        if (!gridRef.current) {
-            return;
-        }
-        // resizer
-        if (!resizerRef.current) {
-            const resizer = new FlexibleColumnResizer(gridRef.current);
-            resizerRef.current = resizer;
-        }
-        resizerRef.current.detach("resize");
-        resizerRef.current.attach("resize", onResizeColumn);
-        resizerRef.current.add(visibleColumns);
-        // reorder
-        if (!reordererRef.current) {
-            const reorder = new FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
-            reordererRef.current = reorder;
-        }
-        reordererRef.current.detach("reorder");
-        reordererRef.current.attach("reorder", onReorderListener);
-        reordererRef.current.add();
-    }, [columnsSettings, visibleColumns, onResizeColumn, onReorderListener]);
-    const onResetListener = useCallback(async () => {
-        await saveSettingsToTheStore([]);
-        onResetSettings();
-        setIsPanelOpen(false);
-    }, [onResetSettings, saveSettingsToTheStore]);
-    return _jsxs(_Fragment, { children: [popupTriggerRef && visibleColumns.length > 0
-                ? options.isFeed
-                    ? _jsx(ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: _jsx(ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })
-                    : _jsx(Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: _jsx(ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup")
-                : null, _jsx(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid")] });
-});
+            reordererRef.current.detach("reorder");
+            reordererRef.current.attach("reorder", onReorderListener);
+            reordererRef.current.add();
+        }, [columnsSettings, visibleColumns, onResizeColumn, onReorderListener]);
+        const onResetListener = useCallback(async () => {
+            await saveSettingsToTheStore([]);
+            onResetSettings();
+            setIsPanelOpen(false);
+        }, [onResetSettings, saveSettingsToTheStore]);
+        return _jsxs(_Fragment, { children: [popupTriggerRef && visibleColumns.length > 0
+                    ? options.isFeed
+                        ? _jsx(ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: _jsx(ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })
+                        : _jsx(Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: _jsx(ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup")
+                    : null, _jsx(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid")] });
+    };
+    FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
+    return FlexibleColumnsComponent;
+};
 withFlexibleColumns.translations = [
     ...ColumnSettings.translations,
     ...ColumnSettingsSidePanel.translations

package/esm/dataGrid/withLoading/withLoading.d.ts

@@ -1,22 +1,25 @@
-import { ComponentType } from "react";
+import { ComponentType, RefObject } from "react";
 import { IEntityWithId } from "../../commonHelpers/entity";
 import { IDataGrid } from "../dataGrid";
-import { ITranslatable } from "../../commonHelpers/translatable";
 import { IListColumn, IListColumnBasic } from "../listColumn";
 import { ISelectableRowsList } from "../withSelectableRows/withSelectableRows";
 export declare const DEFAULT_LOADING_ROWS = 20;
 export interface IListColumnWithLoading<T> extends IListColumn<T, T> {
     loadingEntitiesColumnComponent?: IListColumnBasic<T & ILoadingEntity, T & ILoadingEntity>;
 }
-export interface IWithLoadingProps<T> extends ITranslatable {
+export interface IWithLoadingProps<T> {
     loadingRows?: number;
     entitiesPromise?: Promise<T[]>;
     columns: IListColumnWithLoading<T>[];
     options?: {
         addToEnd?: boolean;
     };
+    ref?: RefObject<HTMLElement | null>;
 }
 export interface ILoadingEntity extends IEntityWithId {
     isLoading?: boolean;
 }
-export declare const withLoading: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<IWithLoadingProps<T> & Partial<Pick<ISelectableRowsList<T, T>, "selectMode">> & P> & import("react").RefAttributes<HTMLElement>>;
+export declare const withLoading: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+    (props: IWithLoadingProps<T> & Partial<Pick<ISelectableRowsList<T, T>, "selectMode">> & P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};