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

package/dist/columnsSelector/columnsTab/columnsTab.d.ts

@@ -9,11 +9,6 @@ interface IColumnsTab {
     id: string;
     columns: IColumnItem[];
     onColumnToggle: (state: IColumnItem[]) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const ColumnsTab: React.FC<IColumnsTab>;
 export declare const TRANSLATIONS: string[];

package/dist/columnsSelector/columnsTabGroup/columnsTabGroup.d.ts

@@ -8,11 +8,6 @@ export interface IColumnsGroup {
 interface IColumnsTabGroup {
     columns: IColumnsGroup[];
     onColumnToggle: (state: IColumnsGroup[]) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const ColumnsTabGroup: React.FC<IColumnsTabGroup>;
 export declare const TRANSLATIONS: string[];

package/dist/comboboxSelected/comboboxSelected.d.ts

@@ -4,11 +4,6 @@ import { ISelectionItem } from "../dropdown/dropdown";
 export interface IComboboxSelected {
     selection: ISelectionItem[];
     onRemove: (item: string) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     pillEmptyText?: string;
     className?: string;
 }

package/dist/commonHelpers/arrowNavigation/hooks/useClearTimers.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { TArrowsNavValue } from "../arrowNavigationHelper";
 export interface IClearTimersProps {
     action: TArrowsNavValue | null;
-    timeoutTimer: React.MutableRefObject<number | null>;
-    intervalTimer: React.MutableRefObject<number | null>;
+    timeoutTimer: RefObject<number | null>;
+    intervalTimer: RefObject<number | null>;
 }
 export declare const useClearTimers: ({ action, timeoutTimer, intervalTimer }: IClearTimersProps) => void;

package/dist/commonHelpers/arrowNavigation/hooks/useHoldOnScroll.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const useHoldOnScroll: <E extends HTMLElement>() => {
     isScrollable: boolean;
-    scrollableElementRef: import("react").RefObject<E>;
+    scrollableElementRef: import("react").RefObject<E | null>;
     onMouseDown: (e: React.MouseEvent<HTMLElement>) => void;
     onMouseUp: () => void;
 };

package/dist/commonHelpers/arrowNavigation/hooks/useManualScrolling.d.ts

@@ -1,6 +1,6 @@
-import { RefObject, MouseEvent } from "react";
+import { MouseEvent, RefObject } from "react";
 export declare const useManualScrolling: <E extends HTMLElement>({ elementRef }: {
-    elementRef: RefObject<E>;
+    elementRef: RefObject<E | null>;
 }) => {
     scroll: (event: MouseEvent<HTMLElement>) => void;
 };

package/dist/commonHelpers/arrowNavigation/hooks/useScrollWhileHolding.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { TArrowsNavValue } from "../arrowNavigationHelper";
 interface IScrollWhileHoldingProps {
     action: TArrowsNavValue | null;
     container: HTMLElement | null;
-    intervalTimer: React.MutableRefObject<number | null>;
+    intervalTimer: RefObject<number | null>;
 }
 export declare const useScrollWhileHolding: ({ action, container, intervalTimer }: IScrollWhileHoldingProps) => void;
 export {};

package/dist/commonHelpers/hooks/useArrowKey.d.ts

@@ -1 +1,2 @@
-export declare const useArrowKey: (containerRef: React.RefObject<HTMLElement>, callback: () => void, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean) => void;
+import { RefObject } from "react";
+export declare const useArrowKey: (containerRef: RefObject<HTMLElement | null>, callback: () => void, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean) => void;

package/dist/commonHelpers/hooks/useContainerTypeObserver.d.ts

@@ -1,3 +1,3 @@
-import { RefObject } from "react";
 import { DeviceType } from "./deviceType";
-export declare const useContainerTypeObserver: <T extends HTMLElement>(container: RefObject<T> | T | null) => DeviceType | null;
+import { RefObject } from "react";
+export declare const useContainerTypeObserver: <T extends HTMLElement>(container: RefObject<T | null> | T | null) => DeviceType | null;

package/dist/commonHelpers/hooks/useEscape.d.ts

@@ -1 +1,2 @@
-export declare const useEscape: (containerRef: React.RefObject<HTMLElement>, callback: (e) => void, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean) => void;
+import { RefObject } from "react";
+export declare const useEscape: (containerRef: RefObject<HTMLElement | null>, callback: (e) => void, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean) => void;

package/dist/commonHelpers/hooks/useGridSize.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DeviceType } from "./deviceType";
-export declare const useGridSize: () => readonly [import("react").RefObject<HTMLDivElement>, boolean, DeviceType | null];
+export declare const useGridSize: () => readonly [import("react").RefObject<HTMLDivElement | null>, boolean, DeviceType | null];

package/dist/commonHelpers/hooks/usePillSize.d.ts

@@ -7,7 +7,7 @@ interface IPillSize extends Pick<IPill, "size">, Pick<IPillNonActionable, "onClo
 }
 export declare const usePillSize: ({ size, iconPosition, onClose, hasContent }: IPillSize) => {
     contentClasses: string;
-    ref: import("react").RefObject<HTMLElement>;
+    ref: import("react").RefObject<HTMLElement | null>;
     title: string;
     isFixedSize: boolean | undefined;
     isTextContentHidden: boolean;

package/dist/commonHelpers/hooks/useResizeObserver.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 type ResizeObserverTarget = (() => HTMLElement | null) | HTMLElement | null;
 export declare const useResizeObserver: ({ target }: {
-    target: ResizeObserverTarget | RefObject<HTMLElement>;
+    target: ResizeObserverTarget | RefObject<HTMLElement | null>;
 }) => {
     result: ResizeObserverEntry | null;
 };

package/dist/commonHelpers/hooks/useTrapFocus.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from "react";
 type TElementToBool = (element: HTMLElement) => boolean;
-export declare const useTrapFocus: (containerRef: React.RefObject<HTMLElement>, triggerRef: React.RefObject<HTMLElement> | undefined, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean, isElementVisible?: TElementToBool) => void;
+export declare const useTrapFocus: (containerRef: RefObject<HTMLElement | null>, triggerRef: RefObject<HTMLElement | null> | undefined, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean, isElementVisible?: TElementToBool) => void;
 export {};

package/dist/commonHelpers/ref.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export type TRef<T> = RefObject<T | null>;

package/dist/controlledPopup/controlledPopup.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { TTrapFocus } from "../absolute/absolute";
 import "./controlledPopup.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
@@ -8,7 +8,7 @@ import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
   */
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
 export interface IControlledPopup extends IZenComponentProps {
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
     alignment?: TAlignmentAbsolute;
     id?: string;
     className?: string;

package/dist/dataFeed/dataFeed.d.ts

@@ -18,8 +18,8 @@ interface IDataFeedOptions {
 export interface IDataFeed<T, N = T> extends IDataGrid<T, N> {
     feedWrappers?: TFeedWrapper<T, N>[];
     expanded: boolean;
-    actions?: IActionWithId<T> | ((e: T, isNested: boolean) => JSX.Element) | undefined;
-    actionsAsync?: IActionWithId<T> | ((e: T, isNested: boolean) => PromiseLike<JSX.Element>);
+    actions?: IActionWithId<T> | ((e: T, isNested: boolean) => React.JSX.Element) | undefined;
+    actionsAsync?: IActionWithId<T> | ((e: T, isNested: boolean) => PromiseLike<React.JSX.Element>);
     primaryActions?: IActionWithId<T>[] | ((e: T, isNested: boolean) => IActionWithId<T>[]);
     options: IDataFeedOptions;
     itemsPerPage?: number;

package/dist/dataFeed/dataFeedColumnsItems.d.ts

@@ -20,8 +20,8 @@ interface IFeedItem<T extends IRowEntity<N>, N extends IEntityWithId> {
     className?: string;
     isRowExpanded?: boolean;
     onExpandedChange?: (isExpanded: boolean) => void;
-    actions?: IActionWithId<T> | ((entity: T, isNested: boolean) => JSX.Element);
-    actionsAsync?: IActionWithId<T> | ((entity: T, isNested: boolean) => PromiseLike<JSX.Element>);
+    actions?: IActionWithId<T> | ((entity: T, isNested: boolean) => React.JSX.Element);
+    actionsAsync?: IActionWithId<T> | ((entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>);
     primaryActions?: IActionWithId<T>[] | ((e: T, isNested: boolean) => IActionWithId<T>[]);
 }
 export declare const FeedItem: <T extends IRowEntity<N>, N extends IEntityWithId>({ columnsList, feedWrappers, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className, isRowExpanded, onExpandedChange, actions, actionsAsync, primaryActions }: IFeedItem<T, N>) => import("react/jsx-runtime").JSX.Element;

package/dist/dataFeed/feedSelectControl/feedSelectControl.d.ts

@@ -1,8 +1,12 @@
-/// <reference types="react" />
 import "./feedSelectControl.less";
 import { IZenComponentProps } from "./../../commonHelpers/zenComponent";
+import { RefObject } from "react";
 export interface IFeedSelectControl extends IZenComponentProps {
     title: string;
     onClick: () => void;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const FeedSelectControl: import("react").ForwardRefExoticComponent<IFeedSelectControl & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const FeedSelectControl: {
+    ({ className, title, onClick, ref }: IFeedSelectControl): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/dataFeed/feedSelectControl/feedSelectControl.js

@@ -7,9 +7,9 @@ const svgIconSize_1 = require("../../svgIcon/svgIconSize");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
 const buttonType_1 = require("../../button/buttonType");
 const iconBulkSelect_1 = require("../../icons/iconBulkSelect");
-const react_1 = require("react");
-exports.FeedSelectControl = (0, react_1.forwardRef)(({ className = "", title, onClick }, ref) => {
+const FeedSelectControl = ({ className = "", title, onClick, ref }) => {
     const classes = (0, classNames_1.classNames)([className, "data-feed-select-control"]);
     return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, className: classes, icon: iconBulkSelect_1.IconBulkSelect, iconSize: svgIconSize_1.SvgIconSize.Large, iconPosition: textIconButton_1.ButtonIconPosition.Start, "aria-label": title, title: title, onClick: onClick, type: buttonType_1.ButtonType.TertiaryBlack });
-});
+};
+exports.FeedSelectControl = FeedSelectControl;
 exports.FeedSelectControl.displayName = "FeedSelectControl";

package/dist/dataGrid/cell/cell.js

@@ -26,7 +26,7 @@ const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, render
             if (postponedResult === undefined) {
                 postponedResult = defaultValue;
             }
-            return renderWrappers(postponedResult, entity);
+            return await renderWrappers(postponedResult, entity);
         }
         catch (e) {
             console.error(e);

package/dist/dataGrid/columns/actionLinkColumn/actionButtonsMobileWrapper.js

@@ -25,7 +25,7 @@ class ActionButtonsWrapper {
         return (0, jsx_runtime_1.jsxs)("div", { className: "zen-action-link-column", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-action-link-column__content", children: elt }), this.options.actions
                     ? (0, jsx_runtime_1.jsx)("div", { className: "zen-action-link-column__actions", children: this.options.actions
                             .map(getActionWithId)
-                            .map(action => (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: action, entity: entity, isMobile: true }, `${entityId}_${action.id}`)) })
+                            .map(action => (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: action, entity: entity }, `${entityId}_${action.id}`)) })
                     : null] });
     }
     renderHeader(title) {

package/dist/dataGrid/columns/actionLinkColumn/actionLinkColumnWrapper.js

@@ -32,7 +32,7 @@ class ActionLinkColumnWrapper {
         return (0, jsx_runtime_1.jsxs)("div", { className: "zen-action-link-column", children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { disabled: isDisabled, link: lintUrl || "", title: title, "aria-label": title, className: "zen-action-link-column__link", icon: icon, iconSize: "large", type: "primary", iconPosition: textIconButton_1.ButtonIconPosition.Start }), (0, jsx_runtime_1.jsx)("div", { className: "zen-action-link-column__content", children: elt }), this.options.actions
                     ? (0, jsx_runtime_1.jsx)("div", { className: "zen-action-link-column__actions", children: this.options.actions
                             .map(getActionWithId)
-                            .map(action => (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: action, entity: entity, isMobile: !!this.options.isMobile }, `${entityId}_${action.id}`)) })
+                            .map(action => (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: action, entity: entity }, `${entityId}_${action.id}`)) })
                     : null] });
     }
     renderHeader(title) {

package/dist/dataGrid/columns/actionsColumn/actionsButton.d.ts

@@ -2,11 +2,6 @@ import { IActionWithId } from "./actionsColumn";
 interface IActionsButtonProps<T> {
     action: IActionWithId<T>;
     entity?: T;
-    /**
-     * @deprecated
-     * @param isMobile - will be removed in the next major release
-    */
-    isMobile?: boolean;
 }
 export declare function ActionsButton<T>({ action, entity }: IActionsButtonProps<T>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/dataGrid/columns/actionsColumn/actionsColumn.d.ts

@@ -29,8 +29,8 @@ interface IActionsColumnOptions<T extends object> {
     actions?: IAction<T>[];
     headerActions?: IAction<undefined>[];
     primaryActions?: IAction<T>[] | ((entity: T, isNested: boolean) => IAction<T>[]);
-    render?: (entity: T, isNested: boolean) => JSX.Element;
-    renderAsync?: (entity: T, isNested: boolean) => PromiseLike<JSX.Element>;
+    render?: (entity: T, isNested: boolean) => React.JSX.Element;
+    renderAsync?: (entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>;
 }
 export declare class ActionsColumn<T extends IRowEntity<N>, N extends IEntityWithId = T> extends BasicColumn<T, unknown, N> implements IListColumnBasic<T, N> {
     private actionsOptions;
@@ -46,8 +46,8 @@ export declare class ActionsColumn<T extends IRowEntity<N>, N extends IEntityWit
     constructor(actionsOptions: IActionsColumnOptions<T | N>);
     get options(): IActionsColumnOptions<T | N>;
     set options(actionsOptions: IActionsColumnOptions<T | N>);
-    get columnActions(): IActionWithId<N | T> | ((entity: T, isNested: boolean) => JSX.Element) | undefined;
-    get columnActionsAsync(): ((entity: T, isNested: boolean) => PromiseLike<JSX.Element>) | undefined;
+    get columnActions(): IActionWithId<N | T> | ((entity: T, isNested: boolean) => import("react").JSX.Element) | undefined;
+    get columnActionsAsync(): ((entity: T, isNested: boolean) => PromiseLike<import("react").JSX.Element>) | undefined;
     get columnPrimaryActions(): IActionWithId<N | T>[] | ((entity: N | T, isNested: boolean) => IAction<T>[]) | undefined;
 }
 export {};

package/dist/dataGrid/columns/actionsColumn/actionsColumnCell.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, RefObject } from "react";
 import { IIcon } from "../../../icons/icon";
 export interface IActionColumnCell extends React.HTMLAttributes<HTMLElement> {
     tag: "button" | "a";
@@ -6,5 +6,6 @@ export interface IActionColumnCell extends React.HTMLAttributes<HTMLElement> {
     title: string;
     href?: string;
     icon: FC<IIcon>;
+    ref?: RefObject<HTMLElement | null>;
 }
-export declare const ActionColumnCell: import("react").ForwardRefExoticComponent<IActionColumnCell & import("react").RefAttributes<HTMLElement>>;
+export declare const ActionColumnCell: ({ tag, hash, title, href, icon, ref, ...rest }: IActionColumnCell) => import("react/jsx-runtime").JSX.Element;

package/dist/dataGrid/columns/actionsColumn/actionsColumnCell.js

@@ -17,9 +17,10 @@ const react_1 = require("react");
 const textIconButton_1 = require("../../../textIconButton/textIconButton");
 const buttonType_1 = require("../../../button/buttonType");
 const svgIconSize_1 = require("../../../svgIcon/svgIconSize");
-exports.ActionColumnCell = (0, react_1.forwardRef)(function inner(_a, ref) {
-    var { tag, hash, title, href, icon } = _a, rest = __rest(_a, ["tag", "hash", "title", "href", "icon"]);
+const ActionColumnCell = (_a) => {
+    var { tag, hash, title, href, icon, ref } = _a, rest = __rest(_a, ["tag", "hash", "title", "href", "icon", "ref"]);
     return tag === "button"
         ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, Object.assign({ className: "zen-actions-column__action", "data-hash": hash, title: title, "aria-label": title, type: buttonType_1.ButtonType.Light, icon: icon, iconSize: svgIconSize_1.SvgIconSize.Bigger, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconClasses: "zen-icon--no-events", ref: ref }, rest))
         : (0, jsx_runtime_1.jsx)("a", Object.assign({ className: "zen-actions-column__action zen-button zen-button--light zen-caption", "data-hash": hash, title: title, "aria-label": title, href: href, ref: ref }, rest, { children: (0, react_1.createElement)(icon, { size: svgIconSize_1.SvgIconSize.Bigger, className: "zen-icon--no-events" }) }));
-});
+};
+exports.ActionColumnCell = ActionColumnCell;

package/dist/dataGrid/columns/basicColumn.d.ts

@@ -17,7 +17,7 @@ export declare abstract class BasicColumn<T, U, N = T> implements IListColumnBas
     protected renderFeedValue(value: U, entity: T | N, isNested?: boolean): ReactNode | PromiseLike<ReactNode>;
     protected abstract renderCell(value: U, entity: T | N, isNested: boolean): ReactNode | PromiseLike<ReactNode>;
     constructor(column: IColumnOptions<T, U>);
-    render(entity: T | N, isNested?: boolean): string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | PromiseLike<ReactNode> | null | undefined;
+    render(entity: T | N, isNested?: boolean): string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | PromiseLike<ReactNode> | null | undefined;
     renderHeader(title: string): ReactNode;
     renderFeed(title: string, entity: T | N, isNested?: boolean): TFeedResult;
 }

package/dist/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/dist/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/dist/dataGrid/columns/checkboxColumn/checkboxHeaderCell.js

@@ -8,11 +8,11 @@ const buttonType_1 = require("../../../button/buttonType");
 const checkbox_1 = require("../../../checkbox/checkbox");
 const iconChevronDownSmall_1 = require("../../../icons/iconChevronDownSmall");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
-const CheckboxHandler = (0, react_1.forwardRef)(function inner({ onClick }, ref) {
+const CheckboxHandler = ({ onClick, ref }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { translate } = (0, useLanguage_1.useLanguage)();
     return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, className: "zen-checkbox-column__popup", iconClasses: "zen-icon--no-events", icon: iconChevronDownSmall_1.IconChevronDownSmall, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: "large", title: translate("Multiple row selection menu"), "aria-label": translate("Multiple row selection menu"), type: buttonType_1.ButtonType.Light, onClick: onClick });
-});
+};
 const CheckboxHeaderCell = ({ label, actions, checked, indeterminate, disabled, children, onChange }) => {
     const actionsComp = react_1.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 = react_1.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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/dataGrid/entitiesListActions/actions/columnsListButton.js

@@ -2,17 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnsListButton = 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 buttonType_1 = require("../../../button/buttonType");
 const iconSettings3_1 = require("../../../icons/iconSettings3");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const ColumnsListButtonInner = (0, react_1.forwardRef)(function Inner({ onClick }, ref) {
+const ColumnsListButtonInner = ({ onClick, ref }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { ref: ref, icon: iconSettings3_1.IconSettings3, iconSize: svgIconSize_1.SvgIconSize.Large, iconPosition: textIconButton_1.ButtonIconPosition.Start, "aria-label": translate("Show list of columns"), title: translate("Show list of columns"), onClick: onClick, type: buttonType_1.ButtonType.TertiaryBlack });
-});
+};
 exports.ColumnsListButton = Object.assign(ColumnsListButtonInner, { translations: [
         "Show list of columns"
     ] });

package/dist/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/dist/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/dist/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/dist/dataGrid/withActions/withActions.js

@@ -8,20 +8,22 @@ const actionsColumn_1 = require("../columns/actionsColumn/actionsColumn");
 // T - type of entity
 // P - props of wrapped component
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const withActions = (DataGridComponent) => (0, react_1.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_1.ActionsColumn);
-    if (columnsWithActions && columnsWithActions.columnComponent) {
-        const colComp = columnsWithActions.columnComponent;
-        const colActions = colComp.columnActions;
-        actions = colActions ? colActions : undefined;
-        actionsAsync = colComp.columnActionsAsync;
-    }
-    const allColumns = (0, react_1.useMemo)(() => columns.filter(el => !(el.columnComponent instanceof actionsColumn_1.ActionsColumn)).map(column => (Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))))), [columns]);
-    return (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...allColumns], actions: actions, actionsAsync: actionsAsync, ref: ref }), "grid");
-});
+const withActions = (DataGridComponent) => {
+    const WithActionsInner = (props) => {
+        const { columns } = props;
+        let actions = undefined;
+        let actionsAsync = undefined;
+        const columnsWithActions = columns.find(el => el.columnComponent instanceof actionsColumn_1.ActionsColumn);
+        if (columnsWithActions && columnsWithActions.columnComponent) {
+            const colComp = columnsWithActions.columnComponent;
+            const colActions = colComp.columnActions;
+            actions = colActions ? colActions : undefined;
+            actionsAsync = colComp.columnActionsAsync;
+        }
+        const allColumns = (0, react_1.useMemo)(() => columns.filter(el => !(el.columnComponent instanceof actionsColumn_1.ActionsColumn)).map(column => (Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))))), [columns]);
+        return (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...allColumns], actions: actions, actionsAsync: actionsAsync, ref: props.ref }), "grid");
+    };
+    WithActionsInner.displayName = `withActions(${DataGridComponent.displayName || DataGridComponent.name})`;
+    return WithActionsInner;
+};
 exports.withActions = withActions;

package/dist/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/dist/dataGrid/withFlexibleColumns/components/columnSettings.js

@@ -2,17 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnSettings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const button_1 = require("../../../button/button");
 const buttonType_1 = require("../../../button/buttonType");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
-const ColumnSettingsInner = ({ onReset, showFooter = true, children }, ref) => {
+const ColumnSettingsInner = ({ onReset, showFooter = true, children, ref }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     return (0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list", ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__content", children: children }), showFooter
                 ? (0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__footer", children: (0, jsx_runtime_1.jsx)(button_1.Button, { "aria-label": translate("Reset column settings"), className: "zen-columns-list__reset", type: buttonType_1.ButtonType.Tertiary, onClick: onReset, children: translate("Reset") }) })
                 : null] });
 };
-const ColumnSettingsComp = (0, react_1.forwardRef)(ColumnSettingsInner);
+const ColumnSettingsComp = ColumnSettingsInner;
 exports.ColumnSettings = Object.assign(ColumnSettingsComp, { translations: [
         "Reset column settings",
         "Reset"

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

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