@geotab/zenith 3.16.0 → 3.17.0-beta.1

package/esm/table/nested/useNestedRows.js

@@ -94,6 +94,20 @@ export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
     }
   }, [intExpanded, onExpand]);
   const firstColumnId = useMemo(() => columns.length > 0 ? columns[0].id : null, [columns]);
+  // `announceState` adds aria-expanded to the button itself. Only the feed needs it: the desktop
+  // grid is a treegrid whose <tr> already carries aria-expanded (see dataGrid/row/row.tsx), and
+  // repeating it on the control inside that row would announce the state twice.
+  const renderExpandButton = useCallback((isExpanded, onExpandCallback, announceState = false) => _jsx("button", {
+    className: "zen-nested-button__button",
+    onClick: onExpandCallback,
+    "aria-expanded": announceState ? isExpanded : undefined,
+    "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
+    children: isExpanded ? _jsx(IconChevronTop, {
+      size: "large"
+    }) : _jsx(IconChevronBottom, {
+      size: "large"
+    })
+  }), [translate]);
   const wrapper = useMemo(() => ({
     name: NestedWrapperName,
     render(value, entity, isNested) {
@@ -113,16 +127,7 @@ export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
       if ("children" in entity) {
         return _jsxs("div", {
           className: "zen-nested-button",
-          children: [_jsx("button", {
-            className: "zen-nested-button__button",
-            onClick: onExpandCallback,
-            "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
-            children: isExpanded ? _jsx(IconChevronTop, {
-              size: "large"
-            }) : _jsx(IconChevronBottom, {
-              size: "large"
-            })
-          }), _jsx("div", {
+          children: [renderExpandButton(isExpanded, onExpandCallback), _jsx("div", {
             className: "zen-nested-button__content",
             children: value
           })]
@@ -133,7 +138,7 @@ export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
     renderHeader(title) {
       return title;
     }
-  }), [expanded, onExpandedChange, isMobile, translate]);
+  }), [expanded, onExpandedChange, isMobile, renderExpandButton]);
   const nestedColumns = useMemo(() => {
     const newColumns = columns.map(c => Object.assign({}, c));
     // Add nested wrapper to the first column
@@ -159,16 +164,7 @@ export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
     };
     return [_jsxs("div", {
       className: "zen-nested-button",
-      children: [_jsx("button", {
-        className: "zen-nested-button__button",
-        onClick: onExpandCallback,
-        "aria-label": isExpanded ? translate("Collapse") : translate("Expand"),
-        children: isExpanded ? _jsx(IconChevronTop, {
-          size: "large"
-        }) : _jsx(IconChevronBottom, {
-          size: "large"
-        })
-      }), _jsx("div", {
+      children: [renderExpandButton(isExpanded, onExpandCallback, true), _jsx("div", {
         className: "zen-nested-button__content",
         children: primaryData
       })]
@@ -176,7 +172,7 @@ export const useNestedRows = (expandedRows, onExpand, columns, isMobile) => {
       className: "zen-nested-button__padding",
       children: secondaryData
     }, "nested-value")];
-  }, [expanded, onExpandedChange, isMobile, translate]);
+  }, [expanded, onExpandedChange, isMobile, renderExpandButton]);
   return {
     nestedColumns,
     nestedFeedWrapper,

package/esm/table/nested/useShowMore.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { IEntityWithId } from "../../commonHelpers/entity";
+import { IShowMoreOptions } from "./nestedData";
+export type IUseShowMoreConfig<TParent> = {
+    /** Passed through to `IShowMoreOptions.cap`. Defaults to 10. */
+    cap?: number;
+    /** Passed through to `IShowMoreOptions.label`. */
+    label?: (remaining: number) => ReactNode;
+} & ({
+    /**
+     * Runs in addition to the reveal, not instead of it - the hook marks the parent revealed
+     * either way. Use it for side effects such as analytics.
+     */
+    onClick?: (parent: TParent) => void;
+    href?: never;
+} | {
+    /**
+     * Passed straight through to `IShowMoreOptions.href`. In this mode "+N more" navigates
+     * instead of revealing in place, so the hook keeps no reveal state and `onCollapse`
+     * does nothing.
+     */
+    href: (parent: TParent) => string;
+    onClick?: never;
+});
+/**
+ * Builds `NestedData`'s `showMore` option so consumers don't hand-roll the reveal state.
+ *
+ * Without `href`, this owns the "click +N more to reveal the rest in place" pattern: it tracks
+ * which parents have been revealed and derives `isUncapped` and `onClick` from that. Call the
+ * returned `onCollapse(parentId)` from your own `onExpand` when a parent collapses, so
+ * re-expanding it shows the capped view again instead of staying revealed.
+ *
+ * With `href`, the config is passed straight through and no reveal state exists.
+ *
+ * The returned `showMore` is referentially stable across renders - config callbacks are read
+ * through a ref, so passing an inline config object does not produce a new `showMore` each render.
+ */
+export declare const useShowMore: <TParent extends IEntityWithId>(config?: IUseShowMoreConfig<TParent>) => {
+    showMore: IShowMoreOptions<TParent>;
+    onCollapse: (parentId: string) => void;
+};

package/esm/table/nested/useShowMore.js

@@ -0,0 +1,52 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+/**
+ * Builds `NestedData`'s `showMore` option so consumers don't hand-roll the reveal state.
+ *
+ * Without `href`, this owns the "click +N more to reveal the rest in place" pattern: it tracks
+ * which parents have been revealed and derives `isUncapped` and `onClick` from that. Call the
+ * returned `onCollapse(parentId)` from your own `onExpand` when a parent collapses, so
+ * re-expanding it shows the capped view again instead of staying revealed.
+ *
+ * With `href`, the config is passed straight through and no reveal state exists.
+ *
+ * The returned `showMore` is referentially stable across renders - config callbacks are read
+ * through a ref, so passing an inline config object does not produce a new `showMore` each render.
+ */
+export const useShowMore = (config) => {
+    const [revealedParents, setRevealedParents] = useState(new Set());
+    // Latest-ref so an inline config object - the common call shape - doesn't change `showMore`'s
+    // identity every render. Written during render because `href` is read while NestedData
+    // renders, so an effect-updated ref would be a render stale on first paint.
+    const configRef = useRef(config);
+    configRef.current = config;
+    const cap = config === null || config === void 0 ? void 0 : config.cap;
+    const hasLabel = !!(config === null || config === void 0 ? void 0 : config.label);
+    const hasHref = !!(config && "href" in config && config.href);
+    const showMore = useMemo(() => {
+        const label = hasLabel ? (remaining) => { var _a, _b; return (_b = (_a = configRef.current) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.call(_a, remaining); } : undefined;
+        if (hasHref) {
+            return { cap, label, href: (parent) => configRef.current.href(parent) };
+        }
+        return {
+            cap,
+            label,
+            isUncapped: (parent) => revealedParents.has(parent.id),
+            onClick: (parent) => {
+                var _a, _b;
+                setRevealedParents(prev => (prev.has(parent.id) ? prev : new Set(prev).add(parent.id)));
+                (_b = (_a = configRef.current) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, parent);
+            }
+        };
+    }, [revealedParents, cap, hasLabel, hasHref]);
+    const onCollapse = useCallback((parentId) => {
+        setRevealedParents(prev => {
+            if (!prev.has(parentId)) {
+                return prev;
+            }
+            const next = new Set(prev);
+            next.delete(parentId);
+            return next;
+        });
+    }, []);
+    return { showMore, onCollapse };
+};

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

@@ -5,6 +5,23 @@ export declare enum SelectionState {
     None = "none"
 }
 export interface ISelectionValue {
+    /**
+     * Whether every selectable row across every page is selected.
+     */
     all: boolean;
+    /**
+     * Included IDs by default. With `ISelectableRowsOptions.allowExclusions: true`,
+     * these are excluded IDs while `all` is true, and included IDs while `all` is false.
+     * Consumers opting in must resolve the effective selection before running bulk actions.
+     */
     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/esm/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>;
+};

package/esm/table/selectable/useDragSelection.js

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useRef } from "react";
+import { zen } from "../../utils/zen";
+import { getRangeIds } from "./utils/getRangeIds";
+const DRAG_CLASS = "zen-not-selectable";
+/**
+ * @param rows every checkbox row in render order, expanded nested rows included, so ranges can
+ * span nesting levels.
+ */
+export const useDragSelection = (rows, gridRef, onBatchSelect, getBaseSelection, isSelectable, isEnabled) => {
+    const rowsRef = useRef(rows);
+    rowsRef.current = rows;
+    const getBaseSelectionRef = useRef(getBaseSelection);
+    getBaseSelectionRef.current = getBaseSelection;
+    const onBatchSelectRef = useRef(onBatchSelect);
+    onBatchSelectRef.current = onBatchSelect;
+    const isSelectableRef = useRef(isSelectable);
+    isSelectableRef.current = isSelectable;
+    const isEnabledRef = useRef(isEnabled);
+    isEnabledRef.current = isEnabled;
+    const anchorIdRef = useRef(null);
+    const anchorSelectRef = useRef(true);
+    const baseSelectedRef = useRef(new Set());
+    const isDraggingRef = useRef(false);
+    const movedRef = useRef(false);
+    const lastResultKeyRef = useRef("");
+    const lastPointRef = useRef(null);
+    const suppressNextChangeRef = useRef(false);
+    const attachedGridElementRef = useRef(null);
+    const emitRange = useCallback((currentId) => {
+        const anchorId = anchorIdRef.current;
+        if (anchorId === null) {
+            return;
+        }
+        const range = getRangeIds(rowsRef.current, anchorId, currentId, isSelectableRef.current);
+        if (range.length === 0) {
+            return;
+        }
+        const select = anchorSelectRef.current;
+        const key = `${select}|${range.join(",")}`;
+        if (key === lastResultKeyRef.current) {
+            return;
+        }
+        lastResultKeyRef.current = key;
+        onBatchSelectRef.current(range, select, baseSelectedRef.current);
+    }, []);
+    const extend = useCallback((x, y) => {
+        var _a, _b;
+        lastPointRef.current = { x, y };
+        const row = (_b = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.elementFromPoint(x, y)) === null || _b === void 0 ? void 0 : _b.closest("[data-row-id]");
+        const currentId = row === null || row === void 0 ? void 0 : row.getAttribute("data-row-id");
+        if (!currentId) {
+            return;
+        }
+        if (currentId !== anchorIdRef.current) {
+            movedRef.current = true;
+        }
+        if (!movedRef.current) {
+            return;
+        }
+        emitRange(currentId);
+    }, [emitRange]);
+    const onMouseMove = useCallback((e) => {
+        extend(e.clientX, e.clientY);
+    }, [extend]);
+    const onScroll = useCallback(() => {
+        const point = lastPointRef.current;
+        if (point) {
+            extend(point.x, point.y);
+        }
+    }, [extend]);
+    const endDrag = useCallback(() => {
+        var _a, _b, _c, _d;
+        if (!isDraggingRef.current) {
+            return;
+        }
+        isDraggingRef.current = false;
+        if (movedRef.current) {
+            suppressNextChangeRef.current = true;
+        }
+        (_a = zen.document) === null || _a === void 0 ? void 0 : _a.removeEventListener("mousemove", onMouseMove);
+        (_b = zen.document) === null || _b === void 0 ? void 0 : _b.removeEventListener("mouseup", endDrag);
+        (_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
+    const onCheckboxMouseDown = useCallback((id, checked, e) => {
+        var _a, _b, _c, _d, _e;
+        // Right-click between drag-end and the trailing click must not clear suppression.
+        if (e.button === 0) {
+            suppressNextChangeRef.current = false;
+        }
+        if (!isEnabledRef.current || e.button !== 0) {
+            return;
+        }
+        if (e.shiftKey && anchorIdRef.current !== null) {
+            e.preventDefault();
+            const anchorId = anchorIdRef.current;
+            const anchorInList = rowsRef.current.some(row => row.id === anchorId);
+            if (!anchorInList) {
+                // The anchor is no longer rendered (e.g. its parent was collapsed, or the list was
+                // re-filtered/paginated since). Drop the stale anchor and let the target row's own
+                // onChange fire normally, rather than swallowing it as a silent no-op.
+                anchorIdRef.current = null;
+                return;
+            }
+            // Gmail-style: every shift-click re-applies the range to the selection captured when
+            // the anchor was clicked, so moving the target closer to the anchor deselects the rows
+            // that dropped out of the range. Shift-clicking the anchor itself collapses the range
+            // to nothing, restoring that captured selection — the anchor included.
+            const range = id === anchorId ? [] : getRangeIds(rowsRef.current, anchorId, id, isSelectableRef.current);
+            // Suppress even when the range is empty to prevent the anchor from double-toggling
+            // on a same-row shift-click.
+            suppressNextChangeRef.current = true;
+            onBatchSelectRef.current(range, anchorSelectRef.current, baseSelectedRef.current);
+            return;
+        }
+        anchorIdRef.current = id;
+        anchorSelectRef.current = !checked;
+        baseSelectedRef.current = getBaseSelectionRef.current();
+        isDraggingRef.current = true;
+        movedRef.current = false;
+        lastResultKeyRef.current = "";
+        lastPointRef.current = { x: e.clientX, y: e.clientY };
+        attachedGridElementRef.current = (_a = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current) !== null && _a !== void 0 ? _a : null;
+        (_b = attachedGridElementRef.current) === null || _b === void 0 ? void 0 : _b.classList.add(DRAG_CLASS);
+        (_c = zen.document) === null || _c === void 0 ? void 0 : _c.addEventListener("mousemove", onMouseMove);
+        (_d = zen.document) === null || _d === void 0 ? void 0 : _d.addEventListener("mouseup", endDrag);
+        (_e = attachedGridElementRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener("scroll", onScroll);
+    }, [gridRef, onMouseMove, onScroll, endDrag]);
+    // Drop the anchor only once its row is actually gone (collapsed, filtered, paginated away).
+    // Keying this on the `rows` array identity instead would clear the anchor on every render for
+    // any caller that rebuilds its entity list each time - NestedData does exactly that - which
+    // silently turns every shift-click into a plain single-row toggle.
+    useEffect(() => {
+        if (anchorIdRef.current !== null && !rows.some(row => row.id === anchorIdRef.current)) {
+            anchorIdRef.current = null;
+        }
+    }, [rows]);
+    useEffect(() => endDrag, [endDrag]);
+    return { onCheckboxMouseDown, suppressNextChangeRef };
+};

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, RefObject } from "react";
 import { IListColumn } from "../table";
 import { ISelectionValue, SelectionState } from "./interfaces";
 import "./selectableColumn.less";
@@ -8,6 +8,8 @@ export type TSelectionStrategy = "main" | "nested";
 export interface ISelectableRowsOptions<T extends IRowEntity<N>, N extends IEntityWithId> {
     selection: ISelectionValue | undefined;
     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;
     checkboxDisabled?: (entity: T | N, isNested?: boolean) => boolean;
     checkboxVisible?: (entity: T | N, isNested?: boolean) => boolean;
     checkboxInHeader?: boolean;
@@ -32,8 +34,9 @@ export declare const getEmptySelection: () => {
     all: boolean;
     selected: string[];
 };
+export declare const isAllSelection: (all: boolean | undefined, selectedCount: number | undefined, allowExclusions?: boolean) => boolean;
 export declare const SelectableWrapperName = "Selectable";
-export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>, isInfinite?: boolean) => {
+export declare const useSelectableRows: <T extends IRowEntity<N>, N extends IEntityWithId>(columns: IListColumn<T, N>[], entities: T[], isMobile: boolean, selectMode: boolean, setSelectMode: (value: boolean) => void, selectable?: ISelectableRowsOptions<T, N>, isInfinite?: boolean, gridRef?: RefObject<HTMLElement | null>, expandedRows?: string[]) => {
     selectableColumns: IListColumn<T, N>[];
     selectableFeedWrapper: (primaryData: ReactNode, secondaryData: ReactNode, entity: T | N, isNested: boolean) => [ReactNode, ReactNode];
 };