@geotab/zenith 1.25.1 → 1.25.3-beta.0

package/README.md

@@ -40,7 +40,16 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
-### 1.25.1
+### 1.25.3
+
+## 1.25.3
+
+ * Update translations in `Chart`
+ * ColumnsSelector is right-aligned by default
+ * Fix width of visible on hover actions in `Table`
+ * Promise-based actions in `Table`
+
+### 1.25.2
 
  * `FiltersBar.DropdownWithCheckbox` has been added
  * `FormStepper` has been added

package/dist/columnsSelector/columnsSelector.js

@@ -20,7 +20,7 @@ const ColumnsSelector = ({ id, columns = [], onColumnToggle, additionalColumns =
     const resetButton = onColumnsReset
         ? (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-button--separate zen-columns-filter__item zen-columns-filter__item--button zen-columns-filter__reset", iconPosition: textIconButton_1.ButtonIconPosition.Start, icon: iconRefresh_1.IconRefresh, iconSize: svgIconSize_1.SvgIconSize.Huge, onClick: onColumnsReset, children: translate("Reset to default") })
         : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    return (0, jsx_runtime_1.jsxs)(popup_1.Popup, { className: "zen-columns-filter", trigger: triggerButton, children: [resetButton, (0, jsx_runtime_1.jsx)(columnsTab_1.ColumnsTab, { id: id, columns: columns, onColumnToggle: state => onColumnToggle && onColumnToggle(state) }), (0, jsx_runtime_1.jsx)(columnsTabGroup_1.ColumnsTabGroup, { columns: additionalColumns, onColumnToggle: state => onAdditionalColumnToggle && onAdditionalColumnToggle(state) })] });
+    return (0, jsx_runtime_1.jsxs)(popup_1.Popup, { className: "zen-columns-filter", trigger: triggerButton, alignment: "bottom-right", children: [resetButton, (0, jsx_runtime_1.jsx)(columnsTab_1.ColumnsTab, { id: id, columns: columns, onColumnToggle: state => onColumnToggle && onColumnToggle(state) }), (0, jsx_runtime_1.jsx)(columnsTabGroup_1.ColumnsTabGroup, { columns: additionalColumns, onColumnToggle: state => onAdditionalColumnToggle && onAdditionalColumnToggle(state) })] });
 };
 exports.ColumnsSelector = ColumnsSelector;
 exports.TRANSLATIONS = [

package/dist/dataFeed/dataFeed.d.ts

@@ -15,13 +15,14 @@ interface IDataFeedOptions {
 }
 export interface IDataFeed<T> extends IDataGrid<T> {
     expanded: boolean;
-    actions?: IActionWithId<T> | ((e: T) => JSX.Element);
+    actions?: IActionWithId<T> | ((e: T) => JSX.Element) | undefined;
+    actionsAsync?: IActionWithId<T> | ((e: T) => PromiseLike<JSX.Element>);
     options: IDataFeedOptions;
     itemsPerPage?: number;
 }
 declare const EmptyList: FC<PropsWithChildren>;
 declare const Footer: FC<PropsWithChildren>;
-declare const DataFeedInner: <T extends IEntityWithId>({ entities, columns, className, expanded, options, description, children, actions, itemsPerPage, rowClassName }: IDataFeed<T>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const DataFeedInner: <T extends IEntityWithId>({ entities, columns, className, expanded, options, description, children, actions, actionsAsync, itemsPerPage, rowClassName }: IDataFeed<T>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataFeedStaticProps {
     EmptyList: typeof EmptyList;
     Footer: typeof Footer;

package/dist/dataFeed/dataFeed.js

@@ -22,7 +22,7 @@ const checkCloseToTheEnd = (feedContainerElt) => {
     return distanceToTheBottom < endOfFeedThreshold;
 };
 const FIRST_RENDERED_ROWS = 50;
-const DataFeedInner = ({ entities, columns, className, expanded, options, description, children, actions, itemsPerPage = 1000, rowClassName }, ref) => {
+const DataFeedInner = ({ entities, columns, className, expanded, options, description, children, actions, actionsAsync, itemsPerPage = 1000, rowClassName }, ref) => {
     const [pages, setPages] = (0, react_1.useState)(1);
     const data = (0, react_1.useMemo)(() => entities.slice(0, itemsPerPage * pages), [entities, itemsPerPage, pages]);
     const initialVisibleRows = (0, react_1.useMemo)(() => data.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [data]);
@@ -94,11 +94,11 @@ const DataFeedInner = ({ entities, columns, className, expanded, options, descri
     }, true);
     const feedItems = (0, react_1.useMemo)(() => data.map((entity, index) => {
         const entityClassName = (0, getRowClassName_1.getRowClassName)(rowClassName, entity);
-        if (!actions) {
+        if (!actions && !actionsAsync) {
             return (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.FeedItem, { collapsedColumnsQty: collapsedColumnsQty, columnsList: columnsList, visibleColumns: visibleColumns, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, className: entityClassName }, entity.id);
         }
-        return (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.ActionFeedItem, { collapsedColumnsQty: collapsedColumnsQty, visibleColumns: visibleColumns, columnsList: columnsList, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, actions: actions, className: entityClassName }, entity.id);
-    }), [data, rowClassName, actions, collapsedColumnsQty, visibleColumns, columnsList, visibleRows, expanded]);
+        return (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.ActionFeedItem, { collapsedColumnsQty: collapsedColumnsQty, visibleColumns: visibleColumns, columnsList: columnsList, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, actions: actions, actionsAsync: actionsAsync, className: entityClassName }, entity.id);
+    }), [data, rowClassName, actions, actionsAsync, collapsedColumnsQty, visibleColumns, columnsList, visibleRows, expanded]);
     return (0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
                 "zen-data-grid",
                 className || ""

package/dist/dataFeed/dataFeedColumnsItems.d.ts

@@ -17,8 +17,9 @@ interface IFeedItem<T extends IEntityWithId> {
     className?: string;
 }
 interface IFeedActionItem<T extends IEntityWithId> extends IFeedItem<T> {
-    actions: IActionWithId<T> | ((entity: T) => JSX.Element);
+    actions: IActionWithId<T> | ((entity: T) => JSX.Element) | undefined;
+    actionsAsync?: IActionWithId<T> | ((entity: T) => PromiseLike<JSX.Element>);
 }
 export declare const FeedItem: <T extends IEntityWithId>({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className }: IFeedItem<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const ActionFeedItem: <T extends IEntityWithId>({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, actions, className }: IFeedActionItem<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionFeedItem: <T extends IEntityWithId>({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, actions, actionsAsync, className }: IFeedActionItem<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/dataFeed/dataFeedColumnsItems.js

@@ -19,7 +19,7 @@ const FeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visibleColu
     return (0, jsx_runtime_1.jsxs)(feedItem_1.DataFeedItem, { id: entity.id, isLast: false, index: index, isFullList: expanded, className: className, children: [(0, jsx_runtime_1.jsx)(feedItem_1.DataFeedItem.Main, { children: mainColumnsData }), secondaryColumnsMemoized.length ? (0, jsx_runtime_1.jsx)(feedItem_1.DataFeedItem.Secondary, { children: secondaryColumnsData }) : null] });
 };
 exports.FeedItem = (0, react_1.memo)(FeedItemInner);
-const ActionFeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, actions, className }) => {
+const ActionFeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, actions, actionsAsync, className }) => {
     const actionsComp = (0, react_1.useMemo)(() => {
         if (entity.isLoading) {
             return null;
@@ -27,8 +27,11 @@ const ActionFeedItemInner = ({ columnsList, expanded, collapsedColumnsQty, visib
         if (typeof actions === "function") {
             return (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, render: actions });
         }
-        return (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: actions, entity: entity });
-    }, [actions, entity]);
+        if (actionsAsync && typeof actionsAsync === "function") {
+            return (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, renderAsync: actionsAsync });
+        }
+        return actions ? (0, jsx_runtime_1.jsx)(actionsButton_1.ActionsButton, { action: actions, entity: entity }) : null;
+    }, [actions, actionsAsync, entity]);
     return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-data-feed__item-container", className || ""]), children: [(0, jsx_runtime_1.jsx)(exports.FeedItem, { collapsedColumnsQty: collapsedColumnsQty, visibleColumns: visibleColumns, columnsList: columnsList, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, className: "zen-data-feed__item--no-shadow" }, entity.id), (0, jsx_runtime_1.jsx)("div", { className: "zen-data-feed__action-container", children: actionsComp })] }, entity.id);
 };
 exports.ActionFeedItem = (0, react_1.memo)(ActionFeedItemInner);

package/dist/dataGrid/cell/cell.js

@@ -54,6 +54,6 @@ const Cell = ({ index, limited, visibleOnHover, isVisible, width, column, entity
             index === 0 ? "zen-data-grid__row-cell--first" : "",
             visibleOnHover ? "zen-data-grid__row-cell--visible-on-hover" : "",
             limited ? "zen-ellipsis" : ""
-        ]), style: { minWidth: width, maxWidth: width }, children: content });
+        ]), style: { minWidth: width || "auto", maxWidth: width || "auto" }, children: content });
 };
 exports.DataGridCell = (0, react_1.memo)(Cell);

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

@@ -26,13 +26,17 @@ interface IActionsColumnOptions<T> {
     title?: string;
     actions?: IAction<T>[];
     headerActions?: IAction<undefined>[];
+    primaryActions?: IAction<T>[];
     render?: (entity: T) => JSX.Element;
+    renderAsync?: (entity: T) => PromiseLike<JSX.Element>;
 }
 export declare class ActionsColumn<T extends IEntityWithId> extends BasicColumn<T, unknown> implements IListColumnBasic<T> {
     private actionsOptions;
     private actions;
     private headerActions;
+    private primaryActions;
     private renderFn;
+    private renderAsyncFn;
     private renderIconActions;
     private updateActions;
     protected renderCell(_: any, entity: T): import("react/jsx-runtime").JSX.Element;
@@ -41,5 +45,6 @@ export declare class ActionsColumn<T extends IEntityWithId> extends BasicColumn<
     get options(): IActionsColumnOptions<T>;
     set options(actionsOptions: IActionsColumnOptions<T>);
     get columnActions(): IActionWithId<T> | ((entity: T) => JSX.Element) | undefined;
+    get columnActionsAsync(): ((entity: T) => PromiseLike<JSX.Element>) | undefined;
 }
 export {};

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

@@ -15,11 +15,13 @@ class ActionsColumn extends basicColumn_1.BasicColumn {
     updateActions(options) {
         this.actions = options.actions ? options.actions.map(action => { var _a; return (Object.assign(Object.assign({}, action), { id: action.id || (0, generateId_1.generateId)(), actions: (_a = action.actions) === null || _a === void 0 ? void 0 : _a.map(a => (Object.assign(Object.assign({}, a), { id: (0, generateId_1.generateId)() }))) })); }) : undefined;
         this.renderFn = options.render;
+        this.renderAsyncFn = options.renderAsync;
         this.headerActions = (options.headerActions || []).map(action => { var _a; return (Object.assign(Object.assign({}, action), { id: action.id || (0, generateId_1.generateId)(), actions: (_a = action.actions) === null || _a === void 0 ? void 0 : _a.map(a => (Object.assign(Object.assign({}, a), { id: (0, generateId_1.generateId)() }))) })); });
+        this.primaryActions = (options.primaryActions || []).map(action => { var _a; return (Object.assign(Object.assign({}, action), { id: action.id || (0, generateId_1.generateId)(), actions: (_a = action.actions) === null || _a === void 0 ? void 0 : _a.map(a => (Object.assign(Object.assign({}, a), { id: (0, generateId_1.generateId)() }))) })); });
     }
     renderCell(_, entity) {
-        if (this.options.render) {
-            return (0, jsx_runtime_1.jsx)("div", { className: "zen-actions-column", children: (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, render: this.options.render }) });
+        if (this.options.render || this.options.renderAsync) {
+            return (0, jsx_runtime_1.jsxs)("div", { className: "zen-actions-column", children: [this.primaryActions && this.primaryActions.length > 0 && this.renderIconActions(entity, this.primaryActions), this.options.render && (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, render: this.options.render }), this.options.renderAsync && (0, jsx_runtime_1.jsx)(actionsMenu_1.ActionsMenu, { entity: entity, renderAsync: this.options.renderAsync })] });
         }
         return this.renderIconActions(entity, this.actions || []);
     }
@@ -46,12 +48,24 @@ class ActionsColumn extends basicColumn_1.BasicColumn {
             writable: true,
             value: []
         });
+        Object.defineProperty(this, "primaryActions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "renderFn", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "renderAsyncFn", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.updateActions(actionsOptions);
     }
     get options() {
@@ -64,5 +78,8 @@ class ActionsColumn extends basicColumn_1.BasicColumn {
     get columnActions() {
         return (this.actions ? this.actions[0] : undefined) || this.renderFn;
     }
+    get columnActionsAsync() {
+        return this.renderAsyncFn || undefined;
+    }
 }
 exports.ActionsColumn = ActionsColumn;

package/dist/dataGrid/row/row.js

@@ -47,7 +47,7 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
         if (colspan) {
             acc.colspan = colspan - 1;
         }
-        acc.cells.push((0, jsx_runtime_1.jsx)(cell_1.DataGridCell, { column: column, entity: entity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: width, isVisible: isVisible, colspan: colspan }, `${entity.id}_${column.name}`));
+        acc.cells.push((0, jsx_runtime_1.jsx)(cell_1.DataGridCell, { column: column, entity: entity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: column.meta.visibleOnHover ? 0 : width, isVisible: isVisible, colspan: colspan }, `${entity.id}_${column.name}`));
         return acc;
     }, { cells: [], colspan: 0 }).cells;
     return (0, jsx_runtime_1.jsx)("tr", { "data-row-id": id, className: (0, classNames_1.classNames)([

package/dist/dataGrid/withActions/withActions.js

@@ -13,13 +13,15 @@ const withActions = (DataGridComponent) => (0, react_1.forwardRef)(
 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, ref: ref }), "grid");
+    return (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...allColumns], actions: actions, actionsAsync: actionsAsync, ref: ref }), "grid");
 });
 exports.withActions = withActions;

package/dist/index.css

@@ -7476,6 +7476,22 @@ button.zen-summary__clickable {
   width: 100%;
   gap: 1rem;
 }
+.zen-actions-column__menu-item-error .zen-menu-button__action-text {
+  color: var(--text-primary);
+}
+.zen-actions-column__menu-item-error .zen-icon {
+  fill: var(--text-error-message);
+}
+.zen-actions-column__action {
+  flex-shrink: 0;
+}
+.zen-actions-column__action_error {
+  background-color: var(--accents-error--main);
+  fill: var(--text-error-message);
+}
+.zen-actions-column__waiting {
+  padding: 16px 20px;
+}
 .zen-feed-item {
   display: grid;
   grid-template-columns: auto 1fr;

package/dist/table/actions/actionsMenu.d.ts

@@ -2,7 +2,8 @@
 import { IEntityWithId } from "../../commonHelpers/entity";
 interface IActionsMenuProps<T extends IEntityWithId> {
     entity: T;
-    render: (entity: T) => JSX.Element;
+    render?: (entity: T) => JSX.Element;
+    renderAsync?: (entity: T) => PromiseLike<JSX.Element>;
 }
-export declare const ActionsMenu: <T extends IEntityWithId>({ entity, render }: IActionsMenuProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ActionsMenu: <T extends IEntityWithId>({ entity, render, renderAsync }: IActionsMenuProps<T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/table/actions/actionsMenu.js

@@ -7,17 +7,64 @@ const button_1 = require("../../button/button");
 const iconDotVertical_1 = require("../../icons/iconDotVertical");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const menu_1 = require("../../menu/menu");
+const iconException_1 = require("../../icons/iconException");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const skeletonList_1 = require("../../skeletonList/skeletonList");
 const getMenuItems = (entity, render) => {
+    if (!render) {
+        return null;
+    }
     const result = render(entity);
     if (result.type === menu_1.Menu.Item) {
         return result;
     }
     return result.props.children;
 };
-const ActionsMenu = ({ entity, render }) => {
+const ActionsMenu = ({ entity, render, renderAsync }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
-    const trigger = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-caption zen-actions-column__action", children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "bigger" }) }), []);
+    const generatedId = (0, react_1.useId)();
+    const buttonId = `ariaLabelBy-${entity.id || generatedId} }`;
+    const ref = (0, react_1.useRef)(null);
     const menuItems = (0, react_1.useMemo)(() => getMenuItems(entity, render), [entity, render]);
+    const [menuItemsAsync, setMenuItemsAsync] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [isError, setIsError] = (0, react_1.useState)(false);
+    const handleClickTrigger = (0, react_1.useCallback)(async () => {
+        try {
+            if (renderAsync && !menuItemsAsync) {
+                setIsLoading(true);
+                setIsError(false);
+                const resolvedMenuItems = await renderAsync(entity);
+                setMenuItemsAsync(resolvedMenuItems);
+                if (!resolvedMenuItems.props.children) {
+                    setIsError(true);
+                }
+                setIsLoading(false);
+            }
+        }
+        catch (err) {
+            setIsLoading(false);
+            setMenuItemsAsync(null);
+            setIsError(true);
+        }
+    }, [entity, menuItemsAsync, renderAsync]);
+    const trigger = (0, react_1.useMemo)(() => {
+        if (renderAsync) {
+            return (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: isLoading, id: buttonId, ref: ref, onClick: handleClickTrigger, type: "tertiary-black", className: (0, classNames_1.classNames)([
+                    "zen-caption",
+                    "zen-actions-column__action",
+                    isError ? "zen-actions-column__action_error" : ""
+                ]), children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "bigger" }) });
+        }
+        return (0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: "zen-caption zen-actions-column__action", children: (0, jsx_runtime_1.jsx)(iconDotVertical_1.IconDotVertical, { size: "bigger" }) });
+    }, [buttonId, isLoading, isError, renderAsync, handleClickTrigger]);
+    if (renderAsync) {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(menu_1.Menu, { ariaLabelledBy: buttonId, title: translate("Actions"), triggerRef: ref, alignment: "bottom-right", children: isLoading
+                        ? (0, jsx_runtime_1.jsx)(skeletonList_1.SkeletonList, { className: "zen-actions-column__waiting" })
+                        : ((menuItemsAsync && menuItemsAsync.props.children)
+                            ? menuItemsAsync.props.children
+                            : (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { className: "zen-actions-column__menu-item-error", id: "error", icon: iconException_1.IconException, name: translate("Error Loading Items"), disabled: true })) })] });
+    }
     if (!menuItems || menuItems.length === 0) {
         return null;
     }

package/dist/table/actions/useActions.d.ts

@@ -5,4 +5,5 @@ import { IListColumn } from "../table";
 export declare const useActions: <T extends IEntityWithId>(columns: IListColumn<T>[], isFeed: boolean) => {
     columnsWithActions: IListColumn<T>[];
     actions: IActionWithId<T> | ((entity: T) => JSX.Element) | undefined;
+    actionsAsync: ((entity: T) => PromiseLike<JSX.Element>) | undefined;
 };

package/dist/table/actions/useActions.js

@@ -6,16 +6,18 @@ const actionsColumn_1 = require("../../dataGrid/columns/actionsColumn/actionsCol
 const useActions = (columns, isFeed) => {
     const result = (0, react_1.useMemo)(() => {
         if (!isFeed) {
-            return { columnsWithActions: [...columns], actions: undefined };
+            return { columnsWithActions: [...columns], actions: undefined, actionsAsync: undefined };
         }
         const columnsWithActions = columns.find(el => el.columnComponent instanceof actionsColumn_1.ActionsColumn);
         let actions = undefined;
+        let actionsAsync = undefined;
         if (columnsWithActions && columnsWithActions.columnComponent) {
             const colComponent = columnsWithActions.columnComponent;
             actions = colComponent.columnActions;
+            actionsAsync = colComponent.columnActionsAsync;
         }
         const columnsWithoutActions = columns.filter(el => !(el.columnComponent instanceof actionsColumn_1.ActionsColumn));
-        return { columnsWithActions: columnsWithoutActions, actions };
+        return { columnsWithActions: columnsWithoutActions, actions, actionsAsync };
     }, [columns, isFeed]);
     return result;
 };

package/dist/table/table.js

@@ -59,7 +59,7 @@ const TableInner = ({ entities, columns, selectable, sortable, flexible, isLoadi
     const { selectableColumns } = (0, useSelectableRows_1.useSelectableRows)(columns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable);
     const { sortableColumns, feedSortControl } = (0, useSortableColumns_1.useSortableColumns)(selectableColumns, sortable, isMobile);
     const { flexibleColumns, columnsPopup } = (0, useFlexibleColumns_1.useFlexibleColumns)(sortableColumns, flexible, gridRef, columnsPopupRef, isMobile);
-    const { columnsWithActions, actions } = (0, useActions_1.useActions)(flexibleColumns, isMobile);
+    const { columnsWithActions, actions, actionsAsync } = (0, useActions_1.useActions)(flexibleColumns, isMobile);
     const { loadingColumns, loadingEntities } = (0, useLoading_1.useLoading)(columnsWithActions, entities, isLoading, loading);
     const { isFeedExpanded, handleExpanded, isFeedVisible, visibleColumns } = (0, useFeedExpandable_1.useFeedExpandable)(isMobile, feedExpandable);
     const selectionQty = (0, react_1.useMemo)(() => {
@@ -98,7 +98,7 @@ const TableInner = ({ entities, columns, selectable, sortable, flexible, isLoadi
                     : null, isMobile ? (0, jsx_runtime_1.jsxs)(dataFeed_1.DataFeed, { columns: loadingColumns, entities: loadingEntities, expanded: isFeedExpanded, options: {
                         onFeedEnd: onFeedEnd,
                         visibleColumns
-                    }, actions: actions, ref: gridRef, rowClassName: rowClassName, children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) : (0, jsx_runtime_1.jsxs)(dataGrid_1.DataGrid, { columns: loadingColumns, entities: loadingEntities, ref: gridRef, rowClassName: rowClassName, children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })] }) });
+                    }, actions: actions, actionsAsync: actionsAsync, ref: gridRef, rowClassName: rowClassName, children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] }) : (0, jsx_runtime_1.jsxs)(dataGrid_1.DataGrid, { columns: loadingColumns, entities: loadingEntities, ref: gridRef, rowClassName: rowClassName, children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })] }) });
 };
 const Table = (0, react_1.memo)(TableInner);
 exports.Table = Table;

package/dist/utils/localization/translations/cs-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/cs-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Pokračovat",
     "Submit": "Odeslat",
     "Optional": "Volitelné",
-    "Step {0} of {1}": "Krok {0} z {1}"
+    "Step {0} of {1}": "Krok {0} z {1}",
+    "Y-axis": "Osa Y",
+    "X-axis": "Osa X"
 };

package/dist/utils/localization/translations/de-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/de-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Fortsetzen",
     "Submit": "Absenden",
     "Optional": "Optional",
-    "Step {0} of {1}": "Schritt {0} von {1}"
+    "Step {0} of {1}": "Schritt {0} von {1}",
+    "Y-axis": "Y-Achse",
+    "X-axis": "X-Achse"
 };

package/dist/utils/localization/translations/en-json.d.ts

@@ -243,4 +243,5 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Error Loading Items": string;
 };

package/dist/utils/localization/translations/en-json.js

@@ -245,5 +245,6 @@ exports.translations = {
     "Continue": "Continue",
     "Submit": "Submit",
     "Optional": "Optional",
-    "Step {0} of {1}": "Step {0} of {1}"
+    "Step {0} of {1}": "Step {0} of {1}",
+    "Error Loading Items": "Error Loading Items"
 };

package/dist/utils/localization/translations/es-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/es-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Continuar",
     "Submit": "Enviar",
     "Optional": "Opcional",
-    "Step {0} of {1}": "Paso {0} de {1}"
+    "Step {0} of {1}": "Paso {0} de {1}",
+    "Y-axis": "Eje Y",
+    "X-axis": "Eje X"
 };

package/dist/utils/localization/translations/fr-FR-json.d.ts

@@ -223,4 +223,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/fr-FR-json.js

@@ -225,5 +225,7 @@ exports.translations = {
     "Continue": "Continuer",
     "Submit": "Envoyer",
     "Optional": "Facultatif",
-    "Step {0} of {1}": "Étape {0} sur {1}"
+    "Step {0} of {1}": "Étape {0} sur {1}",
+    "Y-axis": "Axe Y",
+    "X-axis": "Axe X"
 };

package/dist/utils/localization/translations/fr-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/fr-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Continuer",
     "Submit": "Soumettre",
     "Optional": "Facultatif",
-    "Step {0} of {1}": "Étape {0} de {1}"
+    "Step {0} of {1}": "Étape {0} de {1}",
+    "Y-axis": "Axe des Y",
+    "X-axis": "Axe X"
 };

package/dist/utils/localization/translations/id-json.d.ts

@@ -225,4 +225,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/id-json.js

@@ -227,5 +227,7 @@ exports.translations = {
     "Continue": "Lanjutkan",
     "Submit": "Kirimkan",
     "Optional": "Opsional",
-    "Step {0} of {1}": "Langkah {0} dari {1}"
+    "Step {0} of {1}": "Langkah {0} dari {1}",
+    "Y-axis": "Poros y",
+    "X-axis": "Sumbu X"
 };

package/dist/utils/localization/translations/it-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/it-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Continua",
     "Submit": "Inviare",
     "Optional": "Opzionale",
-    "Step {0} of {1}": "Fase {0} di {1}"
+    "Step {0} of {1}": "Fase {0} di {1}",
+    "Y-axis": "Asse Y",
+    "X-axis": "Asse X"
 };

package/dist/utils/localization/translations/ja-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/ja-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "続ける",
     "Submit": "送信",
     "Optional": "オプション",
-    "Step {0} of {1}": "手順 {0} ／ {1}"
+    "Step {0} of {1}": "手順 {0} ／ {1}",
+    "Y-axis": "Y 軸",
+    "X-axis": "X 軸"
 };

package/dist/utils/localization/translations/ms-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/ms-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Teruskan",
     "Submit": "Serah",
     "Optional": "Pilihan",
-    "Step {0} of {1}": "Langkah {0} daripada {1}"
+    "Step {0} of {1}": "Langkah {0} daripada {1}",
+    "Y-axis": "Paksi-Y",
+    "X-axis": "Paksi X"
 };

package/dist/utils/localization/translations/nl-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/nl-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Doorgaan",
     "Submit": "Verzenden",
     "Optional": "Optioneel",
-    "Step {0} of {1}": "Stap {0} van {1}"
+    "Step {0} of {1}": "Stap {0} van {1}",
+    "Y-axis": "Y-as",
+    "X-axis": "X-as"
 };

package/dist/utils/localization/translations/pl-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/pl-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Kontynuuj",
     "Submit": "Wyślij",
     "Optional": "Opcjonalne",
-    "Step {0} of {1}": "Etap {0} z {1}"
+    "Step {0} of {1}": "Etap {0} z {1}",
+    "Y-axis": "Oś Y",
+    "X-axis": "Oś X"
 };

package/dist/utils/localization/translations/pt-BR-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/pt-BR-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Continuar",
     "Submit": "Enviar",
     "Optional": "Opcional",
-    "Step {0} of {1}": "Etapa {0} de {1}"
+    "Step {0} of {1}": "Etapa {0} de {1}",
+    "Y-axis": "Eixo Y",
+    "X-axis": "Eixo X"
 };

package/dist/utils/localization/translations/sv-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/sv-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Fortsätt",
     "Submit": "Skicka",
     "Optional": "Frivilligt",
-    "Step {0} of {1}": "Steg {0} av {1}"
+    "Step {0} of {1}": "Steg {0} av {1}",
+    "Y-axis": "Y-axel",
+    "X-axis": "X-axel"
 };

package/dist/utils/localization/translations/th-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/th-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "ดำเนินการต่อ",
     "Submit": "ส่ง",
     "Optional": "ไม่บังคับ",
-    "Step {0} of {1}": "ขั้นตอนที่ {0} จาก {1}"
+    "Step {0} of {1}": "ขั้นตอนที่ {0} จาก {1}",
+    "Y-axis": "แกน Y",
+    "X-axis": "แกน X"
 };

package/dist/utils/localization/translations/tr-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/tr-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "Devam",
     "Submit": "Gönder",
     "Optional": "İsteğe bağlı",
-    "Step {0} of {1}": "Adım {0} / {1}"
+    "Step {0} of {1}": "Adım {0} / {1}",
+    "Y-axis": "Y ekseni",
+    "X-axis": "X ekseni"
 };

package/dist/utils/localization/translations/zh-Hans-json.d.ts

@@ -224,4 +224,6 @@ export declare const translations: {
     Submit: string;
     Optional: string;
     "Step {0} of {1}": string;
+    "Y-axis": string;
+    "X-axis": string;
 };

package/dist/utils/localization/translations/zh-Hans-json.js

@@ -226,5 +226,7 @@ exports.translations = {
     "Continue": "继续",
     "Submit": "提交",
     "Optional": "可选",
-    "Step {0} of {1}": "步骤 {0} / {1} "
+    "Step {0} of {1}": "步骤 {0} / {1} ",
+    "Y-axis": "Y 轴",
+    "X-axis": "X 轴"
 };

package/dist/utils/localization/translations/zh-TW-json.js

@@ -181,13 +181,13 @@ exports.translations = {
     "This quarter": "本季",
     "This year": "今年",
     "Last year": "去年",
-    "ShortMonday": "ShortMonday",
-    "ShortTuesday": "ShortTuesday",
-    "ShortWednesday": "ShortWednesday",
-    "ShortThursday": "ShortThursday",
-    "ShortFriday": "ShortFriday",
-    "ShortSaturday": "ShortSaturday",
-    "ShortSunday": "ShortSunday",
+    "ShortMonday": "週一",
+    "ShortTuesday": "週二",
+    "ShortWednesday": "週三",
+    "ShortThursday": "週四",
+    "ShortFriday": "週五",
+    "ShortSaturday": "週六",
+    "ShortSunday": "週日",
     "Date range": "日期範圍",
     "Use multiple operators when searching for a specific group. For example, filtering for assets that belong to the Tractor group and the Toronto group displays a list of tractors that belong to the Toronto branch.": "搜尋特定群組時，請使用多個運算子。例如，若篩選屬於牽引機群組和多倫多群組的資產，則會顯示屬於多倫多分公司的牽引機清單。",
     "Select columns": "選取欄",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "1.25.1",
+  "version": "1.25.3-beta.0",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",