@geotab/zenith 3.6.1 → 3.6.2

package/esm/summary/summary.js

@@ -0,0 +1,95 @@
+import { injectString } from "../utils/localization/translationsDictionary";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Tooltip } from "../tooltip/tooltip";
+import { IconInfoCircle } from "../icons/iconInfoCircle";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useLanguage } from "../utils/localization/useLanguage";
+injectString("cs", "Summary color", "Barva souhrnu");
+injectString("da-DK", "Summary color", "Oversigt farve");
+injectString("de", "Summary color", "\xDCbersichtsfarbe");
+injectString("en", "Summary color", "Summary color");
+injectString("es", "Summary color", "Color de resumen");
+injectString("fi-FI", "Summary color", "Yhteenvetov\xE4ri");
+injectString("fr", "Summary color", "Couleur du sommaire");
+injectString("fr-FR", "Summary color", "Couleur du r\xE9sum\xE9");
+injectString("hu-HU", "Summary color", "\xD6sszefoglal\xF3 sz\xEDn");
+injectString("id", "Summary color", "Warna ringkasan");
+injectString("it", "Summary color", "Colore riepilogo");
+injectString("ja", "Summary color", "\u30B5\u30DE\u30EA\u30FC\u306E\u8272");
+injectString("ko-KR", "Summary color", "\uC694\uC57D \uADF8\uB798\uD504 \uC0C9\uC0C1");
+injectString("ms", "Summary color", "Warna ringkasan");
+injectString("nb-NO", "Summary color", "Sammendragsfarge");
+injectString("nl", "Summary color", "Overzichtskleur");
+injectString("pl", "Summary color", "Kolor podsumowania");
+injectString("pt-BR", "Summary color", "Cor do resumo");
+injectString("pt-PT", "Summary color", "Cor do resumo");
+injectString("sk-SK", "Summary color", "S\xFAhrn farieb");
+injectString("sv", "Summary color", "F\xE4rg p\xE5 sammanfattning");
+injectString("th", "Summary color", "\u0E2A\u0E35\u0E02\u0E2D\u0E07\u0E2A\u0E23\u0E38\u0E1B");
+injectString("tr", "Summary color", "\xD6zet rengi");
+injectString("zh-Hans", "Summary color", "\u6458\u8981\u989C\u8272");
+injectString("zh-TW", "Summary color", "\u6458\u8981\u8272\u5F69");
+injectString("ro-RO", "Summary color", "Culoare sumar");
+export const Summary = ({
+  color,
+  title,
+  value,
+  unit,
+  tooltip,
+  more,
+  isEnabled,
+  onToggle,
+  description
+}) => {
+  const isClickable = useMemo(() => color && onToggle, [color, onToggle]);
+  const {
+    translate
+  } = useLanguage();
+  return _jsxs("div", {
+    className: "zen-summary",
+    children: [(color || title || tooltip) && _jsxs("div", {
+      className: "zen-summary__header",
+      children: [color && _jsx("button", {
+        "aria-label": translate("Summary color"),
+        className: classNames(["zen-summary__color", isClickable ? "zen-summary__clickable" : ""]),
+        style: {
+          backgroundColor: color
+        },
+        onClick: onToggle
+      }), isClickable ? _jsx("button", {
+        className: classNames(["zen-summary__title-text zen-ellipsis heading-05 zen-summary__clickable", isEnabled ? "zen-summary__crossed-out" : ""]),
+        onClick: onToggle,
+        children: title
+      }) : _jsx("div", {
+        className: "zen-summary__title-text zen-ellipsis heading-05",
+        children: title
+      }), tooltip && _jsx(Tooltip, {
+        alignment: "top",
+        trigger: _jsx("div", {
+          className: "zen-summary__trigger",
+          children: _jsx(IconInfoCircle, {
+            size: "large",
+            className: "zen-summary__title-icon"
+          })
+        }),
+        children: tooltip
+      })]
+    }), _jsxs("div", {
+      className: "zen-summary__data",
+      children: [_jsx("div", {
+        className: "zen-summary__value zen-ellipsis",
+        children: typeof value === "string" ? value : value.toFixed(2)
+      }), unit && _jsx("div", {
+        className: "zen-summary__unit",
+        children: unit
+      }), more && _jsx("div", {
+        className: "zen-summary__more zen-ellipsis",
+        children: more
+      })]
+    }), description && _jsx("div", {
+      className: "zen-summary__content",
+      children: description
+    })]
+  });
+};

package/esm/summaryTile/summaryTile.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import "./summaryTile.less";
+import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
+import { TooltipSize } from "../tooltip/tooltip";
+import { TAlignment } from "../absolute/absolute";
+export declare enum SummaryTileType {
+    Error = "error",
+    Success = "success",
+    Warning = "warning",
+    Active = "active",
+    Default = "default",
+    /**
+     * @deprecated - will be removed in the next releases.
+     * Please use {@link SummaryTileType.Active} instead.
+    */
+    Info = "info"
+}
+export declare enum SummaryTileSize {
+    Small = "small",
+    Medium = "medium"
+}
+export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
+    tileType?: SummaryTileType;
+    size?: SummaryTileSize;
+    title: string;
+    onClick?: (id: string) => void;
+    id?: string;
+    tooltipText?: React.ReactNode;
+    tooltipAlignment?: TAlignment;
+    tooltipSize?: TooltipSize;
+}
+export declare const SummaryTileDisplayName = "SummaryTile";
+export declare const SummaryTile: {
+    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/summaryTile/summaryTile.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { Tooltip } from "../tooltip/tooltip";
+import { SummaryTileTrigger } from "./summaryTileTrigger";
+import { getTypeClassName } from "./utils/getTypeClassName";
+import { IconInfoCircle } from "../icons/iconInfoCircle";
+import { IconWarning } from "../icons/iconWarning";
+import { IconCheckRadio } from "../icons/iconCheckRadio";
+import { IconException } from "../icons/iconException";
+export var SummaryTileType;
+(function (SummaryTileType) {
+    SummaryTileType["Error"] = "error";
+    SummaryTileType["Success"] = "success";
+    SummaryTileType["Warning"] = "warning";
+    SummaryTileType["Active"] = "active";
+    SummaryTileType["Default"] = "default";
+    /**
+     * @deprecated - will be removed in the next releases.
+     * Please use {@link SummaryTileType.Active} instead.
+    */
+    SummaryTileType["Info"] = "info";
+})(SummaryTileType || (SummaryTileType = {}));
+export var SummaryTileSize;
+(function (SummaryTileSize) {
+    SummaryTileSize["Small"] = "small";
+    SummaryTileSize["Medium"] = "medium";
+})(SummaryTileSize || (SummaryTileSize = {}));
+export const SummaryTileDisplayName = "SummaryTile";
+export const SummaryTile = ({ className, children, size = SummaryTileSize.Small, title, tileType = SummaryTileType.Default, id, onClick, tooltipText, tooltipAlignment = "top" }) => {
+    const generatedId = React.useId();
+    const eltId = id || generatedId;
+    const memoizedGetIconId = React.useMemo(() => {
+        const iconIds = {
+            [SummaryTileType.Warning]: IconException,
+            [SummaryTileType.Success]: IconCheckRadio,
+            [SummaryTileType.Error]: IconWarning,
+            [SummaryTileType.Active]: IconInfoCircle,
+            [SummaryTileType.Default]: IconInfoCircle,
+            [SummaryTileType.Info]: IconInfoCircle
+        };
+        return iconIds[tileType];
+    }, [tileType]);
+    const componentProps = {
+        className: classNames([
+            "zen-summary-tile",
+            getTypeClassName(tileType),
+            `zen-summary-tile--${size}`,
+            onClick ? "zen-summary-tile--action" : "",
+            className || ""
+        ]),
+        "data-summary-tile-id": eltId
+    };
+    if (onClick) {
+        componentProps.onClick = () => {
+            onClick(eltId);
+        };
+    }
+    const Tag = onClick ? "button" : "div";
+    return _jsxs(Tag, Object.assign({}, componentProps, { children: [_jsxs("div", { className: "zen-summary-tile__title-block", children: [_jsx("div", { className: "zen-summary-tile__title-text zen-ellipsis heading-05", children: title }), tooltipText ? _jsx(Tooltip, { alignment: tooltipAlignment, trigger: _jsx(SummaryTileTrigger, { icon: memoizedGetIconId }), children: tooltipText }) : null] }), _jsx("div", { className: "zen-summary-tile__content", children: children })] }));
+};
+SummaryTile.displayName = SummaryTileDisplayName;

package/esm/summaryTile/summaryTileTrigger.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { IIcon } from "../icons/icon";
+import { RefObject } from "react";
+export interface ISummaryTileTrigger {
+    icon: React.FC<IIcon>;
+    ref?: RefObject<HTMLDivElement | null>;
+}
+export declare const SummaryTileTrigger: ({ icon, ref, ...restProps }: ISummaryTileTrigger) => import("react/jsx-runtime").JSX.Element;

package/esm/summaryTile/summaryTileTrigger.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export const SummaryTileTrigger = (_a) => {
+    var { icon, ref } = _a, restProps = __rest(_a, ["icon", "ref"]);
+    return _jsx("div", Object.assign({ className: "zen-summary-tile__trigger", ref: ref }, restProps, { children: React.createElement(icon, {
+            className: "zen-summary-tile__title-icon",
+            size: "large"
+        }) }));
+};

package/esm/summaryTile/utils/getTypeClassName.d.ts

@@ -0,0 +1,2 @@
+import { SummaryTileType } from "../summaryTile";
+export declare const getTypeClassName: (tileType: SummaryTileType) => "zen-summary-tile--error" | "zen-summary-tile--warning" | "zen-summary-tile--success" | "zen-summary-tile--active" | "zen-summary-tile--default";

package/esm/summaryTile/utils/getTypeClassName.js

@@ -0,0 +1,20 @@
+import { SummaryTileType } from "../summaryTile";
+export const getTypeClassName = (tileType) => {
+    switch (tileType) {
+        case SummaryTileType.Error:
+            return "zen-summary-tile--error";
+        case SummaryTileType.Warning:
+            return "zen-summary-tile--warning";
+        case SummaryTileType.Success:
+            return "zen-summary-tile--success";
+        /**
+         * TODO: should be removed after {@link SummaryTileType.Info} is removed
+        */
+        case SummaryTileType.Info:
+        case SummaryTileType.Active:
+            return "zen-summary-tile--active";
+        case SummaryTileType.Default:
+        default:
+            return "zen-summary-tile--default";
+    }
+};

package/esm/summaryTileBar/summaryTileBar.d.ts

@@ -0,0 +1,12 @@
+import "./summaryTileBar.less";
+import { ReactElement } from "react";
+import { ISummaryTile } from "../summaryTile/summaryTile";
+export interface ISummaryTileBar {
+    children: ReactElement<ISummaryTile> | ReactElement<ISummaryTile>[];
+    className?: string;
+}
+export declare const SummaryTileBar: {
+    ({ className, children }: ISummaryTileBar): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const SummaryTileBarDisplayName = "SummaryTileBar";

package/esm/summaryTileBar/summaryTileBar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { useState } from "react";
+import { ArrowNavButton } from "../commonHelpers/arrowNavigation/components/arrowButton/arrowButton";
+import { useHoldOnScroll } from "../commonHelpers/arrowNavigation/hooks/useHoldOnScroll";
+import { useScrolling } from "../commonHelpers/arrowNavigation/hooks/useScrolling";
+import { useManualScrolling } from "../commonHelpers/arrowNavigation/hooks/useManualScrolling";
+import { DeviceType } from "../commonHelpers/hooks/deviceType";
+import { useDeviceType } from "../commonHelpers/hooks/useDeviceType";
+export const SummaryTileBar = ({ className, children }) => {
+    const { isScrollable, scrollableElementRef, onMouseDown, onMouseUp } = useHoldOnScroll();
+    const { scroll } = useManualScrolling({ elementRef: scrollableElementRef });
+    const { onScroll, state } = useScrolling();
+    const [deviceType, setDeviceType] = useState(DeviceType.Mobile);
+    const isMobile = deviceType === DeviceType.Mobile;
+    useDeviceType(setDeviceType);
+    return _jsxs("div", { className: classNames(["zen-card-deck", isMobile ? "zen-card-deck--mobile" : "", className !== null && className !== void 0 ? className : ""]), children: [_jsx("div", { className: "zen-card-deck__cards-container", ref: scrollableElementRef, onScroll: onScroll, children: _jsx("div", { className: "zen-card-deck__cards", children: children }) }), !isScrollable && _jsxs("div", { className: "zen-card-deck__arrows", children: [_jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "left", isHidden: false, disabled: state.scrolledLeft, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp }), _jsx(ArrowNavButton, { className: "zen-card-deck__arrow-button", value: "right", isHidden: false, disabled: state.scrolledRight, arrowButtonHandler: scroll, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })] });
+};
+export const SummaryTileBarDisplayName = "SummaryTileBar";
+SummaryTileBar.displayName = SummaryTileBarDisplayName;

package/esm/svgIcon/svgIconSize.d.ts

@@ -0,0 +1,12 @@
+export declare const SvgIconSize: {
+    readonly Micro: "micro";
+    readonly Tiny: "tiny";
+    readonly Small: "small";
+    readonly Big: "big";
+    readonly Bigger: "bigger";
+    readonly Large: "large";
+    readonly Huge: "huge";
+    readonly Huger: "huger";
+};
+export type TSvgIconSize = typeof SvgIconSize[keyof typeof SvgIconSize];
+export declare const driveIconSize: (value: string) => TSvgIconSize;

package/esm/svgIcon/svgIconSize.js

@@ -0,0 +1,27 @@
+export const SvgIconSize = {
+    Micro: "micro",
+    Tiny: "tiny",
+    Small: "small",
+    Big: "big",
+    Bigger: "bigger",
+    Large: "large",
+    Huge: "huge",
+    Huger: "huger"
+};
+export const driveIconSize = (value) => {
+    const orderedSizes = [
+        SvgIconSize.Micro,
+        SvgIconSize.Tiny,
+        SvgIconSize.Small,
+        SvgIconSize.Big,
+        SvgIconSize.Bigger,
+        SvgIconSize.Large,
+        SvgIconSize.Huge,
+        SvgIconSize.Huger
+    ];
+    const index = orderedSizes.indexOf(value);
+    if (index !== -1 && index < orderedSizes.length - 1) {
+        return orderedSizes[index + 1];
+    }
+    return value;
+};

package/esm/svgSprite/svgSprite.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+export interface ISvgSprite extends PropsWithChildren {
+    id: string;
+    viewBox: string;
+}
+export declare const SvgSprite: ({ id, viewBox, children: svg }: ISvgSprite) => import("react/jsx-runtime").JSX.Element;

package/esm/svgSprite/svgSprite.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SvgSprite = ({ id, viewBox, children: svg }) => _jsx("symbol", { viewBox: viewBox, id: id, children: svg });

package/esm/svgSprites/svgSprites.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+export interface ISvgSpriteParams {
+    viewBox: string;
+    svg: ReactElement<SVGElement> | Iterable<ReactElement<SVGElement>>;
+}
+export interface ISvgSprites {
+    sprites: Record<string, ISvgSpriteParams>;
+}
+export declare const SvgSprites: ({ sprites }: ISvgSprites) => import("react/jsx-runtime").JSX.Element;

package/esm/svgSprites/svgSprites.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgSprite } from "../svgSprite/svgSprite";
+export const SvgSprites = ({ sprites }) => _jsx("svg", { className: "svgSprite", xmlns: "http://www.w3.org/2000/svg", focusable: "false", display: "none", children: Object.keys(sprites).map(id => _jsx(SvgSprite, { id: id, viewBox: sprites[id].viewBox, children: sprites[id].svg }, id)) });

package/esm/tabBar/tabBar.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import "./tabBar.less";
+import { ITabs } from "../tabs/tabs";
+export interface ITab {
+    name: string;
+    icon?: React.ReactElement;
+    content: ReactNode;
+    id: string;
+}
+export interface ITabBar extends ITabs {
+    tabs: ITab[];
+}
+export declare const TabBar: ({ className, tabs, activeTabId, onTabChange }: ITabBar) => import("react/jsx-runtime").JSX.Element;

package/esm/tabBar/tabBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { TabBarContent } from "./tabBarContent";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { Tabs } from "../tabs/tabs";
+export const TabBar = ({ className, tabs, activeTabId, onTabChange }) => {
+    const memoizedTabs = useMemo(() => tabs, [tabs]);
+    return _jsx("div", { className: classNames(["zen-tab-bar", className ? className : ""]), children: memoizedTabs.length ? _jsxs(_Fragment, { children: [_jsx(Tabs, { tabs: tabs, activeTabId: activeTabId, onTabChange: onTabChange }), _jsx(TabBarContent, { activeId: activeTabId, tabs: memoizedTabs })] }) : null });
+};

package/esm/tabBar/tabBarContent.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import "./tabBarContent.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+interface ITabElement {
+    name: string;
+    icon?: React.ReactElement;
+    content: ReactNode;
+    id: string;
+}
+export interface ITabBarContent extends IZenComponentProps {
+    tabs: ITabElement[];
+    activeId: string;
+}
+export declare const TabBarContent: ({ tabs, activeId }: ITabBarContent) => import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/tabBar/tabBarContent.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const TabBarContent = ({ tabs, activeId }) => {
+    const tabsContent = tabs.map(tab => _jsx("div", { className: classNames(["zen-tab-bar-content-wrapper", activeId !== tab.id ? "zen-tab-bar-content-wrapper--hidden" : ""]), role: "tabpanel", "aria-labelledby": tab.id, tabIndex: 0, id: `panel-${tab.id}`, hidden: activeId !== tab.id ? true : false, children: tab.content }, tab.id));
+    return _jsx("div", { className: "zen-tab-bar-content", children: tabsContent });
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IEntityWithId } from "../../commonHelpers/entity";
+interface IActionsMenuProps<T extends object> {
+    entity: T;
+    isNested: boolean;
+    render?: (entity: T, isNested: boolean) => React.JSX.Element;
+    renderAsync?: (entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>;
+    primaryActions?: React.JSX.Element;
+}
+export declare const ActionsMenu: <T extends IEntityWithId>({ entity, isNested, render, renderAsync, primaryActions }: IActionsMenuProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/esm/table/actions/actionsMenu.js

@@ -0,0 +1,183 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { Button } from "../../button/button";
+import { IconDotVertical } from "../../icons/iconDotVertical";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { Menu } from "../../menu/menu";
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { SkeletonList } from "../../skeletonList/skeletonList";
+import { MenuErrorItem } from "../../menu/components/menuErrorItem";
+injectString("cs", "More", "V\xEDce");
+injectString("da-DK", "More", "Mere");
+injectString("de", "More", "Mehr");
+injectString("en", "More", "More");
+injectString("es", "More", "M\xE1s");
+injectString("fi-FI", "More", "Lis\xE4\xE4");
+injectString("fr", "More", "Plus");
+injectString("fr-FR", "More", "En savoir plus");
+injectString("hu-HU", "More", "M\xE9g t\xF6bb.");
+injectString("id", "More", "Lainnya");
+injectString("it", "More", "Altro");
+injectString("ja", "More", "\u305D\u306E\u4ED6");
+injectString("ko-KR", "More", "\uC790\uC138\uD788");
+injectString("ms", "More", "Lagi");
+injectString("nb-NO", "More", "Mer");
+injectString("nl", "More", "Meer");
+injectString("pl", "More", "Wi\u0119cej");
+injectString("pt-BR", "More", "Mais");
+injectString("pt-PT", "More", "Mais");
+injectString("sk-SK", "More", "Viac");
+injectString("sv", "More", "Mer");
+injectString("th", "More", "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "More", "Di\u011Fer");
+injectString("zh-Hans", "More", "\u66F4\u591A");
+injectString("zh-TW", "More", "\u66F4\u591A");
+injectString("ro-RO", "More", "Mai multe");
+injectString("cs", "Actions", "Akce");
+injectString("da-DK", "Actions", "Handlinger");
+injectString("de", "Actions", "Aktionen");
+injectString("en", "Actions", "Actions");
+injectString("es", "Actions", "Acciones");
+injectString("fi-FI", "Actions", "Toimet");
+injectString("fr", "Actions", "Actions");
+injectString("fr-FR", "Actions", "Actions");
+injectString("hu-HU", "Actions", "M\u0171veletek");
+injectString("id", "Actions", "Tindakan");
+injectString("it", "Actions", "Azioni");
+injectString("ja", "Actions", "\u30A2\u30AF\u30B7\u30E7\u30F3");
+injectString("ko-KR", "Actions", "\uC870\uCE58");
+injectString("ms", "Actions", "Tindakan");
+injectString("nb-NO", "Actions", "Handlinger");
+injectString("nl", "Actions", "Acties");
+injectString("pl", "Actions", "Dzia\u0142ania");
+injectString("pt-BR", "Actions", "A\xE7\xF5es");
+injectString("pt-PT", "Actions", "A\xE7\xF5es");
+injectString("sk-SK", "Actions", "Akcie");
+injectString("sv", "Actions", "\xC5tg\xE4rder");
+injectString("th", "Actions", "\u0E01\u0E32\u0E23\u0E14\u0E33\u0E40\u0E19\u0E34\u0E19\u0E01\u0E32\u0E23");
+injectString("tr", "Actions", "Eylemler");
+injectString("zh-Hans", "Actions", "\u64CD\u4F5C");
+injectString("zh-TW", "Actions", "\u52D5\u4F5C");
+injectString("ro-RO", "Actions", "M\u0103suri");
+const getMenuItems = (entity, isNested, render, primaryActions) => {
+  if (!render && !primaryActions) {
+    return null;
+  }
+  const result = render === null || render === void 0 ? void 0 : render(entity, isNested);
+  if (!result) {
+    return null;
+  }
+  if (result.type === Menu.Item) {
+    return primaryActions ? [...primaryActions.props.children, result] : [result];
+  }
+  if (!result.props.children) {
+    return null;
+  }
+  const menuItems = (Array.isArray(result.props.children) ? result.props.children : [result.props.children]) || [];
+  return primaryActions ? [...primaryActions.props.children, ...menuItems] : menuItems;
+};
+const getErrorItem = (id, onClick) => _jsx(MenuErrorItem, {
+  id: id,
+  onClick: onClick
+});
+export const ActionsMenu = ({
+  entity,
+  isNested,
+  render,
+  renderAsync,
+  primaryActions
+}) => {
+  var _a;
+  const {
+    translate
+  } = useLanguage();
+  const generatedId = useId();
+  const buttonId = `ariaLabelBy-${entity.id || generatedId}`;
+  const errorId = `errorItem-${useId()}`;
+  const ref = useRef(null);
+  const menuItems = useMemo(() => getMenuItems(entity, isNested, render, primaryActions), [entity, isNested, render, primaryActions]);
+  const [menuItemsAsync, setMenuItemsAsync] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const handleClickTrigger = useCallback(async () => {
+    var _a;
+    if (!renderAsync || isLoading) {
+      return;
+    }
+    const errorItem = getErrorItem(errorId, handleClickTrigger);
+    setIsLoading(true);
+    setIsError(false);
+    setMenuItemsAsync(null);
+    try {
+      let resolvedMenuItems = await renderAsync(entity, isNested);
+      if (primaryActions) {
+        resolvedMenuItems = _jsx(_Fragment, {
+          children: [...primaryActions.props.children, ...resolvedMenuItems.props.children]
+        });
+      }
+      if (resolvedMenuItems.props.children) {
+        setMenuItemsAsync(resolvedMenuItems);
+      } else {
+        setMenuItemsAsync(_jsx(_Fragment, {
+          children: errorItem
+        }));
+        setIsError(true);
+      }
+    } catch (err) {
+      setMenuItemsAsync(_jsx(_Fragment, {
+        children: [((_a = primaryActions === null || primaryActions === void 0 ? void 0 : primaryActions.props) === null || _a === void 0 ? void 0 : _a.children) || null, errorItem]
+      }));
+      setIsError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [entity, isNested, isLoading, primaryActions, errorId, renderAsync]);
+  const trigger = useMemo(() => {
+    if (renderAsync) {
+      return _jsx(Button, {
+        title: translate("More"),
+        disabled: isLoading,
+        id: buttonId,
+        ref: ref,
+        onClick: handleClickTrigger,
+        type: "tertiary-black",
+        className: classNames(["zen-caption", "zen-actions-column__action", isError ? "zen-actions-column__action_error" : ""]),
+        children: _jsx(IconDotVertical, {
+          size: "bigger"
+        })
+      });
+    }
+    return _jsx(Button, {
+      type: "tertiary-black",
+      title: translate("More"),
+      className: "zen-caption zen-actions-column__action",
+      children: _jsx(IconDotVertical, {
+        size: "bigger"
+      })
+    });
+  }, [buttonId, isLoading, isError, renderAsync, handleClickTrigger, translate]);
+  if (renderAsync) {
+    const menuItemsToRender = isLoading ? _jsx(SkeletonList, {
+      className: "zen-actions-column__waiting"
+    }) : ((_a = menuItemsAsync === null || menuItemsAsync === void 0 ? void 0 : menuItemsAsync.props) === null || _a === void 0 ? void 0 : _a.children) || null;
+    return _jsxs(_Fragment, {
+      children: [trigger, _jsx(Menu, {
+        ariaLabelledBy: buttonId,
+        title: translate("Actions"),
+        triggerRef: ref,
+        alignment: "bottom-right",
+        children: menuItemsToRender
+      })]
+    });
+  }
+  if (!menuItems || menuItems.length === 0) {
+    return null;
+  }
+  return _jsx(Menu, {
+    title: translate("Actions"),
+    trigger: trigger,
+    alignment: "bottom-right",
+    children: menuItems
+  });
+};

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

@@ -0,0 +1,15 @@
+import { IActionWithId } from "../../dataGrid/columns/actionsColumn/actionsColumn";
+import { IListColumn } from "../table";
+import { IRowEntity } from "../../dataGrid/row/row";
+import { IEntityWithId } from "../../commonHelpers/entity";
+export declare const useActions: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], isFeed: boolean) => {
+    columnsWithActions: IListColumn<T, N>[];
+    actions: undefined;
+    actionsAsync: undefined;
+    primaryActions?: undefined;
+} | {
+    columnsWithActions: IListColumn<T, N>[];
+    actions: IActionWithId<T> | ((entity: T, isNested: boolean) => React.JSX.Element) | undefined;
+    actionsAsync: ((entity: T, isNested: boolean) => PromiseLike<React.JSX.Element>) | undefined;
+    primaryActions: IActionWithId<T>[] | ((entity: T, isNested: boolean) => IActionWithId<T>[]) | undefined;
+};

package/esm/table/actions/useActions.js

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { ActionsColumn } from "../../dataGrid/columns/actionsColumn/actionsColumn";
+export const useActions = (columns, isFeed) => {
+    const result = useMemo(() => {
+        if (!isFeed) {
+            return { columnsWithActions: [...columns], actions: undefined, actionsAsync: undefined };
+        }
+        const columnsWithActions = columns.find(el => el.columnComponent instanceof ActionsColumn);
+        let actions = undefined;
+        let actionsAsync = undefined;
+        let primaryActions = undefined;
+        if (columnsWithActions && columnsWithActions.columnComponent) {
+            const colComponent = columnsWithActions.columnComponent;
+            actions = colComponent.columnActions;
+            actionsAsync = colComponent.columnActionsAsync;
+            primaryActions = colComponent.columnPrimaryActions;
+        }
+        const columnsWithoutActions = columns.filter(el => !(el.columnComponent instanceof ActionsColumn));
+        return { columnsWithActions: columnsWithoutActions, actions, actionsAsync, primaryActions };
+    }, [columns, isFeed]);
+    return result;
+};