@geotab/zenith 2.0.0 → 3.0.0-beta.0

package/README.md

@@ -40,6 +40,46 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.0.0
+
+* Zenith uses React 19
+* Clean up deprecated components and properties:
+    * method `translate` is removed in all React components. Translations are built-in, no needs to pass the method from outside.
+    * removed deprecated components:
+        * `ComboList`
+        * `combobox`
+        * `DropdownOld`
+        * `ReportPopup`
+        * `SearchList`
+        * `SearchableField`
+        * `BottomSection`
+        * `IconAddPeople2`
+        * `IconCalendar2`
+        * `IconCornerUpRight2`
+        * `IconImac2`
+        * `IconInbox2`
+        * `IconMenuCircle2`
+        * `IconShare2`
+        * `IconVolumeOf`
+        * deprecated icons (@geotab/zenith/dist/icons/deprecated)
+
+    * removed deprecated props:
+        * `Banner` - `center`, `close`
+        * `DateInput` - `hasApplyButton`
+        * `GroupsFilter` - `advancedDialog`
+        * `Header` - `useMobileVersion`
+        * `SearchInputRaw` - `withNewSearchIcon`
+        * `SelectRaw` - `maxPopupHeight`
+        * `ActionsButton` - `isMobile`
+        * `GroupsFilter` - `options.placeholder`
+* Fix global styles on body when `Modal` is unmounted
+* Fix `onChange` interface in `ToggleButton`
+* Add property `onClick` to `Card` title
+* Fix truncation in list items
+* Improve positioning logic for popup
+* Improve API of `FormStepper`
+* Improve horizontal scroll animation in FiltersBar
+
 ### 2.0.0
 
 We're excited to announce that **Zenith now supports EcmaScript Modules** (ESM)! This major release brings modern JavaScript module support to help you build better, more efficient applications.

package/dist/absolute/absolute.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { RefObject } from "react";
 import "./absolute.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IAlignment } from "../utils/positioningUtils/alignments";
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
 export type TTrapFocus = "on" | "off" | "withTrigger";
 export interface IAbsolute extends IZenComponentProps {
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLElement | null>;
     alignment?: TAlignment;
     stateFullChilds?: boolean;
     id: string;

package/dist/accordion/accordionItem/accordionItem.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
+import React, { ReactNode } from "react";
 export interface IAccordionItem {
     id: string;
     title: string;
-    content: JSX.Element;
+    content: ReactNode;
     isActive: boolean;
     onClick: React.MouseEventHandler<HTMLButtonElement>;
     className?: string;

package/dist/accordion/accordionItem/accordionItem.js

@@ -7,6 +7,14 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const iconChevronBottom_1 = require("../../icons/iconChevronBottom");
 const AccordionItem = ({ title, content, isActive, onClick, id }) => {
     const ariaControlsId = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { className: "zen-accordion__header", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": isActive, "aria-controls": ariaControlsId, className: "zen-accordion__header-button", id: id, onClick: onClick, children: [title, (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, { size: "large", className: (0, classNames_1.classNames)(["zen-accordion__header-arrow", isActive ? "zen-accordion__header-arrow--rotated" : ""]) })] }) }), (0, jsx_runtime_1.jsx)("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: (0, classNames_1.classNames)(["zen-accordion__content", isActive ? "" : "zen-accordion__content--hidden"]), children: content })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h3", { className: "zen-accordion__header", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "aria-expanded": isActive, "aria-controls": ariaControlsId, className: "zen-accordion__header-button", id: id, onClick: onClick, children: [title, (0, jsx_runtime_1.jsx)(iconChevronBottom_1.IconChevronBottom, { size: "large", className: (0, classNames_1.classNames)([
+                                "zen-accordion__header-arrow",
+                                isActive
+                                    ? "zen-accordion__header-arrow--rotated"
+                                    : ""
+                            ]) })] }) }), (0, jsx_runtime_1.jsx)("div", { id: ariaControlsId, "aria-labelledby": id, role: "region", className: (0, classNames_1.classNames)([
+                    "zen-accordion__content",
+                    isActive ? "" : "zen-accordion__content--hidden"
+                ]), children: content })] }));
 };
 exports.AccordionItem = AccordionItem;

package/dist/advancedGroupsFilter/advancedGroupsFilter.d.ts

@@ -8,11 +8,6 @@ export interface IAdvancedGroupsFilter extends IZenComponentProps {
     onClose: () => void;
     onApply: (state: IFilterState) => void;
     state?: IFilterState;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     getData: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownItem[]>;
     errorHandler: (e: Error) => void;
     dataItems?: IDropdownItem[];

package/dist/advancedGroupsFilter/advancedGroupsFilterForm.d.ts

@@ -6,11 +6,6 @@ export interface IAdvancedGroupsFilterForm {
     state: ICurrentAdvancedState[];
     dataItems: IDropdownItem[];
     onStateChange: (value: ICurrentAdvancedState[]) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     getData: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownItem[]>;
     errorHandler: (e: Error) => void;
     tooltipText?: string;

package/dist/advancedGroupsFilter/advancedGroupsFilterFormSection.d.ts

@@ -11,11 +11,6 @@ export interface IAdvancedGroupsFilterFormSection extends IZenComponentProps {
     onRelationChange: (itemId: number) => void;
     onRemoveCondition: (e: any) => void;
     onStateChange: (ind: number, value: string[]) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     getData: (signal?: AbortSignal, searchValue?: string) => Promise<IDropdownItem[]>;
     errorHandler: (e: Error) => void;
     isHasRemoveConditionButton: boolean;

package/dist/advancedGroupsFilter/advancedGroupsFilterSectionTooltip.d.ts

@@ -6,11 +6,6 @@ interface IAdvancedGroupsFilterSectionTooltip {
     className?: string;
     size?: TooltipSize;
     alignment?: TAlignment;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     text?: string;
     ariaLabel: string;
 }

package/dist/advancedGroupsFilter/advancedGroupsFilterSectionTooltip.js

@@ -11,8 +11,7 @@ const AdvancedGroupsFilterSectionTooltip = ({ ariaLabel, className = "", size =
     const { translate } = (0, useLanguage_1.useLanguage)();
     const triggerRef = (0, react_1.useRef)(null);
     const defaultTooltipText = "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.";
-    const getTrigger = (currentRef, ariaLbl) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": ariaLbl, className: "zen-advanced-groups-filter-section-tooltip__trigger", ref: currentRef, children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, { className: "zen-advanced-groups-filter-section-tooltip__trigger-icon", size: "large" }) }));
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { className: (0, classNames_1.classNames)(["zen-advanced-groups-filter-section-tooltip__item", className || ""]), size: size, alignment: alignment, trigger: getTrigger(triggerRef, translate(ariaLabel)), children: text || translate(defaultTooltipText) }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { className: (0, classNames_1.classNames)(["zen-advanced-groups-filter-section-tooltip__item", className || ""]), size: size, alignment: alignment, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": translate(ariaLabel), className: "zen-advanced-groups-filter-section-tooltip__trigger", ref: triggerRef, children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, { className: "zen-advanced-groups-filter-section-tooltip__trigger-icon", size: "large" }) }), children: text || translate(defaultTooltipText) }));
 };
 exports.AdvancedGroupsFilterSectionTooltip = AdvancedGroupsFilterSectionTooltip;
 exports.TRANSLATIONS = [

package/dist/alert/hooks/useAlertState.d.ts

@@ -3,6 +3,6 @@ import { IAlertItem } from "../../feedbackContainer/types";
 export interface IUseAlertState {
     alerts: IAlertItem[];
     setAlerts: React.Dispatch<React.SetStateAction<IAlertItem[]>>;
-    targetEvent: React.MutableRefObject<EventTarget>;
+    targetEvent: React.RefObject<EventTarget>;
 }
 export declare const useAlertState: () => IUseAlertState;

package/dist/alertRaw/alertRaw.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement, RefObject } from "react";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./alertRaw.less";
 import { TAnimationType } from "../feedbackContainer/types";
@@ -19,14 +20,15 @@ interface IFooterButtons {
 }
 export interface IAlertRaw extends IZenComponentProps {
     id: string;
-    text: string | JSX.Element;
+    text: string | ReactElement;
     onClose: () => void;
     isOpen: boolean;
     header?: string;
     type?: TAlertType;
     animation?: TAnimationType;
     buttons: IFooterButtons;
+    ref?: RefObject<HTMLDivElement>;
 }
-export declare const AlertRaw: React.ForwardRefExoticComponent<IAlertRaw & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertRaw: ({ id, type, header, text, buttons, className, onClose, animation, isOpen, ref }: IAlertRaw) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/alertRaw/alertRaw.js

@@ -27,9 +27,7 @@ const typedIcons = {
     info: iconInfoCircle_1.IconInfoCircle
 };
 const getIcon = (t) => typedIcons[t];
-exports.AlertRaw = 
-// eslint-disable-next-line @typescript-eslint/naming-convention, complexity
-(0, react_1.forwardRef)(function InnerAlertRaw({ id, type, header, text, buttons, className, onClose, animation, isOpen }, ref) {
+const AlertRaw = ({ id, type, header, text, buttons, className, onClose, animation, isOpen, ref }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const isMobile = (0, useMobile_1.useMobile)();
@@ -72,7 +70,8 @@ exports.AlertRaw =
                                             size: isDrive ? "huge" : "large",
                                             className: `zen-alert__icon--${type || "info"}`
                                         }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-alert__body", children: [header && (0, jsx_runtime_1.jsx)("div", { className: `zen-alert__title zen-alert__title--${type || "info"}`, children: header }), (0, jsx_runtime_1.jsx)("div", { className: "zen-alert__text", children: text })] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-alert__actions", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-alert__close-button", `zen-alert__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "huge" : "large" }) }) })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-alert__body-actions", children: [tertiaryButton, primaryButton] })] }) }) });
-});
+};
+exports.AlertRaw = AlertRaw;
 exports.TRANSLATIONS = [
     "Close"
 ];

package/dist/banner/banner.d.ts

@@ -18,21 +18,6 @@ export interface IBanner {
     action?: IBannerAction;
     onClose?: (e: any) => void;
     size?: TBannerSize;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
-    /**
-    * @deprecated
-    * @param center - will be removed in the next major release
-    */
-    center?: boolean;
-    /**
-    * @deprecated
-    * @param close - will be removed in the next major release
-    */
-    close?: boolean;
     role?: string;
     ariaAtomic?: "true" | "false";
     ariaLive?: "off" | "assertive" | "polite";

package/dist/banner/bannerUtils.d.ts

@@ -1,4 +1,3 @@
-import { TIconId } from "../static/icons/icons";
 export type TBannerSize = "XXL" | "XL" | "L" | "M" | "S" | "XS";
 export declare const DEFAULT_BANNER_SIZE: TBannerSize;
 export declare const DEFAULT_BANNER_UPSELL_SIZE: TBannerSize;
@@ -21,5 +20,4 @@ export declare const options: {
 };
 export declare const getBannerOptions: (type: string) => {
     blockClassName: string;
-    iconId: TIconId;
 };

package/dist/banner/bannerUtils.js

@@ -20,5 +20,6 @@ exports.options = {
         blockClassName: "zen-banner--upsell"
     }
 };
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 const getBannerOptions = (type) => exports.options[type] || exports.options.warning;
 exports.getBannerOptions = getBannerOptions;

package/dist/betaPill/betaPill.d.ts

@@ -9,11 +9,6 @@ export interface IBetaPillActions {
 }
 export interface IBetaPill {
     className?: string;
-    /**
-     * @deprecated
-     * @param translate - will be removed in the next major release
-     */
-    translate?: (s: string) => string;
     feedbackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
 }

package/dist/bulkEditControl/bulkEditControl.d.ts

@@ -11,11 +11,6 @@ export interface IBulkEditControl extends IZenComponentProps {
     value?: BulkEditItemType;
     disabled?: boolean;
     onChange: (optionId: string | undefined) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 /**
  * @deprecated - will be removed in future releases

package/dist/button/button.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 import { TButton, THTMLButtonType } from "./buttonType";
 import "./button.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { RefObject } from "react";
 export interface IButton extends IZenComponentProps {
     id?: string;
     title?: string;
@@ -18,5 +19,9 @@ export interface IButton extends IZenComponentProps {
     htmlType?: THTMLButtonType;
     target?: React.HTMLAttributeAnchorTarget;
     rel?: string;
+    ref?: RefObject<HTMLButtonElement | null>;
 }
-export declare const Button: React.ForwardRefExoticComponent<IButton & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: {
+    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/button/button.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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)
@@ -36,13 +13,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
 const buttonType_1 = require("./buttonType");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-exports.Button = React.forwardRef(function Button(_a, ref) {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel"]);
+const Button = (_a) => {
+    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref"]);
     const modifierClassName = type && type !== buttonType_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
@@ -62,5 +38,6 @@ exports.Button = React.forwardRef(function Button(_a, ref) {
         return (0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, other, { children: children }));
     }
     return (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled }, commonArgs, other, { children: children }));
-});
+};
+exports.Button = Button;
 exports.Button.displayName = "Button";

package/dist/calendar/calendar.d.ts

@@ -10,11 +10,6 @@ export interface ICalendar extends IZenComponentProps {
     id: string;
     value: ICalendarRange;
     onChange: (value: ICalendarRange, active?: "start" | "end") => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (key: string) => string;
     disableFutureDates?: boolean;
     disablePastDates?: boolean;
     disableDatesAfter?: string;

package/dist/card/card.d.ts

@@ -1,4 +1,4 @@
-import { FC, FunctionComponent, ReactNode } from "react";
+import React, { FC, FunctionComponent, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
 import { TIconType } from "./components/title";
@@ -21,10 +21,12 @@ export interface ICard extends IZenComponentProps, IZenGridItem {
     title?: string;
     icon?: FunctionComponent<IIcon>;
     iconType?: TIconType;
-    secondary?: string;
+    secondary?: ReactNode;
     tooltip?: ReactNode;
     titleIconClasses?: string;
     link?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    onClick?: () => void;
     /**
     * @deprecated
     * @param date - will be removed in the next major release
@@ -38,11 +40,6 @@ export interface ICard extends IZenComponentProps, IZenGridItem {
     fullWidth?: boolean;
     scrollableContent?: boolean;
     autoHeight?: boolean;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     fullHeight?: boolean;
 }
 export declare const Card: FC<ICard> & {

package/dist/card/card.js

@@ -58,7 +58,7 @@ exports.DEFAULT_CARD_SIZE = "S";
 const Card = 
 // eslint-disable-next-line complexity
 (props) => {
-    const { size, children, title, icon, iconType, secondary, status, date, tooltip, className = "", link, cardContentClasses = "", tooltipAlignment, tooltipSize, fullWidth, scrollableContent = true, autoHeight = false, fullHeight = false } = props;
+    const { size, children, title, icon, iconType, secondary, status, date, tooltip, className = "", link, target, onClick, cardContentClasses = "", tooltipAlignment, tooltipSize, fullWidth, scrollableContent = true, autoHeight = false, fullHeight = false } = props;
     const { translate } = (0, useLanguage_1.useLanguage)();
     const [deviceType, setDeviceType] = (0, react_1.useState)(deviceType_1.DeviceType.Mobile);
     const [cardSize, setCardSize] = (0, react_1.useState)((0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : (size || exports.DEFAULT_CARD_SIZE));
@@ -93,7 +93,7 @@ const Card =
                         acts.push(...actionChildren.filter((child) => (child === null || child === void 0 ? void 0 : child.type) === exports.Card.Button));
                         return;
                     }
-                    if (typeof actionChildren === "object" && actionChildren.type === exports.Card.Button) {
+                    if (typeof actionChildren === "object" && react_1.default.isValidElement(actionChildren) && actionChildren.type === exports.Card.Button) {
                         acts.push(actionChildren);
                     }
                 }
@@ -150,9 +150,12 @@ const Card =
             titleIconType: iconType
         };
     }, [icon, iconType, status]);
-    const isHeaderPrimaryVisible = title || icon || link || !!headerActions.length || date || !!favoriteButton || !!tooltip || !!menuActions.length;
+    const isHeaderPrimaryVisible = title || icon || link || onClick || !!headerActions.length || date || !!favoriteButton || !!tooltip || !!menuActions.length;
     const isHeaderVisible = isHeaderPrimaryVisible || secondary;
-    return (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: (0, classNames_1.classNames)(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]), children: [isHeaderVisible ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header", ref: headerRef, children: [isHeaderPrimaryVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-primary", children: [title && (0, jsx_runtime_1.jsx)(title_1.Title, { id: titleId, link: link, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && (0, jsx_runtime_1.jsx)(status_1.Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: menuTrigger, title: title || translate("Actions"), children: menuActions.map(action => (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({ key: action.props.id }, action.props))) })] })] }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-card__secondary", children: secondary }) : null] }) : null, (0, jsx_runtime_1.jsx)("div", { className: cardContentClassName, children: content })] });
+    return (0, jsx_runtime_1.jsxs)(cardContainer_1.CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: (0, classNames_1.classNames)(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]), children: [isHeaderVisible ? (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header", ref: headerRef, children: [isHeaderPrimaryVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-primary", children: [title && (0, jsx_runtime_1.jsx)(title_1.Title, { id: titleId, link: link, target: target, onClick: onClick, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && (0, jsx_runtime_1.jsx)(status_1.Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, { trigger: menuTrigger, title: title || translate("Actions"), children: menuActions.map((action, index) => {
+                                            const actionProps = action.props;
+                                            return (0, react_1.createElement)(menu_1.Menu.Item, Object.assign({ key: actionProps.id || index, id: actionProps.id || `action-${index}`, name: actionProps.name || "" }, actionProps));
+                                        }) })] })] }), secondary ? (0, jsx_runtime_1.jsx)("div", { className: "zen-card__secondary", children: secondary }) : null] }) : null, (0, jsx_runtime_1.jsx)("div", { className: cardContentClassName, children: content })] });
 };
 exports.Card = Card;
 exports.TRANSLATIONS = [

package/dist/card/components/status.d.ts

@@ -14,11 +14,6 @@ interface IStatus extends IZenComponentProps {
     tooltipAlignment?: TAlignment;
     tooltipSize?: TooltipSize;
     title?: string;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const Status: FC<IStatus>;
 export {};

package/dist/card/components/title.d.ts

@@ -8,8 +8,10 @@ interface ITitle {
     id: string;
     className?: string;
     link?: string;
+    target?: React.HTMLAttributeAnchorTarget;
     icon?: FunctionComponent<IIcon>;
     iconType?: TIconType;
+    onClick?: () => void;
 }
 export declare const Title: FC<ITitle>;
 export {};

package/dist/card/components/title.js

@@ -7,15 +7,20 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const iconChevronRightSmall_1 = require("../../icons/iconChevronRightSmall");
-const Title = ({ isMobile, link, title, id, icon, iconType, className = "" }) => {
+const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
     const driveClassNames = (0, useDriveClassName_1.useDriveClassName)("zen-card-title");
     const isDrive = (0, useDrive_1.useDrive)();
     const iconClassName = iconType ? `zen-card-title__icon--${iconType}` : "";
     const iconSize = (0, react_1.useMemo)(() => isDrive ? "huge" : "large", [isDrive]);
-    return (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-card-title", driveClassNames || ""]), children: [icon
-                ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) })
-                : null, link
-                ? (0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, children: [(0, jsx_runtime_1.jsx)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: title }), (0, jsx_runtime_1.jsx)("div", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })] })
-                : (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", (isMobile && !isDrive) ? "zen-card-title__text--mobile" : "", className]), children: title })] });
+    const iconElement = (0, react_1.useMemo)(() => icon
+        ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) })
+        : null, [icon, iconSize, iconClassName]);
+    const chevron = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)("div", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) }), [iconSize]);
+    const roleProp = onClick ? "button" : undefined;
+    const tabIndexProp = onClick ? 0 : undefined;
+    const titleClasses = (0, classNames_1.classNames)(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
+    return (0, jsx_runtime_1.jsxs)("div", { className: titleClasses, role: roleProp, onClick: onClick, tabIndex: tabIndexProp, children: [iconElement, link && !onClick
+                ? (0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, target: target, children: [(0, jsx_runtime_1.jsx)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: title }), chevron] })
+                : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", (isMobile && !isDrive) ? "zen-card-title__text--mobile" : "", className]), children: title }), onClick ? chevron : null] })] });
 };
 exports.Title = Title;

package/dist/card/hooks/useCardSize.d.ts

@@ -1,2 +1,3 @@
+import { RefObject } from "react";
 import { TContainerSize } from "../../cardContainer/cardContainer";
-export declare const useCardSize: (callback: (deviceType: TContainerSize) => void, elem: React.RefObject<HTMLDivElement>, size: TContainerSize) => void;
+export declare const useCardSize: (callback: (deviceType: TContainerSize) => void, elem: RefObject<HTMLDivElement | null>, size: TContainerSize) => void;

package/dist/cardContainer/cardContainer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from "react";
 import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
 import "./cardContainer.less";
 export type TContainerSize = "XXL" | "XL" | "L" | "M" | "S" | "XS" | "XXS";
@@ -13,5 +13,6 @@ export interface ICardContainer extends IZenComponentProps, IZenGridItem {
     autoHeight?: boolean;
     scrollable?: boolean;
     isMobile?: boolean;
+    ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const CardContainer: React.ForwardRefExoticComponent<ICardContainer & React.RefAttributes<HTMLDivElement>>;
+export declare const CardContainer: ({ size, children, fullWidth, className, isMobile, fullHeight, autoHeight, scrollable, ref }: ICardContainer) => import("react/jsx-runtime").JSX.Element;

package/dist/cardContainer/cardContainer.js

@@ -7,9 +7,7 @@ const isAbsoluteSize_1 = require("./helpers/isAbsoluteSize");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const getSizeClass_1 = require("./helpers/getSizeClass");
 const useAbsoluteSize_1 = require("./hooks/useAbsoluteSize");
-exports.CardContainer = (0, react_1.forwardRef)(
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function CardContainerInner({ size, children, fullWidth = false, className = "", isMobile = false, fullHeight = false, autoHeight = false, scrollable = true }, ref) {
+const CardContainer = ({ size, children, fullWidth = false, className = "", isMobile = false, fullHeight = false, autoHeight = false, scrollable = true, ref }) => {
     const isDesktop = !isMobile;
     const isAbsolute = (0, isAbsoluteSize_1.isAbsoluteSize)(size);
     const containerClassNames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
@@ -24,4 +22,5 @@ function CardContainerInner({ size, children, fullWidth = false, className = "",
     ]), [size, fullWidth, className, isMobile, isDesktop, isAbsolute, fullHeight, autoHeight, scrollable]);
     const style = (0, useAbsoluteSize_1.useAbsoluteSize)(size, isMobile, autoHeight, fullWidth);
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: style, className: containerClassNames, children: children }));
-});
+};
+exports.CardContainer = CardContainer;

package/dist/chart/lineChart/useChartTicks.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const useChartTicks: () => {
-    chartRef: import("react").RefObject<HTMLDivElement>;
+    chartRef: import("react").RefObject<HTMLDivElement | null>;
     ticks: number;
 };

package/dist/chart/lineChart/useSummary.d.ts

@@ -12,7 +12,7 @@ export declare const useSummary: (chartSummary: IChartSummary | false | undefine
     more?: import("react").ReactNode;
     isEnabled?: boolean | undefined;
     onToggle?: (() => void) | undefined;
-    description?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
+    description?: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
     label?: string | undefined;
     onClick?: (() => void) | undefined;
     isHidden?: boolean | undefined;

package/dist/checkboxListWithAction/checkboxListWithAction.d.ts

@@ -24,11 +24,6 @@ export interface ICheckboxListWithAction extends IZenComponentProps {
     search?: string[];
     onChange: (value: IChangeCheckbox) => void;
     onClick: (id: string) => void;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
 }
 export declare const CheckboxListWithAction: React.FC<ICheckboxListWithAction>;
 export declare const TRANSLATIONS: string[];

package/dist/chip/utils/useChip.d.ts

@@ -4,7 +4,7 @@ interface ITriggerModeProps {
     children: React.ReactNode;
 }
 export declare const useChip: (initialTitle?: string, triggerModeProps?: ITriggerModeProps) => {
-    ref: import("react").RefObject<HTMLElement>;
+    ref: import("react").RefObject<HTMLElement | null>;
     title: string;
 };
 export {};

package/dist/columnsSelector/columnsSelector.d.ts

@@ -4,11 +4,6 @@ import { IColumnsGroup } from "./columnsTabGroup/columnsTabGroup";
 import "./columnsSelector.less";
 export interface IColumnsSelector {
     id: string;
-    /**
-    * @deprecated
-    * @param translate - will be removed in the next major release
-    */
-    translate?: (s: string) => string;
     columns?: IColumnItem[];
     onColumnToggle?: (columnsState: IColumnItem[]) => void;
     additionalColumns?: IColumnsGroup[];

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[];