@geotab/zenith 3.2.1 → 3.3.0

package/README.md

@@ -40,7 +40,31 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
-### 3.2.0
+### 3.3.0
+
+**🎉 Introducing Detail Panel in Table**
+
+Table just got more powerful with the new `DetailPanel` feature. When a row is clicked, a side panel appears with detailed information about that row. This keeps your table clean and focused while providing easy access to comprehensive details, metadata, or related content.
+
+**Enhanced accessibility and polish**
+
+This release includes numerous accessibility improvements and visual refinements to ensure a better experience for all users.
+
+Change log:
+
+* New `DetailPanel` feature in `Table` for expandable row details
+* Fixed `Select` not closing on Escape key when inside `Modal`
+* Fixed accessibility issues in `Table`, `Header`, and `Checkbox` components
+* Improved button styles in `MobileSheet`
+* Fixed `Chart` tooltip not displaying when value is 0
+* Fixed shadow styling in `SummaryTile`
+* Upgraded Storybook to version 10
+* Updated default color palette in `Chart`
+* Fixed rendering issue in `PillExpandable`
+* Added support for two-line header text and toggle button in `Card`
+* Added user title property to actionable `Pill`
+
+### 3.2.1
 
 **🎉 Form experience is here!**
 

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

@@ -92,13 +92,15 @@ const favoriteButton_1 = require("../favoriteButton/favoriteButton");
 const getIconFromStatus_1 = require("./helpers/getIconFromStatus");
 const getIconTypeFromStatus_1 = require("./helpers/getIconTypeFromStatus");
 const isFormSection_1 = require("../formSection/utils/isFormSection");
-// import { FormSection } from "../formSection/formSection";
+const cardToggle_1 = require("./components/cardToggle/cardToggle");
+const toggleButton_1 = require("../toggleButton/toggleButton");
 exports.DEFAULT_CARD_SIZE = "S";
 // eslint-disable-next-line @typescript-eslint/naming-convention, react/prop-types
 const Card =
 // eslint-disable-next-line complexity
 props => {
   const {
+    id,
     size,
     children,
     title,
@@ -143,7 +145,8 @@ props => {
   (0, useCardSize_1.useCardSize)(setCardSize, containerRef, (0, isAbsoluteSize_1.isAbsoluteSize)(size) ? (0, getContainerSize_1.getContainerSize)(size.width) : size || "S");
   const {
     actions,
-    content
+    content,
+    toggle
   } = (0, react_1.useMemo)(() => {
     if (!children) {
       return {
@@ -154,6 +157,7 @@ props => {
     if (Array.isArray(children)) {
       const acts = [];
       const cnt = [];
+      let tgl;
       react_1.default.Children.forEach(children, el => {
         if (!el) {
           return;
@@ -174,10 +178,14 @@ props => {
         if (el.type === exports.Card.Content || (0, isFormSection_1.isFormSection)(el)) {
           cnt.push(el);
         }
+        if (el.type === exports.Card.Toggle) {
+          tgl = el;
+        }
       });
       return {
         actions: acts,
-        content: cnt
+        content: cnt,
+        toggle: tgl
       };
     }
     return {
@@ -249,6 +257,7 @@ props => {
   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, {
+    id: id,
     isMobile: isMobile,
     fullWidth: isFullWidth,
     fullHeight: isFullHeight,
@@ -283,7 +292,7 @@ props => {
             tooltip: tooltip,
             tooltipAlignment: tooltipAlignment,
             tooltipSize: tooltipSize
-          }), !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, {
+          }), toggle ? (0, jsx_runtime_1.jsx)(toggleButton_1.ToggleButton, Object.assign({}, toggle.props)) : null, !!menuActions.length && (0, jsx_runtime_1.jsx)(menu_1.Menu, {
             trigger: menuTrigger,
             title: title || translate("Actions"),
             children: menuActions.map((action, index) => {
@@ -310,4 +319,5 @@ exports.Card = Card;
 exports.TRANSLATIONS = ["Actions"];
 exports.Card.Actions = actions_1.Actions;
 exports.Card.Content = content_1.Content;
-exports.Card.Button = cardButton_1.CardButton;
+exports.Card.Button = cardButton_1.CardButton;
+exports.Card.Toggle = cardToggle_1.CardToggle;

package/dist/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/dist/card/components/cardToggle/cardToggle.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const toggleButtonRaw_1 = require("../../../toggleButtonRaw/toggleButtonRaw");
+const CardToggle = (props) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(toggleButtonRaw_1.ToggleButtonRaw, Object.assign({}, props)) });
+exports.CardToggle = CardToggle;

package/dist/card/components/title.js

@@ -15,12 +15,12 @@ const Title = ({ isMobile, link, target, title, id, icon, iconType, className =
     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 chevron = (0, react_1.useMemo)(() => (0, jsx_runtime_1.jsx)("span", { 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] })] });
+                ? (0, jsx_runtime_1.jsx)("a", { id: id, className: (0, classNames_1.classNames)(["zen-card-title__link"]), href: link, target: target, children: (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: [title, chevron] }) })
+                : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("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/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/dist/cardContainer/cardContainer.js

@@ -7,7 +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");
-const CardContainer = ({ size, children, fullWidth = false, className = "", isMobile = false, fullHeight = false, autoHeight = false, scrollable = true, ref }) => {
+const CardContainer = ({ id, size, children, fullWidth = false, className = "", isMobile = false, fullHeight = false, autoHeight = false, scrollable = true, noWidthConstraint = false, ref }) => {
     const isDesktop = !isMobile;
     const isAbsolute = (0, isAbsoluteSize_1.isAbsoluteSize)(size);
     const containerClassNames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)([
@@ -18,9 +18,10 @@ const CardContainer = ({ size, children, fullWidth = false, className = "", isMo
         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 = (0, useAbsoluteSize_1.useAbsoluteSize)(size, isMobile, autoHeight, fullWidth);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: style, className: containerClassNames, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, ref: ref, style: style, className: containerClassNames, children: children }));
 };
 exports.CardContainer = CardContainer;

package/dist/chart/barChart/getDefaultDatasetStyle.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultDatasetStyle = void 0;
 const baseColors = [
-    "#2853BD",
-    "#DA7C3A",
-    "#4AA75E",
-    "#1098FF",
-    "#3852D6",
-    "#D35D80"
+    "#3CCDE5",
+    "#428AFF",
+    "#8256E5",
+    "#06C989",
+    "#F98C41",
+    "#F5BD60",
+    "#E56A6A",
+    "#8A94A2"
 ];
 const getDefaultDatasetStyle = (dataSet, dsIndex) => {
     var _a, _b;

package/dist/chart/lineChart/getDatasetColor.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDatasetColor = void 0;
 const baseColors = [
-    "#2853BD",
-    "#DA7C3A",
-    "#4AA75E",
-    "#1098FF",
-    "#3852D6",
-    "#D35D80"
+    "#3CCDE5",
+    "#428AFF",
+    "#8256E5",
+    "#06C989",
+    "#F98C41",
+    "#F5BD60",
+    "#E56A6A",
+    "#8A94A2"
 ];
 const getDatasetColor = (index) => baseColors[index % baseColors.length];
 exports.getDatasetColor = getDatasetColor;

package/dist/chart/lineChart/useSummary.js

@@ -51,7 +51,7 @@ 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 = (0, react_1.useMemo)(() => {
         if (summary && summary.title) {

package/dist/chart/pieChart/getDefaultDatasetStyle.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultDatasetStyle = void 0;
 const baseColors = [
-    "#2853BD",
-    "#DA7C3A",
-    "#4AA75E",
-    "#1098FF",
-    "#3852D6",
-    "#D35D80"
+    "#3CCDE5",
+    "#428AFF",
+    "#8256E5",
+    "#06C989",
+    "#F98C41",
+    "#F5BD60",
+    "#E56A6A",
+    "#8A94A2"
 ];
 const getDefaultDatasetStyle = (dataSet) => {
     const newDataSet = Object.assign({}, dataSet);

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

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

package/dist/chart/plugins/linePlugin/linePlugin.js

@@ -68,13 +68,13 @@ 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 = {
@@ -96,8 +96,20 @@ const LinePlugin = (containerId, options, isDark) => ({
             const scrollableParent = (0, getScrollableParent_1.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
             (0, renderTooltip_1.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/dist/commonHelpers/hooks/useEscape.js

@@ -8,6 +8,9 @@ const useKeydown_1 = require("./useKeydown");
 const useEscape = (containerRef, callback, subscriptionTrigger, condition) => {
     const handleKeyDown = (0, react_1.useCallback)((e) => {
         if (e.key === "Escape") {
+            if (e.defaultPrevented) {
+                return;
+            }
             const target = e.target;
             if (!target || !containerRef.current) {
                 return;
@@ -16,6 +19,7 @@ const useEscape = (containerRef, callback, subscriptionTrigger, condition) => {
             const focusable = containerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
             if (isPopupFocused || !focusable.length) {
                 callback(e);
+                e.preventDefault();
                 return;
             }
         }

package/dist/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/dist/commonHelpers/hooks/usePillSize.js

@@ -6,13 +6,13 @@ const classNames_1 = require("../classNames/classNames");
 const useResize_1 = require("./useResize");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const PILL_WIDTH_WITHOUT_CONTENT = 64;
-const usePillSize = ({ size, iconPosition, onClose, hasContent }) => {
+const usePillSize = ({ size, iconPosition, onClose, hasContent, initialTitle }) => {
     const isFixedSize = size && size !== "default" && size !== "fullWidth";
     const hasIcon = !!iconPosition;
     const isClosable = !!onClose;
     const [isContentHidden, setIsContentHidden] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
-    const [title, setTitle] = (0, react_1.useState)("");
+    const [title, setTitle] = (0, react_1.useState)(initialTitle || "");
     const driveClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-new-content");
     const contentClasses = (0, classNames_1.classNames)([
         "zen-pill-new-content",
@@ -41,6 +41,9 @@ const usePillSize = ({ size, iconPosition, onClose, hasContent }) => {
         hidePillContent();
     }, true);
     (0, react_1.useLayoutEffect)(() => {
+        if (initialTitle) {
+            return;
+        }
         if (ref.current) {
             setTitle(ref.current.textContent || "");
         }
@@ -48,7 +51,7 @@ 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 };
 };
 exports.usePillSize = usePillSize;

package/dist/commonStyles/colors/colors.less

@@ -71,6 +71,15 @@
     --duty-status-rest:         #FE6867;
     --duty-status-drive:        #49C649;
     --duty-status-exemption:    #4E677E;
+
+    --data--categorical-light-blue: #3CCDE5;
+    --data--categorical-blue: #428AFF;
+    --data--categorical-purple: #8256E5;
+    --data--categorical-green: #06C989;
+    --data--categorical-orange: #F98C41;
+    --data--categorical-yellow: #F5BD60;
+    --data--categorical-red: #E56A6A;
+    --data--categorical-grey: #8A94A2;
 }
 
 .zen-dark {

package/dist/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/dist/dataFeed/dataFeed.js

@@ -22,7 +22,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] = (0, react_1.useState)(1);
     const data = (0, react_1.useMemo)(() => entities.slice(0, itemsPerPage * pages), [entities, itemsPerPage, pages]);
     const initialVisibleRows = (0, react_1.useMemo)(() => data.slice(0, FIRST_RENDERED_ROWS).map(r => r.id), [data]);
@@ -94,8 +94,23 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
     }, true);
     const feedItems = (0, react_1.useMemo)(() => data.map((entity, index) => {
         const entityClassName = (0, getRowClassName_1.getRowClassName)(rowClassName, entity);
-        return (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.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 (0, jsx_runtime_1.jsx)(dataFeedColumnsItems_1.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 (0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid-wrapper", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)([
                 "zen-data-grid",
                 className || ""

package/dist/dataFeed/dataFeedColumnsItems.d.ts

@@ -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/dist/dataFeed/dataFeedColumnsItems.js

@@ -16,7 +16,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 } = (0, useVisibleColumns_1.useVisibleColumns)(columnsList, expanded, { visibleColumns, collapsedColumnsQty });
     const mainColumnsMemoized = (0, react_1.useMemo)(() => mainColumns, [mainColumns]);
     const secondaryColumnsMemoized = (0, react_1.useMemo)(() => secondaryColumns, [secondaryColumns]);
@@ -100,15 +100,17 @@ const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQt
             const feedPlaceholder = getFeedPlaceholder(column);
             return (0, jsx_runtime_1.jsx)(dataFeedCell_1.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 (0, jsx_runtime_1.jsx)(feedItem_1.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 = (0, react_1.useMemo)(() => (entity.children && isRowExpanded ? entity.children : []).map(nestedEntity => renderCells(nestedEntity)), [entity.children, isRowExpanded, renderCells]);
     const cells = (0, react_1.useMemo)(() => renderCells(entity, nestedCells), [entity, nestedCells, renderCells]);
     return cells;

package/dist/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/dist/dataGrid/cell/cell.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const basicColumn_1 = require("../columns/basicColumn");
 const isActiveElement_1 = require("../../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] = (0, react_1.useState)("");
     const placeholderRenderer = (0, react_1.useCallback)(() => {
         const renderFn = renderPlaceholder || (() => "...");
@@ -59,6 +59,7 @@ const Cell = ({ index, limited, visibleOnHover, isVisible, width, render, render
     }, [onClick]);
     return (0, jsx_runtime_1.jsx)("td", { colSpan: colspan, onClick: onCellClick, className: (0, classNames_1.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/dist/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/dist/dataGrid/dataGrid.js

@@ -73,7 +73,9 @@ const DataGridInner = ({
   children,
   rowClassName,
   expandedRows,
-  onExpandedChange
+  onExpandedChange,
+  active,
+  onClick
 }, ref) => {
   const {
     translate
@@ -214,10 +216,12 @@ const DataGridInner = ({
     className: (0, getRowClassName_1.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 = (0, react_1.useMemo)(() => entities.map((entity, entityIndex) => renderRow(entity, entityIndex, entities.length)), [entities, renderRow]);
   const headerContent = (0, react_1.useMemo)(() => columnsList.map((column, index) => renderHeaderCell(column, index)), [columnsList, renderHeaderCell]);
   (0, useResize_1.useResize)(() => {
@@ -230,6 +234,7 @@ const DataGridInner = ({
       className: gridClasses,
       ref: gridRef,
       onScroll: handleScroll,
+      tabIndex: 0,
       children: [(0, jsx_runtime_1.jsxs)("table", {
         className: "zen-data-grid__table",
         "aria-label": description,

package/dist/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/dist/dataGrid/row/row.js

@@ -7,7 +7,7 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const cell_1 = require("../cell/cell");
 exports.MIN_CELL_WIDTH = 100;
 const getColumnWidth = (defaultWidth) => Math.floor(Math.max(defaultWidth, exports.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 = (0, react_1.useMemo)(() => columns.map(column => column.meta.defaultWidth), [columns]);
     const getColWidth = (0, react_1.useCallback)((columnIndex, colspan) => {
@@ -56,9 +56,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((0, jsx_runtime_1.jsx)(cell_1.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((0, jsx_runtime_1.jsx)(cell_1.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 = (0, react_1.useMemo)(() => renderCells(entity, false), [entity, renderCells]);
     const nestedCells = (0, react_1.useMemo)(() => (expanded && entity.children ? entity.children : []).map((nestedEntity) => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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: (0, classNames_1.classNames)([