@geotab/zenith 3.16.0 → 3.17.0-beta.1

package/README.md

@@ -45,8 +45,40 @@ 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
+
 ### 3.16.0
 
 - Add `Tooltip.InlineTrigger` subcomponent for inline tooltip triggers
@@ -164,7 +196,7 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ### 3.10.0
 
-- Add `wrap` and `vertical` props to `ListItem`
+- Add `vertical` props to `ListItem`
 - Add `data-analytics-id` prop to `Tab`, `TabItem`, and `Bookmark`
 - `Nav` component: support show/hide separator between Core and Apps sections
 - `Nav` empty state support
@@ -764,6 +796,40 @@ Upgrade today to take advantage of modern JavaScript module support and improved
 - Improve sizing of the title in Header
 - Add the property `triggerAriaLabel` to `Dropdown`
 
+### 1.14.0
+
+- Create the Layout
+- Update strings
+- Add aria-label to Stepper, Range and FilterButton
+- Improve accessibility of icons
+
+### 1.13.1
+
+- Improve behavior of the DateRange selection
+- Improve imports in Zenith
+- Fix date position in PillExpandable
+- Update package description, add license
+- Add option to open links in new tab in PillExpandable
+- Fix visual styles of MiniTabs
+- Allow passing fragment as a child of the Header
+- Stepper max value not working as expected
+- Allow text formatting in the description of the PillExpandable
+- Prevent rerendering in useMobile
+
+### 1.13.0
+
+- New component Table
+- Clean search input in Dropdown on close popup
+- Fix tabbing through all rows in a table
+- Rename "All filters" to "Filters" in FiltersBar
+- Improve tooltip accessibility
+- Add ecosystem icons
+- Increase focus area in search input
+- Fix issue with loosing seconds when changing date or time in calendar
+- The new component Skeleton for loading animation
+- Fix the Select component selection issue
+- Update npm dependencies
+
 ## Feedback
 
 For any questions or feedback please email zenith@geotab.com.

package/README.md.baseline

@@ -0,0 +1 @@
+ac687d695edcc0c6ffdc6c27e69c5729e7b02d180623c4f81049d72111f97d0d

package/dist/absolute/absolute.js

@@ -20,6 +20,7 @@ const getScrollableParent_1 = require("../utils/getScrollableParent");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
 const useDirection_1 = require("../utils/localization/useDirection");
+const CLOSE_ON_SCROLL_EVENTS = ["wheel", "touchmove"];
 const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
@@ -67,7 +68,10 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
     }, [onOpenChange]);
     (0, useResize_1.useResize)(calculatePosition, isOpen);
     (0, useScroll_1.useScroll)(calculatePosition, isOpen && !!recalculateOnScroll, parent);
-    (0, useScroll_1.useScroll)(handleCloseOnScroll, isOpen && !!closeOnScroll, parent);
+    // Only "wheel"/"touchmove" are genuine user scroll gestures. The plain "scroll" event also fires for
+    // browser scroll-anchoring adjustments (e.g. a layout shift above the viewport pushing content down),
+    // which would otherwise close the popup the instant it opens.
+    (0, useScroll_1.useScroll)(handleCloseOnScroll, isOpen && !!closeOnScroll, parent, CLOSE_ON_SCROLL_EVENTS);
     (0, react_1.useLayoutEffect)(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     const returnFocusToTrigger = (0, react_1.useCallback)(() => {
         if (!triggerRef.current) {

package/dist/button/button.d.ts

@@ -9,6 +9,7 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     title?: string;
     type?: TButton;
     disabled?: boolean;
+    focusableWhenDisabled?: boolean;
     onClick?: React.MouseEventHandler;
     onBlur?: React.FocusEventHandler;
     onMouseOver?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -27,6 +28,6 @@ export interface IButton extends IZenComponentProps, IZenGridItem {
     dataAnalyticsId?: string;
 }
 export declare const Button: {
-    ({ className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
+    ({ className, type, disabled, focusableWhenDisabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId, ...other }: IButton): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/button/button.js

@@ -18,19 +18,36 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const filterGridProps_1 = require("../gridLayout/utils/filterGridProps");
 const useMobileClassName_1 = require("../utils/theme/useMobileClassName");
-const Button = (_a) => {
-    var { className, type, disabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
+const blockActivation = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
+// Guards on `disabled` alone, not just `focusableWhenDisabled`, so clicks are blocked in JS regardless of
+// CSS. `onKeyDown`/`onKeyUp` stay unguarded — Tooltip needs them.
+const getDisabledGuardedHandlers = (disabled, isFocusableWhenDisabled, onClick, onMouseDown, onMouseUp) => ({
+    onClick: disabled ? blockActivation : onClick,
+    onMouseDown: isFocusableWhenDisabled ? blockActivation : onMouseDown,
+    onMouseUp: isFocusableWhenDisabled ? blockActivation : onMouseUp
+});
+const getButtonClassName = (type, disabled, isFocusableWhenDisabled, mobileOrDriveClasses, className) => {
     const modifierClassName = type && type !== buttonType_1.ButtonType.Secondary ? `zen-button--${type}` : "";
     const disabledClassName = disabled ? "zen-button--disabled" : "";
+    const disabledFocusableClassName = isFocusableWhenDisabled ? "zen-button--disabled-focusable" : "";
+    return (0, classNames_1.classNames)(["zen-button", mobileOrDriveClasses, modifierClassName, disabledClassName, disabledFocusableClassName, className !== null && className !== void 0 ? className : ""]);
+};
+const Button = (_a) => {
+    var { className, type, disabled, focusableWhenDisabled, id, title, onClick, onMouseOver, onMouseOut, onMouseDown, onMouseUp, onKeyDown, onKeyUp, children, link, target, htmlType, rel, ref, name, onBlur, role, ariaLabel, dataAnalyticsId } = _a, other = __rest(_a, ["className", "type", "disabled", "focusableWhenDisabled", "id", "title", "onClick", "onMouseOver", "onMouseOut", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp", "children", "link", "target", "htmlType", "rel", "ref", "name", "onBlur", "role", "ariaLabel", "dataAnalyticsId"]);
+    const isFocusableWhenDisabled = Boolean(disabled) && Boolean(focusableWhenDisabled);
     const driveClasses = (0, useDriveClassName_1.useDriveClassName)("zen-button");
     const ariaLabelValue = ariaLabel || title;
     const mobileClasses = (0, useMobileClassName_1.useMobileClassName)("zen-button");
     const commonArgs = Object.assign(Object.assign(Object.assign({ id,
-        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: (0, classNames_1.classNames)(["zen-button", mobileClasses || driveClasses || "", modifierClassName, disabledClassName, className !== null && className !== void 0 ? className : ""]) });
+        title }, (ariaLabelValue ? { "aria-label": ariaLabelValue } : {})), (dataAnalyticsId ? { "data-analytics-id": dataAnalyticsId } : {})), { className: getButtonClassName(type, disabled, isFocusableWhenDisabled, mobileClasses || driveClasses || "", className) });
+    const { onClick: onClickWithDisabledGuard, onMouseDown: onMouseDownWithDisabledGuard, onMouseUp: onMouseUpWithDisabledGuard } = getDisabledGuardedHandlers(disabled, isFocusableWhenDisabled, onClick, onMouseDown, onMouseUp);
     if (link) {
-        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, "aria-disabled": disabled, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
+        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ role: "link", rel: rel, target: target, href: disabled ? undefined : link, tabIndex: isFocusableWhenDisabled ? 0 : undefined, "aria-disabled": disabled ? true : undefined, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClickWithDisabledGuard }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
     }
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: disabled, role: role }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ name: name, onBlur: onBlur, onClick: onClickWithDisabledGuard, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onMouseDown: onMouseDownWithDisabledGuard, onMouseUp: onMouseUpWithDisabledGuard, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ref: ref, type: htmlType, disabled: isFocusableWhenDisabled ? undefined : disabled, "aria-disabled": isFocusableWhenDisabled ? true : undefined, role: role }, commonArgs, (0, filterGridProps_1.filterGridProps)(other), { children: children })));
 };
 exports.Button = Button;
 exports.Button.displayName = "Button";

package/dist/checkboxListWithAction/checkboxListWithAction.d.ts

@@ -11,6 +11,8 @@ export interface ICheckboxListWithActionOption {
     isWithAction: boolean;
     countSelectedChild?: number;
     color?: IColor;
+    /** When true, renders a 1px separator line below this item. */
+    divider?: boolean;
 }
 export interface IChangeCheckbox {
     id: string;

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -443,7 +443,7 @@ const CheckboxListWithAction = ({
         const labelForRender = selectSearchTerm(opt.label);
         const labelElement = renderLabel(opt, labelForRender, titleForRender, ind);
         return (0, jsx_runtime_1.jsxs)("li", {
-          className: (0, classNames_1.classNames)(["zen-checkbox-list-with-action__action-item", opt.isWithAction ? "zen-checkbox-list-with-action__action-item--action" : ""]),
+          className: (0, classNames_1.classNames)(["zen-checkbox-list-with-action__action-item", opt.isWithAction ? "zen-checkbox-list-with-action__action-item--action" : "", opt.divider && ind < optionsArr.length - 1 ? "zen-checkbox-list-with-action__action-item--divider" : ""]),
           "data-item": opt.property,
           children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, {
             id: `${checkboxId}${opt.property}`,

package/dist/commonHelpers/ShowMoreCell.d.ts

@@ -0,0 +1,5 @@
+import { IShowMoreRow } from "./showMoreRow";
+import "./showMoreRow.less";
+export declare const ShowMoreCell: ({ row }: {
+    row: IShowMoreRow;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/commonHelpers/ShowMoreCell.js

@@ -0,0 +1,66 @@
+"use strict";
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShowMoreCell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useLanguage_1 = require("../utils/localization/useLanguage");
+injectString("cs", "+{0} more", "+{0} dal\u0161\xED");
+injectString("da-DK", "+{0} more", "+{0} mere");
+injectString("de", "+{0} more", "+{0} weitere");
+injectString("en", "+{0} more", "+{0} more");
+injectString("es", "+{0} more", "+{0} m\xE1s");
+injectString("fi-FI", "+{0} more", "+{0} lis\xE4\xE4");
+injectString("fr", "+{0} more", "+{0} autres");
+injectString("fr-FR", "+{0} more", "+{0} autres");
+injectString("hu-HU", "+{0} more", "+{0} t\xF6bb");
+injectString("id", "+{0} more", "+{0} lebih");
+injectString("it", "+{0} more", "+{0} in pi\xF9");
+injectString("ja", "+{0} more", "\u3055\u3089\u306B {0} \u500B");
+injectString("ko-KR", "+{0} more", "+{0} \uB354\uBCF4\uAE30");
+injectString("ms", "+{0} more", "+{0} lagi");
+injectString("nb-NO", "+{0} more", "+{0} mer");
+injectString("nl", "+{0} more", "+{0} meer");
+injectString("pl", "+{0} more", "Jeszcze {0}");
+injectString("pt-BR", "+{0} more", "+{0} mais");
+injectString("pt-PT", "+{0} more", "+{0} mais");
+injectString("sk-SK", "+{0} more", "+{0} viac");
+injectString("sv", "+{0} more", "+{0} mer");
+injectString("th", "+{0} more", "+{0} \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21");
+injectString("tr", "+{0} more", "+{0} daha");
+injectString("zh-Hans", "+{0} more", "+{0}\u66F4\u591A");
+injectString("zh-TW", "+{0} more", "\u9084\u6709 +{0} \u500B");
+injectString("ro-RO", "+{0} more", "\xCEnc\u0103 {0}");
+injectString("ar-001", "+{0} more", "+{0} \u0623\u062E\u0631\u0649");
+injectString("lt-LT", "+{0} more", "+{0} daugiau");
+injectString("lv-LV", "+{0} more", "+{0} v\u0113l");
+injectString("ka-GE", "+{0} more", "+{0} \u10DB\u10D4\u10E2\u10D8");
+injectString("el-GR", "+{0} more", "+{0} \u03B1\u03BA\u03CC\u03BC\u03B1");
+injectString("et-EE", "+{0} more", "+{0} veel");
+injectString("bg-BG", "+{0} more", "+ \u043E\u0449\u0435 {0}");
+const ShowMoreCell = ({
+  row
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const content = row.label ? row.label(row.remaining) : translate("+{0} more").replace("{0}", String(row.remaining));
+  if (row.href) {
+    return (0, jsx_runtime_1.jsx)("a", {
+      className: "zen-show-more__link",
+      href: row.href,
+      children: content
+    });
+  }
+  return (0, jsx_runtime_1.jsx)("button", {
+    type: "button",
+    className: "zen-show-more__link",
+    onClick: row.onActivate,
+    children: content
+  });
+};
+exports.ShowMoreCell = ShowMoreCell;

package/dist/commonHelpers/getAriaAttributes.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAriaAttributes = void 0;
+const isAriaProp_1 = require("./isAriaProp");
 const camelToKebab = (str) => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
 const getAriaAttributes = (props) => {
     if (!props) {
@@ -8,16 +9,12 @@ const getAriaAttributes = (props) => {
     }
     const ariaAttributes = {};
     for (const [key, value] of Object.entries(props)) {
-        // Handle hyphenated aria attributes (aria-*)
-        if (key.startsWith("aria-")) {
-            ariaAttributes[key] = value;
-        }
-        // Handle camelCase aria attributes (ariaDescribedby, ariaLabel, etc.)
-        // Convert to hyphenated format (aria-describedby, aria-label, etc.)
-        else if (key.startsWith("aria") && key.length > 4 && key[4] === key[4].toUpperCase()) {
-            const hyphenated = camelToKebab(key);
-            ariaAttributes[hyphenated] = value;
+        if (!(0, isAriaProp_1.isAriaProp)(key)) {
+            continue;
         }
+        // Hyphenated keys (aria-*) pass through; camelCase keys (ariaDescribedby, ariaLabel, etc.)
+        // are converted to the hyphenated form the DOM expects.
+        ariaAttributes[key.startsWith("aria-") ? key : camelToKebab(key)] = value;
     }
     return ariaAttributes;
 };

package/dist/commonHelpers/getNonAriaProps.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The complement of `getAriaAttributes`: every prop that is *not* an aria attribute, returned
+ * under its original key and value.
+ *
+ * Use the two together when a component has to send its aria attributes to a different element
+ * than the rest of its props. Both sides test membership with `isAriaProp`, so no prop can fall
+ * between them and be dropped by both.
+ */
+export declare const getNonAriaProps: (props?: object) => {
+    [k: string]: any;
+};

package/dist/commonHelpers/getNonAriaProps.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNonAriaProps = void 0;
+const isAriaProp_1 = require("./isAriaProp");
+/**
+ * The complement of `getAriaAttributes`: every prop that is *not* an aria attribute, returned
+ * under its original key and value.
+ *
+ * Use the two together when a component has to send its aria attributes to a different element
+ * than the rest of its props. Both sides test membership with `isAriaProp`, so no prop can fall
+ * between them and be dropped by both.
+ */
+const getNonAriaProps = (props) => {
+    if (!props) {
+        return {};
+    }
+    return Object.fromEntries(Object.entries(props).filter(([key]) => !(0, isAriaProp_1.isAriaProp)(key)));
+};
+exports.getNonAriaProps = getNonAriaProps;

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

@@ -1 +1 @@
-export declare const useScroll: (callback: () => void, active: boolean, triggerRef?: Element | null) => void;
+export declare const useScroll: (callback: () => void, active: boolean, triggerRef?: Element | null, events?: readonly string[]) => void;

package/dist/commonHelpers/hooks/useScroll.js

@@ -3,20 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScroll = void 0;
 const react_1 = require("react");
 const zen_1 = require("../../utils/zen");
-const useScroll = (callback, active, triggerRef) => {
+const DEFAULT_EVENTS = ["scroll", "wheel"];
+const useScroll = (callback, active, triggerRef, events) => {
     var _a;
     if (triggerRef === void 0) { triggerRef = (_a = zen_1.zen.document) === null || _a === void 0 ? void 0 : _a.body; }
+    if (events === void 0) { events = DEFAULT_EVENTS; }
     (0, react_1.useEffect)(() => {
         if (!active || triggerRef === null) {
             return;
         }
-        triggerRef.addEventListener("scroll", callback);
-        triggerRef.addEventListener("wheel", callback);
+        events.forEach(event => triggerRef.addEventListener(event, callback));
         // eslint-disable-next-line consistent-return
         return () => {
-            triggerRef.removeEventListener("scroll", callback);
-            triggerRef.removeEventListener("wheel", callback);
+            events.forEach(event => triggerRef.removeEventListener(event, callback));
         };
-    }, [callback, active, triggerRef]);
+    }, [callback, active, triggerRef, events]);
 };
 exports.useScroll = useScroll;

package/dist/commonHelpers/isAriaProp.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Whether a prop key is an aria attribute, in either the hyphenated (`aria-label`) or the
+ * camelCase (`ariaLabel`) spelling.
+ *
+ * Pair it with `getAriaAttributes` when a component has to split a rest-props object: the helper
+ * collects the aria half, this predicate identifies the half it leaves behind. Sharing one rule
+ * keeps the two halves from disagreeing and silently dropping a prop.
+ */
+export declare const isAriaProp: (key: string) => boolean;

package/dist/commonHelpers/isAriaProp.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAriaProp = void 0;
+/**
+ * Whether a prop key is an aria attribute, in either the hyphenated (`aria-label`) or the
+ * camelCase (`ariaLabel`) spelling.
+ *
+ * Pair it with `getAriaAttributes` when a component has to split a rest-props object: the helper
+ * collects the aria half, this predicate identifies the half it leaves behind. Sharing one rule
+ * keeps the two halves from disagreeing and silently dropping a prop.
+ */
+const isAriaProp = (key) => key.startsWith("aria-") || (key.startsWith("aria") && key.length > 4 && key[4] === key[4].toUpperCase());
+exports.isAriaProp = isAriaProp;

package/dist/commonHelpers/showMoreRow.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { IEntityWithId } from "./entity";
+export declare const SHOW_MORE_KIND = "showMore";
+export type IShowMoreActivation = {
+    onActivate: () => void;
+    href?: never;
+} | {
+    href: string;
+    onActivate?: never;
+};
+export type IShowMoreRow = IEntityWithId & {
+    __zenMoreRowsType: typeof SHOW_MORE_KIND;
+    remaining: number;
+    parentId: string;
+    label?: (remaining: number) => ReactNode;
+} & IShowMoreActivation;
+export declare const isShowMoreRow: (entity: IEntityWithId) => entity is IShowMoreRow;
+export declare const createShowMoreRow: (params: {
+    parentId: string;
+    remaining: number;
+    label?: (remaining: number) => ReactNode;
+} & IShowMoreActivation) => IShowMoreRow;
+export declare const withFullChildren: <T extends {
+    children?: unknown[];
+}>(entity: T, fullChildren: readonly unknown[]) => T;
+export declare const getChildrenForSelection: <N extends IEntityWithId>(entity: {
+    children?: N[];
+}) => N[] | undefined;

package/dist/commonHelpers/showMoreRow.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChildrenForSelection = exports.withFullChildren = exports.createShowMoreRow = exports.isShowMoreRow = exports.SHOW_MORE_KIND = void 0;
+exports.SHOW_MORE_KIND = "showMore";
+const isShowMoreRow = (entity) => 
+// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
+entity.__zenMoreRowsType === exports.SHOW_MORE_KIND;
+exports.isShowMoreRow = isShowMoreRow;
+const createShowMoreRow = (params) => {
+    const base = {
+        id: `__zen-show-more__${params.parentId}`,
+        __zenMoreRowsType: exports.SHOW_MORE_KIND,
+        remaining: params.remaining,
+        parentId: params.parentId,
+        label: params.label
+    };
+    if ("href" in params && params.href !== undefined) {
+        return Object.assign(Object.assign({}, base), { href: params.href });
+    }
+    return Object.assign(Object.assign({}, base), { onActivate: params.onActivate });
+};
+exports.createShowMoreRow = createShowMoreRow;
+// `children` is sliced down for rendering, so the un-capped list is stashed here to keep
+// selection operating on every real child.
+const FULL_CHILDREN_KEY = "__zenFullChildren";
+const withFullChildren = (entity, fullChildren) => (Object.assign(Object.assign({}, entity), { [FULL_CHILDREN_KEY]: fullChildren }));
+exports.withFullChildren = withFullChildren;
+const getChildrenForSelection = (entity) => { var _a; return (_a = entity[FULL_CHILDREN_KEY]) !== null && _a !== void 0 ? _a : entity.children; };
+exports.getChildrenForSelection = getChildrenForSelection;

package/dist/commonHelpers/tabsKeyboard.d.ts

@@ -1,3 +1,3 @@
 import { IEntityWithId } from "./entity";
-export declare const tabsKeyboardHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeId: string) => string | null;
+export declare const tabsKeyboardHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeId: string, isRTL?: boolean) => string | null;
 export declare const tabsKeyboardTabHandler: (e: React.KeyboardEvent, tabsArr: IEntityWithId[], activeElement: HTMLElement) => string | undefined;

package/dist/commonHelpers/tabsKeyboard.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tabsKeyboardTabHandler = exports.tabsKeyboardHandler = void 0;
-const tabsKeyboardHandler = (e, tabsArr, activeId) => {
+const tabsKeyboardHandler = (e, tabsArr, activeId, isRTL = false) => {
     const getCurrentIndex = () => tabsArr.findIndex(el => el.id === activeId);
     switch (e.key) {
         case "ArrowLeft": {
+            e.preventDefault();
+            if (isRTL) {
+                const currentIndex = getCurrentIndex();
+                const nextPaneIndex = currentIndex > -1 ? currentIndex + 1 : undefined;
+                const newPaneId = nextPaneIndex !== undefined && nextPaneIndex < tabsArr.length ? tabsArr[nextPaneIndex].id : tabsArr[0].id;
+                return newPaneId;
+            }
             const currentIndex = getCurrentIndex();
             const prevPaneIndex = currentIndex > -1 ? currentIndex - 1 : undefined;
             const newPaneId = prevPaneIndex !== undefined && prevPaneIndex > -1 ? tabsArr[prevPaneIndex].id : tabsArr[tabsArr.length - 1].id;
@@ -15,6 +22,13 @@ const tabsKeyboardHandler = (e, tabsArr, activeId) => {
             return tabsArr[0].id;
         }
         case "ArrowRight": {
+            e.preventDefault();
+            if (isRTL) {
+                const currentIndex = getCurrentIndex();
+                const prevPaneIndex = currentIndex > -1 ? currentIndex - 1 : undefined;
+                const newPaneId = prevPaneIndex !== undefined && prevPaneIndex > -1 ? tabsArr[prevPaneIndex].id : tabsArr[tabsArr.length - 1].id;
+                return newPaneId;
+            }
             const currentIndex = getCurrentIndex();
             const nextPaneIndex = currentIndex > -1 ? currentIndex + 1 : undefined;
             const newPaneId = nextPaneIndex !== undefined && nextPaneIndex < tabsArr.length ? tabsArr[nextPaneIndex].id : tabsArr[0].id;

package/dist/commonStyles/colors/colors.less

@@ -82,6 +82,24 @@
     --data--categorical-yellow: #f5bd60;
     --data--categorical-red: #e56a6a;
     --data--categorical-grey: #8a94a2;
+
+    // data visualization - sequential
+    --data--sequential-1: #8cb6f9;
+    --data--sequential-2: #6ca1f8;
+    --data--sequential-3: #428aff;
+    --data--sequential-4: #2e76ea;
+    --data--sequential-5: #1862d5;
+    --data--sequential-6: #0d51b7;
+    --data--sequential-7: #084197;
+
+    // data visualization - diverging
+    --data--diverging-1: #782c0e;
+    --data--diverging-2: #cb591f;
+    --data--diverging-3: #f98c41;
+    --data--diverging-4: #f5bd60;
+    --data--diverging-5: #428aff;
+    --data--diverging-6: #1862d5;
+    --data--diverging-7: #084197;
 }
 
 .zen-dark {

package/dist/dataFeed/dataFeedColumnsItems.js

@@ -9,6 +9,8 @@ const dataFeedCell_1 = require("./dataFeedCell/dataFeedCell");
 const actionsMenu_1 = require("../table/actions/actionsMenu");
 const useVisibleColumns_1 = require("./hooks/useVisibleColumns");
 const menu_1 = require("../menu/menu");
+const showMoreRow_1 = require("../commonHelpers/showMoreRow");
+const ShowMoreCell_1 = require("../commonHelpers/ShowMoreCell");
 const getIconFromColumnComponent = (column, entity, isNested) => {
     const renderIcon = "renderIcon" in column.columnComponent ? column.columnComponent.renderIcon : undefined;
     if (renderIcon) {
@@ -129,7 +131,7 @@ const FeedItemInner = ({ columnsList, feedWrappers, expanded, collapsedColumnsQt
         entity,
         onClick
     ]);
-    const nestedCells = (0, react_1.useMemo)(() => (entity.children && isRowExpanded ? entity.children : []).map(nestedEntity => renderCells(nestedEntity)), [entity.children, isRowExpanded, renderCells]);
+    const nestedCells = (0, react_1.useMemo)(() => (entity.children && isRowExpanded ? entity.children : []).map(nestedEntity => (0, showMoreRow_1.isShowMoreRow)(nestedEntity) ? (0, jsx_runtime_1.jsx)(ShowMoreCell_1.ShowMoreCell, { row: nestedEntity }, nestedEntity.id) : renderCells(nestedEntity)), [entity.children, isRowExpanded, renderCells]);
     const cells = (0, react_1.useMemo)(() => renderCells(entity, nestedCells), [entity, nestedCells, renderCells]);
     return cells;
 };

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) {