@geotab/zenith 3.16.0 → 3.17.0-beta.0

package/dist/table/selectable/utils/getRangeIds.d.ts

@@ -0,0 +1,2 @@
+import { IDragSelectionRow } from "../interfaces";
+export declare const getRangeIds: (rows: IDragSelectionRow[], fromId: string, toId: string, isSelectable: (row: IDragSelectionRow) => boolean) => string[];

package/dist/table/selectable/utils/getRangeIds.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRangeIds = void 0;
+const getRangeIds = (rows, fromId, toId, isSelectable) => {
+    const fromIdx = rows.findIndex(row => row.id === fromId);
+    const toIdx = rows.findIndex(row => row.id === toId);
+    if (fromIdx === -1 || toIdx === -1) {
+        return [];
+    }
+    const start = Math.min(fromIdx, toIdx);
+    const end = Math.max(fromIdx, toIdx);
+    const ids = [];
+    for (let i = start; i <= end; i++) {
+        const row = rows[i];
+        if (isSelectable(row)) {
+            ids.push(row.id);
+        }
+    }
+    return ids;
+};
+exports.getRangeIds = getRangeIds;

package/dist/table/selectable/utils/isRowChecked.d.ts

@@ -2,7 +2,7 @@ import { IEntityWithId } from "../../../commonHelpers/entity";
 import { IRowEntity } from "../../../dataGrid/row/row";
 import { SelectionState } from "../interfaces";
 import { TSelectionStrategy } from "../useSelectableRows";
-export declare const isRowChecked: <T extends IRowEntity<N>, N extends IEntityWithId>(selections: Set<string>, state: SelectionState, strategy: TSelectionStrategy | undefined, entity: T | N, isNested: boolean) => {
+export declare const isRowChecked: <T extends IRowEntity<N>, N extends IEntityWithId>(selections: Set<string>, state: SelectionState, strategy: TSelectionStrategy | undefined, entity: T | N, isNested: boolean, checkboxVisible?: (e: T | N, isNested?: boolean) => boolean, checkboxDisabled?: (e: T | N, isNested?: boolean) => boolean) => {
     indeterminate: boolean;
     checked: boolean;
 };

package/dist/table/selectable/utils/isRowChecked.js

@@ -1,19 +1,52 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isRowChecked = void 0;
+const showMoreRow_1 = require("../../../commonHelpers/showMoreRow");
 const interfaces_1 = require("../interfaces");
-const isRowChecked = (selections, state, strategy, entity, isNested) => {
+// The full, un-capped children list, so children hidden behind a "+N more" row still count
+// towards the parent checkbox state.
+const getNestedChildren = (entity, strategy) => strategy === "nested" ? (0, showMoreRow_1.getChildrenForSelection)(entity) : undefined;
+// Children the parent checkbox can actually act on - the consumer may hide or disable some.
+const filterSelectable = (children, checkboxVisible, checkboxDisabled) => children.filter(child => {
+    if (checkboxVisible && !checkboxVisible(child, true)) {
+        return false;
+    }
+    if (checkboxDisabled && checkboxDisabled(child, true)) {
+        return false;
+    }
+    return true;
+});
+const isRowChecked = (selections, state, strategy, entity, isNested, checkboxVisible, checkboxDisabled) => {
     if (state === interfaces_1.SelectionState.All) {
-        return { indeterminate: false, checked: true };
+        // When the overall selection is "all", `selections` holds the ids that have been
+        // explicitly excluded from that selection (see ISelectionValue), not included ids.
+        if (isNested) {
+            return { indeterminate: false, checked: !selections.has(entity.id) };
+        }
+        const children = getNestedChildren(entity, strategy);
+        if (children && children.length > 0) {
+            const selectableChildren = filterSelectable(children, checkboxVisible, checkboxDisabled);
+            if (selectableChildren.length === 0) {
+                return { indeterminate: false, checked: true };
+            }
+            const allChildrenChecked = selectableChildren.every(child => !selections.has(child.id));
+            const someChildrenChecked = selectableChildren.some(child => !selections.has(child.id));
+            return { indeterminate: someChildrenChecked && !allChildrenChecked, checked: allChildrenChecked };
+        }
+        return { indeterminate: false, checked: !selections.has(entity.id) };
     }
     if (isNested) {
         return { indeterminate: false, checked: selections.has(entity.id) };
     }
-    const mainEntity = entity;
-    if (strategy === "nested" && mainEntity.children && mainEntity.children.length > 0) {
-        const allChildrenSelected = mainEntity.children.every(child => selections.has(child.id));
-        const someChildrenSelected = mainEntity.children.some(child => selections.has(child.id));
-        return { indeterminate: someChildrenSelected, checked: allChildrenSelected };
+    const children = getNestedChildren(entity, strategy);
+    if (children && children.length > 0) {
+        const selectableChildren = filterSelectable(children, checkboxVisible, checkboxDisabled);
+        if (selectableChildren.length === 0) {
+            return { indeterminate: false, checked: false };
+        }
+        const allChildrenSelected = selectableChildren.every(child => selections.has(child.id));
+        const someChildrenSelected = selectableChildren.some(child => selections.has(child.id));
+        return { indeterminate: someChildrenSelected && !allChildrenSelected, checked: allChildrenSelected };
     }
     return { indeterminate: false, checked: selections.has(entity.id) };
 };

package/dist/table/table.d.ts

@@ -1,6 +1,6 @@
 import { IZenComponentProps, IZenGridItem } from "../commonHelpers/zenComponent";
 import { ReactNode } from "react";
-import { ISelectableRowsOptions } from "./selectable/useSelectableRows";
+import { getEmptySelection, ISelectableRowsOptions } from "./selectable/useSelectableRows";
 import { ISortableOptions } from "./sortable/useSortableColumns";
 import { IFlexibleColumnsOptions } from "./flexible/useFlexibleColumns";
 import { IColumnComponent, IListColumnWrapper } from "../dataGrid/listColumn";
@@ -11,7 +11,6 @@ import { ITablePagination, TablePagination } from "./children/tablePagination";
 import { ITableEmpty, TableEmpty } from "./children/tableEmpty";
 import { ITableFooter, TableFooter } from "./children/tableFooter";
 import "./table.less";
-import { getEmptySelection } from "./selectable/useSelectableRows";
 import { ColumnSortDirection } from "./sortable/interfaces";
 import { getSortableValue } from "./sortable/useSortableColumns";
 import { ActionsColumn } from "../dataGrid/columns/actionsColumn/actionsColumn";

package/dist/table/table.js

@@ -11,23 +11,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dataFeed_1 = require("../dataFeed/dataFeed");
 const dataGrid_1 = require("../dataGrid/dataGrid");
+const lazyLoadingEnd_1 = require("../dataGrid/lazyLoadingEnd/lazyLoadingEnd");
 const useSelectableRows_1 = require("./selectable/useSelectableRows");
-const useSortableColumns_1 = require("./sortable/useSortableColumns");
-const useFlexibleColumns_1 = require("./flexible/useFlexibleColumns");
-const useActions_1 = require("./actions/useActions");
-const useLoading_1 = require("./loading/useLoading");
-const emptySearchList_1 = require("../dataGrid/emptySearchList/emptySearchList");
-const entitiesListActions_1 = require("../dataGrid/entitiesListActions/entitiesListActions");
-const dataFeedSelectPanel_1 = require("../dataFeed/dataFeedSelectPanel/dataFeedSelectPanel");
-const columnsListButton_1 = require("../dataGrid/entitiesListActions/actions/columnsListButton");
-const useTableChildren_1 = require("./children/useTableChildren");
-const deviceType_1 = require("../commonHelpers/hooks/deviceType");
-const useMobile_1 = require("../commonHelpers/hooks/useMobile");
-const tableFullscreen_1 = require("./children/tableFullscreen");
-const tableBulkActions_1 = require("./children/tableBulkActions");
-const tablePagination_1 = require("./children/tablePagination");
-const tableEmpty_1 = require("./children/tableEmpty");
-const tableFooter_1 = require("./children/tableFooter");
 injectString("da-DK", "Loading more rows", "Indl\xE6ser flere r\xE6kker");
 injectString("en", "Loading more rows", "Loading more rows");
 injectString("fi-FI", "Loading more rows", "Ladataan lis\xE4\xE4 rivej\xE4");
@@ -145,13 +130,29 @@ injectString("ka-GE", "Bulk select", "\u10DB\u10D0\u10E1\u10D8\u10E3\u10E0\u10D8
 injectString("el-GR", "Bulk select", "\u039C\u03B1\u03B6\u03B9\u03BA\u03AE \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE");
 injectString("et-EE", "Bulk select", "Massvalimine");
 injectString("bg-BG", "Bulk select", "\u041C\u0430\u0441\u043E\u0432 \u0438\u0437\u0431\u043E\u0440");
-const useSelectableRows_2 = require("./selectable/useSelectableRows");
 Object.defineProperty(exports, "getEmptySelection", {
   enumerable: true,
   get: function () {
-    return useSelectableRows_2.getEmptySelection;
+    return useSelectableRows_1.getEmptySelection;
   }
 });
+const useSortableColumns_1 = require("./sortable/useSortableColumns");
+const useFlexibleColumns_1 = require("./flexible/useFlexibleColumns");
+const useActions_1 = require("./actions/useActions");
+const useLoading_1 = require("./loading/useLoading");
+const emptySearchList_1 = require("../dataGrid/emptySearchList/emptySearchList");
+const entitiesListActions_1 = require("../dataGrid/entitiesListActions/entitiesListActions");
+const dataFeedSelectPanel_1 = require("../dataFeed/dataFeedSelectPanel/dataFeedSelectPanel");
+const columnsListButton_1 = require("../dataGrid/entitiesListActions/actions/columnsListButton");
+const useTableChildren_1 = require("./children/useTableChildren");
+const deviceType_1 = require("../commonHelpers/hooks/deviceType");
+const useMobile_1 = require("../commonHelpers/hooks/useMobile");
+const getCurrentPageSelection_1 = require("./selectable/utils/getCurrentPageSelection");
+const tableFullscreen_1 = require("./children/tableFullscreen");
+const tableBulkActions_1 = require("./children/tableBulkActions");
+const tablePagination_1 = require("./children/tablePagination");
+const tableEmpty_1 = require("./children/tableEmpty");
+const tableFooter_1 = require("./children/tableFooter");
 const interfaces_1 = require("./sortable/interfaces");
 Object.defineProperty(exports, "ColumnSortDirection", {
   enumerable: true,
@@ -234,7 +235,7 @@ const TableInner = ({
   active,
   onClick
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const isMobile = (0, useMobile_1.useMobile)();
   const {
     translate
@@ -255,6 +256,8 @@ const TableInner = ({
   // Desktop infinite scroll is active when onScrollEnd is wired. In that mode there are no pages:
   // pagination is hidden and "Select current page" is suppressed (the checkbox selects all instead).
   const isInfinite = !!onScrollEnd;
+  const isAppendLoading = isLoading && (loading === null || loading === void 0 ? void 0 : loading.addToEnd) === true && entities.length > 0;
+  const selectableForRender = isLoading && !isAppendLoading ? undefined : selectable;
   // Announce loading/loaded state to screen readers (the skeleton rows are not perceivable to them).
   // Scoped to infinite scroll only: paged tables also pass `isLoading` for initial-fetch skeletons,
   // and "Loading more rows" / "N more rows loaded" are semantically wrong outside infinite scroll.
@@ -266,7 +269,13 @@ const TableInner = ({
     }
     if (isLoading) {
       setLiveMessage(translate("Loading more rows"));
-    } else if (entities.length > prevEntitiesCountRef.current) {
+      // Don't advance the ref while loading: if `entities` and `isLoading` ever update across
+      // separate renders instead of together (e.g. without automatic batching), advancing here
+      // would make the next render see entities.length === prevEntitiesCountRef.current and
+      // silently skip the "N more rows loaded" announcement below.
+      return;
+    }
+    if (entities.length > prevEntitiesCountRef.current) {
       // Announce the delta (newly appended rows), not the running total — hearing
       // "500 rows loaded" on a later page is confusing when only a page just arrived.
       // Separate singular key because `translate()` has no plural support, so a raw
@@ -288,7 +297,7 @@ const TableInner = ({
   const {
     selectableColumns,
     selectableFeedWrapper
-  } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, isLoading ? undefined : selectable, isInfinite);
+  } = (0, useSelectableRows_1.useSelectableRows)(nestedColumns, entities, isMobile, selectMode, setMobileSelectMode, selectableForRender, isInfinite, gridRef, expanded);
   const {
     sortableColumns,
     feedSortControl
@@ -314,13 +323,21 @@ const TableInner = ({
     isFeedVisible,
     visibleColumns
   } = (0, useFeedExpandable_1.useFeedExpandable)(isMobile, feedExpandable);
-  const selectionQty = (0, react_1.useMemo)(() => {
+  // Keep bulk-action state available during initial/replacement loading for backward compatibility.
+  // The row controls themselves still use selectableForRender and remain hidden until real rows can render.
+  const allSelected = (0, react_1.useMemo)(() => {
     var _a, _b;
+    return (0, useSelectableRows_1.isAllSelection)((_a = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _a === void 0 ? void 0 : _a.all, (_b = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _b === void 0 ? void 0 : _b.selected.length, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions);
+  }, [(_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all, selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions, (_d = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _d === void 0 ? void 0 : _d.selected.length]);
+  const selectionQty = (0, react_1.useMemo)(() => {
+    var _a;
     if (!selectable) {
       return 0;
     }
-    return ((_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.all) ? loadingEntities.length : ((_b = selectable.selection) === null || _b === void 0 ? void 0 : _b.selected.length) || 0;
-  }, [selectable, loadingEntities.length]);
+    const ids = new Set((_a = selectable.selection) === null || _a === void 0 ? void 0 : _a.selected);
+    const base = entities.length > 0 ? entities : loadingEntities;
+    return allSelected ? [...(0, getCurrentPageSelection_1.getCurrentPageSelection)(base, selectable)].filter(id => !selectable.allowExclusions || !ids.has(id)).length : ids.size;
+  }, [selectable, entities, loadingEntities, allSelected]);
   const clearSelection = (0, react_1.useCallback)(() => {
     setSelectMode(false);
     selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
@@ -337,23 +354,31 @@ const TableInner = ({
   }, [onClickRow]);
   const {
     bulkActions,
+    hasSelection,
     pagination,
+    paginationTotal,
     activePage,
     fullscreenButton,
     emptyList,
     detailPanel,
     footer,
     other
-  } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, activeId, gridRef, onCloseDetailPanel);
+  } = (0, useTableChildren_1.useTableChildren)(children, isMobile, selectionQty, allSelected, clearSelection, activeId, gridRef, onCloseDetailPanel, isInfinite, entities.length, (selectable === null || selectable === void 0 ? void 0 : selectable.allowExclusions) && ((_e = selectable.selection) === null || _e === void 0 ? void 0 : _e.all) ? new Set(selectable.selection.selected).size : 0, (selectable === null || selectable === void 0 ? void 0 : selectable.strategy) !== "nested" && !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxDisabled) && !(selectable === null || selectable === void 0 ? void 0 : selectable.checkboxVisible), !!feedEndCallback || !!isLoading);
   const hasDetailPanel = !!detailPanel;
   const shouldEnableRowClick = hasDetailPanel || !!onClick;
   const activeIdForRow = shouldEnableRowClick ? activeId : undefined;
   const onClickForRow = shouldEnableRowClick ? onClickRow : undefined;
   const handleOnHidePanel = (0, react_1.useCallback)(() => setSelectMode(false), []);
   const handleOnTriggerClick = (0, react_1.useCallback)(() => setSelectMode(prev => !prev), []);
-  const hasPostActions = (0, react_1.useMemo)(() => columnsPopup || isMobile && selectable || !isMobile && fullscreenButton || isFeedVisible, [columnsPopup, fullscreenButton, isFeedVisible, isMobile, selectable]);
-  // Pagination is desktop-only and is hidden in infinite-scroll mode (no pages).
-  const showPagination = !!pagination && !isMobile && !isInfinite;
+  const hasPostActions = (0, react_1.useMemo)(() => columnsPopup || isMobile && selectableForRender || !isMobile && fullscreenButton || isFeedVisible, [columnsPopup, fullscreenButton, isFeedVisible, isMobile, selectableForRender]);
+  // Pagination is desktop-only. In infinite-scroll mode there are no pages, so when a
+  // Table.Pagination child is supplied, `pagination` is already the chevron-less "loaded X of Y"
+  // variant (see useTableChildren's `isInfinite` handling) rather than being hidden outright.
+  const showPagination = !!pagination && !isMobile;
+  // Shown as the last row once every row has been loaded (desktop infinite scroll only). Guarded
+  // on `paginationTotal` being a real, positive total from a Table.Pagination child — a consumer
+  // that hasn't opted in (no total) never sees this, and an empty list is handled by Table.Empty.
+  const isEndOfList = isInfinite && !isMobile && !isLoading && !!paginationTotal && entities.length >= paginationTotal;
   const hasToolbar = (0, react_1.useMemo)(() => bulkActions || feedSortControl || showPagination || other.length || columnsPopup || !isMobile && fullscreenButton || isFeedVisible, [bulkActions, columnsPopup, feedSortControl, fullscreenButton, isFeedVisible, isMobile, other.length, showPagination]);
   const gridAutoHeight = (0, react_1.useMemo)(() => contentHeight ? `${contentHeight}px` : undefined, [contentHeight]);
   const minHeight = "400px";
@@ -373,7 +398,7 @@ const TableInner = ({
       children: [hasToolbar ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions, {
         gridType: isMobile ? deviceType_1.DeviceType.Mobile : deviceType_1.DeviceType.Desktop,
         children: [(0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Actions, {
-          children: [!isMobile && bulkActions && selectionQty > 0 ? bulkActions : null, feedSortControl]
+          children: [!isMobile && hasSelection ? bulkActions : null, feedSortControl]
         }), showPagination || other.length > 0 ? (0, jsx_runtime_1.jsxs)(entitiesListActions_1.EntitiesListActions.Pagination, {
           children: [(0, jsx_runtime_1.jsx)(entitiesListActions_1.EntitiesListActions.CustomElements, {
             children: other
@@ -386,7 +411,7 @@ const TableInner = ({
           }) : null, isFeedVisible ? (0, jsx_runtime_1.jsx)(feedExpandControl_1.FeedExpandControl, {
             isExpanded: isFeedExpanded,
             onClick: handleExpanded
-          }) : null, isMobile && selectable ? (0, jsx_runtime_1.jsx)(dataFeedSelectPanel_1.DataFeedSelectPanel, {
+          }) : null, isMobile && selectableForRender ? (0, jsx_runtime_1.jsx)(dataFeedSelectPanel_1.DataFeedSelectPanel, {
             panelTitle: translate("Selection panel"),
             buttonTitle: translate("Bulk select"),
             onTriggerClick: handleOnTriggerClick,
@@ -439,7 +464,9 @@ const TableInner = ({
             onClick: onClickForRow,
             onScrollEnd: onScrollEnd,
             isLoading: isLoading,
-            children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})]
+            children: [emptyList || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), footer || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), isEndOfList ? (0, jsx_runtime_1.jsx)(dataGrid_1.EndOfList, {
+              children: (0, jsx_runtime_1.jsx)(lazyLoadingEnd_1.LazyLoadingEnd, {})
+            }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})]
           })
         }), detailPanel !== null && detailPanel !== void 0 ? detailPanel : null]
       })]

package/dist/tabs/tabs.d.ts

@@ -9,6 +9,7 @@ export interface ITabElement {
     id: string;
     quantity?: number;
     dataAnalyticsId?: string;
+    ariaControls?: string | null;
 }
 export interface ITabs extends IZenComponentProps {
     tabs: ITabElement[];

package/dist/tabs/tabs.js

@@ -141,6 +141,27 @@ const Tabs = ({
   const scrollRef = (0, react_1.useRef)(0);
   const focusableTabIdRef = (0, react_1.useRef)("");
   const userInitiatedTabChangeRef = (0, react_1.useRef)(false);
+  const scrollTabIntoView = (0, react_1.useCallback)(tabId => {
+    var _a, _b;
+    const scrollableElement = scrollableRef.current;
+    if (!scrollableElement) {
+      return;
+    }
+    if (tabId === ((_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.id)) {
+      scrollableElement.scrollLeft = 0;
+    } else if (tabId === ((_b = tabs[tabs.length - 1]) === null || _b === void 0 ? void 0 : _b.id)) {
+      scrollableElement.scrollLeft = isRTL ? scrollableElement.clientWidth - scrollableElement.scrollWidth : scrollableElement.scrollWidth - scrollableElement.clientWidth;
+    } else {
+      const tab = scrollableElement.querySelector(`.zen-tab-item[id='${tabId}']`);
+      if (tab instanceof HTMLElement) {
+        tab.scrollIntoView({
+          block: "nearest",
+          inline: "nearest"
+        });
+      }
+    }
+    setScrollButtonType(getScrollButtonType(scrollableElement, isRTL));
+  }, [isRTL, tabs]);
   const handleButtonClick = e => {
     if (disabled) {
       return;
@@ -175,14 +196,23 @@ const Tabs = ({
       const nextTabId = (0, tabsKeyboard_1.tabsKeyboardTabHandler)(e, tabs, (_a = zen_1.zen === null || zen_1.zen === void 0 ? void 0 : zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement);
       if (nextTabId) {
         focusableTabIdRef.current = nextTabId;
+        scrollTabIntoView(nextTabId);
       }
       return;
     }
-    const newActiveTabId = (0, tabsKeyboard_1.tabsKeyboardHandler)(e, tabs, focusableTabIdRef.current) || activeTabId;
+    const newActiveTabId = (0, tabsKeyboard_1.tabsKeyboardHandler)(e, tabs, focusableTabIdRef.current, isRTL);
+    if (!newActiveTabId) {
+      return;
+    }
     focusableTabIdRef.current = newActiveTabId;
     const focusableTab = (_b = scrollableRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(`.zen-tab-item[id='${newActiveTabId}']`);
-    focusableTab === null || focusableTab === void 0 ? void 0 : focusableTab.focus();
-  }, [tabs, activeTabId, onTabChange, disabled]);
+    if (focusableTab instanceof HTMLElement) {
+      focusableTab.focus({
+        preventScroll: true
+      });
+      scrollTabIntoView(newActiveTabId);
+    }
+  }, [tabs, onTabChange, disabled, isRTL, scrollTabIntoView]);
   (0, react_1.useEffect)(() => {
     var _a;
     if (!scrollableRef.current) {
@@ -276,20 +306,23 @@ const Tabs = ({
         children: (0, jsx_runtime_1.jsx)("div", {
           className: "zen-tabs__tabs",
           role: "tablist",
-          children: tabs.map(tab => (0, jsx_runtime_1.jsx)(tabItem_1.TabItem, {
-            className: "zen-tabs__tab-item",
-            tabId: tab.id,
-            tabName: tab.name,
-            icon: typeof tab.icon === "function" ? (0, react_1.createElement)(tab.icon, {
-              size: "large"
-            }) : tab.icon,
-            quantity: tab.quantity,
-            active: activeTabId === tab.id,
-            ariaControl: `panel-${tab.id}`,
-            handleButtonClick: handleButtonClick,
-            dataAnalyticsId: tab.dataAnalyticsId,
-            disabled: disabled
-          }, tab.id))
+          children: tabs.map(tab => {
+            var _a;
+            return (0, jsx_runtime_1.jsx)(tabItem_1.TabItem, {
+              className: "zen-tabs__tab-item",
+              tabId: tab.id,
+              tabName: tab.name,
+              icon: typeof tab.icon === "function" ? (0, react_1.createElement)(tab.icon, {
+                size: "large"
+              }) : tab.icon,
+              quantity: tab.quantity,
+              active: activeTabId === tab.id,
+              ariaControl: tab.ariaControls === undefined ? `panel-${tab.id}` : (_a = tab.ariaControls) !== null && _a !== void 0 ? _a : undefined,
+              handleButtonClick: handleButtonClick,
+              dataAnalyticsId: tab.dataAnalyticsId,
+              disabled: disabled
+            }, tab.id);
+          })
         })
       }), scrollButtonType === "end" || scrollButtonType === "both" ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
         children: [(0, jsx_runtime_1.jsx)("div", {

package/dist/textInputRaw/textInputRaw.js

@@ -7,6 +7,7 @@ const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const reviewTextControl_1 = require("../formGroup/components/reviewTextControl");
 const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
+const getAriaAttributes_1 = require("../commonHelpers/getAriaAttributes");
 const TextInputRaw = (props) => {
     const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
     const mobileComponentClass = (0, useMobileClassName_1.useMobileClassName)("zen-text-input");
@@ -14,14 +15,14 @@ const TextInputRaw = (props) => {
     if (props.isReadOnly) {
         return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: value, password: props.type === "password" });
     }
-    return ((0, jsx_runtime_1.jsx)("input", { id: props.id, ref: props.ref, type: props.type || "text", className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({ id: props.id, ref: props.ref, type: props.type || "text", className: (0, classNames_1.classNames)([
             "zen-text-input",
             mobileComponentClass || driveComponentClass || "",
             props.className || "",
             props.isError ? "zen-text-input--error" : ""
         ]), value: maxLength ? value.substring(0, maxLength) : value, placeholder: props.placeholder, disabled: disabled, onChange: onChange, onKeyDown: props.onKeyDown, onBlur: onBlur, maxLength: maxLength, autoComplete: props.autocomplete, 
         // TODO: add tests
-        min: min, max: max, step: props.step, "aria-labelledby": props.ariaLabelledby, "aria-label": props.ariaLabel, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role, "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true, "aria-haspopup": props.ariaHaspopup, "aria-controls": props.ariaControls, "aria-autocomplete": props.ariaAutocomplete, "aria-describedby": props.ariaDescribedby }));
+        min: min, max: max, step: props.step, autoFocus: props.autoFocus, required: !!required, onFocus: props.onFocus, minLength: minLength, name: name, pattern: pattern, role: props.role }, (0, getAriaAttributes_1.getAriaAttributes)(props), { "aria-expanded": props.ariaExpanded === undefined ? undefined : props.ariaExpanded === "true" || props.ariaExpanded === true })));
 };
 exports.TextInputRaw = TextInputRaw;
 exports.TextInputRaw.displayName = "TextInputRaw";

package/dist/tooltip/tooltip.d.ts

@@ -8,6 +8,8 @@ export type TMobileView = "default" | "mobileSheet";
 interface ITooltip extends IZenComponentProps {
     trigger?: ReactElement<PropsWithChildren & {
         onClick?: (e: React.MouseEvent) => void;
+        disabled?: boolean;
+        focusableWhenDisabled?: boolean;
     }>;
     alignment?: TAlignment;
     triggerClassName?: string;

package/dist/tooltip/tooltip.js

@@ -164,13 +164,17 @@ const EventWrapper = ({
   deviceType,
   onKeyDownHandler,
   handleUniversalClick,
+  isTriggerDisabledFocusable,
   setTooltipVisible,
   timerRef,
   timerMouseLeaveRef,
   tooltipRef
 }) => {
   const isCurrentDeviceDesktop = deviceType === deviceType_1.DeviceType.Desktop;
-  const originalOnClick = children.props.onClick;
+  const triggerProps = children.props;
+  const originalOnClick = triggerProps.onClick;
+  // A disabled-focusable trigger's own `onClick` is a no-op guard, so `composedOnClick` never runs on
+  // mobile — see the `onClickCapture` handling in `mobileEvents` below.
   const composedOnClick = (0, react_1.useCallback)(e => {
     // Call original onClick first if it exists
     if (originalOnClick) {
@@ -207,10 +211,13 @@ const EventWrapper = ({
       handleUniversalClick(undefined);
     }
   }, [handleUniversalClick]);
-  const mobileEvents = {
-    onClick: composedOnClick,
+  const mobileEvents = Object.assign({
     onKeyDown: mobileOnKeyDown
-  };
+  }, isTriggerDisabledFocusable ? {
+    onClickCapture: handleUniversalClick
+  } : {
+    onClick: composedOnClick
+  });
   const propsToApply = isCurrentDeviceDesktop ? desktopEvents : mobileEvents;
   return react_1.default.cloneElement(children, propsToApply);
 };
@@ -240,6 +247,8 @@ const Tooltip = ({
   const [isTooltipVisible, setTooltipVisible] = (0, react_1.useState)(false);
   const [deviceType, setDeviceType] = (0, react_1.useState)(getInitialDeviceType);
   const isMobile = deviceType === deviceType_1.DeviceType.Mobile;
+  const triggerProps = trigger === null || trigger === void 0 ? void 0 : trigger.props;
+  const isTriggerDisabledFocusable = Boolean(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.disabled) && (triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.focusableWhenDisabled) !== false;
   const tooltipId = (0, react_1.useId)();
   const {
     translate
@@ -270,7 +279,7 @@ const Tooltip = ({
     }
   };
   const handleUniversalClick = (0, react_1.useCallback)(e => {
-    const hasExternalClickHandler = !!(trigger === null || trigger === void 0 ? void 0 : trigger.props.onClick);
+    const hasExternalClickHandler = !!(triggerProps === null || triggerProps === void 0 ? void 0 : triggerProps.onClick) && !isTriggerDisabledFocusable;
     if (deviceType === deviceType_1.DeviceType.Desktop) {
       setTooltipVisible(currentVisible => {
         if (currentVisible) {
@@ -279,12 +288,14 @@ const Tooltip = ({
         return currentVisible;
       });
     } else {
-      e === null || e === void 0 ? void 0 : e.stopPropagation();
+      if (!isTriggerDisabledFocusable) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+      }
       if (!hasExternalClickHandler) {
         setTooltipVisible(isVisible => !isVisible);
       }
     }
-  }, [trigger === null || trigger === void 0 ? void 0 : trigger.props, deviceType]);
+  }, [deviceType, isTriggerDisabledFocusable, triggerProps]);
   // Apply `triggerAriaLabel` to a `Tooltip.InlineTrigger` trigger (it has no `ariaLabel` prop
   // of its own); the default info-icon trigger below handles `triggerAriaLabel` separately.
   // An `aria-label` set directly on the `Tooltip.InlineTrigger` element takes priority over
@@ -311,6 +322,7 @@ const Tooltip = ({
     isTooltipVisible: isTooltipVisible,
     onKeyDownHandler: onKeyDownHandler,
     handleUniversalClick: handleUniversalClick,
+    isTriggerDisabledFocusable: isTriggerDisabledFocusable,
     setTooltipVisible: setTooltipVisible,
     timerRef: timerRef,
     timerMouseLeaveRef: timerMouseLeaveRef,

package/dist/utils/localization/translations/ar-001.json

@@ -129,6 +129,7 @@
     "GroupManuallyClassifiedPowertrainId": "محرك مصنف يدوياً",
     "GroupFuelCellElectricVehicleId": "مركبة كهربائية بخلايا الوقود",
     "and {0} more": "و {0} إضافي",
+    "+{0} more": "+{0} أخرى",
     "Clear selection": "مسح التحديد",
     "Select current page": "تحديد الصفحة الحالية",
     "OperatorOr": "معامل أو",

package/dist/utils/localization/translations/bg-BG.json

@@ -129,6 +129,7 @@
     "GroupManuallyClassifiedPowertrainId": "Ръчно класифицирана задвижваща система",
     "GroupFuelCellElectricVehicleId": "Електрическо превозно средство с горивни клетки",
     "and {0} more": "и {0} повече",
+    "+{0} more": "+ още {0}",
     "Clear selection": "Изчистване на избора",
     "Select current page": "Избиране на текущата страница",
     "OperatorOr": "ИЛИ",

package/dist/utils/localization/translations/cs.json

@@ -115,6 +115,7 @@
     "GroupFuelCellElectricVehicleId": "Elektromobil s palivovým článkem",
     "{1} selected": "{1} vybraný/vybrané",
     "and {0} more": "a {0} dalších",
+    "+{0} more": "+{0} další",
     "Clear selection": "Vymazat výběr",
     "Select current page": "Vybrat aktuální stránku",
     "OperatorOr": "NEBO",

package/dist/utils/localization/translations/da-DK.json

@@ -125,6 +125,7 @@
     "GroupManuallyClassifiedPowertrainId": "Manuelt klassificeret drivlinje",
     "GroupFuelCellElectricVehicleId": "Brændselscelle elektrisk køretøj",
     "and {0} more": "og {0} mere",
+    "+{0} more": "+{0} mere",
     "Clear selection": "Ryd markering",
     "Select current page": "Vælg aktuel side",
     "OperatorOr": "ELLER",

package/dist/utils/localization/translations/de.json

@@ -115,6 +115,7 @@
     "GroupFuelCellElectricVehicleId": "Brennstoffzellenfahrzeug",
     "{1} selected": "{1} ausgewählt",
     "and {0} more": "und {0} weitere",
+    "+{0} more": "+{0} weitere",
     "Select current page": "Aktuelle Seite auswählen",
     "OperatorOr": "ODER",
     "OperatorAnd": "UND",

package/dist/utils/localization/translations/el-GR.json

@@ -129,6 +129,7 @@
     "GroupManuallyClassifiedPowertrainId": "Χειροκίνητα ταξινομημένο σύστημα κίνησης",
     "GroupFuelCellElectricVehicleId": "Ηλεκτρικό όχημα κυψελών καυσίμου",
     "and {0} more": "και {0} ακόμη",
+    "+{0} more": "+{0} ακόμα",
     "Clear selection": "Εκκαθάριση επιλογής",
     "Select current page": "Επιλογή τρέχουσας σελίδας",
     "OperatorOr": "Ή",

package/dist/utils/localization/translations/en.json

@@ -87,6 +87,7 @@
     "Previous page": "Previous page",
     "Next page": "Next page",
     "Showing {from} - {to} of {total}": "Showing {from} - {to} of {total}",
+    "{from}-{to} of {total}": "{from}-{to} of {total}",
     "Selected:": "Selected:",
     "All": "All",
     "Go to My Reports": "Go to My Reports",
@@ -129,6 +130,7 @@
     "GroupManuallyClassifiedPowertrainId": "Manually Classified Powertrain",
     "GroupFuelCellElectricVehicleId": "Fuel Cell Electric Vehicle",
     "and {0} more": "and {0} more",
+    "+{0} more": "+{0} more",
     "Clear selection": "Clear selection",
     "Select current page": "Select current page",
     "OperatorOr": "OR",
@@ -348,6 +350,8 @@
     "Loading more rows": "Loading more rows",
     "1 more row loaded": "1 more row loaded",
     "{count} more rows loaded": "{count} more rows loaded",
+    "No further results found": "No further results found",
+    "We couldn't find any more data matching your current selection. Try broadening your search.": "We couldn't find any more data matching your current selection. Try broadening your search.",
     "Line chart": "Line chart",
     "Bar chart": "Bar chart",
     "Pie chart": "Pie chart",

package/dist/utils/localization/translations/es.json

@@ -115,6 +115,7 @@
     "GroupFuelCellElectricVehicleId": "Vehículo eléctrico con celdas de combustible",
     "{1} selected": "Seleccionados: {1}",
     "and {0} more": "y {0} más",
+    "+{0} more": "+{0} más",
     "Clear selection": "Borrar selección",
     "Select current page": "Seleccionar página actual",
     "OperatorOr": "O",

package/dist/utils/localization/translations/et-EE.json

@@ -129,6 +129,7 @@
     "GroupManuallyClassifiedPowertrainId": "Käsitsi klassifitseeritud jõuülekanne",
     "GroupFuelCellElectricVehicleId": "Kütuseelementidega elektrisõiduk",
     "and {0} more": "ja {0} veel",
+    "+{0} more": "+{0} veel",
     "Clear selection": "Tühjenda valik",
     "Select current page": "Vali praegune leht",
     "OperatorOr": "VÕI",

package/dist/utils/localization/translations/fi-FI.json

@@ -125,6 +125,7 @@
     "GroupManuallyClassifiedPowertrainId": "Manuaalisesti luokiteltu voimansiirto",
     "GroupFuelCellElectricVehicleId": "Polttokenno­sähköajoneuvo",
     "and {0} more": "ja {0} lisää",
+    "+{0} more": "+{0} lisää",
     "Clear selection": "Tyhjennä valinta",
     "Select current page": "Valitse nykyinen sivu",
     "OperatorOr": "TAI",