@geotab/zenith 3.17.0-beta.1 → 3.17.0-beta.2

package/README.md

@@ -45,39 +45,36 @@ Now components are ready for usage.
 
 Zenith library provides components defined in Zenith Design System. It includes very basic blocks like colors, icons, font presets, atom components like buttons, checkboxes etc and high order components - header, table, filters bar etc. List of existing components can be found in [Storybook](https://developers.geotab.com/zenith-storybook/index.html).
 
-## Translations
-
-Zenith has English and 32 non-English locale dictionaries, including Arabic (`ar-001`) with right-to-left support. The [translation process guide](./docs/TRANSLATIONS.md) covers adding strings, Tech Content and Localization handoffs, spreadsheet sync, build-time injection, and validation. Read it before adding or changing a user-facing string, reviewing English copy, or running the sync. Locale availability does not imply that every string has a reviewed translation.
-
 ## Change log
 
 ### 3.17.0
 
-- [MYG-138984](https://geotab.atlassian.net/browse/MYG-138984): Add Primary, Destructive, and TertiaryDestructive trigger variants to `Dropdown` / `FilterButton`
-- [MYG-138985](https://geotab.atlassian.net/browse/MYG-138985): Add optional separators below single- and multi-select `Dropdown` items
-- [MYG-138983](https://geotab.atlassian.net/browse/MYG-138983): Add destructive styling to single-select `Dropdown` items
-- [MYG-105567](https://geotab.atlassian.net/browse/MYG-105567): Add `sortSelectedToTop` to float selected `Dropdown` options to the top when opened
-- [MYG-147075](https://geotab.atlassian.net/browse/MYG-147075): Show full single-select `Dropdown` option labels on hover
-- [MYG-147879](https://geotab.atlassian.net/browse/MYG-147879): Add loaded/total counts and an end-of-results message for desktop infinite-scroll tables; improve row-loading announcements
-- [MYG-130553](https://geotab.atlassian.net/browse/MYG-130553): Add progressive loading of nested `Table` rows with a +N more control, plus the `useShowMore` hook and `DEFAULT_SHOW_MORE_CAP` export
-- [MYG-148443](https://geotab.atlassian.net/browse/MYG-148443): Add seven sequential and seven diverging data-visualization color tokens
-- [MYG-129023](https://geotab.atlassian.net/browse/MYG-129023): Support destructive menu items and open-in-new-page indicators, including collapsed `Header` actions
-- [MYG-142469](https://geotab.atlassian.net/browse/MYG-142469): Export `PillBox`, `DEFAULT_MAX_PILLS`, `IPillData`, and `IPillBox` from the package entry point
-- [MYG-139327](https://geotab.atlassian.net/browse/MYG-139327): Add mouse-drag and Shift-click range selection to `Table` and selectable `DataGrid` rows, including expanded nested rows
-- [MYG-142234](https://geotab.atlassian.net/browse/MYG-142234): Add opt-in cross-page Select All exclusions when individual rows or the current-page header are unchecked
-- [MYG-149449](https://geotab.atlassian.net/browse/MYG-149449): Preserve cross-page Select All and existing exclusions during drag and Shift-click range selection; correct exclusion counts, childless nested-row selection, and global selection commands; exclude loading and show-more placeholders from fully loaded selection counts
-- [MYG-148015](https://geotab.atlassian.net/browse/MYG-148015): Make cross-page exclusions opt-in through `selectable.allowExclusions` while preserving the existing selection contract by default; correct selection feedback during reloads and empty-selection bulk actions
-- [MYG-147924](https://geotab.atlassian.net/browse/MYG-147924): Preserve `Table` selection during append loading and refreshes
-- [MYG-143552](https://geotab.atlassian.net/browse/MYG-143552): Keep `Waiting` overlays covering scrollable content, improve spinner positioning, and block keyboard interaction with sibling content while the overlay is visible
-- [MYG-148751](https://geotab.atlassian.net/browse/MYG-148751): Remove special bold styling from the first `Table` / `DataGrid` column header
-- [MYG-113389](https://geotab.atlassian.net/browse/MYG-113389): Reduce form label/control gaps and correct `Dropdown` form-field styling and width
-- [MYG-148954](https://geotab.atlassian.net/browse/MYG-148954): Close `PillExpandable` popovers on user scrolling while ignoring browser scroll-anchoring adjustments
-- [MYG-149705](https://geotab.atlassian.net/browse/MYG-149705): Fix RTL tab keyboard navigation, focus scrolling, and tab/pill/chip/accordion styling
-- [MYG-145500](https://geotab.atlassian.net/browse/MYG-145500): Allow `Tabs` to associate tabs with explicitly named panels through `ariaControls`, including panels outside the default tab layout
-- [MYG-148568](https://geotab.atlassian.net/browse/MYG-148568): Forward ARIA attributes to the appropriate input elements in `DropdownRaw` and `TextInputRaw`
-- [MYG-150227](https://geotab.atlassian.net/browse/MYG-150227): Make `FormLayout` positioning deterministic for fractional and invalid positions
-- [MYG-145929](https://geotab.atlassian.net/browse/MYG-145929): Keep disabled `Button` and related menu/header buttons keyboard-focusable while preventing activation
-- [MYG-148696](https://geotab.atlassian.net/browse/MYG-148696): Improve `PillExpandable` popover focus management and accessible trigger/content relationships
+- Add Primary, Destructive, and TertiaryDestructive trigger variants to `Dropdown` / `FilterButton`
+- Add optional separators below single- and multi-select `Dropdown` items
+- Add destructive styling to single-select `Dropdown` items
+- Add `sortSelectedToTop` to float selected `Dropdown` options to the top when opened
+- Show full single-select `Dropdown` option labels on hover
+- Add loaded/total counts and an end-of-results message for desktop infinite-scroll tables; improve row-loading announcements
+- Add progressive loading of nested `Table` rows with a +N more control, plus the `useShowMore` hook and `DEFAULT_SHOW_MORE_CAP` export
+- Add seven sequential and seven diverging data-visualization color tokens
+- Support destructive menu items and open-in-new-page indicators, including collapsed `Header` actions
+- Export `PillBox`, `DEFAULT_MAX_PILLS`, `IPillData`, and `IPillBox` from the package entry point
+- Add mouse-drag and Shift-click range selection to `Table` and selectable `DataGrid` rows, including expanded nested rows
+- Add opt-in cross-page Select All exclusions when individual rows or the current-page header are unchecked
+- Preserve cross-page Select All and existing exclusions during drag and Shift-click range selection; correct exclusion counts, childless nested-row selection, and global selection commands; exclude loading and show-more placeholders from fully loaded selection counts
+- Make cross-page exclusions opt-in through `selectable.allowExclusions` while preserving the existing selection contract by default; correct selection feedback during reloads and empty-selection bulk actions
+- Preserve `Table` selection during append loading and refreshes
+- Keep `Waiting` overlays covering scrollable content, improve spinner positioning, and block keyboard interaction with sibling content while the overlay is visible
+- Remove special bold styling from the first `Table` / `DataGrid` column header
+- Reduce form label/control gaps and correct `Dropdown` form-field styling and width
+- Close `PillExpandable` popovers on user scrolling while ignoring browser scroll-anchoring adjustments
+- Fix RTL tab keyboard navigation, focus scrolling, and tab/pill/chip/accordion styling
+- Allow `Tabs` to associate tabs with explicitly named panels through `ariaControls`, including panels outside the default tab layout
+- Forward ARIA attributes to the appropriate input elements in `DropdownRaw` and `TextInputRaw`
+- Make `FormLayout` positioning deterministic for fractional and invalid positions
+- Keep disabled `Button` and related menu/header buttons keyboard-focusable while preventing activation
+- Improve `PillExpandable` popover focus management and accessible trigger/content relationships
+- Keep `Waiting` content interactive when `hideOverlay` is enabled while loading
 
 ### 3.16.0
 

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.d.ts

@@ -12,7 +12,7 @@ export interface IBulkActionsProps extends IZenComponentProps {
      * even when `selected` is 0 (i.e., cross-page "select all" is active).
      */
     allSelected?: boolean;
-    /** Show a selection label without a count when the selected total is unknown. */
+    /** The selection spans unloaded rows and its total is not available. */
     selectionCountUnknown?: boolean;
     onClearSelection: () => void;
     onSelectAll?: () => void;

package/dist/dropdownRaw/dropdownHelper.d.ts

@@ -12,12 +12,28 @@ export declare const isAllItemsHasOneParent: (listData: IDropdownRawItem[], chil
 export declare function prepareComboOptionsForList(actionListData: Set<string>, translate: (s: string) => string, options: IDropdownRawItem[], getSelectedFn: () => string[], getSelectedChildFn: (optionId: any) => string[], isFlatList: boolean, getTitle?: (itemId: string) => string, isAllSelected?: boolean): ICheckboxListWithActionOption[];
 export declare const createOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isAllSelected?: boolean) => ICheckboxListWithActionOption[];
 export declare const sortDropdownItemArray: (arr: IDropdownRawItem[], sortFn?: (a: IDropdownRawItem, b: IDropdownRawItem) => number) => IDropdownRawItem[];
+/**
+ * An item is half selected when at least one of its direct children is selected — the state its checkbox
+ * shows as indeterminate (see `prepareComboOptionsForList`). `selectedSet` is passed in so the sort can use
+ * its own snapshot of the selection instead of the live one.
+ */
+export declare const hasSelectedChild: (groupsMap: IDropdownState["groupsMap"], itemId: string, selectedSet: Set<string>) => boolean;
+interface ISortSelectedToTopOptions {
+    /** Items that count as selected although their own id is not, e.g. a half selected parent. */
+    isPartiallySelected?: (item: IDropdownRawItem) => boolean;
+    /** Disabled items cannot be toggled, so they follow the selectable ones. */
+    isDisabled?: (item: IDropdownRawItem) => boolean;
+}
 /**
  * Floats selected items to the top of the list while preserving the relative order within each
- * group (selected and unselected). When `selectedIds` is empty the original array is returned
- * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ * group. The order is: selected items that can be toggled, then selected items that are disabled
+ * (so a newly selected item is never pushed down by disabled ones), then everything else. An item
+ * counts as selected when its own id is in `selectedIds` or when `isPartiallySelected` returns true
+ * for it, so half selected items sit with the selected ones. When `selectedIds` is empty the original
+ * array is returned unchanged (no allocation). Uses a single-pass partition to avoid traversing
+ * `items` more than once.
  */
-export declare const applySortSelectedToTop: (items: IDropdownRawItem[], selectedIds: string[]) => IDropdownRawItem[];
+export declare const applySortSelectedToTop: (items: IDropdownRawItem[], selectedIds: string[], { isPartiallySelected, isDisabled }?: ISortSelectedToTopOptions) => IDropdownRawItem[];
 export declare const createSingleListOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[]) => {
     destructive: boolean | undefined;
     divider?: boolean | undefined;
@@ -56,3 +72,4 @@ export declare const getAllyTriggerProps: (allyPattern: "selectOnlyCombobox" | "
     readonly role: "button";
     readonly "aria-haspopup": "menu";
 };
+export {};

package/dist/dropdownRaw/dropdownHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAllyTriggerProps = exports.getSelectedCount = exports.getStringFromAllSelected = exports.getStringFromSelected = exports.checkIsDataProblem = exports.prepareSelectedIdsToItems = exports.compareObjectsArrays = exports.compareStringsArrays = exports.createListDataOptions = exports.createSingleListOptions = exports.applySortSelectedToTop = exports.sortDropdownItemArray = exports.createOptions = exports.isAllItemsHasOneParent = exports.getDataForChange = exports.isEveryItemSelected = exports.isAllChildrenSelected = exports.getListDataWithDisabled = exports.getGroupsTreeItem = void 0;
+exports.getAllyTriggerProps = exports.getSelectedCount = exports.getStringFromAllSelected = exports.getStringFromSelected = exports.checkIsDataProblem = exports.prepareSelectedIdsToItems = exports.compareObjectsArrays = exports.compareStringsArrays = exports.createListDataOptions = exports.createSingleListOptions = exports.applySortSelectedToTop = exports.hasSelectedChild = exports.sortDropdownItemArray = exports.createOptions = exports.isAllItemsHasOneParent = exports.getDataForChange = exports.isEveryItemSelected = exports.isAllChildrenSelected = exports.getListDataWithDisabled = exports.getGroupsTreeItem = void 0;
 exports.prepareComboOptionsForList = prepareComboOptionsForList;
 const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const stateReducerHelper_1 = require("./stateReducer/stateReducerHelper");
@@ -93,21 +93,44 @@ const sortDropdownItemArray = (arr, sortFn) => {
     return arr;
 };
 exports.sortDropdownItemArray = sortDropdownItemArray;
+/**
+ * An item is half selected when at least one of its direct children is selected — the state its checkbox
+ * shows as indeterminate (see `prepareComboOptionsForList`). `selectedSet` is passed in so the sort can use
+ * its own snapshot of the selection instead of the live one.
+ */
+const hasSelectedChild = (groupsMap, itemId, selectedSet) => {
+    const group = groupsMap[itemId];
+    return group ? (0, stateReducerHelper_1.getChildList)(group.children).some(child => selectedSet.has(child.id)) : false;
+};
+exports.hasSelectedChild = hasSelectedChild;
 /**
  * Floats selected items to the top of the list while preserving the relative order within each
- * group (selected and unselected). When `selectedIds` is empty the original array is returned
- * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ * group. The order is: selected items that can be toggled, then selected items that are disabled
+ * (so a newly selected item is never pushed down by disabled ones), then everything else. An item
+ * counts as selected when its own id is in `selectedIds` or when `isPartiallySelected` returns true
+ * for it, so half selected items sit with the selected ones. When `selectedIds` is empty the original
+ * array is returned unchanged (no allocation). Uses a single-pass partition to avoid traversing
+ * `items` more than once.
  */
-const applySortSelectedToTop = (items, selectedIds) => {
+const applySortSelectedToTop = (items, selectedIds, { isPartiallySelected, isDisabled } = {}) => {
     if (!selectedIds.length)
         return items;
     const selectedSet = new Set(selectedIds);
     const selected = [];
+    const selectedDisabled = [];
     const unselected = [];
     for (const item of items) {
-        (selectedSet.has(item.id) ? selected : unselected).push(item);
+        if (!selectedSet.has(item.id) && !(isPartiallySelected === null || isPartiallySelected === void 0 ? void 0 : isPartiallySelected(item))) {
+            unselected.push(item);
+        }
+        else if (isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(item)) {
+            selectedDisabled.push(item);
+        }
+        else {
+            selected.push(item);
+        }
     }
-    return [...selected, ...unselected];
+    return [...selected, ...selectedDisabled, ...unselected];
 };
 exports.applySortSelectedToTop = applySortSelectedToTop;
 const createSingleListOptions = (stateObj, translate, listItem) => {

package/dist/dropdownRaw/dropdownRaw.js

@@ -1155,20 +1155,36 @@ const DropdownRaw = props => {
         // hasApplyButton=true: uses globalSelectedIds (committed selection) — reordering
         //   only takes effect after the user clicks "Apply".
         const idsForSort = hasApplyButton ? state.globalSelectedIds : state.sortedTopSnapshot;
-        const floated = sortSelectedToTop ? (0, dropdownHelper_1.applySortSelectedToTop)(children, idsForSort) : children;
-        rawItems = floated.slice(0, listLimit);
         if (sortSelectedToTop) {
+          // Half selected items (a direct child is selected, shown as indeterminate) float with the selected ones.
+          // Disabled selected items follow the selectable ones; in a nested list `disabled` is not enforced (see createOptions).
           const selectedSet = new Set(idsForSort);
-          pinnedCount = rawItems.filter(item => selectedSet.has(item.id)).length;
+          const isPartiallySelected = item => (0, dropdownHelper_1.hasSelectedChild)(state.groupsMap, item.id, selectedSet);
+          const isDisabled = item => Boolean(item.disabled) && !state.isNestedList;
+          rawItems = (0, dropdownHelper_1.applySortSelectedToTop)(children, idsForSort, {
+            isPartiallySelected,
+            isDisabled
+          }).slice(0, listLimit);
+          pinnedCount = rawItems.filter(item => selectedSet.has(item.id) || isPartiallySelected(item)).length;
+        } else {
+          rawItems = children.slice(0, listLimit);
         }
       }
       const listData = (0, dropdownHelper_1.createListDataOptions)(state, translate, rawItems, multiselect, currentAllSelected);
       // Explicit bounds check (rather than relying on CheckboxListWithAction's own
       // `ind < optionsArr.length - 1` guard) keeps the "don't draw a trailing divider"
       // intent local to where the boundary is computed.
-      const currentListData = multiselect && sortSelectedToTop && pinnedCount > 0 && pinnedCount < listData.length ? listData.map((opt, ind) => ind === pinnedCount - 1 ? Object.assign(Object.assign({}, opt), {
-        divider: true
-      }) : opt) : listData;
+      // Floated items drop their own dividers, so the boundary divider is the only one drawn between them and the rest.
+      const currentListData = multiselect && sortSelectedToTop && pinnedCount > 0 && pinnedCount < listData.length ? listData.map((opt, ind) => {
+        if (ind === pinnedCount - 1) {
+          return Object.assign(Object.assign({}, opt), {
+            divider: true
+          });
+        }
+        return ind < pinnedCount && opt.divider ? Object.assign(Object.assign({}, opt), {
+          divider: false
+        }) : opt;
+      }) : listData;
       return (0, jsx_runtime_1.jsx)(dropdownList_1.DropdownList, {
         onBackButtonClick: handleBackButtonClick,
         onSelectAllClick: isSearchMode ? handleSelectAllInSearch : handleSelectAllClick,

package/dist/header/components/collapsedItemsControl/collapsedItemsControl.js

@@ -111,7 +111,7 @@ const PageToolbarCollapsedItemsControl = ({
         rel: child.props.rel,
         icon: child.props.icon,
         iconOpen: child.props.iconOpen,
-        destructive: child.props.destructive
+        destructive: child.props.type === buttonType_1.ButtonType.Destructive || child.props.type === buttonType_1.ButtonType.TertiaryDestructive
       });
       items.push(el);
     }

package/dist/header/headerButton.d.ts

@@ -8,7 +8,6 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
     inContextMenu?: boolean;
     icon?: React.FC<IIcon>;
     iconOpen?: boolean;
-    destructive?: boolean;
     iconPosition?: TButtonIconPosition;
     iconClasses?: string;
     iconSize?: TSvgIconSize;
@@ -16,6 +15,6 @@ export interface IHeaderButton extends Omit<IButton, "onClick"> {
 }
 export declare const HeaderButtonDisplayName = "HeaderButton";
 export declare const HeaderButton: {
-    ({ id, children, icon, iconOpen, destructive, iconPosition, className, important, onClick, inContextMenu, disabled, focusableWhenDisabled, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, icon, iconOpen, iconPosition, className, important, onClick, inContextMenu, disabled, focusableWhenDisabled, ...restProps }: IHeaderButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/header/headerButton.js

@@ -18,7 +18,7 @@ const textIconButton_1 = require("../textIconButton/textIconButton");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 exports.HeaderButtonDisplayName = "HeaderButton";
 const HeaderButton = (_a) => {
-    var { id, children, icon, iconOpen, destructive, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "destructive", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabled", "focusableWhenDisabled"]);
+    var { id, children, icon, iconOpen, iconPosition = textIconButton_1.ButtonIconPosition.Start, className = "", important, onClick, inContextMenu, disabled, focusableWhenDisabled } = _a, restProps = __rest(_a, ["id", "children", "icon", "iconOpen", "iconPosition", "className", "important", "onClick", "inContextMenu", "disabled", "focusableWhenDisabled"]);
     const fullClassName = (0, classNames_1.classNames)(["zen-header-button", className]);
     const props = Object.assign(Object.assign({}, restProps), { disabled, "data-important": important ? "1" : "0", 
         // Defaults on when disabled; pass `focusableWhenDisabled={false}` to opt back into native `disabled`.

package/dist/index.css

@@ -4931,8 +4931,8 @@ html:lang(ar) .zen-mobile-sheet__title {
   gap: 1.5rem;
   height: 100%;
 }
-.zen-form-section .zen-form-field-label--top + .zen-form-control {
-  margin-block-start: -1.25rem;
+.zen-form-section .zen-form-field-label--top {
+  margin-block-end: -1.25rem;
 }
 .zen-form-section--desktop.zen-form-section--one-column {
   grid-template-columns: repeat(8, 1fr);

package/dist/pillExpandable/pillExpandable.js

@@ -428,6 +428,7 @@ const PillExpandableBase = ({
 }) => {
   const popupId = (0, react_1.useId)();
   const descriptionId = (0, react_1.useId)();
+  const counterId = (0, react_1.useId)();
   const [descriptionElement, setDescriptionElement] = (0, react_1.useState)(null);
   const isDrive = (0, useDrive_1.useDrive)();
   const [isMobile, setIsMobile] = (0, react_1.useState)(false);
@@ -596,10 +597,11 @@ const PillExpandableBase = ({
           errorHandler: errorHandler,
           isBeta: isBeta,
           isMobile: isMobile,
-          descriptionId: isPopupOpen && descriptionElement ? descriptionId : undefined,
+          descriptionId: [uniqueChildren && !hideCounterNumber ? counterId : undefined, isPopupOpen && descriptionElement ? descriptionId : undefined].filter(Boolean).join(" ") || undefined,
           ariaHasPopup: "dialog",
           dataAnalyticsId: dataAnalyticsId
         }), uniqueChildren && (0, jsx_runtime_1.jsx)(pillExpandableSimple_1.PillExpandableSimple, {
+          id: counterId,
           icon: secondaryIcon || effectiveIcon,
           text: hideCounterNumber ? "" : counterText,
           includeExpandIcon: false,

package/dist/pillExpandable/pillExpandableSimple.d.ts

@@ -2,6 +2,7 @@ import { FC, RefObject } from "react";
 import { IPillExpandableBase, TPillType } from "./pillExpandable";
 import { IIcon } from "../icons/icon";
 interface IPillExpandableSimple extends IPillExpandableBase {
+    id?: string;
     includeExpandIcon?: boolean;
     expanded?: boolean;
     onExpand?: () => void;
@@ -15,7 +16,7 @@ interface IPillExpandableSimple extends IPillExpandableBase {
     type?: TPillType;
 }
 export declare const PillExpandableSimple: {
-    ({ onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId }: IPillExpandableSimple): import("react/jsx-runtime").JSX.Element;
+    ({ id, onExpand, text, expanded, includeExpandIcon, type, icon, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId }: 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, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
+const PillExpandableSimple = ({ id, onExpand, text, expanded, includeExpandIcon = true, type = "warning", icon = iconException_1.IconException, isBeta, isMobile, ref, className, descriptionId, ariaHasPopup, isDecorative, dataAnalyticsId
 // eslint-disable-next-line complexity
  }) => {
     const iconDriveClassName = (0, useDriveClassName_1.useDriveClassName)("icon");
@@ -37,7 +37,7 @@ const PillExpandableSimple = ({ onExpand, text, expanded, includeExpandIcon = tr
                         size: iconSize
                     }) }) }))] }));
     if (isDecorative) {
-        return ((0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)([
+        return ((0, jsx_runtime_1.jsx)("span", { id: id, className: (0, classNames_1.classNames)([
                 "zen-status-pill__container",
                 `zen-status-pill__container--${type}`,
                 containerDriveClassName || "",

package/dist/table/selectable/interfaces.d.ts

@@ -15,6 +15,12 @@ export interface ISelectionValue {
      * Consumers opting in must resolve the effective selection before running bulk actions.
      */
     selected: string[];
+    /**
+     * Excluded nested groups, including children that have not loaded yet. Only used with
+     * allowExclusions and all: true. Preserve this field when saving controlled selection;
+     * resolve these groups as well as selected before running a bulk action.
+     */
+    excludedGroupIds?: string[];
 }
 /**
  * One checkbox row in the order it is rendered. Expanded nested rows are part of this list,

package/dist/table/selectable/useDragSelection.d.ts

@@ -4,7 +4,7 @@ import { IDragSelectionRow } from "./interfaces";
  * @param rows every checkbox row in render order, expanded nested rows included, so ranges can
  * span nesting levels.
  */
-export declare const useDragSelection: (rows: IDragSelectionRow[], gridRef: RefObject<HTMLElement | null> | undefined, onBatchSelect: (rangeIds: string[], select: boolean, base: Set<string>) => void, getBaseSelection: () => Set<string>, isSelectable: (row: IDragSelectionRow) => boolean, isEnabled: boolean) => {
+export declare const useDragSelection: <TSelection = Set<string>>(rows: IDragSelectionRow[], gridRef: RefObject<HTMLElement | null> | undefined, onBatchSelect: (rangeIds: string[], select: boolean, base: TSelection) => void, getBaseSelection: () => TSelection, isSelectable: (row: IDragSelectionRow) => boolean, isEnabled: boolean) => {
     onCheckboxMouseDown: (id: string, checked: boolean, e: ReactMouseEvent) => void;
     suppressNextChangeRef: RefObject<boolean>;
 };

package/dist/table/selectable/useDragSelection.js

@@ -22,7 +22,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
     isEnabledRef.current = isEnabled;
     const anchorIdRef = (0, react_1.useRef)(null);
     const anchorSelectRef = (0, react_1.useRef)(true);
-    const baseSelectedRef = (0, react_1.useRef)(new Set());
+    const baseSelectedRef = (0, react_1.useRef)(null);
     const isDraggingRef = (0, react_1.useRef)(false);
     const movedRef = (0, react_1.useRef)(false);
     const lastResultKeyRef = (0, react_1.useRef)("");
@@ -31,7 +31,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
     const attachedGridElementRef = (0, react_1.useRef)(null);
     const emitRange = (0, react_1.useCallback)((currentId) => {
         const anchorId = anchorIdRef.current;
-        if (anchorId === null) {
+        if (anchorId === null || baseSelectedRef.current === null) {
             return;
         }
         const range = (0, getRangeIds_1.getRangeIds)(rowsRef.current, anchorId, currentId, isSelectableRef.current);
@@ -85,7 +85,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
         (_c = attachedGridElementRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener("scroll", onScroll);
         (_d = attachedGridElementRef.current) === null || _d === void 0 ? void 0 : _d.classList.remove(DRAG_CLASS);
         attachedGridElementRef.current = null;
-    }, [onMouseMove, onScroll]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [onMouseMove, onScroll]);
     const onCheckboxMouseDown = (0, react_1.useCallback)((id, checked, e) => {
         var _a, _b, _c, _d, _e;
         // Right-click between drag-end and the trailing click must not clear suppression.
@@ -95,7 +95,7 @@ const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSele
         if (!isEnabledRef.current || e.button !== 0) {
             return;
         }
-        if (e.shiftKey && anchorIdRef.current !== null) {
+        if (e.shiftKey && anchorIdRef.current !== null && baseSelectedRef.current !== null) {
             e.preventDefault();
             const anchorId = anchorIdRef.current;
             const anchorInList = rowsRef.current.some(row => row.id === anchorId);

package/dist/table/selectable/useSelectableRows.d.ts

@@ -10,6 +10,8 @@ export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEnti
     onSelect: (selection: ISelectionValue) => void;
     /** Preserve cross-page Select All using excluded IDs. Consumers must resolve exclusions before running bulk actions. Defaults to false. */
     allowExclusions?: boolean;
+    /** Changes when the dataset represented by the selection is replaced, rather than paged. */
+    selectionDatasetId?: string | number;
     checkboxDisabled?: (entity: T | N, isNested?: boolean) => boolean;
     checkboxVisible?: (entity: T | N, isNested?: boolean) => boolean;
     checkboxInHeader?: boolean;