@geotab/zenith 3.2.0 → 3.3.0-beta.0

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

@@ -243,6 +243,7 @@
     "Close filter": "關閉篩選器",
     "Column Settings": "欄設定",
     "Category": "種類",
+    "Details": "詳細資訊",
     "Select visible columns": "選取可見欄",
     "Selected": "已選取",
     "This field is required.": "此欄位為必填。",
@@ -255,5 +256,6 @@
     "Remove": "移除",
     "Confirm": "確認",
     "Clear all": "清除全部",
-    "Reload": "重新載入"
+    "Reload": "重新載入",
+    "View details": "檢視詳細資訊"
 }

package/esm/card/card.d.ts

@@ -10,6 +10,7 @@ import { TooltipSize } from "../tooltip/tooltip";
 import { IZenComponentProps, IZenFormLayoutItem, IZenGridItem } from "../commonHelpers/zenComponent";
 import { ICardButton } from "./components/cardButton/cardButton";
 import { IIcon } from "../icons/icon";
+import { IToggleButton } from "../toggleButton/toggleButton";
 export declare const DEFAULT_CARD_SIZE: TContainerSize;
 export interface ICard extends IZenComponentProps, IZenGridItem, IZenFormLayoutItem {
     size?: TContainerSize | IAbsoluteSize;
@@ -48,5 +49,7 @@ export declare const Card: FC<ICard> & {
     Content: FC<IContent>;
 } & {
     Button: FC<ICardButton>;
+} & {
+    Toggle: FC<IToggleButton>;
 };
 export declare const TRANSLATIONS: string[];

package/esm/card/card.js

@@ -29,7 +29,8 @@ import { FavoriteButton } from "../favoriteButton/favoriteButton";
 import { getIconFromStatus } from "./helpers/getIconFromStatus";
 import { getIconTypeFromStatus } from "./helpers/getIconTypeFromStatus";
 import { isFormSection } from "../formSection/utils/isFormSection";
-// import { FormSection } from "../formSection/formSection";
+import { CardToggle } from "./components/cardToggle/cardToggle";
+import { ToggleButton } from "../toggleButton/toggleButton";
 injectString("cs", "Actions", "Akce");
 injectString("da-DK", "Actions", "Handlinger");
 injectString("de", "Actions", "Aktionen");
@@ -60,6 +61,7 @@ export const Card =
 // eslint-disable-next-line complexity
 props => {
   const {
+    id,
     size,
     children,
     title,
@@ -104,7 +106,8 @@ props => {
   useCardSize(setCardSize, containerRef, isAbsoluteSize(size) ? getContainerSize(size.width) : size || "S");
   const {
     actions,
-    content
+    content,
+    toggle
   } = useMemo(() => {
     if (!children) {
       return {
@@ -115,6 +118,7 @@ props => {
     if (Array.isArray(children)) {
       const acts = [];
       const cnt = [];
+      let tgl;
       React.Children.forEach(children, el => {
         if (!el) {
           return;
@@ -135,10 +139,14 @@ props => {
         if (el.type === Card.Content || isFormSection(el)) {
           cnt.push(el);
         }
+        if (el.type === Card.Toggle) {
+          tgl = el;
+        }
       });
       return {
         actions: acts,
-        content: cnt
+        content: cnt,
+        toggle: tgl
       };
     }
     return {
@@ -210,6 +218,7 @@ props => {
   const isHeaderPrimaryVisible = title || icon || link || onClick || !!headerActions.length || date || !!favoriteButton || !!tooltip || !!menuActions.length;
   const isHeaderVisible = isHeaderPrimaryVisible || secondary;
   return _jsxs(CardContainer, {
+    id: id,
     isMobile: isMobile,
     fullWidth: isFullWidth,
     fullHeight: isFullHeight,
@@ -244,7 +253,7 @@ props => {
             tooltip: tooltip,
             tooltipAlignment: tooltipAlignment,
             tooltipSize: tooltipSize
-          }), !!menuActions.length && _jsx(Menu, {
+          }), toggle ? _jsx(ToggleButton, Object.assign({}, toggle.props)) : null, !!menuActions.length && _jsx(Menu, {
             trigger: menuTrigger,
             title: title || translate("Actions"),
             children: menuActions.map((action, index) => {
@@ -270,4 +279,5 @@ props => {
 export const TRANSLATIONS = ["Actions"];
 Card.Actions = Actions;
 Card.Content = Content;
-Card.Button = CardButton;
+Card.Button = CardButton;
+Card.Toggle = CardToggle;

package/esm/card/components/cardToggle/cardToggle.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { IToggleButtonRaw } from "../../../toggleButtonRaw/types";
+export interface ICardToggle extends IToggleButtonRaw {
+}
+export declare const CardToggle: FC<ICardToggle>;

package/esm/card/components/cardToggle/cardToggle.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ToggleButtonRaw } from "../../../toggleButtonRaw/toggleButtonRaw";
+export const CardToggle = (props) => _jsx(_Fragment, { children: _jsx(ToggleButtonRaw, Object.assign({}, props)) });

package/esm/card/components/title.js

@@ -12,11 +12,11 @@ export const Title = ({ isMobile, link, target, title, id, icon, iconType, class
     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 chevron = useMemo(() => _jsx("span", { 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] })] });
+                ? _jsx("a", { id: id, className: classNames(["zen-card-title__link"]), href: link, target: target, children: _jsxs("span", { title: title, className: classNames(["zen-card-title__link-text"]), children: [title, chevron] }) })
+                : _jsx(_Fragment, { children: _jsxs("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/cardContainer/cardContainer.d.ts

@@ -13,6 +13,7 @@ export interface ICardContainer extends IZenComponentProps, IZenGridItem {
     autoHeight?: boolean;
     scrollable?: boolean;
     isMobile?: boolean;
+    noWidthConstraint?: boolean;
     ref?: RefObject<HTMLDivElement | null>;
 }
-export declare const CardContainer: ({ size, children, fullWidth, className, isMobile, fullHeight, autoHeight, scrollable, ref }: ICardContainer) => import("react/jsx-runtime").JSX.Element;
+export declare const CardContainer: ({ id, size, children, fullWidth, className, isMobile, fullHeight, autoHeight, scrollable, noWidthConstraint, ref }: ICardContainer) => import("react/jsx-runtime").JSX.Element;

package/esm/cardContainer/cardContainer.js

@@ -4,7 +4,7 @@ import { isAbsoluteSize } from "./helpers/isAbsoluteSize";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { getSizeClass } from "./helpers/getSizeClass";
 import { useAbsoluteSize } from "./hooks/useAbsoluteSize";
-export const CardContainer = ({ size, children, fullWidth = false, className = "", isMobile = false, fullHeight = false, autoHeight = false, scrollable = true, ref }) => {
+export const CardContainer = ({ id, size, children, fullWidth = false, className = "", isMobile = false, fullHeight = false, autoHeight = false, scrollable = true, noWidthConstraint = false, ref }) => {
     const isDesktop = !isMobile;
     const isAbsolute = isAbsoluteSize(size);
     const containerClassNames = useMemo(() => classNames([
@@ -15,8 +15,9 @@ export const CardContainer = ({ size, children, fullWidth = false, className = "
         fullHeight ? "zen-card-container--full-height" : "",
         autoHeight ? "zen-card-container--auto-height" : "",
         scrollable ? "zen-card-container--scrollable" : "",
+        noWidthConstraint ? "zen-card-container--no-width-constraint" : "",
         className
-    ]), [size, fullWidth, className, isMobile, isDesktop, isAbsolute, fullHeight, autoHeight, scrollable]);
+    ]), [size, fullWidth, className, isMobile, isDesktop, isAbsolute, fullHeight, autoHeight, scrollable, noWidthConstraint]);
     const style = useAbsoluteSize(size, isMobile, autoHeight, fullWidth);
-    return (_jsx("div", { ref: ref, style: style, className: containerClassNames, children: children }));
+    return (_jsx("div", { id: id, ref: ref, style: style, className: containerClassNames, children: children }));
 };

package/esm/chart/barChart/getDefaultDatasetStyle.js

@@ -1,10 +1,12 @@
 const baseColors = [
-    "#2853BD",
-    "#DA7C3A",
-    "#4AA75E",
-    "#1098FF",
-    "#3852D6",
-    "#D35D80"
+    "#3CCDE5",
+    "#428AFF",
+    "#8256E5",
+    "#06C989",
+    "#F98C41",
+    "#F5BD60",
+    "#E56A6A",
+    "#8A94A2"
 ];
 export const getDefaultDatasetStyle = (dataSet, dsIndex) => {
     var _a, _b;

package/esm/chart/lineChart/getDatasetColor.js

@@ -1,9 +1,11 @@
 const baseColors = [
-    "#2853BD",
-    "#DA7C3A",
-    "#4AA75E",
-    "#1098FF",
-    "#3852D6",
-    "#D35D80"
+    "#3CCDE5",
+    "#428AFF",
+    "#8256E5",
+    "#06C989",
+    "#F98C41",
+    "#F5BD60",
+    "#E56A6A",
+    "#8A94A2"
 ];
 export const getDatasetColor = (index) => baseColors[index % baseColors.length];

package/esm/chart/lineChart/useSummary.js

@@ -48,7 +48,7 @@ export const useSummary = (chartSummary, data) => {
         }
         return data.datasets[0] && typeof data.datasets[0].borderColor === "string"
             ? data.datasets[0].borderColor
-            : (summary && summary.title) ? "#2853BD" : undefined;
+            : (summary && summary.title) ? "#3CCDE5" : undefined;
     }, [data.datasets, summary]);
     const title = useMemo(() => {
         if (summary && summary.title) {

package/esm/chart/pieChart/getDefaultDatasetStyle.js

@@ -1,10 +1,12 @@
 const baseColors = [
-    "#2853BD",
-    "#DA7C3A",
-    "#4AA75E",
-    "#1098FF",
-    "#3852D6",
-    "#D35D80"
+    "#3CCDE5",
+    "#428AFF",
+    "#8256E5",
+    "#06C989",
+    "#F98C41",
+    "#F5BD60",
+    "#E56A6A",
+    "#8A94A2"
 ];
 export const getDefaultDatasetStyle = (dataSet) => {
     const newDataSet = Object.assign({}, dataSet);

package/esm/chart/plugins/linePlugin/getInterpolatedValue.js

@@ -25,7 +25,7 @@ export function getInterpolatedValue(xScale, data, datasetIndex, xPixel) {
             upperXPixel = pointXPixel;
         }
     }
-    if (!lowerPoint || !upperPoint) {
+    if (lowerPoint === undefined || upperPoint === undefined) {
         return null;
     }
     // Perform linear interpolation

package/esm/chart/plugins/linePlugin/linePlugin.js

@@ -65,13 +65,13 @@ export const LinePlugin = (containerId, options, isDark) => ({
                 const yAxisID = dataset.yAxisID || "y";
                 const yScale = chart.scales[yAxisID];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (value && yScale) {
+                if (value !== null && yScale) {
                     const lowestDsY = yScale.getPixelForValue(value);
                     if (lowestDsY < lowestValueY) {
                         lowestValueY = lowestDsY;
                     }
                 }
-                if (value && dataset.label) {
+                if (value !== null && dataset.label) {
                     const label = dataset.label;
                     const color = dataset.borderColor;
                     const item = {
@@ -93,8 +93,20 @@ export const LinePlugin = (containerId, options, isDark) => ({
             const scrollableParent = getScrollableParent(chart.canvas);
             const scrollTop = scrollableParent ? scrollableParent.scrollTop : 0;
             const scrollLeft = scrollableParent ? scrollableParent.scrollLeft : 0;
-            const xValue = chart.scales.x.getValueForPixel(x);
-            const xLabel = xValue ? chart.scales.x.getLabelForValue(xValue) : undefined;
+            let elementIdx = undefined;
+            const elementIds = new Set(chart.getActiveElements().map(el => el.index));
+            if (elementIds.size === 1) {
+                elementIdx = [...elementIds][0];
+            }
+            let xLabel;
+            const scaleLabels = chart.scales.x.getLabels();
+            if (elementIdx !== undefined && elementIdx < scaleLabels.length) {
+                xLabel = scaleLabels[elementIdx];
+            }
+            else {
+                const xValue = chart.scales.x.getValueForPixel(x);
+                xLabel = xValue ? chart.scales.x.getLabelForValue(xValue) : undefined;
+            }
             // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             renderTooltip(containerId, left + scrollLeft, top + scrollTop, "top", items, options === null || options === void 0 ? void 0 : options.title, options && options.subtitle !== undefined ? options.subtitle : xLabel, (options === null || options === void 0 ? void 0 : options.note) || undefined, isDark);
         }

package/esm/commonHelpers/hooks/useEscape.js

@@ -5,6 +5,9 @@ import { useKeydown } from "./useKeydown";
 export const useEscape = (containerRef, callback, subscriptionTrigger, condition) => {
     const handleKeyDown = useCallback((e) => {
         if (e.key === "Escape") {
+            if (e.defaultPrevented) {
+                return;
+            }
             const target = e.target;
             if (!target || !containerRef.current) {
                 return;
@@ -13,6 +16,7 @@ export const useEscape = (containerRef, callback, subscriptionTrigger, condition
             const focusable = containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
             if (isPopupFocused || !focusable.length) {
                 callback(e);
+                e.preventDefault();
                 return;
             }
         }

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

@@ -4,8 +4,9 @@ import { IPillNonActionable } from "../../pill/interfaces/pillNonActionable.inte
 interface IPillSize extends Pick<IPill, "size">, Pick<IPillNonActionable, "onClose"> {
     iconPosition?: "left" | "right";
     hasContent?: boolean;
+    initialTitle?: string;
 }
-export declare const usePillSize: ({ size, iconPosition, onClose, hasContent }: IPillSize) => {
+export declare const usePillSize: ({ size, iconPosition, onClose, hasContent, initialTitle }: IPillSize) => {
     contentClasses: string;
     ref: import("react").RefObject<HTMLElement | null>;
     title: string;

package/esm/commonHelpers/hooks/usePillSize.js

@@ -3,13 +3,13 @@ import { classNames } from "../classNames/classNames";
 import { useResize } from "./useResize";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 const PILL_WIDTH_WITHOUT_CONTENT = 64;
-export const usePillSize = ({ size, iconPosition, onClose, hasContent }) => {
+export const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle }) => {
     const isFixedSize = size && size !== "default" && size !== "fullWidth";
     const hasIcon = !!iconPosition;
     const isClosable = !!onClose;
     const [isContentHidden, setIsContentHidden] = useState(false);
     const ref = useRef(null);
-    const [title, setTitle] = useState("");
+    const [title, setTitle] = useState(initialTitle || "");
     const driveClass = useDriveClassName("zen-pill-new-content");
     const contentClasses = classNames([
         "zen-pill-new-content",
@@ -38,6 +38,9 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent }) => {
         hidePillContent();
     }, true);
     useLayoutEffect(() => {
+        if (initialTitle) {
+            return;
+        }
         if (ref.current) {
             setTitle(ref.current.textContent || "");
         }
@@ -45,6 +48,6 @@ export const usePillSize = ({ size, iconPosition, onClose, hasContent }) => {
             return;
         }
         hidePillContent();
-    }, [hidePillContent, isFixedSize, isClosable, hasIcon]);
+    }, [hidePillContent, isFixedSize, isClosable, hasIcon, initialTitle]);
     return { contentClasses, ref, title, isFixedSize, isTextContentHidden: isContentHidden && isClosable && hasIcon };
 };

package/esm/commonStyles/colors/colorsConstant.d.ts

@@ -35,4 +35,10 @@ export declare const Colors: {
         variable: string;
         description: string;
     }[];
+    Categorical: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
 };

package/esm/commonStyles/colors/colorsConstant.js

@@ -304,5 +304,55 @@ export const Colors = {
             variable: "--duty-status-exemption",
             description: "To indicate an exemption "
         }
+    ],
+    Categorical: [
+        {
+            colorName: "categorical-light-blue",
+            text: "Light blue",
+            variable: "--data--categorical-light-blue",
+            description: "This color is the first color in the categorical color set."
+        },
+        {
+            colorName: "categorical-blue",
+            text: "Blue",
+            variable: "--data--categorical-blue",
+            description: "This color is the second color in the categorical color set."
+        },
+        {
+            colorName: "categorical-purple",
+            text: "Purple",
+            variable: "--data--categorical-purple",
+            description: "This color is the third color in the categorical color set."
+        },
+        {
+            colorName: "categorical-green",
+            text: "Green",
+            variable: "--data--categorical-green",
+            description: "This color is the fourth color in the categorical color set."
+        },
+        {
+            colorName: "categorical-orange",
+            text: "Orange",
+            variable: "--data--categorical-orange",
+            description: "This color is the fifth color in the categorical color set."
+        },
+        {
+            colorName: "categorical-yellow",
+            text: "Yellow",
+            variable: "--data--categorical-yellow",
+            description: "This color is the sixth color in the categorical color set."
+        },
+        {
+            colorName: "categorical-red",
+            text: "Red",
+            variable: "--data--categorical-red",
+            description: "This color is the seventh color in the categorical color set."
+        },
+        {
+            colorName: "categorical-grey",
+            text: "Grey",
+            variable: "--data--categorical-grey",
+            description: "This color is the eighth color in the categorical color set."
+        }
     ]
 };

package/esm/dataFeed/dataFeed.d.ts

@@ -26,10 +26,11 @@ export interface IDataFeed<T, N = T> extends IDataGrid<T, N> {
     expandedRows?: string[];
     onExpandedChange?: (id: string, isExpanded: boolean) => void;
     activePage?: number;
+    onClick?: (id: string) => void;
 }
 declare const EmptyList: FC<PropsWithChildren>;
 declare const Footer: FC<PropsWithChildren>;
-declare const DataFeedInner: <T extends IRowEntity<N>, N extends IEntityWithId>({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage, rowClassName, expandedRows, onExpandedChange, activePage }: IDataFeed<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const DataFeedInner: <T extends IRowEntity<N>, N extends IEntityWithId>({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage, rowClassName, expandedRows, onExpandedChange, activePage, onClick }: IDataFeed<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataFeedStaticProps {
     EmptyList: typeof EmptyList;
     Footer: typeof Footer;

package/esm/dataFeed/dataFeed.js

@@ -19,7 +19,7 @@ const checkCloseToTheEnd = (feedContainerElt) => {
     return distanceToTheBottom < endOfFeedThreshold;
 };
 const FIRST_RENDERED_ROWS = 50;
-const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage = 1000, rowClassName, expandedRows, onExpandedChange, activePage }, ref) => {
+const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, options, description, children, actions, actionsAsync, primaryActions, itemsPerPage = 1000, rowClassName, expandedRows, onExpandedChange, activePage, onClick }, ref) => {
     const [pages, setPages] = useState(1);
     const data = useMemo(() => entities.slice(0, itemsPerPage * pages), [entities, itemsPerPage, pages]);
     const initialVisibleRows = useMemo(() => data.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [data]);
@@ -91,8 +91,23 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
     }, true);
     const feedItems = useMemo(() => data.map((entity, index) => {
         const entityClassName = getRowClassName(rowClassName, entity);
-        return _jsx(FeedItem, { collapsedColumnsQty: collapsedColumnsQty, columnsList: columnsList, feedWrappers: feedWrappers || [], visibleColumns: visibleColumns, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, className: entityClassName, actions: actions, actionsAsync: actionsAsync, primaryActions: primaryActions, isRowExpanded: expandedRows && expandedRows.indexOf(entity.id) > -1, onExpandedChange: (isExpanded) => onExpandedChange && onExpandedChange(entity.id, isExpanded) }, entity.id);
-    }), [data, rowClassName, collapsedColumnsQty, columnsList, feedWrappers, visibleColumns, visibleRows, expanded, actions, actionsAsync, primaryActions, expandedRows, onExpandedChange]);
+        return _jsx(FeedItem, { collapsedColumnsQty: collapsedColumnsQty, columnsList: columnsList, feedWrappers: feedWrappers || [], visibleColumns: visibleColumns, entity: entity, visibleRows: visibleRows, index: index, expanded: expanded, className: entityClassName, actions: actions, actionsAsync: actionsAsync, primaryActions: primaryActions, isRowExpanded: expandedRows && expandedRows.indexOf(entity.id) > -1, onExpandedChange: (isExpanded) => onExpandedChange && onExpandedChange(entity.id, isExpanded), onClick: onClick }, entity.id);
+    }), [
+        data,
+        rowClassName,
+        collapsedColumnsQty,
+        columnsList,
+        feedWrappers,
+        visibleColumns,
+        visibleRows,
+        expanded,
+        actions,
+        actionsAsync,
+        primaryActions,
+        expandedRows,
+        onExpandedChange,
+        onClick
+    ]);
     return _jsx("div", { className: "zen-data-grid-wrapper", children: _jsxs("div", { className: classNames([
                 "zen-data-grid",
                 className || ""

package/esm/dataFeed/dataFeedColumnsItems.d.ts

@@ -23,6 +23,7 @@ interface IFeedItem<T extends IRowEntity<N>, N extends IEntityWithId> {
     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>[]);
+    onClick?: (id: string) => void;
 }
-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;
+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, onClick }: IFeedItem<T, N>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/dataFeed/dataFeedColumnsItems.js

@@ -13,7 +13,7 @@ const getIconFromColumnComponent = (column, entity, isNested) => {
     }
     return null;
 };
-const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className = "", isRowExpanded, onExpandedChange, actions, actionsAsync, primaryActions }) => {
+const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQty, visibleColumns, visibleRows, entity, index, className = "", isRowExpanded, onExpandedChange, actions, actionsAsync, primaryActions, onClick }) => {
     const { mainColumns, secondaryColumns } = useVisibleColumns(columnsList, expanded, { visibleColumns, collapsedColumnsQty });
     const mainColumnsMemoized = useMemo(() => mainColumns, [mainColumns]);
     const secondaryColumnsMemoized = useMemo(() => secondaryColumns, [secondaryColumns]);
@@ -97,15 +97,17 @@ const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQt
             const feedPlaceholder = getFeedPlaceholder(column);
             return _jsx(DataFeedCell, { limited: false, visibleOnHover: false, isVisible: isVisible, title: column.title, render: renderFeed, renderWrappers: renderWrappers, renderPlaceholder: feedPlaceholder, defaultValue: column.meta.defaultValue, entity: rowEntity, isNested: !nested }, `${entity.id}-${column.id}`);
         });
-        const onItemClick = nested && onExpandedChange
+        const onItemClick = nested && nested.length > 0 && onExpandedChange
             ? () => onExpandedChange(!isRowExpanded)
-            : undefined;
+            : onClick
+                ? () => onClick(entity.id)
+                : undefined;
         const icon = getIconFromColumnComponent(mainColumnsMemoized[0], rowEntity, !nested);
         const actionsNode = getActions();
         const renderFeedWrappers = getRenderFeedWrappers(feedWrappers, rowEntity, !nested);
         const key = !nested ? `nested_${rowEntity.id}` : rowEntity.id;
         return _jsx(DataFeedItem, { id: entity.id, index: index, onClick: onItemClick, className: className, icon: icon, identifier: mainColumnsData[0], primaryData: mainColumnsData.slice(1), secondaryData: secondaryColumnsData, actions: actionsNode, nestedData: nested && nested.length ? nested : undefined, renderFeedWrappers: renderFeedWrappers }, key);
-    }, [className, feedWrappers, index, isRowExpanded, isVisible, mainColumnsMemoized, onExpandedChange, secondaryColumnsMemoized, actions, actionsAsync, primaryActions, entity]);
+    }, [className, feedWrappers, index, isRowExpanded, isVisible, mainColumnsMemoized, onExpandedChange, secondaryColumnsMemoized, actions, actionsAsync, primaryActions, entity, onClick]);
     const nestedCells = useMemo(() => (entity.children && isRowExpanded ? entity.children : []).map(nestedEntity => renderCells(nestedEntity)), [entity.children, isRowExpanded, renderCells]);
     const cells = useMemo(() => renderCells(entity, nestedCells), [entity, nestedCells, renderCells]);
     return cells;

package/esm/dataGrid/cell/cell.d.ts

@@ -15,5 +15,6 @@ export interface IDataGridCell<T extends IEntityWithId> extends IZenComponentPro
     width?: number;
     colspan?: number;
     onClick?: () => void;
+    isActive?: boolean;
 }
-export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: <T extends IEntityWithId>({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }: IDataGridCell<T>) => import("react/jsx-runtime").JSX.Element;

package/esm/dataGrid/cell/cell.js

@@ -3,7 +3,7 @@ import { memo, useCallback, useEffect, useState } from "react";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { isPromiseLike } from "../columns/basicColumn";
 import { isActiveElement } from "../../list/utils/isActiveElement";
-const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick }) => {
+const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, renderWrappers, renderPlaceholder, defaultValue, entity, colspan, className, onClick, isActive }) => {
     const [content, setContent] = useState("");
     const placeholderRenderer = useCallback(() => {
         const renderFn = renderPlaceholder || (() => "...");
@@ -56,6 +56,7 @@ const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, render
     }, [onClick]);
     return _jsx("td", { colSpan: colspan, onClick: onCellClick, className: classNames([
             "zen-data-grid__row-cell",
+            isActive ? "zen-data-grid__row-cell--active" : "",
             className || "",
             index === 0 ? "zen-data-grid__row-cell--first" : "",
             visibleOnHover ? "zen-data-grid__row-cell--visible-on-hover" : "",

package/esm/dataGrid/dataGrid.d.ts

@@ -15,6 +15,8 @@ export interface IDataGrid<T, N = T> extends Omit<IZenComponentProps, "children"
     rowClassName?: TRowClassName<T>;
     expandedRows?: string[];
     onExpandedChange?: (id: string, isExpanded: boolean) => void;
+    active?: string | undefined;
+    onClick?: (id: string) => void;
 }
 export declare const NOT_INTERACTIVE_MODIFIER = "zen-data-grid--not-interactive";
 export declare const DRAGGING_MODIFIER = "zen-data-grid--dragging";
@@ -23,7 +25,7 @@ export declare const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll"
 export declare const MIN_CELL_WIDTH = 100;
 export declare const EmptyList: FC<PropsWithChildren>;
 export declare const Footer: FC<PropsWithChildren>;
-declare const DataGridInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, className, description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange }: IDataGrid<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const DataGridInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, className, description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange, active, onClick }: IDataGrid<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataGridStaticProps {
     EmptyList: typeof EmptyList;
     Footer: typeof Footer;

package/esm/dataGrid/dataGrid.js

@@ -63,7 +63,9 @@ const DataGridInner = ({
   children,
   rowClassName,
   expandedRows,
-  onExpandedChange
+  onExpandedChange,
+  active,
+  onClick
 }, ref) => {
   const {
     translate
@@ -204,10 +206,12 @@ const DataGridInner = ({
     className: getRowClassName(rowClassName, entity),
     expanded: expandedRows && expandedRows.indexOf(entity.id) > -1,
     onExpandedChange: entity.children && entity.children.length > 0 ? isExpanded => onExpandedChange && onExpandedChange(entity.id, isExpanded) : undefined,
+    isActive: active === entity.id,
+    onClick: onClick,
     isTreeGrid: isTreeGrid,
     ariaPosinset: entityIndex + 1,
     ariaSetsize: total
-  }, entity.id), [columnsList, expandedRows, flexibleColumnWidth, onExpandedChange, rowClassName, visibleRows, isTreeGrid]);
+  }, entity.id), [columnsList, expandedRows, flexibleColumnWidth, onExpandedChange, rowClassName, visibleRows, isTreeGrid, active, onClick]);
   const body = useMemo(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
   const headerContent = useMemo(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
   useResize(() => {
@@ -220,6 +224,7 @@ const DataGridInner = ({
       className: gridClasses,
       ref: gridRef,
       onScroll: handleScroll,
+      tabIndex: 0,
       children: [_jsxs("table", {
         className: "zen-data-grid__table",
         "aria-label": description,

package/esm/dataGrid/row/row.d.ts

@@ -15,6 +15,8 @@ export interface IDataGridRow<T extends IRowEntity<N>, N extends IEntityWithId>
     isTreeGrid: boolean;
     ariaPosinset: number;
     ariaSetsize: number;
+    isActive?: boolean;
+    onClick?: (id: string) => void;
 }
 export declare const MIN_CELL_WIDTH = 100;
-export declare const DataGridRow: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridRow: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive }: IDataGridRow<T, N>) => import("react/jsx-runtime").JSX.Element;

package/esm/dataGrid/row/row.js

@@ -4,7 +4,7 @@ import { classNames } from "../../commonHelpers/classNames/classNames";
 import { DataGridCell } from "../cell/cell";
 export const MIN_CELL_WIDTH = 100;
 const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, MIN_CELL_WIDTH));
-const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize }) => {
+const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive }) => {
     const isVisible = visibleRows.has(entity.id);
     const listOfDefaultWidthColumns = useMemo(() => columns.map(column => column.meta.defaultWidth), [columns]);
     const getColWidth = useCallback((columnIndex, colspan) => {
@@ -53,9 +53,9 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
                 ? column.columnComponent.renderNested.bind(column.columnComponent)
                 : column.columnComponent.render.bind(column.columnComponent))
             : column.columnComponent.render.bind(column.columnComponent);
-        acc.cells.push(_jsx(DataGridCell, { render: (e) => renderFn(e, isNested), renderPlaceholder: column.meta.renderPlaceholder, renderWrappers: renderWrappers, defaultValue: column.meta.defaultValue, entity: rowEntity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: column.meta.visibleOnHover ? 0 : width, isVisible: isVisible, colspan: colspan, onClick: !isNested && onExpandedChange ? () => onExpandedChange(!expanded) : undefined, className: isNested ? "zen-data-grid__row-cell--nested" : "" }, `${rowEntity.id}_${column.name}`));
+        acc.cells.push(_jsx(DataGridCell, { render: (e) => renderFn(e, isNested), renderPlaceholder: column.meta.renderPlaceholder, renderWrappers: renderWrappers, defaultValue: column.meta.defaultValue, entity: rowEntity, index: index, limited: limited, visibleOnHover: column.meta.visibleOnHover, width: column.meta.visibleOnHover ? 0 : width, isVisible: isVisible, colspan: colspan, onClick: !isNested && onExpandedChange ? () => onExpandedChange(!expanded) : (onClick ? () => onClick(rowEntity.id) : undefined), isActive: isActive, className: isNested ? "zen-data-grid__row-cell--nested" : "" }, `${rowEntity.id}_${column.name}`));
         return acc;
-    }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange]);
+    }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, onClick]);
     const cells = useMemo(() => renderCells(entity, false), [entity, renderCells]);
     const nestedCells = useMemo(() => (expanded && entity.children ? entity.children : []).map((nestedEntity) => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
     return _jsxs(_Fragment, { children: [_jsx("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: classNames([