@geotab/zenith 3.16.0-beta.2 → 3.16.0-beta.3

package/README.md

@@ -49,28 +49,31 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ### 3.16.0
 
-- Add `Tooltip.Inline` subcomponent for inline tooltip triggers
+- Add `Tooltip.InlineTrigger` subcomponent for inline tooltip triggers
+- Add `TrendIndicator` component, the `getTrendIndicatorDirection` helper, and `Table.TrendIndicator`
 - Add popup button variant for `Nav` items
 - Add integer-only mode prop to `Range` / `FilterBar.Range`
-- Add Arabic language support
 - Add experimental feature-flag infrastructure (`ZenithExperimentalProvider`, `useExperimentalFeature`)
 - Expose `Tag` and `ProgressIndicator` as `Table` sub-components (`Table.Tag`, `Table.ProgressIndicator`)
-- Complete RTL logical-direction support: CSS logical modifiers, `TAlignment` deprecated in favour of logical direction values, controlled `Popup` migration
-- Export `getTrendIndicatorDirection` helper
-- Add support for six additional languages
-- Fix cross-page selection in selectable tables clearing when a row is unchecked after select-all
+- Add `MODAL_SCROLL_LOCK_CLASS` export to control scroll-lock release timing when a `Modal` closes
+- Rename the Arabic locale from `ar` to `ar-001`; `ar` and any `ar-*` value still resolve to it
+- Migrate component alignment defaults to logical direction values — `ControlledPopup` now defaults to `bottom-start` and `Tooltip` to `end`
+- Complete RTL logical-direction support: `ControlledPopup` migration and `PillExpandable` alignment flipping
+- Remove `isBannerTarget` from the side panel overlay target checks
+- Apply `dataAnalyticsId` to nested `PillExpandable` child pill triggers
+- Resolve 20 npm audit vulnerabilities in Zenith dependencies
+- Add an `ariaLabel` prop to `Checkbox` and accessible names to `Dropdown` multi-select options
 - Fix multiline `Banner` header spacing when there is no close button
 - Fix scrolling in `Tabs` and `FiltersBar`
-- Fix `Tabs` fading and side panel slide direction in RTL layouts
+- Fix `Tabs` fading in RTL layouts
+- Fix side panel slide direction in RTL layouts
 - Fix pills and chips scrolling the page to a blank area in RTL
-- Fix icons ignoring their component's colour
 - Fix mobile header overflow and `ReportsPopup` missing from the kebab menu in non-English languages
-- Move `Tabs` :focus-visible outline outside the tab to distinguish it from the active state
+- Distinguish the `Tabs` focus ring from the active tab, and move focus to a tab only on user-initiated changes
 - Fix `BetaPill` synthesising a Send feedback button when `feedbackAction` is undefined
-- Migrate component alignment defaults to logical direction values
-- Fix Storybook brand URL to resolve based on the environment
+- Fix `Nav` mobile search autofocusing when the search box is closed
 - Fix `AutoFill` not selecting the chosen option on `DropdownRaw`
-- Resolve 20 npm audit vulnerabilities in Zenith dependencies
+- Fix `LineChart` tooltip interpolation and accessible chart dates when a custom x-axis parser is used
 
 ### 3.15.0
 

package/dist/absolute/absolute.js

@@ -111,7 +111,7 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
             returnFocusToTrigger();
         }
     }, [isOpen, returnFocusToTrigger]);
-    const condition = (0, react_1.useCallback)((subscriptionTrigger) => useTrapFocusWithTrigger !== "off" && !!subscriptionTrigger, [useTrapFocusWithTrigger]);
+    const condition = (0, react_1.useCallback)(() => (useTrapFocusWithTrigger === "off" ? false : true), [useTrapFocusWithTrigger]);
     (0, useTrapFocus_1.useTrapFocus)(popupRef, useTrapFocusWithTrigger === "withTrigger" ? triggerRef : undefined, isOpen, condition);
     (0, useEscape_1.useEscape)(popupRef, handleEscape, isOpen);
     (0, useArrowKey_1.useArrowKey)(popupRef, handleEscape, isOpen);

package/dist/chart/plugins/linePlugin/getInterpolatedValue.d.ts

@@ -1,3 +1,3 @@
-import { Scale } from "chart.js";
+import { Scale, type ChartOptions } from "chart.js";
 import { ILineChartData } from "../../lineChart/interfaces";
-export declare function getInterpolatedValue(xScale: Scale, data: ILineChartData, datasetIndex: number, xPixel: number): number | null;
+export declare function getInterpolatedValue(xScale: Scale, data: ILineChartData, datasetIndex: number, xPixel: number, parsing?: ChartOptions<"line">["parsing"]): number | null;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInterpolatedValue = getInterpolatedValue;
-function getInterpolatedValue(xScale, data, datasetIndex, xPixel) {
+function getInterpolatedValue(xScale, data, datasetIndex, xPixel, parsing) {
     const dataset = data.datasets[datasetIndex];
     const dataPoints = dataset.data;
     if (dataPoints.length < 2) {
@@ -18,7 +18,8 @@ function getInterpolatedValue(xScale, data, datasetIndex, xPixel) {
         if (y === null) {
             continue;
         }
-        const pointXPixel = xScale.getPixelForValue(x);
+        const parsedX = parsing === false ? x : xScale.parse(x, i);
+        const pointXPixel = xScale.getPixelForValue(parsedX);
         if (pointXPixel <= xPixel && pointXPixel > lowerXPixel) {
             lowerPoint = y;
             lowerXPixel = pointXPixel;

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

@@ -60,6 +60,7 @@ const LinePlugin = (containerId, options, isDark) => ({
             let lowestValueY = Infinity;
             const items = datasets
                 .map((dataset, dsIndex) => {
+                var _a;
                 if (!chart.isDatasetVisible(dsIndex)) {
                     return undefined;
                 }
@@ -67,7 +68,7 @@ const LinePlugin = (containerId, options, isDark) => ({
                     return undefined;
                 }
                 const xScale = chart.scales.x;
-                const value = (0, getInterpolatedValue_1.getInterpolatedValue)(xScale, chart.data, dsIndex, x);
+                const value = (0, getInterpolatedValue_1.getInterpolatedValue)(xScale, chart.data, dsIndex, x, (_a = dataset.parsing) !== null && _a !== void 0 ? _a : chart.options.parsing);
                 const yAxisID = dataset.yAxisID || "y";
                 const yScale = chart.scales[yAxisID];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/dist/chart/utils/getFormattedLabel.js

@@ -6,14 +6,18 @@ function getFormattedLabel(value, dateFormatter, options) {
     var _a, _b, _c;
     const scaleType = (_b = (_a = options === null || options === void 0 ? void 0 : options.scales) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.type;
     let format;
+    let parser;
     if (((_c = options === null || options === void 0 ? void 0 : options.scales) === null || _c === void 0 ? void 0 : _c.x) && scaleType) {
         const scaleFormat = options.scales.x[scaleType];
         if ((scaleFormat === null || scaleFormat === void 0 ? void 0 : scaleFormat.unit) && scaleFormat.displayFormats && scaleFormat.displayFormats[scaleFormat.unit]) {
             format = scaleFormat.displayFormats[scaleFormat.unit];
         }
+        if (options.parsing !== false && scaleFormat && "parser" in scaleFormat && typeof scaleFormat.parser === "function") {
+            parser = scaleFormat.parser;
+        }
     }
     if (value instanceof Date || (typeof value === "string" && (0, isDateString_1.isDateString)(value))) {
-        return dateFormatter(value, format);
+        return dateFormatter(parser ? new Date(parser(value)) : value, format);
     }
     return String(value);
 }

package/dist/checkbox/checkbox.d.ts

@@ -8,6 +8,7 @@ export interface ICheckbox extends IZenComponentProps {
     checked?: boolean;
     indeterminate?: boolean;
     title?: string;
+    ariaLabel?: string;
     disabled?: boolean;
     fullWidth?: boolean;
     reverse?: boolean;
@@ -16,4 +17,4 @@ export interface ICheckbox extends IZenComponentProps {
     tabIndex?: number;
     describedBy?: string;
 }
-export declare const Checkbox: ({ reverse, fullWidth, id, checked, indeterminate, title, className, children, disabled, wrapped, describedBy, ...rest }: ICheckbox) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ reverse, fullWidth, id, checked, indeterminate, title, ariaLabel, className, children, disabled, wrapped, describedBy, ...rest }: ICheckbox) => import("react/jsx-runtime").JSX.Element;

package/dist/checkbox/checkbox.js

@@ -56,14 +56,14 @@ const checkboxIconCheckmark_1 = require("./checkboxIconCheckmark");
 const checkboxIconMinus_1 = require("./checkboxIconMinus");
 const useMobile_1 = require("../commonHelpers/hooks/useMobile");
 const Checkbox = (_a) => {
-    var { reverse, fullWidth, id, checked, indeterminate, title, className = "", children, disabled, wrapped, describedBy } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "className", "children", "disabled", "wrapped", "describedBy"]);
+    var { reverse, fullWidth, id, checked, indeterminate, title, ariaLabel, className = "", children, disabled, wrapped, describedBy } = _a, rest = __rest(_a, ["reverse", "fullWidth", "id", "checked", "indeterminate", "title", "ariaLabel", "className", "children", "disabled", "wrapped", "describedBy"]);
     const state = (0, checkboxUtils_1.getCheckboxState)(checked, indeterminate);
     const generatedId = react_1.default.useId();
     const intId = id || generatedId;
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox");
     const isMobile = (0, useMobile_1.useMobile)();
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
-    const checkbox = ((0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
+    const checkbox = ((0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": ariaLabel || title, "aria-describedby": describedBy }, rest)));
     const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", "aria-hidden": true, children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
         return ((0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -453,6 +453,7 @@ const CheckboxListWithAction = ({
             checked: opt.checked,
             disabled: opt.blocked,
             title: translate("Toggle {groupName} filter").replace("{groupName}", titleForRender),
+            ariaLabel: titleForRender,
             describedBy: opt.isWithAction ? navigationInstructionsId : undefined,
             "data-indeterminate": opt.partialChecked,
             tabIndex: getTabIndex(ind, "checkbox", opt.blocked),

package/dist/commonHelpers/hooks/useTrapFocus.d.ts

@@ -1,13 +1,4 @@
 import { RefObject } from "react";
 type TElementToBool = (element: HTMLElement) => boolean;
-/**
- * Traps keyboard (Tab) focus within `containerRef` (and optionally its `triggerRef`).
- *
- * Nested-popup contract: for correct nested-popup behaviour, a focused element that triggers an
- * open child popup must expose a `data-popup-id` attribute whose value is the `id` of the child
- * popup element rendered in the DOM. When present, focus is deferred to that child popup's trap.
- * This contract is fulfilled automatically by `ControlledPopup`; callers using `useTrapFocus`
- * directly must set `data-popup-id` themselves or nested popups will silently lose focus handling.
- */
 export declare const useTrapFocus: (containerRef: RefObject<HTMLElement | null>, triggerRef: RefObject<HTMLElement | null> | undefined, subscriptionTrigger: unknown, condition?: (t: unknown) => boolean, isElementVisible?: TElementToBool) => void;
 export {};

package/dist/commonHelpers/hooks/useTrapFocus.js

@@ -9,38 +9,18 @@ const isChildOf_1 = require("../../utils/isChildOf");
 const isElementHidden_1 = require("../../utils/isElementHidden");
 const zen_1 = require("../../utils/zen");
 const findFirstVisible = (elems, isElementVisible) => elems.find(elem => isElementVisible(elem));
-/**
- * Traps keyboard (Tab) focus within `containerRef` (and optionally its `triggerRef`).
- *
- * Nested-popup contract: for correct nested-popup behaviour, a focused element that triggers an
- * open child popup must expose a `data-popup-id` attribute whose value is the `id` of the child
- * popup element rendered in the DOM. When present, focus is deferred to that child popup's trap.
- * This contract is fulfilled automatically by `ControlledPopup`; callers using `useTrapFocus`
- * directly must set `data-popup-id` themselves or nested popups will silently lose focus handling.
- */
 const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition, isElementVisible) => {
     /* eslint-disable complexity */
     const handleKeyDown = (0, react_1.useCallback)(e => {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f;
         /* eslint-enable complexity */
         const getChildCondition = () => {
-            var _a, _b, _c;
-            const targetEl = e.target;
-            // If the target is a trigger for an open child popup, defer to that popup's
-            // focus trap. Key on data-popup-id + DOM presence so this works even when
-            // preventAttributesAutoSet suppresses aria-expanded.
-            const dataPopupId = targetEl.getAttribute("data-popup-id");
-            if (dataPopupId &&
-                ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(dataPopupId)) &&
-                (0, isChildOf_1.isChildOf)(targetEl, containerRef.current) &&
-                targetEl !== (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
-                return true;
-            }
+            var _a, _b;
             return triggerRef
-                ? !(0, isChildOf_1.isChildOf)(targetEl, containerRef.current) &&
-                    targetEl !== ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body) &&
-                    !(0, isChildOf_1.isChildOf)(targetEl, triggerRef.current)
-                : !(0, isChildOf_1.isChildOf)(targetEl, containerRef.current) && targetEl !== ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.body);
+                ? !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) &&
+                    e.target !== ((_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body) &&
+                    !(0, isChildOf_1.isChildOf)(e.target, triggerRef.current)
+                : !(0, isChildOf_1.isChildOf)(e.target, containerRef.current) && e.target !== ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body);
         };
         if (!containerRef.current || getChildCondition()) {
             return;
@@ -50,14 +30,9 @@ const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition,
             : !(0, dialogHelpers_1.isElementInsideContainer)(target, containerEl.current) &&
                 !(0, dialogHelpers_1.isElementInsideContainer)(target, triggerEl.current);
         const isTargetOutside = e.target ? checkIsElementOutside(e.target, containerRef, triggerRef) : undefined;
-        const triggerElement = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) !== null && _a !== void 0 ? _a : null;
-        const triggerSelf = (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.matches(focusableSelector_1.FOCUSABLE_SELECTOR)) ? [triggerElement] : [];
-        const triggerChildren = Array.from((_b = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)) !== null && _b !== void 0 ? _b : []);
-        // querySelectorAll only returns descendants (never the element itself), so triggerSelf
-        // and triggerChildren are disjoint by definition and need no deduplication.
-        const triggerSelectors = [...triggerSelf, ...triggerChildren];
+        const triggerSelectors = ((_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR)) || [];
         const containerSelectors = containerRef.current.querySelectorAll(focusableSelector_1.FOCUSABLE_SELECTOR);
-        const focusable = triggerRef ? [...triggerSelectors, ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
+        const focusable = triggerRef ? [...Array.from(triggerSelectors), ...Array.from(containerSelectors)] : [...Array.from(containerSelectors)];
         if (!focusable.length) {
             return;
         }
@@ -74,59 +49,32 @@ const useTrapFocus = (containerRef, triggerRef, subscriptionTrigger, condition,
                 return;
             }
             if (e.shiftKey) {
-                if (((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === first) {
+                if (((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.activeElement) === first) {
                     e.preventDefault();
                     last === null || last === void 0 ? void 0 : last.focus();
                     return;
                 }
-                if (firstContainerFocusable && ((_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === firstContainerFocusable) {
+                if (firstContainerFocusable && ((_c = zen_1.zen.document) === null || _c === void 0 ? void 0 : _c.activeElement) === firstContainerFocusable) {
                     e.preventDefault();
                     lastTriggerFocusable === null || lastTriggerFocusable === void 0 ? void 0 : lastTriggerFocusable.focus();
                 }
                 return;
             }
-            if (((_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === last) {
+            if (((_d = zen_1.zen.document) === null || _d === void 0 ? void 0 : _d.activeElement) === last) {
                 e.preventDefault();
                 first === null || first === void 0 ? void 0 : first.focus();
                 return;
             }
-            if (lastTriggerFocusable && ((_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.activeElement) === lastTriggerFocusable) {
+            if (lastTriggerFocusable && ((_e = zen_1.zen.document) === null || _e === void 0 ? void 0 : _e.activeElement) === lastTriggerFocusable) {
                 e.preventDefault();
                 firstContainerFocusable === null || firstContainerFocusable === void 0 ? void 0 : firstContainerFocusable.focus();
             }
-            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)((_g = zen_1.zen.document) === null || _g === void 0 ? void 0 : _g.activeElement, first)) {
+            else if (isLastChildOfFirst && first && (0, isChildOf_1.isChildOf)((_f = zen_1.zen.document) === null || _f === void 0 ? void 0 : _f.activeElement, first)) {
                 e.preventDefault();
             }
             return;
         }
-    }, 
-    // condition is consumed by useKeydown below, not read by handleKeyDown directly; its absence from deps is intentional.
-    [containerRef, triggerRef, isElementVisible]);
+    }, [containerRef, triggerRef, isElementVisible]);
     (0, useKeydown_1.useKeydown)(handleKeyDown, subscriptionTrigger, condition);
-    // When withTrigger mode closes (condition goes false), restore focus to the trigger
-    // if focus landed on body (which happens when the popup's focused element is unmounted).
-    // This restoration is intentionally scoped to the "focused element unmounted → body" case;
-    // the general close case (e.g. click-outside, item selection) is handled separately by the
-    // returnFocusToTrigger effect in absolute.tsx. Both are idempotent, so overlap is harmless.
-    // Initialized to false because popups mount closed; the guard below reconciles the first
-    // active/inactive edge, so a popup that mounts already open still resolves correctly.
-    const isActiveRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        const isActive = condition ? condition(subscriptionTrigger) : !!subscriptionTrigger;
-        // Guard: short-circuit when the raw open/close state is unchanged to avoid spurious
-        // focus restoration if an unstable condition reference re-fires this effect.
-        if (!!subscriptionTrigger === isActiveRef.current) {
-            isActiveRef.current = isActive;
-            return;
-        }
-        if (!isActive && isActiveRef.current && (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current)) {
-            const active = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.activeElement;
-            if (!active || active === ((_b = zen_1.zen.document) === null || _b === void 0 ? void 0 : _b.body)) {
-                triggerRef.current.focus();
-            }
-        }
-        isActiveRef.current = isActive;
-    }, [condition, subscriptionTrigger, triggerRef]);
 };
 exports.useTrapFocus = useTrapFocus;

package/dist/dataGrid/columns/checkboxColumn/checkboxCell.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactElement } from "react";
+import { FC, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactElement } from "react";
 import { IZenIdComponentProps } from "../../../commonHelpers/zenComponent";
 import "./checkboxColumn.less";
 interface ICheckboxCellProps extends IZenIdComponentProps {
@@ -8,6 +8,7 @@ interface ICheckboxCellProps extends IZenIdComponentProps {
     disabled?: boolean;
     children?: ReactElement<typeof CheckboxCell.Content>;
     onChange?: (id: string, checked: boolean) => void;
+    onMouseDown?: (id: string, checked: boolean, e: ReactMouseEvent) => void;
 }
 interface ICheckboxCell extends FC<ICheckboxCellProps> {
     Content: FC<PropsWithChildren>;

package/dist/dataGrid/columns/checkboxColumn/checkboxCell.js

@@ -4,7 +4,7 @@ exports.CheckboxCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const checkbox_1 = require("../../../checkbox/checkbox");
 const classNames_1 = require("../../../commonHelpers/classNames/classNames");
-const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, children }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox-column", className || ""]), children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "zen-checkbox-column__checkbox", checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, onChange: e => onChange && onChange(id, e.target.checked), wrapped: true }), children] }));
+const CheckboxCell = ({ id, checked, indeterminate, label, disabled, className, onChange, onMouseDown, children }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox-column", className || ""]), onMouseDown: onMouseDown ? e => onMouseDown(id, checked, e) : undefined, children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: "zen-checkbox-column__checkbox", checked: checked, indeterminate: indeterminate, disabled: disabled, title: label, onChange: e => onChange && onChange(id, e.target.checked), wrapped: true }), children] }));
 exports.CheckboxCell = CheckboxCell;
 exports.CheckboxCell.Content = function content({ children }) {
     return (0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox-column__content", children: children });

package/dist/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject } from "react";
+import { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from "react";
 import { IListColumnWrapper } from "../../listColumn";
 import "./checkboxColumn.less";
 import { SimpleEventHandler } from "../../../commonHelpers/simpleEventHandler";
@@ -17,7 +17,8 @@ export interface ICheckboxColumnWrapper<T extends object> extends IListColumnWra
     attach(event: "toggle", handler: (state: [Event, HTMLButtonElement]) => void): this;
     attach(event: "change", handler: (state: [string, boolean]) => void): this;
     attach(event: "change-all", handler: (state: [boolean]) => void): this;
-    detach(event: "change" | "toggle" | "change-all", handler?: (state: unknown) => void): this;
+    attach(event: "mousedown", handler: (state: [string, boolean, ReactMouseEvent]) => void): this;
+    detach(event: "change" | "toggle" | "change-all" | "mousedown", handler?: (state: unknown) => void): this;
 }
 export declare enum SelectionState {
     All = 0,
@@ -34,6 +35,7 @@ export declare class CheckboxColumnWrapper<T extends IEntityWithId> extends Simp
     private state;
     private readonly actionsClickHandler;
     private readonly changeHandler;
+    private readonly mouseDownHandler;
     private readonly changeHandlerAll;
     constructor(selections: Set<string>, options: ICheckboxColumnOptions<T>, menuTriggerRef: RefObject<HTMLButtonElement | null>);
     get selectionState(): SelectionState;

package/dist/dataGrid/columns/checkboxColumn/checkboxColumnWrapper.js

@@ -67,6 +67,15 @@ class CheckboxColumnWrapper extends simpleEventHandler_1.SimpleEventHandler {
                 this.fire("change", [id, checked]);
             }
         });
+        // Only fired for enabled checkboxes, so a disabled row can never become a drag anchor.
+        Object.defineProperty(this, "mouseDownHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (id, checked, e) => {
+                this.fire("mousedown", [id, checked, e]);
+            }
+        });
         Object.defineProperty(this, "changeHandlerAll", {
             enumerable: true,
             configurable: true,
@@ -92,7 +101,7 @@ class CheckboxColumnWrapper extends simpleEventHandler_1.SimpleEventHandler {
         }
         const allowed = this.condition(entity);
         const isDisable = this.disabled ? this.disabled(entity) : this.state === SelectionState.All;
-        const cell = ((0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, { id: entity.id, className: allowed ? "" : "zen-checkbox-column--no-checkbox", checked: this.state === SelectionState.All || this.selections.has(entity.id), indeterminate: false, disabled: isDisable, label: this.options.createTitle(entity), onChange: this.changeHandler, children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: value }) }));
+        const cell = ((0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, { id: entity.id, className: allowed ? "" : "zen-checkbox-column--no-checkbox", checked: this.state === SelectionState.All || this.selections.has(entity.id), indeterminate: false, disabled: isDisable, label: this.options.createTitle(entity), onChange: this.changeHandler, onMouseDown: isDisable ? undefined : this.mouseDownHandler, children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: value }) }));
         return cell;
     }
     renderHeader(title) {

package/dist/dataGrid/row/row.js

@@ -60,7 +60,8 @@ const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow,
         return acc;
     }, { cells: [], colspan: 0 }).cells, [columns, expanded, getCellParams, isVisible, onExpandedChange, isActive, active, onClick]);
     const cells = (0, react_1.useMemo)(() => renderCells(entity, false), [entity, renderCells]);
-    const nestedCells = (0, react_1.useMemo)(() => (expanded && entity.children ? entity.children : []).map(nestedEntity => renderCells(nestedEntity, true)), [entity.children, expanded, renderCells]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: (0, classNames_1.classNames)(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => ((0, jsx_runtime_1.jsx)("tr", { id: `${mainRowId}_child_${index}`, role: "row", "aria-level": 2, "aria-posinset": index + 1, "aria-setsize": nestedCells.length, className: "zen-data-grid__row zen-data-grid__row--nested", children: nestedRow }, `${mainRowId}_child_${index}`)))] }));
+    const nestedEntities = (0, react_1.useMemo)(() => (expanded && entity.children ? entity.children : []), [entity.children, expanded]);
+    const nestedCells = (0, react_1.useMemo)(() => nestedEntities.map(nestedEntity => renderCells(nestedEntity, true)), [nestedEntities, renderCells]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { "data-row-id": id, id: mainRowId, role: "row", "aria-level": isTreeGrid ? 1 : undefined, "aria-posinset": isTreeGrid ? ariaPosinset : undefined, "aria-setsize": isTreeGrid ? ariaSetsize : undefined, "aria-expanded": isTreeGrid ? expanded : undefined, className: (0, classNames_1.classNames)(["zen-data-grid__row", className || "", isLastRow ? "zen-data-grid__row--last" : ""]), children: cells }, mainRowId), nestedCells.map((nestedRow, index) => ((0, jsx_runtime_1.jsx)("tr", { "data-row-id": nestedEntities[index].id, id: `${mainRowId}_child_${index}`, role: "row", "aria-level": 2, "aria-posinset": index + 1, "aria-setsize": nestedCells.length, className: "zen-data-grid__row zen-data-grid__row--nested", children: nestedRow }, `${mainRowId}_child_${index}`)))] }));
 };
 exports.DataGridRow = (0, react_1.memo)(Row);

package/dist/dataGrid/withSelectableRows/withSelectableRows.js

@@ -15,6 +15,8 @@ const selectList_1 = require("../../selectList/selectList");
 const checkboxState_1 = require("../../checkbox/checkboxState");
 const selectableRowsColumnWrapper_1 = require("./columns/selectableRowsColumnWrapper");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
+const useDragSelection_1 = require("../../table/selectable/useDragSelection");
+const getDragSelectionRows_1 = require("../../table/selectable/utils/getDragSelectionRows");
 injectString("cs", "Select all", "Vybrat v\u0161e");
 injectString("da-DK", "Select all", "V\xE6lg alle");
 injectString("de", "Select all", "Alle ausw\xE4hlen");
@@ -209,13 +211,29 @@ const withSelectableRows = DataGridComponent => {
     const selectMenuRef = (0, react_1.useRef)(null);
     const selections = (0, exports.getSelections)(selection);
     const allSelected = selection !== undefined && selection.allSelected;
-    const wrapper = (0, react_1.useMemo)(() => selectMode ? new selectableRowsColumnWrapper_1.SelectableRowsColumnWrapper(selections, {
-      createTitle: options.createTitle,
-      headerTitle: options.headerTitle,
-      condition: options.condition || options.checkboxVisible,
-      disabled: options.checkboxDisabled ? options.checkboxDisabled : entity => options.selectionLimit !== undefined ? !selections.has(entity.id) && selections.size >= options.selectionLimit : false,
-      header: options.selectionLimit === undefined && options.checkboxDisabled === undefined && options.checkboxVisible === undefined && options.condition === undefined || options.checkboxInHeader === true && !options.selectionLimit
-    }, selectMenuRef) : null, [selectMode, selections, options.createTitle, options.headerTitle, options.condition, options.checkboxVisible, options.checkboxDisabled, options.selectionLimit, options.checkboxInHeader]);
+    const isCheckboxVisible = (0, react_1.useCallback)(entity => {
+      const condition = options.condition || options.checkboxVisible;
+      return condition ? condition(entity) : true;
+    }, [options.condition, options.checkboxVisible]);
+    const isCheckboxDisabled = (0, react_1.useCallback)(entity => {
+      if (options.checkboxDisabled) {
+        return options.checkboxDisabled(entity);
+      }
+      if (options.selectionLimit !== undefined) {
+        return !selections.has(entity.id) && selections.size >= options.selectionLimit;
+      }
+      return false;
+    }, [options, selections]);
+    const wrapper = (0, react_1.useMemo)(() => {
+      var _a;
+      return selectMode ? new selectableRowsColumnWrapper_1.SelectableRowsColumnWrapper(selections, {
+        createTitle: options.createTitle,
+        headerTitle: options.headerTitle,
+        condition: options.condition || options.checkboxVisible,
+        disabled: (_a = options.checkboxDisabled) !== null && _a !== void 0 ? _a : isCheckboxDisabled,
+        header: options.selectionLimit === undefined && options.checkboxDisabled === undefined && options.checkboxVisible === undefined && options.condition === undefined || options.checkboxInHeader === true && !options.selectionLimit
+      }, selectMenuRef) : null;
+    }, [selectMode, selections, options.createTitle, options.headerTitle, options.condition, options.checkboxVisible, options.checkboxDisabled, options.selectionLimit, options.checkboxInHeader, isCheckboxDisabled]);
     if (wrapper) {
       wrapper.selectionState = calculateSelectionState(entities, selections, allSelected, options);
     }
@@ -223,9 +241,10 @@ const withSelectableRows = DataGridComponent => {
       const newSelections = new Set(selections);
       entities.forEach(entity => {
         if (checked) {
-          const isVisible = options.condition ? options.condition(entity) : options.checkboxVisible ? options.checkboxVisible(entity) : true;
+          // Intentionally not isCheckboxDisabled: "select all" ignores the selection
+          // limit, it only skips rows the consumer explicitly disabled.
           const isEnabled = !options.checkboxDisabled || !options.checkboxDisabled(entity);
-          if (isVisible && isEnabled) {
+          if (isCheckboxVisible(entity) && isEnabled) {
             newSelections.add(entity.id);
           }
           return;
@@ -238,8 +257,49 @@ const withSelectableRows = DataGridComponent => {
         allSelected: newState === checkboxColumnWrapper_1.SelectionState.All,
         turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
       });
-    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    }, [selections, entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, isCheckboxVisible]);
+    const {
+      rows: dragRows,
+      entityById
+    } = (0, react_1.useMemo)(() => (0, getDragSelectionRows_1.getDragSelectionRows)(entities), [entities]);
+    const isRowSelectable = (0, react_1.useCallback)(row => {
+      const entity = entityById.get(row.id);
+      return !!entity && isCheckboxVisible(entity) && !isCheckboxDisabled(entity);
+    }, [entityById, isCheckboxVisible, isCheckboxDisabled]);
+    // "Select all" is held as a flag rather than a list of ids, so materialise the page before
+    // a range starts editing it — otherwise the range would be applied to an empty selection.
+    const getBaseSelection = (0, react_1.useCallback)(() => allSelected ? new Set(entities.map(entity => entity.id)) : new Set(selections), [allSelected, entities, selections]);
+    const onBatchSelect = (0, react_1.useCallback)((rangeIds, select, base) => {
+      const result = new Set(base);
+      const limit = options.selectionLimit;
+      for (const id of rangeIds) {
+        if (select) {
+          if (limit !== undefined && result.size >= limit) {
+            break;
+          }
+          result.add(id);
+        } else {
+          result.delete(id);
+        }
+      }
+      const newState = calculateSelectionState(entities, result, false, options);
+      onSelect({
+        selected: [...result],
+        allSelected: newState === checkboxColumnWrapper_1.SelectionState.All,
+        turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
+      });
+    }, [entities, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    const {
+      onCheckboxMouseDown,
+      suppressNextChangeRef
+    } = (0, useDragSelection_1.useDragSelection)(dragRows, props.ref, onBatchSelect, getBaseSelection, isRowSelectable, selectMode);
     const onSelectListener = (0, react_1.useCallback)(([id, checked]) => {
+      // A drag or shift-click has already emitted the whole range; swallow the click that
+      // ends it so the row it landed on is not toggled back.
+      if (suppressNextChangeRef.current) {
+        suppressNextChangeRef.current = false;
+        return;
+      }
       if (allSelected) {
         const newSelection = new Set(entities.map(entity => entity.id));
         newSelection.delete(id);
@@ -261,7 +321,7 @@ const withSelectableRows = DataGridComponent => {
         allSelected: newState === checkboxColumnWrapper_1.SelectionState.All,
         turnOffSelectAll: selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll
       });
-    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll]);
+    }, [entities, selections, allSelected, options, onSelect, selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll, suppressNextChangeRef]);
     const onSelectAll = (0, react_1.useCallback)(([checked]) => {
       if (checked && ((selection === null || selection === void 0 ? void 0 : selection.turnOffSelectAll) || options.turnOffSelectAll)) {
         selectAll(true);
@@ -310,10 +370,11 @@ const withSelectableRows = DataGridComponent => {
       wrapper.attach("change", onSelectListener);
       wrapper.attach("change-all", onSelectAll);
       wrapper.attach("toggle", onTriggerClick);
+      wrapper.attach("mousedown", ([id, checked, e]) => onCheckboxMouseDown(id, checked, e));
       return () => {
         wrapper.detach();
       };
-    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick]);
+    }, [wrapper, onSelectListener, onSelectAll, onTriggerClick, onCheckboxMouseDown]);
     const listColumns = (0, react_1.useMemo)(() => {
       const newColumns = columns.map(c => Object.assign({}, c));
       // Remove CheckboxColumnWrappers from wrappers list

package/dist/index.css

@@ -13083,7 +13083,7 @@ html:lang(ar) .zen-radio__wrapper--mobile .zen-radio__label {
 .zen-waiting--inline {
   position: relative;
   width: 2.5rem;
-  height: 1.5rem;
+  height: 2.5rem;
 }
 .zen-waiting__spinner-text {
   font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;

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

@@ -5,19 +5,15 @@ export declare enum SelectionState {
     None = "none"
 }
 export interface ISelectionValue {
-    /**
-     * Whether every selectable row across every page is selected.
-     */
     all: boolean;
-    /**
-     * The meaning of this list depends on `all`:
-     * - when `all` is `false`, it is the ids explicitly *included* in the selection.
-     * - when `all` is `true`, it is the ids explicitly *excluded* from the otherwise
-     *   fully-selected set (e.g. rows unchecked after a "select all" across paginated data).
-     *
-     * This lets `all: true` represent "all except these ids" without needing to know the
-     * full id universe (MYG-142234) - unchecking a row while `all` is true only ever adds
-     * to this exclusion list; it must never be rebuilt from the currently rendered page.
-     */
     selected: string[];
 }
+/**
+ * One checkbox row in the order it is rendered. Expanded nested rows are part of this list,
+ * directly after their parent, so a drag or shift-click range can span nesting levels the
+ * same way it spans sibling rows.
+ */
+export interface IDragSelectionRow {
+    id: string;
+    isNested: boolean;
+}

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

@@ -0,0 +1,10 @@
+import { MouseEvent as ReactMouseEvent, RefObject } from "react";
+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) => {
+    onCheckboxMouseDown: (id: string, checked: boolean, e: ReactMouseEvent) => void;
+    suppressNextChangeRef: RefObject<boolean>;
+};