@geotab/zenith 2.0.0 → 3.0.0-beta.1

package/esm/button/button.js

@@ -10,13 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
 import { ButtonType } from "./buttonType";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const 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"]);
+export 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.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
     const driveClasses = useDriveClassName("zen-button");
@@ -36,5 +35,5 @@ export const Button = React.forwardRef(function Button(_a, ref) {
         return _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 _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 }));
-});
+};
 Button.displayName = "Button";

package/esm/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/esm/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/esm/card/card.js

@@ -32,7 +32,7 @@ export const DEFAULT_CARD_SIZE = "S";
 export 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 } = useLanguage();
     const [deviceType, setDeviceType] = useState(DeviceType.Mobile);
     const [cardSize, setCardSize] = useState(isAbsoluteSize(size) ? getContainerSize(size.width) : (size || DEFAULT_CARD_SIZE));
@@ -67,7 +67,7 @@ export const Card =
                         acts.push(...actionChildren.filter((child) => (child === null || child === void 0 ? void 0 : child.type) === Card.Button));
                         return;
                     }
-                    if (typeof actionChildren === "object" && actionChildren.type === Card.Button) {
+                    if (typeof actionChildren === "object" && React.isValidElement(actionChildren) && actionChildren.type === Card.Button) {
                         acts.push(actionChildren);
                     }
                 }
@@ -124,9 +124,12 @@ export 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 _jsxs(CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: classNames(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]), children: [isHeaderVisible ? _jsxs("div", { className: "zen-card__header", ref: headerRef, children: [isHeaderPrimaryVisible && _jsxs("div", { className: "zen-card__header-primary", children: [title && _jsx(Title, { id: titleId, link: link, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), _jsxs("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? _jsx("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && _jsx(Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && _jsx(Menu, { trigger: menuTrigger, title: title || translate("Actions"), children: menuActions.map(action => createElement(Menu.Item, Object.assign({ key: action.props.id }, action.props))) })] })] }), secondary ? _jsx("div", { className: "zen-card__secondary", children: secondary }) : null] }) : null, _jsx("div", { className: cardContentClassName, children: content })] });
+    return _jsxs(CardContainer, { isMobile: isMobile, fullWidth: isFullWidth, fullHeight: isFullHeight, autoHeight: isAutoHeight, scrollable: isScrollable, ref: containerRef, size: size || "S", className: classNames(["zen-card", !isHeaderVisible ? "zen-card--no-header" : "", className]), children: [isHeaderVisible ? _jsxs("div", { className: "zen-card__header", ref: headerRef, children: [isHeaderPrimaryVisible && _jsxs("div", { className: "zen-card__header-primary", children: [title && _jsx(Title, { id: titleId, link: link, target: target, onClick: onClick, isMobile: isMobile, title: title, icon: titleIcon, iconType: titleIconType }), _jsxs("div", { className: "zen-card__header-right", children: [!!headerActions.length && headerActions, date ? _jsx("span", { className: dateClassName, children: date }) : null, favoriteButton, tooltip && _jsx(Status, { title: title, status: status, isMobile: isMobile, tooltip: tooltip, tooltipAlignment: tooltipAlignment, tooltipSize: tooltipSize }), !!menuActions.length && _jsx(Menu, { trigger: menuTrigger, title: title || translate("Actions"), children: menuActions.map((action, index) => {
+                                            const actionProps = action.props;
+                                            return createElement(Menu.Item, Object.assign({ key: actionProps.id || index, id: actionProps.id || `action-${index}`, name: actionProps.name || "" }, actionProps));
+                                        }) })] })] }), secondary ? _jsx("div", { className: "zen-card__secondary", children: secondary }) : null] }) : null, _jsx("div", { className: cardContentClassName, children: content })] });
 };
 export const TRANSLATIONS = [
     "Actions"

package/esm/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/esm/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/esm/card/components/title.js

@@ -1,17 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement, useMemo } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { useDrive } from "../../utils/theme/useDrive";
 import { IconChevronRightSmall } from "../../icons/iconChevronRightSmall";
-export const Title = ({ isMobile, link, title, id, icon, iconType, className = "" }) => {
+export const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
     const driveClassNames = useDriveClassName("zen-card-title");
     const isDrive = useDrive();
     const iconClassName = iconType ? `zen-card-title__icon--${iconType}` : "";
     const iconSize = useMemo(() => isDrive ? "huge" : "large", [isDrive]);
-    return _jsxs("div", { className: classNames(["zen-card-title", driveClassNames || ""]), children: [icon
-                ? _jsx("div", { className: classNames(["zen-card-title__icon", iconClassName]), children: createElement(icon, { size: iconSize }) })
-                : null, link
-                ? _jsxs("a", { id: id, className: classNames(["zen-card-title__link"]), href: link, children: [_jsx("span", { title: title, className: classNames(["zen-card-title__link-text"]), children: title }), _jsx("div", { className: "zen-card-title__link-chevron", children: _jsx(IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })] })
-                : _jsx("span", { title: title, id: id, className: classNames(["zen-card-title__text", (isMobile && !isDrive) ? "zen-card-title__text--mobile" : "", className]), children: title })] });
+    const iconElement = useMemo(() => icon
+        ? _jsx("div", { className: classNames(["zen-card-title__icon", iconClassName]), children: createElement(icon, { size: iconSize }) })
+        : null, [icon, iconSize, iconClassName]);
+    const chevron = useMemo(() => _jsx("div", { className: "zen-card-title__link-chevron", children: _jsx(IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) }), [iconSize]);
+    const roleProp = onClick ? "button" : undefined;
+    const tabIndexProp = onClick ? 0 : undefined;
+    const titleClasses = classNames(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
+    return _jsxs("div", { className: titleClasses, role: roleProp, onClick: onClick, tabIndex: tabIndexProp, children: [iconElement, link && !onClick
+                ? _jsxs("a", { id: id, className: classNames(["zen-card-title__link"]), href: link, target: target, children: [_jsx("span", { title: title, className: classNames(["zen-card-title__link-text"]), children: title }), chevron] })
+                : _jsxs(_Fragment, { children: [_jsx("span", { title: title, id: id, className: classNames(["zen-card-title__text", (isMobile && !isDrive) ? "zen-card-title__text--mobile" : "", className]), children: title }), onClick ? chevron : null] })] });
 };

package/esm/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/esm/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/esm/cardContainer/cardContainer.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 import { isAbsoluteSize } from "./helpers/isAbsoluteSize";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getSizeClass } from "./helpers/getSizeClass";
 import { useAbsoluteSize } from "./hooks/useAbsoluteSize";
-export const CardContainer = 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) {
+export const CardContainer = ({ size, children, fullWidth = false, className = "", isMobile = false, fullHeight = false, autoHeight = false, scrollable = true, ref }) => {
     const isDesktop = !isMobile;
     const isAbsolute = isAbsoluteSize(size);
     const containerClassNames = useMemo(() => classNames([
@@ -21,4 +19,4 @@ function CardContainerInner({ size, children, fullWidth = false, className = "",
     ]), [size, fullWidth, className, isMobile, isDesktop, isAbsolute, fullHeight, autoHeight, scrollable]);
     const style = useAbsoluteSize(size, isMobile, autoHeight, fullWidth);
     return (_jsx("div", { ref: ref, style: style, className: containerClassNames, children: children }));
-});
+};

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/columnsSelector/columnsTabGroup/columnsTabGroup.d.ts

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

package/esm/comboboxSelected/comboboxSelected.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/esm/commonHelpers/ref.d.ts

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

package/esm/controlledPopup/controlledPopup.d.ts

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

package/esm/dataFeed/dataFeed.d.ts

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

package/esm/dataFeed/dataFeedColumnsItems.d.ts

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

package/esm/dataFeed/feedSelectControl/feedSelectControl.d.ts

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

package/esm/dataFeed/feedSelectControl/feedSelectControl.js

@@ -4,9 +4,8 @@ import { SvgIconSize } from "../../svgIcon/svgIconSize";
 import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIconButton";
 import { ButtonType } from "../../button/buttonType";
 import { IconBulkSelect } from "../../icons/iconBulkSelect";
-import { forwardRef } from "react";
-export const FeedSelectControl = forwardRef(({ className = "", title, onClick }, ref) => {
+export const FeedSelectControl = ({ className = "", title, onClick, ref }) => {
     const classes = classNames([className, "data-feed-select-control"]);
     return _jsx(TextIconButton, { ref: ref, className: classes, icon: IconBulkSelect, iconSize: SvgIconSize.Large, iconPosition: ButtonIconPosition.Start, "aria-label": title, title: title, onClick: onClick, type: ButtonType.TertiaryBlack });
-});
+};
 FeedSelectControl.displayName = "FeedSelectControl";

package/esm/dataGrid/cell/cell.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement, forwardRef } from "react";
+import { createElement } from "react";
 import { ButtonIconPosition, TextIconButton } from "../../../textIconButton/textIconButton";
 import { ButtonType } from "../../../button/buttonType";
 import { SvgIconSize } from "../../../svgIcon/svgIconSize";
-export const ActionColumnCell = forwardRef(function inner(_a, ref) {
-    var { tag, hash, title, href, icon } = _a, rest = __rest(_a, ["tag", "hash", "title", "href", "icon"]);
+export const ActionColumnCell = (_a) => {
+    var { tag, hash, title, href, icon, ref } = _a, rest = __rest(_a, ["tag", "hash", "title", "href", "icon", "ref"]);
     return tag === "button"
         ? _jsx(TextIconButton, Object.assign({ className: "zen-actions-column__action", "data-hash": hash, title: title, "aria-label": title, type: ButtonType.Light, icon: icon, iconSize: SvgIconSize.Bigger, iconPosition: ButtonIconPosition.Start, iconClasses: "zen-icon--no-events", ref: ref }, rest))
         : _jsx("a", Object.assign({ className: "zen-actions-column__action zen-button zen-button--light zen-caption", "data-hash": hash, title: title, "aria-label": title, href: href, ref: ref }, rest, { children: createElement(icon, { size: SvgIconSize.Bigger, className: "zen-icon--no-events" }) }));
-});
+};

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

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