@geotab/zenith 3.4.0 → 3.4.1

package/README.md

@@ -40,6 +40,13 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+
+### 3.4.1
+
+* Fix positioning line chart tooltip with scroll
+* Fix empty list in mobile table
+* Fix screen reader not announcing description when pill is expanded
+
 ### 3.4.0
 
 * Integrate Tooltip with Zenith components

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

@@ -5,7 +5,6 @@ const formatValue_1 = require("../legend/formatValue");
 const renderTooltip_1 = require("../tooltip/renderTooltip");
 const getInterpolatedValue_1 = require("./getInterpolatedValue");
 const drawLine_1 = require("./drawLine");
-const getScrollableParent_1 = require("../../../utils/getScrollableParent");
 const LinePlugin = (containerId, options, isDark) => ({
     id: "verticalLine",
     afterInit: (chart) => {
@@ -44,6 +43,7 @@ const LinePlugin = (containerId, options, isDark) => ({
         canvas.addEventListener("mouseout", chart.verticalLine.mouseOut);
     },
     afterDraw: (chart) => {
+        var _a, _b;
         if (options === false) {
             return;
         }
@@ -93,9 +93,8 @@ const LinePlugin = (containerId, options, isDark) => ({
             const chartRect = chart.canvas.getBoundingClientRect();
             const top = chartRect.top + (lowestValueY || y);
             const left = chartRect.left + x;
-            const scrollableParent = (0, getScrollableParent_1.getScrollableParent)(chart.canvas);
-            const scrollTop = scrollableParent ? scrollableParent.scrollTop : 0;
-            const scrollLeft = scrollableParent ? scrollableParent.scrollLeft : 0;
+            const scrollTop = document.body.scrollTop + (((_a = document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+            const scrollLeft = document.body.scrollLeft + (((_b = document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
             let elementIdx = undefined;
             const elementIds = new Set(chart.getActiveElements().map(el => el.index));
             if (elementIds.size === 1) {

package/dist/dataFeed/dataFeed.d.ts

@@ -28,8 +28,8 @@ export interface IDataFeed<T, N = T> extends IDataGrid<T, N> {
     activePage?: number;
     onClick?: (id: string) => void;
 }
-declare const EmptyList: FC<PropsWithChildren>;
-declare const Footer: FC<PropsWithChildren>;
+export declare const EmptyList: FC<PropsWithChildren>;
+export 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, onClick }: IDataFeed<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataFeedStaticProps {
     EmptyList: typeof EmptyList;

package/dist/dataFeed/dataFeed.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataFeed = void 0;
+exports.DataFeed = exports.Footer = exports.EmptyList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
@@ -10,7 +10,9 @@ const useResize_1 = require("../commonHelpers/hooks/useResize");
 const dataFeedColumnsItems_1 = require("./dataFeedColumnsItems");
 const getRowClassName_1 = require("../dataGrid/getRowClassName");
 const EmptyList = ({ children }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-data-feed__empty", children: children });
+exports.EmptyList = EmptyList;
 const Footer = ({ children }) => (0, jsx_runtime_1.jsx)("div", { className: "zen-data-feed__footer", children: children });
+exports.Footer = Footer;
 const endOfFeedThreshold = 100;
 const checkCloseToTheEnd = (feedContainerElt) => {
     const feedElt = feedContainerElt === null || feedContainerElt === void 0 ? void 0 : feedContainerElt.querySelector(".zen-data-feed");
@@ -43,8 +45,8 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
     (0, react_1.useImperativeHandle)(ref, () => feedRef.current, []);
     const columnsList = (0, react_1.useMemo)(() => columns.map(toBasicColumn_1.toBasicColumn), [columns]);
     const itemsMap = (0, react_1.useMemo)(() => new Map(data.map(entity => [entity.id, entity])), [data]);
-    const emptyList = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === EmptyList), [children]);
-    const footer = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === Footer), [children]);
+    const emptyList = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.EmptyList), [children]);
+    const footer = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.Footer), [children]);
     const getVisibleItems = () => {
         if (!feedRef.current) {
             return [];
@@ -118,5 +120,5 @@ const DataFeedInner = ({ entities, columns, feedWrappers, className, expanded, o
 };
 const DataFeed = (0, react_1.forwardRef)(DataFeedInner);
 exports.DataFeed = DataFeed;
-DataFeed.EmptyList = EmptyList;
-DataFeed.Footer = Footer;
+DataFeed.EmptyList = exports.EmptyList;
+DataFeed.Footer = exports.Footer;

package/dist/pillExpandable/pillContent.d.ts

@@ -10,6 +10,7 @@ interface IPillContent {
     onActionClick: () => void;
     isVisible?: boolean;
     errorHandler: (err: any) => ReactNode | undefined;
+    descriptionId?: string;
 }
 export declare const PillContent: React.FC<IPillContent>;
 export {};

package/dist/pillExpandable/pillContent.js

@@ -7,7 +7,7 @@ const button_1 = require("../button/button");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const lazyContent_1 = require("../skeleton/lazyContent");
-const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler }) => {
+const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
     const headerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__header-text");
     const descriptionDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill-popup__description");
     const mainActionClick = (0, react_1.useCallback)((onClick) => () => {
@@ -20,7 +20,7 @@ const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction
     }, [onActionClick]);
     const renderMainButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? mainActionClick(data.onClick) : undefined, type: "primary", children: data.text })), [mainActionClick]);
     const renderSecondaryButton = (0, react_1.useCallback)((data) => (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? secondaryActionClick(data.onClick) : undefined, type: "tertiary", children: data.text })), [secondaryActionClick]);
-    const renderDescription = (0, react_1.useCallback)(data => (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName]);
+    const renderDescription = (0, react_1.useCallback)(data => (0, jsx_runtime_1.jsx)("div", { id: descriptionId, className: (0, classNames_1.classNames)(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName, descriptionId]);
     const renderCount = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = (0, react_1.useCallback)((data) => data ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(date || count) && isVisible && (0, jsx_runtime_1.jsxs)("div", { className: "zen-status-pill-popup__content-header", children: [date && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && (0, jsx_runtime_1.jsx)(lazyContent_1.LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&

package/dist/pillExpandable/pillExpandable.js

@@ -160,6 +160,7 @@ const PillExpandableBase = ({
 }) => {
   const popupId = (0, react_1.useId)();
   const pillId = (0, react_1.useId)();
+  const descriptionId = (0, react_1.useId)();
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
@@ -304,7 +305,8 @@ const PillExpandableBase = ({
         onExpand: handleChildToggle,
         expandAriaText: translate("Expand"),
         type: type,
-        errorHandler: errorHandler
+        errorHandler: errorHandler,
+        descriptionId: descriptionId
       }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
         onActionClick: handleChildToggle,
         descriptionText: content.description,
@@ -313,7 +315,8 @@ const PillExpandableBase = ({
         mainAction: content.mainAction,
         secondaryAction: content.secondaryAction,
         isVisible: isExpanded,
-        errorHandler: errorHandler
+        errorHandler: errorHandler,
+        descriptionId: descriptionId
       })]
     });
   }
@@ -374,7 +377,8 @@ const PillExpandableBase = ({
                 expandAriaText: translate("Expand"),
                 type: type,
                 errorHandler: errorHandler,
-                isBeta: isBeta
+                isBeta: isBeta,
+                descriptionId: descriptionId
               })
             }), (0, jsx_runtime_1.jsx)(pillContent_1.PillContent, {
               onActionClick: handlePopupToggle,
@@ -383,7 +387,8 @@ const PillExpandableBase = ({
               count: content.count,
               mainAction: content.mainAction,
               secondaryAction: content.secondaryAction,
-              errorHandler: errorHandler
+              errorHandler: errorHandler,
+              descriptionId: descriptionId
             }), childToDisplay, moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
               children: [(0, jsx_runtime_1.jsx)("div", {
                 className: "zen-status-pill-popup__divider"

package/dist/pillExpandable/pillExpandableSimple.d.ts

@@ -9,9 +9,10 @@ interface IPillExpandableSimple extends IPillExpandable {
     icon?: FC<IIcon> | false;
     isBeta?: boolean;
     ref?: RefObject<HTMLButtonElement | null>;
+    descriptionId?: string;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/pillExpandable/pillExpandableSimple.js

@@ -8,7 +8,7 @@ const iconChevronTop_1 = require("../icons/iconChevronTop");
 const iconChevronBottom_1 = require("../icons/iconChevronBottom");
 const iconException_1 = require("../icons/iconException");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
-const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, ref }) => {
+const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, ref, descriptionId }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
     const containerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-status-pill__container");
     const onExpandHandler = (0, react_1.useCallback)(() => {
@@ -20,7 +20,7 @@ const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includ
     const hasText = (text || "").trim().length > 0;
     return (0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classNames_1.classNames)([
             "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", "zen-ellipsis"
-        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, children: [icon !== false && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
                     hasText ? "" : "zen-status-pill__icon--standalone"

package/dist/table/children/useTableChildren.js

@@ -14,6 +14,7 @@ const fullscreenButton_1 = require("../../dataGrid/entitiesListActions/actions/f
 const tableEmpty_1 = require("./tableEmpty");
 const emptySearchList_1 = require("../../dataGrid/emptySearchList/emptySearchList");
 const dataGrid_1 = require("../../dataGrid/dataGrid");
+const dataFeed_1 = require("../../dataFeed/dataFeed");
 const tableFooter_1 = require("./tableFooter");
 const tableDetailPanel_1 = require("./tableDetailPanel");
 const detailPanel_1 = require("../detailPanel/detailPanel");
@@ -67,7 +68,8 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
         }
         if (isChildElement(child, tableEmpty_1.TableEmpty.displayName)) {
             // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            emptyList = (0, react_1.createElement)(dataGrid_1.EmptyList, {}, (0, react_1.createElement)(emptySearchList_1.EmptySearchList, {
+            const EmptyListComponent = isMobile ? dataFeed_1.EmptyList : dataGrid_1.EmptyList;
+            emptyList = (0, react_1.createElement)(EmptyListComponent, {}, (0, react_1.createElement)(emptySearchList_1.EmptySearchList, {
                 description: child.props.description,
                 image: child.props.image,
                 className: child.props.className
@@ -86,7 +88,8 @@ const useTableChildren = (children, isMobile, selected, allSelected, clearSelect
             return;
         }
         if (isChildElement(child, tableFooter_1.TableFooter.displayName)) {
-            footer = (0, react_1.createElement)(dataGrid_1.Footer, {}, child.props.children);
+            const FooterComponent = isMobile ? dataFeed_1.Footer : dataGrid_1.Footer;
+            footer = (0, react_1.createElement)(FooterComponent, {}, child.props.children);
             return;
         }
         other.push(child);

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

@@ -2,7 +2,6 @@ import { formatValue } from "../legend/formatValue";
 import { destroyTooltip, hideTooltip, renderTooltip } from "../tooltip/renderTooltip";
 import { getInterpolatedValue } from "./getInterpolatedValue";
 import { drawLine } from "./drawLine";
-import { getScrollableParent } from "../../../utils/getScrollableParent";
 export const LinePlugin = (containerId, options, isDark) => ({
     id: "verticalLine",
     afterInit: (chart) => {
@@ -41,6 +40,7 @@ export const LinePlugin = (containerId, options, isDark) => ({
         canvas.addEventListener("mouseout", chart.verticalLine.mouseOut);
     },
     afterDraw: (chart) => {
+        var _a, _b;
         if (options === false) {
             return;
         }
@@ -90,9 +90,8 @@ export const LinePlugin = (containerId, options, isDark) => ({
             const chartRect = chart.canvas.getBoundingClientRect();
             const top = chartRect.top + (lowestValueY || y);
             const left = chartRect.left + x;
-            const scrollableParent = getScrollableParent(chart.canvas);
-            const scrollTop = scrollableParent ? scrollableParent.scrollTop : 0;
-            const scrollLeft = scrollableParent ? scrollableParent.scrollLeft : 0;
+            const scrollTop = document.body.scrollTop + (((_a = document.body.parentElement) === null || _a === void 0 ? void 0 : _a.scrollTop) || 0);
+            const scrollLeft = document.body.scrollLeft + (((_b = document.body.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0);
             let elementIdx = undefined;
             const elementIds = new Set(chart.getActiveElements().map(el => el.index));
             if (elementIds.size === 1) {

package/esm/dataFeed/dataFeed.d.ts

@@ -28,8 +28,8 @@ export interface IDataFeed<T, N = T> extends IDataGrid<T, N> {
     activePage?: number;
     onClick?: (id: string) => void;
 }
-declare const EmptyList: FC<PropsWithChildren>;
-declare const Footer: FC<PropsWithChildren>;
+export declare const EmptyList: FC<PropsWithChildren>;
+export 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, onClick }: IDataFeed<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataFeedStaticProps {
     EmptyList: typeof EmptyList;

package/esm/dataFeed/dataFeed.js

@@ -6,8 +6,8 @@ import { toBasicColumn } from "../dataGrid/extensions/toBasicColumn";
 import { useResize } from "../commonHelpers/hooks/useResize";
 import { FeedItem } from "./dataFeedColumnsItems";
 import { getRowClassName } from "../dataGrid/getRowClassName";
-const EmptyList = ({ children }) => _jsx("div", { className: "zen-data-feed__empty", children: children });
-const Footer = ({ children }) => _jsx("div", { className: "zen-data-feed__footer", children: children });
+export const EmptyList = ({ children }) => _jsx("div", { className: "zen-data-feed__empty", children: children });
+export const Footer = ({ children }) => _jsx("div", { className: "zen-data-feed__footer", children: children });
 const endOfFeedThreshold = 100;
 const checkCloseToTheEnd = (feedContainerElt) => {
     const feedElt = feedContainerElt === null || feedContainerElt === void 0 ? void 0 : feedContainerElt.querySelector(".zen-data-feed");

package/esm/pillExpandable/pillContent.d.ts

@@ -10,6 +10,7 @@ interface IPillContent {
     onActionClick: () => void;
     isVisible?: boolean;
     errorHandler: (err: any) => ReactNode | undefined;
+    descriptionId?: string;
 }
 export declare const PillContent: React.FC<IPillContent>;
 export {};

package/esm/pillExpandable/pillContent.js

@@ -4,7 +4,7 @@ import { Button } from "../button/button";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { LazyContent } from "../skeleton/lazyContent";
-export const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler }) => {
+export const PillContent = ({ date, count, descriptionText, mainAction, secondaryAction, onActionClick, isVisible = true, errorHandler, descriptionId }) => {
     const headerDriveClassName = useDriveClassName("zen-status-pill-popup__header-text");
     const descriptionDriveClassName = useDriveClassName("zen-status-pill-popup__description");
     const mainActionClick = useCallback((onClick) => () => {
@@ -17,7 +17,7 @@ export const PillContent = ({ date, count, descriptionText, mainAction, secondar
     }, [onActionClick]);
     const renderMainButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? mainActionClick(data.onClick) : undefined, type: "primary", children: data.text })), [mainActionClick]);
     const renderSecondaryButton = useCallback((data) => _jsx(Button, Object.assign({ link: data.link }, data.linkOptions, { onClick: data.onClick ? secondaryActionClick(data.onClick) : undefined, type: "tertiary", children: data.text })), [secondaryActionClick]);
-    const renderDescription = useCallback(data => _jsx("div", { className: classNames(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName]);
+    const renderDescription = useCallback(data => _jsx("div", { id: descriptionId, className: classNames(["zen-status-pill-popup__description", descriptionDriveClassName || ""]), children: data }), [descriptionDriveClassName, descriptionId]);
     const renderCount = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text zen-status-pill-popup__header-text--left", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     const renderDate = useCallback((data) => data ? _jsx("div", { className: classNames(["zen-status-pill-popup__header-text", headerDriveClassName || ""]), children: data }) : null, [headerDriveClassName]);
     return _jsxs(_Fragment, { children: [(date || count) && isVisible && _jsxs("div", { className: "zen-status-pill-popup__content-header", children: [date && _jsx(LazyContent, { width: 80, type: "text", content: date, isVisible: isVisible, errorHandler: errorHandler, render: renderDate }), count && _jsx(LazyContent, { width: 80, type: "text", content: count, isVisible: isVisible, errorHandler: errorHandler, render: renderCount })] }), descriptionText &&

package/esm/pillExpandable/pillExpandable.js

@@ -152,6 +152,7 @@ const PillExpandableBase = ({
 }) => {
   const popupId = useId();
   const pillId = useId();
+  const descriptionId = useId();
   const {
     translate
   } = useLanguage();
@@ -296,7 +297,8 @@ const PillExpandableBase = ({
         onExpand: handleChildToggle,
         expandAriaText: translate("Expand"),
         type: type,
-        errorHandler: errorHandler
+        errorHandler: errorHandler,
+        descriptionId: descriptionId
       }), _jsx(PillContent, {
         onActionClick: handleChildToggle,
         descriptionText: content.description,
@@ -305,7 +307,8 @@ const PillExpandableBase = ({
         mainAction: content.mainAction,
         secondaryAction: content.secondaryAction,
         isVisible: isExpanded,
-        errorHandler: errorHandler
+        errorHandler: errorHandler,
+        descriptionId: descriptionId
       })]
     });
   }
@@ -366,7 +369,8 @@ const PillExpandableBase = ({
                 expandAriaText: translate("Expand"),
                 type: type,
                 errorHandler: errorHandler,
-                isBeta: isBeta
+                isBeta: isBeta,
+                descriptionId: descriptionId
               })
             }), _jsx(PillContent, {
               onActionClick: handlePopupToggle,
@@ -375,7 +379,8 @@ const PillExpandableBase = ({
               count: content.count,
               mainAction: content.mainAction,
               secondaryAction: content.secondaryAction,
-              errorHandler: errorHandler
+              errorHandler: errorHandler,
+              descriptionId: descriptionId
             }), childToDisplay, moreCounter && viewMoreAction && childCount > MAX_PILLS_TO_DISPLAY_IN_POPUP && _jsxs(_Fragment, {
               children: [_jsx("div", {
                 className: "zen-status-pill-popup__divider"

package/esm/pillExpandable/pillExpandableSimple.d.ts

@@ -9,9 +9,10 @@ interface IPillExpandableSimple extends IPillExpandable {
     icon?: FC<IIcon> | false;
     isBeta?: boolean;
     ref?: RefObject<HTMLButtonElement | null>;
+    descriptionId?: string;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ onExpand, expandAriaText, text, expanded, includeExpandIcon, type, icon, isBeta, ref, descriptionId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/esm/pillExpandable/pillExpandableSimple.js

@@ -5,7 +5,7 @@ import { IconChevronTop } from "../icons/iconChevronTop";
 import { IconChevronBottom } from "../icons/iconChevronBottom";
 import { IconException } from "../icons/iconException";
 import { classNames } from "../commonHelpers/classNames/classNames";
-export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, ref }) => {
+export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded, includeExpandIcon = true, type = "warning", icon = IconException, isBeta, ref, descriptionId }) => {
     const iconDriveClassName = useDriveClassName("icon");
     const containerDriveClassName = useDriveClassName("zen-status-pill__container");
     const onExpandHandler = useCallback(() => {
@@ -17,7 +17,7 @@ export const PillExpandableSimple = ({ onExpand, expandAriaText, text, expanded,
     const hasText = (text || "").trim().length > 0;
     return _jsxs("button", { type: "button", className: classNames([
             "zen-status-pill__container", `zen-status-pill__container--${type}`, containerDriveClassName || "", "zen-ellipsis"
-        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, children: [icon !== false && _jsx("div", { className: classNames([
+        ]), ref: ref, onClick: onExpandHandler, tabIndex: !includeExpandIcon ? -1 : undefined, "aria-describedby": descriptionId, children: [icon !== false && _jsx("div", { className: classNames([
                     "zen-status-pill__icon",
                     `zen-status-pill__icon--${type}`,
                     hasText ? "" : "zen-status-pill__icon--standalone"

package/esm/table/children/useTableChildren.js

@@ -10,7 +10,8 @@ import { TableFullscreen } from "./tableFullscreen";
 import { FullScreenButton } from "../../dataGrid/entitiesListActions/actions/fullscreenButton";
 import { TableEmpty } from "./tableEmpty";
 import { EmptySearchList } from "../../dataGrid/emptySearchList/emptySearchList";
-import { EmptyList, Footer } from "../../dataGrid/dataGrid";
+import { EmptyList as DataGridEmptyList, Footer as DataGridFooter } from "../../dataGrid/dataGrid";
+import { EmptyList as DataFeedEmptyList, Footer as DataFeedFooter } from "../../dataFeed/dataFeed";
 import { TableFooter } from "./tableFooter";
 import { TableDetailPanel } from "./tableDetailPanel";
 import { DetailPanel } from "../detailPanel/detailPanel";
@@ -64,7 +65,8 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
         }
         if (isChildElement(child, TableEmpty.displayName)) {
             // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            emptyList = createElement(EmptyList, {}, createElement(EmptySearchList, {
+            const EmptyListComponent = isMobile ? DataFeedEmptyList : DataGridEmptyList;
+            emptyList = createElement(EmptyListComponent, {}, createElement(EmptySearchList, {
                 description: child.props.description,
                 image: child.props.image,
                 className: child.props.className
@@ -83,7 +85,8 @@ export const useTableChildren = (children, isMobile, selected, allSelected, clea
             return;
         }
         if (isChildElement(child, TableFooter.displayName)) {
-            footer = createElement(Footer, {}, child.props.children);
+            const FooterComponent = isMobile ? DataFeedFooter : DataGridFooter;
+            footer = createElement(FooterComponent, {}, child.props.children);
             return;
         }
         other.push(child);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",