@geotab/zenith 2.0.0 → 3.0.0-beta.0

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -16,131 +16,133 @@ const columnSettingsSidePanel_1 = require("./components/columnSettingsSidePanel"
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const withFlexibleColumns = (DataGridComponent) => (0, react_1.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 = (0, react_1.useMemo)(() => { var _a, _b; return new flexibleColumnsStorage_1.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] = (0, react_1.useState)(false);
-    const allColumns = (0, react_1.useMemo)(() => columns.map(column => (Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
-    const columnsSettings = (0, react_1.useMemo)(() => (0, flexibleColumnsStorage_1.mergeColumnsSettings)(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
-    const visibleColumns = (0, react_1.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 withFlexibleColumns = (DataGridComponent) => {
+    const FlexibleColumnsComponent = (props) => {
+        var _a, _b;
+        const { columns, options, popupTriggerRef, onChangeSettings, onResetSettings = () => { }, sortGroups, sortColumns } = props;
+        const settingsStore = (0, react_1.useMemo)(() => { var _a, _b; return new flexibleColumnsStorage_1.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] = (0, react_1.useState)(false);
+        const allColumns = (0, react_1.useMemo)(() => columns.map(column => (Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
+        const columnsSettings = (0, react_1.useMemo)(() => (0, flexibleColumnsStorage_1.mergeColumnsSettings)(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
+        const visibleColumns = (0, react_1.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_1.FlexibleColumnWrapper) ? wrappers : [
+                        ...wrappers,
+                        new flexibleColumnWrapper_1.FlexibleColumnWrapper({
+                            draggable: !(column.columnComponent instanceof actionsColumn_1.ActionsColumn),
+                            resizable: index !== 0
+                        })
+                    ] }));
+            }).filter(c => c !== undefined);
+        }, [allColumns, columnsSettings]);
+        const gridRef = (0, react_1.useRef)(null);
+        const resizerRef = (0, react_1.useRef)(null);
+        const reordererRef = (0, react_1.useRef)(null);
+        (0, react_1.useImperativeHandle)(props.ref, () => gridRef.current, []);
+        const saveSettingsToTheStore = (0, react_1.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 = (0, react_1.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 (0, jsx_runtime_1.jsx)(columnSettingsList_1.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 = (0, react_1.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 = (0, react_1.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_1.FlexibleColumnWrapper) ? wrappers : [
-                    ...wrappers,
-                    new flexibleColumnWrapper_1.FlexibleColumnWrapper({
-                        draggable: !(column.columnComponent instanceof actionsColumn_1.ActionsColumn),
-                        resizable: index !== 0
-                    })
-                ] }));
-        }).filter(c => c !== undefined);
-    }, [allColumns, columnsSettings]);
-    const gridRef = (0, react_1.useRef)(null);
-    const resizerRef = (0, react_1.useRef)();
-    const reordererRef = (0, react_1.useRef)();
-    (0, react_1.useImperativeHandle)(ref, () => gridRef.current, []);
-    const saveSettingsToTheStore = (0, react_1.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]);
+        (0, react_1.useEffect)(() => {
+            if (!gridRef.current) {
+                return;
             }
-            catch (e) {
-                reject(e);
+            // resizer
+            if (!resizerRef.current) {
+                const resizer = new flexibleColumnsResizer_1.FlexibleColumnResizer(gridRef.current);
+                resizerRef.current = resizer;
             }
-        }, 0);
-    }), [settingsStore]);
-    const listOfColumns = (0, react_1.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 (0, jsx_runtime_1.jsx)(columnSettingsList_1.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 = (0, react_1.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 = (0, react_1.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 flexibleColumnsReorder_1.FlexibleColumnReorder(gridRef.current, resizerRef.current, () => true);
+                reordererRef.current = reorder;
             }
-            return s;
-        });
-        await saveSettingsToTheStore(newColumnSettings);
-        onChangeSettings(newColumnSettings);
-    }, [columnsSettings, visibleColumns, onChangeSettings, saveSettingsToTheStore]);
-    (0, react_1.useEffect)(() => {
-        if (!gridRef.current) {
-            return;
-        }
-        // resizer
-        if (!resizerRef.current) {
-            const resizer = new flexibleColumnsResizer_1.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 flexibleColumnsReorder_1.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 = (0, react_1.useCallback)(async () => {
-        await saveSettingsToTheStore([]);
-        onResetSettings();
-        setIsPanelOpen(false);
-    }, [onResetSettings, saveSettingsToTheStore]);
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [popupTriggerRef && visibleColumns.length > 0
-                ? options.isFeed
-                    ? (0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })
-                    : (0, jsx_runtime_1.jsx)(popup_1.Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup")
-                : null, (0, jsx_runtime_1.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 = (0, react_1.useCallback)(async () => {
+            await saveSettingsToTheStore([]);
+            onResetSettings();
+            setIsPanelOpen(false);
+        }, [onResetSettings, saveSettingsToTheStore]);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [popupTriggerRef && visibleColumns.length > 0
+                    ? options.isFeed
+                        ? (0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })
+                        : (0, jsx_runtime_1.jsx)(popup_1.Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup")
+                    : null, (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid")] });
+    };
+    FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
+    return FlexibleColumnsComponent;
+};
 exports.withFlexibleColumns = withFlexibleColumns;
 exports.withFlexibleColumns.translations = [
     ...columnSettings_1.ColumnSettings.translations,

package/dist/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;
+};

package/dist/dataGrid/withLoading/withLoading.js

@@ -28,36 +28,38 @@ const getEntitiesLoadingColumn = (column) => column.loadingEntitiesColumnCompone
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const withLoading = (DataGridComponent) => (0, react_1.forwardRef)(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerWithLoadingList(props, ref) {
-    const { entitiesPromise, loadingRows, columns, options } = props;
-    const [data, setData] = (0, react_1.useState)([]);
-    const state = (0, useFetch_1.useFetch)({}, entitiesPromise);
-    const sampleEntity = (0, react_1.useMemo)(() => columns.map((column) => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el))), [columns]);
-    const generateLoadingEntities = (0, react_1.useCallback)(() => (new Array(loadingRows || exports.DEFAULT_LOADING_ROWS).fill(undefined)).map(() => (Object.assign(Object.assign({}, sampleEntity), { isLoading: true, id: (0, generateId_1.generateId)() }))), [loadingRows, sampleEntity]);
-    (0, react_1.useEffect)(() => {
-        if (state.data) {
-            setData(prevData => {
-                const newData = state.data || [];
-                return (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...prevData, ...newData] : newData;
-            });
-        }
-    }, [state.data, options === null || options === void 0 ? void 0 : options.addToEnd]);
-    const selectMode = (0, react_1.useMemo)(() => {
-        if (state.isLoading) {
-            return false;
-        }
-        return props.selectMode;
-    }, [state.isLoading, props.selectMode]);
-    return (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { selectMode: selectMode, className: (0, classNames_1.classNames)([
-            props.className || "",
-            state.isLoading ? "zen-data-grid--loading" : ""
-        ]), entities: (state.isLoading)
-            ? (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...data, ...generateLoadingEntities()] : generateLoadingEntities()
-            : data, columns: columns.map(column => (Object.assign(Object.assign({}, column), { meta: Object.assign({ renderPlaceholder: (entity) => (0, jsx_runtime_1.jsx)(loadingRowCell_1.LoadingCell, { children: entity[column.id] }), renderFeedPlaceholder: (entity) => [
-                    (0, jsx_runtime_1.jsx)(loadingRowCell_1.LoadingCell, { children: column.title }, `${column.id}_label`),
-                    (0, jsx_runtime_1.jsx)(loadingRowCell_1.LoadingCell, { children: entity[column.id] }, `${column.id}_value`)
-                ] }, column.meta), columnComponent: state.isLoading ? getEntitiesLoadingColumn(column) : column.columnComponent || (0, defaultColumnComponent_1.defaultColumnComponent)(column.id) }))), ref: ref }), "grid");
-});
+const withLoading = (DataGridComponent) => {
+    const WithLoadingInner = (props) => {
+        const { entitiesPromise, loadingRows, columns, options } = props;
+        const [data, setData] = (0, react_1.useState)([]);
+        const state = (0, useFetch_1.useFetch)({}, entitiesPromise);
+        const sampleEntity = (0, react_1.useMemo)(() => columns.map((column) => ({ [column.id]: column.title })).reduce((acc, el) => (Object.assign(Object.assign({}, acc), el))), [columns]);
+        const generateLoadingEntities = (0, react_1.useCallback)(() => (new Array(loadingRows || exports.DEFAULT_LOADING_ROWS).fill(undefined)).map(() => (Object.assign(Object.assign({}, sampleEntity), { isLoading: true, id: (0, generateId_1.generateId)() }))), [loadingRows, sampleEntity]);
+        (0, react_1.useEffect)(() => {
+            if (state.data) {
+                setData(prevData => {
+                    const newData = state.data || [];
+                    return (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...prevData, ...newData] : newData;
+                });
+            }
+        }, [state.data, options === null || options === void 0 ? void 0 : options.addToEnd]);
+        const selectMode = (0, react_1.useMemo)(() => {
+            if (state.isLoading) {
+                return false;
+            }
+            return props.selectMode;
+        }, [state.isLoading, props.selectMode]);
+        return (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { selectMode: selectMode, className: (0, classNames_1.classNames)([
+                props.className || "",
+                state.isLoading ? "zen-data-grid--loading" : ""
+            ]), entities: (state.isLoading)
+                ? (options === null || options === void 0 ? void 0 : options.addToEnd) ? [...data, ...generateLoadingEntities()] : generateLoadingEntities()
+                : data, columns: columns.map(column => (Object.assign(Object.assign({}, column), { meta: Object.assign({ renderPlaceholder: (entity) => (0, jsx_runtime_1.jsx)(loadingRowCell_1.LoadingCell, { children: entity[column.id] }), renderFeedPlaceholder: (entity) => [
+                        (0, jsx_runtime_1.jsx)(loadingRowCell_1.LoadingCell, { children: column.title }, `${column.id}_label`),
+                        (0, jsx_runtime_1.jsx)(loadingRowCell_1.LoadingCell, { children: entity[column.id] }, `${column.id}_value`)
+                    ] }, column.meta), columnComponent: state.isLoading ? getEntitiesLoadingColumn(column) : column.columnComponent || (0, defaultColumnComponent_1.defaultColumnComponent)(column.id) }))), ref: props.ref }), "grid");
+    };
+    WithLoadingInner.displayName = `withLoading(${DataGridComponent.displayName || DataGridComponent.name})`;
+    return WithLoadingInner;
+};
 exports.withLoading = withLoading;

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActionButton/bulkActionButton.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 import { IBulkActionCommon } from "../bulkAction";
+import { RefObject } from "react";
 export interface IBulkActionButton extends IBulkActionCommon {
     clickHandler?: () => void;
     onClick?: () => void;
+    ref?: RefObject<HTMLAnchorElement | null>;
 }
-export declare const BulkActionButton: import("react").ForwardRefExoticComponent<IBulkActionButton & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const BulkActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActionButton/bulkActionButton.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulkActionButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const textIconButton_1 = require("../../../../../textIconButton/textIconButton");
 const svgIconSize_1 = require("../../../../../svgIcon/svgIconSize");
 const useMobile_1 = require("../../../../../commonHelpers/hooks/useMobile");
-exports.BulkActionButton = (0, react_1.forwardRef)(function inner({ title, icon, clickHandler, onClick, disabled, type }, ref) {
+const BulkActionButton = ({ title, icon, clickHandler, onClick, disabled, type, ref }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isMobile = (0, useMobile_1.useMobile)();
     return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, className: "zen-bulk-actions__action-button", icon: icon, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: svgIconSize_1.SvgIconSize.Large, type: type || (isMobile ? "tertiary-black" : "secondary"), onClick: onClick || clickHandler, disabled: disabled, "aria-label": title, title: isMobile ? title : undefined, children: !isMobile ? (0, jsx_runtime_1.jsx)("span", { className: "bulk-actions__action-button-title", children: title }) : null });
-});
+};
+exports.BulkActionButton = BulkActionButton;

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActionLink/bulkActionLink.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
 import { IBulkActionCommon } from "../bulkAction";
+import { RefObject } from "react";
 export interface IBulkActionLink extends IBulkActionCommon {
     link: string;
+    ref?: RefObject<HTMLAnchorElement | null>;
 }
-export declare const BulkActionLink: import("react").ForwardRefExoticComponent<IBulkActionLink & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const BulkActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActionLink/bulkActionLink.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulkActionLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const svgIconSize_1 = require("../../../../../svgIcon/svgIconSize");
 const textIconButton_1 = require("../../../../../textIconButton/textIconButton");
 const useMobile_1 = require("../../../../../commonHelpers/hooks/useMobile");
-exports.BulkActionLink = (0, react_1.forwardRef)(function inner({ title, icon, link, disabled, type }, ref) {
+const BulkActionLink = ({ title, icon, link, disabled, type, ref }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const isMobile = (0, useMobile_1.useMobile)();
     return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, className: "zen-bulk-actions__action-button", icon: icon, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: svgIconSize_1.SvgIconSize.Large, type: type || (isMobile ? "tertiary-black" : "secondary"), link: link, disabled: disabled, "aria-label": title, title: isMobile ? title : undefined, children: !isMobile ? (0, jsx_runtime_1.jsx)("span", { className: "bulk-actions__action-button-title", children: title }) : null });
-});
+};
+exports.BulkActionLink = BulkActionLink;

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -1,6 +1,5 @@
 import "./bulkActions.less";
 import { IZenComponentProps } from "../../../../commonHelpers/zenComponent";
-import { IZenTranslatableComponent } from "../../../../commonHelpers/translatable";
 import { ReactElement, ReactNode } from "react";
 import { IBulkActionLink } from "./bulkActionLink/bulkActionLink";
 import { IBulkActionButton } from "./bulkActionButton/bulkActionButton";
@@ -14,15 +13,15 @@ export interface IBulkActionsProps extends IZenComponentProps {
     gridType?: DeviceType;
     children?: ReactElement<TBulkAction> | null | (ReactElement<TBulkAction> | null)[];
     turnOffSelectAll?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
-export interface IBulkActions extends IZenTranslatableComponent<IBulkActionsProps> {
+export interface IBulkActions extends IBulkActionsProps {
     ActionLink: (props: IBulkActionLink) => ReactNode;
     ActionButton: (props: IBulkActionButton) => ReactNode;
 }
-export declare const BulkActions: IBulkActions;
+export declare const BulkActions: {
+    ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+    ActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;
+    ActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;
+    translations: string[];
+};
 export {};

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -33,7 +33,12 @@ const BulkActions = ({ selected, allSelected, className, onClearSelection, onSel
                 : null, (0, jsx_runtime_1.jsxs)("div", { className: "zen-bulk-actions__action-button-holder", ref: buttonHolder, children: [react_1.Children.map(visibleElements, element => (0, react_1.cloneElement)(element, {
                         disabled: selected > 0 || allSelected ? element.props.disabled : true
                     })), nonFittingElements.length > 0
-                        ? (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: moreButtonRef, className: "zen-bulk-actions__action-button zen-bulk-actions__action-button-more", icon: iconDotVertical_1.IconDotVertical, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", type: isMobile ? "tertiary-black" : "secondary", title: translate("More"), "aria-label": translate("More") }), children: nonFittingElements.filter(el => el.props).map(child => (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: child.props.id, name: child.props.title, icon: child.props.icon, disabled: child.props.disabled, onClick: child.props.clickHandler, link: child.props.link }, child.props.id)) })
+                        ? (0, jsx_runtime_1.jsx)(menu_1.Menu, { title: translate("More"), trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: moreButtonRef, className: "zen-bulk-actions__action-button zen-bulk-actions__action-button-more", icon: iconDotVertical_1.IconDotVertical, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", type: isMobile ? "tertiary-black" : "secondary", title: translate("More"), "aria-label": translate("More") }), children: nonFittingElements.map(child => {
+                                const props = child.props;
+                                const clickHandler = "clickHandler" in props ? props.clickHandler : undefined;
+                                const link = "link" in props ? props.link : undefined;
+                                return (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { id: props.id || "", name: props.title, icon: props.icon, disabled: props.disabled, onClick: clickHandler, link: link }, props.id);
+                            }) })
                         : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-bulk-actions__hidden-elements", ref: hiddenContainerRef, children: childrenArray })] })] });
 };
 exports.BulkActions = BulkActions;

package/dist/dataGrid/withSelectableRows/withLimitedSelectableRows.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from "react";
+import { ComponentType, RefObject } from "react";
 import { IDataGrid } from "../dataGrid";
 import { IEntityWithId } from "../../commonHelpers/entity";
 import { ISelectableRowsList, ISelectableRowsListOptions } from "./withSelectableRows";
@@ -7,8 +7,12 @@ export interface ILimitedSelectableRowsListOptions<T extends IEntityWithId> exte
 }
 export interface ILimitedSelectableRowsList<T extends IEntityWithId> extends ISelectableRowsList<T> {
     options: ILimitedSelectableRowsListOptions<T>;
+    ref?: RefObject<HTMLElement | null>;
 }
 /**
  * @deprecated Please use withSelectableRows with options checkboxVisible/checkboxDisabled instead
  */
-export declare const withLimitedSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ILimitedSelectableRowsList<T> & P> & import("react").RefAttributes<HTMLElement>>;
+export declare const withLimitedSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+    (props: ILimitedSelectableRowsList<T> & P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/dataGrid/withSelectableRows/withLimitedSelectableRows.js

@@ -11,41 +11,43 @@ const limitedCheckboxColumnWrapper_1 = require("../columns/checkboxColumn/limite
  * @deprecated Please use withSelectableRows with options checkboxVisible/checkboxDisabled instead
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const withLimitedSelectableRows = (DataGridComponent) => (0, react_1.forwardRef)(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function InnerList(props, ref) {
-    const { selection, columns, options, onSelect, entities } = props;
-    const allSelected = !!(selection === null || selection === void 0 ? void 0 : selection.allSelected);
-    const selections = (0, withSelectableRows_1.getSelections)(allSelected ?
-        { selected: entities.slice(0, options.limit).map(el => el.id), allSelected: false }
-        : (selection ? { selected: selection.selected.slice(0, options.limit), allSelected: false } : undefined));
-    const wrapper = (0, react_1.useMemo)(() => new limitedCheckboxColumnWrapper_1.LimitedCheckboxColumnWrapper(selections, { createTitle: options.createTitle, headerTitle: options.headerTitle, limit: props.options.limit }, { current: null }), [selections, options.createTitle, options.headerTitle, props.options.limit]);
-    const onSelectListener = (0, react_1.useCallback)(([id, checked]) => {
-        if (checked) {
-            selections.add(id);
-        }
-        else {
-            selections.delete(id);
-        }
-        onSelect({
-            selected: [...selections],
-            allSelected: false
-        });
-    }, [selections, onSelect]);
-    (0, react_1.useEffect)(() => {
-        wrapper.detach();
-        wrapper.attach("change", onSelectListener);
-        return () => {
+const withLimitedSelectableRows = (DataGridComponent) => {
+    const WithLimitedSelectableRowsInner = (props) => {
+        const { selection, columns, options, onSelect, entities } = props;
+        const allSelected = !!(selection === null || selection === void 0 ? void 0 : selection.allSelected);
+        const selections = (0, withSelectableRows_1.getSelections)(allSelected ?
+            { selected: entities.slice(0, options.limit).map(el => el.id), allSelected: false }
+            : (selection ? { selected: selection.selected.slice(0, options.limit), allSelected: false } : undefined));
+        const wrapper = (0, react_1.useMemo)(() => new limitedCheckboxColumnWrapper_1.LimitedCheckboxColumnWrapper(selections, { createTitle: options.createTitle, headerTitle: options.headerTitle, limit: props.options.limit }, { current: null }), [selections, options.createTitle, options.headerTitle, props.options.limit]);
+        const onSelectListener = (0, react_1.useCallback)(([id, checked]) => {
+            if (checked) {
+                selections.add(id);
+            }
+            else {
+                selections.delete(id);
+            }
+            onSelect({
+                selected: [...selections],
+                allSelected: false
+            });
+        }, [selections, onSelect]);
+        (0, react_1.useEffect)(() => {
             wrapper.detach();
-        };
-    }, [wrapper, onSelectListener]);
-    const listColumns = (0, react_1.useMemo)(() => {
-        const newColumns = columns.map(c => (Object.assign({}, c)));
-        if (newColumns.length > 0) {
-            newColumns[0].wrappers = [...(newColumns[0].wrappers || []), wrapper];
-        }
-        return newColumns;
-    }, [columns, wrapper]);
-    return (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: listColumns, ref: ref }));
-});
+            wrapper.attach("change", onSelectListener);
+            return () => {
+                wrapper.detach();
+            };
+        }, [wrapper, onSelectListener]);
+        const listColumns = (0, react_1.useMemo)(() => {
+            const newColumns = columns.map(c => (Object.assign({}, c)));
+            if (newColumns.length > 0) {
+                newColumns[0].wrappers = [...(newColumns[0].wrappers || []), wrapper];
+            }
+            return newColumns;
+        }, [columns, wrapper]);
+        return (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: listColumns, ref: props.ref }));
+    };
+    WithLimitedSelectableRowsInner.displayName = `withLimitedSelectableRows(${DataGridComponent.displayName || DataGridComponent.name})`;
+    return WithLimitedSelectableRowsInner;
+};
 exports.withLimitedSelectableRows = withLimitedSelectableRows;

package/dist/dataGrid/withSelectableRows/withSelectableRows.d.ts

@@ -1,7 +1,6 @@
 import { ComponentType, RefObject } from "react";
 import { IDataGrid } from "../dataGrid";
 import { IEntityWithId } from "../../commonHelpers/entity";
-import { ITranslatable } from "../../commonHelpers/translatable";
 import { IListColumn } from "../listColumn";
 interface ICheckboxSettings<T> {
     /**
@@ -24,17 +23,19 @@ export interface ISelectableRowsListSelections {
     selected: string[];
     turnOffSelectAll?: boolean;
 }
-export interface ISelectableRowsList<T, N = T> extends ITranslatable {
+export interface ISelectableRowsList<T, N = T> {
     selectMode: boolean;
     selection: ISelectableRowsListSelections | undefined;
-    popupTriggerRef?: RefObject<HTMLElement>;
+    popupTriggerRef?: RefObject<HTMLElement | null>;
     columns: IListColumn<T, N>[];
     options: ISelectableRowsListOptions<T>;
     onSelect: (selection: ISelectableRowsListSelections) => void;
+    ref?: RefObject<HTMLElement | null>;
 }
 export declare const getSelections: (selections: ISelectableRowsListSelections | undefined) => Set<string>;
-export declare const withSelectableRows: {
-    <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>): import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ISelectableRowsList<T, T> & P> & import("react").RefAttributes<HTMLElement>>;
+export declare const withSelectableRows: <T extends IEntityWithId, P extends IDataGrid<T, T>>(DataGridComponent: ComponentType<P>) => {
+    (props: ISelectableRowsList<T, T> & P): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
     translations: string[];
 };
 export {};