@geotab/zenith 3.16.0 → 3.17.0-beta.1

package/dist/dataGrid/dataGrid.d.ts

@@ -11,7 +11,7 @@ export interface IDataGrid<T, N = T> extends Omit<IZenComponentProps, "children"
     description?: string;
     emptyCellTitle?: string;
     resetScroll?: boolean;
-    children?: ReturnType<typeof EmptyList> | ReturnType<typeof Footer>;
+    children?: ReturnType<typeof EmptyList> | ReturnType<typeof Footer> | ReturnType<typeof EndOfList>;
     rowClassName?: TRowClassName<T>;
     expandedRows?: string[];
     onExpandedChange?: (id: string, isExpanded: boolean) => void;
@@ -37,10 +37,14 @@ export declare const VERTICAL_SCROLL_MODIFIER = "zen-data-grid--vertical-scroll"
 export declare const MIN_CELL_WIDTH = 100;
 export declare const EmptyList: FC<PropsWithChildren>;
 export declare const Footer: FC<PropsWithChildren>;
+export declare const EndOfList: FC<PropsWithChildren<{
+    style?: React.CSSProperties;
+}>>;
 declare const DataGridInner: <T extends IRowEntity<N>, N extends IEntityWithId = T>({ entities, columns, className, description, emptyCellTitle, children, rowClassName, expandedRows, onExpandedChange, active, onClick, onScrollEnd, isLoading }: IDataGrid<T, N>, ref: ForwardedRef<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
 export interface IDataGridStaticProps {
     EmptyList: typeof EmptyList;
     Footer: typeof Footer;
+    EndOfList: typeof EndOfList;
 }
 declare const DataGrid: (<T extends IRowEntity<N>, N extends IEntityWithId = T>(props: IDataGrid<T, N> & {
     ref?: React.ForwardedRef<HTMLElement>;

package/dist/dataGrid/dataGrid.js

@@ -6,7 +6,7 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TRANSLATIONS = exports.DataGrid = exports.Footer = exports.EmptyList = exports.MIN_CELL_WIDTH = exports.VERTICAL_SCROLL_MODIFIER = exports.HORIZONTAL_SCROLL_MODIFIER = exports.DRAGGING_MODIFIER = exports.NOT_INTERACTIVE_MODIFIER = void 0;
+exports.TRANSLATIONS = exports.DataGrid = exports.EndOfList = exports.Footer = exports.EmptyList = exports.MIN_CELL_WIDTH = exports.VERTICAL_SCROLL_MODIFIER = exports.HORIZONTAL_SCROLL_MODIFIER = exports.DRAGGING_MODIFIER = exports.NOT_INTERACTIVE_MODIFIER = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 injectString("cs", "Action", "Akce");
 injectString("da-DK", "Action", "Handling");
@@ -78,6 +78,20 @@ const Footer = ({
   children: children
 });
 exports.Footer = Footer;
+// Rendered right after the last data row (desktop infinite scroll only) to indicate there is no
+// more data to load. See Table's `isEndOfList` (table.tsx). `style` is set by DataGridInner to the
+// table's actual rendered width (see `tableRef`/`tableObserverResult` below), so the row — and the
+// centered content inside it (see `lazyLoadingEnd.less`) — spans the full table width even when
+// columns overflow the visible viewport, rather than just the currently-scrolled-into-view portion.
+const EndOfList = ({
+  children,
+  style
+}) => (0, jsx_runtime_1.jsx)("div", {
+  className: "zen-data-grid__end-of-list",
+  style: style,
+  children: children
+});
+exports.EndOfList = EndOfList;
 const FIRST_RENDERED_ROWS = 100;
 const SCROLL_END_THRESHOLD = 100;
 const DataGridInner = ({
@@ -107,6 +121,12 @@ const DataGridInner = ({
   const [verticalScrollApplied, setVerticalScrollApplied] = (0, react_1.useState)(false);
   // Refs
   const gridRef = (0, react_1.useRef)(null);
+  // Separate from `gridRef` (which is the outer *scrolling container*, used above for available
+  // column-allocation space). This tracks the `<table>` element itself, whose rendered width
+  // already reflects `max(sum of column widths, container width)` per its `min-width: 100%` CSS —
+  // i.e. it's wider than the container when columns overflow. Used to size the end-of-list row to
+  // the table's true full width instead of just the visible/scrolled-into-view portion.
+  const tableRef = (0, react_1.useRef)(null);
   const bodyRef = (0, react_1.useRef)(null);
   const lazyRenderTimerRef = (0, react_1.useRef)(0);
   const scrollEndFiredRef = (0, react_1.useRef)(false);
@@ -114,6 +134,7 @@ const DataGridInner = ({
   const rowsMap = (0, react_1.useMemo)(() => new Map(entities.map(entity => [entity.id, entity])), [entities]);
   const emptyList = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.EmptyList), [children]);
   const footer = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.Footer), [children]);
+  const endOfList = (0, react_1.useMemo)(() => react_1.Children.toArray(children).find(child => child.type === exports.EndOfList), [children]);
   (0, react_1.useImperativeHandle)(ref, () => gridRef.current, []);
   const getVisibleRows = () => {
     if (!gridRef.current || !bodyRef.current) {
@@ -171,6 +192,14 @@ const DataGridInner = ({
   } = (0, useResizeObserver_1.useResizeObserver)({
     target: gridRef.current
   });
+  // Only observe the table's width when an `EndOfList` child is actually present — avoids a
+  // second ResizeObserver instance (and its resulting re-renders) on the vast majority of
+  // `DataGrid` usages that never render this row.
+  const {
+    result: tableObserverResult
+  } = (0, useResizeObserver_1.useResizeObserver)({
+    target: endOfList ? tableRef.current : null
+  });
   const allocatedSpace = listOfDefaultWidthColumns.reduce((acc, width, index) => acc + (width === undefined ? 0 : getColumnWidth(width, listOfMinWidthColumns[index])), 0);
   const unallocatedSpace = observerResult && observerResult.contentRect.width - allocatedSpace || 0;
   const flexibleColumnsQty = listOfDefaultWidthColumns.filter(width => width === undefined).length;
@@ -308,6 +337,7 @@ const DataGridInner = ({
         "aria-label": description,
         "aria-busy": !!isLoading,
         role: isTreeGrid ? "treegrid" : undefined,
+        ref: tableRef,
         children: [(0, jsx_runtime_1.jsx)("thead", {
           className: "zen-data-grid__header",
           children: (0, jsx_runtime_1.jsx)("tr", {
@@ -318,7 +348,13 @@ const DataGridInner = ({
           ref: bodyRef,
           children: body
         })]
-      }), emptyList && entities.length === 0 ? emptyList : null, footer]
+      }), endOfList ? (0, react_1.cloneElement)(endOfList, {
+        style: Object.assign(Object.assign({}, tableObserverResult ? {
+          width: tableObserverResult.contentRect.width
+        } : {}), observerResult ? {
+          "--zen-end-of-list-viewport-width": `${observerResult.contentRect.width}px`
+        } : {})
+      }) : null, emptyList && entities.length === 0 ? emptyList : null, footer]
     })
   });
 };
@@ -326,4 +362,5 @@ const DataGrid = (0, react_1.forwardRef)(DataGridInner);
 exports.DataGrid = DataGrid;
 DataGrid.EmptyList = exports.EmptyList;
 DataGrid.Footer = exports.Footer;
+DataGrid.EndOfList = exports.EndOfList;
 exports.TRANSLATIONS = ["Action"];

package/dist/dataGrid/lazyLoadingEnd/lazyLoadingEnd.d.ts

@@ -0,0 +1,3 @@
+import "./lazyLoadingEnd.less";
+export declare const LazyLoadingEnd: () => import("react/jsx-runtime").JSX.Element;
+export declare const TRANSLATIONS: string[];

package/dist/dataGrid/lazyLoadingEnd/lazyLoadingEnd.js

@@ -0,0 +1,54 @@
+"use strict";
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRANSLATIONS = exports.LazyLoadingEnd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const imageNothingFound_1 = require("../../images/imageNothingFound");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+injectString("en", "No further results found", "No further results found");
+injectString("en", "We couldn't find any more data matching your current selection. Try broadening your search.", "We couldn't find any more data matching your current selection. Try broadening your search.");
+// Shown as the last "row" of a desktop infinite-scroll table (Table's `onScrollEnd`) once all rows
+// have been loaded, i.e. `entities.length >= total` from the `Table.Pagination` child. See
+// `dataGrid.tsx`'s `EndOfList` slot and `table.tsx`'s `isEndOfList`.
+//
+// Two layers: the outer `zen-lazy-loading-end` is sized by `dataGrid.tsx` to the table's actual
+// rendered width (can be much wider than the viewport once columns overflow), so its background/
+// border span the full table at any scroll position. The inner `__sticky` wrapper is given an
+// explicit, narrower width (the scrollport's own width, via `dataGrid.tsx`'s
+// `--zen-end-of-list-viewport-width` CSS variable) and `position: sticky; inset-inline-start: 0`, so
+// it floats and tracks the *currently visible* horizontal scroll position — `position: sticky` alone
+// doesn't shrink a normal block box's width, so without the explicit width it would just render at
+// the outer layer's full table width and never visibly move. With it, the icon and text stay centered
+// on whatever part of the table you're actually looking at, rather than on the table's mathematical
+// midpoint (which could be scrolled far out of view). See lazyLoadingEnd.less.
+const LazyLoadingEnd = () => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: "zen-lazy-loading-end",
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-lazy-loading-end__sticky",
+      children: [(0, jsx_runtime_1.jsx)(imageNothingFound_1.ImageNothingFound, {
+        className: "zen-lazy-loading-end__image",
+        focusable: false
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-lazy-loading-end__content",
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          className: "zen-lazy-loading-end__title",
+          children: translate("No further results found")
+        }), (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-lazy-loading-end__description",
+          children: translate("We couldn't find any more data matching your current selection. Try broadening your search.")
+        })]
+      })]
+    })
+  });
+};
+exports.LazyLoadingEnd = LazyLoadingEnd;
+exports.TRANSLATIONS = ["No further results found", "We couldn't find any more data matching your current selection. Try broadening your search."];

package/dist/dataGrid/row/row.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const cell_1 = require("../cell/cell");
+const showMoreRow_1 = require("../../commonHelpers/showMoreRow");
+const ShowMoreCell_1 = require("../../commonHelpers/ShowMoreCell");
 exports.MIN_CELL_WIDTH = 100;
 const getColumnWidth = (defaultWidth, minWidth) => Math.floor(Math.max(defaultWidth, minWidth !== null && minWidth !== void 0 ? minWidth : exports.MIN_CELL_WIDTH));
 const Row = ({ id, entity, columns, visibleRows, flexibleColumnWidth, isLastRow, className, expanded, onExpandedChange, isTreeGrid, ariaPosinset, ariaSetsize, onClick, isActive, active }) => {
@@ -60,7 +62,23 @@ 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 nestedRows = (0, react_1.useMemo)(() => {
+        const nestedEntities = expanded && entity.children ? entity.children : [];
+        return nestedEntities.map((nestedEntity, index) => {
+            const childKey = `${mainRowId}_child_${index}`;
+            const sharedProps = {
+                id: childKey,
+                role: "row",
+                "aria-level": 2,
+                "aria-posinset": index + 1,
+                "aria-setsize": nestedEntities.length
+            };
+            if ((0, showMoreRow_1.isShowMoreRow)(nestedEntity)) {
+                return ((0, jsx_runtime_1.jsx)("tr", Object.assign({}, sharedProps, { className: "zen-data-grid__row zen-data-grid__row--nested zen-data-grid__row--show-more", children: (0, jsx_runtime_1.jsx)("td", { colSpan: columns.length, className: "zen-data-grid__row-cell zen-data-grid__row-cell--nested zen-data-grid__row-cell--show-more", children: (0, jsx_runtime_1.jsx)(ShowMoreCell_1.ShowMoreCell, { row: nestedEntity }) }) }), childKey));
+            }
+            return ((0, jsx_runtime_1.jsx)("tr", Object.assign({ "data-row-id": nestedEntity.id }, sharedProps, { className: "zen-data-grid__row zen-data-grid__row--nested", children: renderCells(nestedEntity, true) }), childKey));
+        });
+    }, [entity.children, expanded, renderCells, columns.length, mainRowId]);
+    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), nestedRows] }));
 };
 exports.DataGridRow = (0, react_1.memo)(Row);

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

@@ -12,6 +12,8 @@ export interface IBulkActionsProps extends IZenComponentProps {
      * even when `selected` is 0 (i.e., cross-page "select all" is active).
      */
     allSelected?: boolean;
+    /** Show a selection label without a count when the selected total is unknown. */
+    selectionCountUnknown?: boolean;
     onClearSelection: () => void;
     onSelectAll?: () => void;
     gridType?: DeviceType;
@@ -23,7 +25,7 @@ export interface IBulkActions extends IBulkActionsProps {
     ActionButton: (props: IBulkActionButton) => ReactNode;
 }
 export declare const BulkActions: {
-    ({ selected, allSelected, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ selected, allSelected, selectionCountUnknown, className, onClearSelection, onSelectAll, gridType, children, turnOffSelectAll }: IBulkActionsProps): import("react/jsx-runtime").JSX.Element;
     ActionLink: ({ title, icon, link, disabled, type, ref }: IBulkActionLink) => import("react/jsx-runtime").JSX.Element;
     ActionButton: ({ title, icon, clickHandler, onClick, disabled, type, ref }: IBulkActionButton) => import("react/jsx-runtime").JSX.Element;
     translations: string[];

package/dist/dataGrid/withSelectableRows/components/bulkActions/bulkActions.js

@@ -8,6 +8,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BulkActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+injectString("cs", "Selected", "Vybr\xE1no");
+injectString("da-DK", "Selected", "Valgt");
+injectString("de", "Selected", "Ausgew\xE4hlt");
+injectString("en", "Selected", "Selected");
+injectString("es", "Selected", "Seleccionado");
+injectString("fi-FI", "Selected", "Valittu");
+injectString("fr", "Selected", "S\xE9lectionn\xE9");
+injectString("fr-FR", "Selected", "S\xE9lectionn\xE9");
+injectString("hu-HU", "Selected", "Kiv\xE1lasztott");
+injectString("id", "Selected", "Dipilih");
+injectString("it", "Selected", "Selezionato");
+injectString("ja", "Selected", "\u9078\u629E\u8ECA\u4E21");
+injectString("ko-KR", "Selected", "\uC120\uD0DD\uB428");
+injectString("ms", "Selected", "Dipilih");
+injectString("nb-NO", "Selected", "Valgt");
+injectString("nl", "Selected", "Geselecteerd");
+injectString("pl", "Selected", "Wybrano");
+injectString("pt-BR", "Selected", "Selecionado");
+injectString("pt-PT", "Selected", "Selecionado");
+injectString("sk-SK", "Selected", "Vybran\xE9");
+injectString("sv", "Selected", "Valda");
+injectString("th", "Selected", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E25\u0E49\u0E27");
+injectString("tr", "Selected", "Se\xE7ildi");
+injectString("zh-Hans", "Selected", "\u9009\u4E2D\u7684");
+injectString("zh-TW", "Selected", "\u5DF2\u9078\u53D6");
+injectString("ro-RO", "Selected", "Selec\u021Bie");
+injectString("ar-001", "Selected", "\u0627\u0644\u0645\u062D\u062F\u062F");
+injectString("lt-LT", "Selected", "Pasirinkta");
+injectString("lv-LV", "Selected", "Atlas\u012Bts");
+injectString("ka-GE", "Selected", "\u10D0\u10E0\u10E9\u10D4\u10E3\u10DA\u10D8");
+injectString("el-GR", "Selected", "\u0395\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03B1");
+injectString("et-EE", "Selected", "Valitud");
+injectString("bg-BG", "Selected", "\u0418\u0437\u0431\u0440\u0430\u043D\u0438");
 injectString("cs", "{1} selected", "{1} vybran\xFD/vybran\xE9");
 injectString("da-DK", "{1} selected", "{1} valgt");
 injectString("de", "{1} selected", "{1} ausgew\xE4hlt");
@@ -189,6 +222,7 @@ const button_1 = require("../../../../button/button");
 const BulkActions = ({
   selected,
   allSelected,
+  selectionCountUnknown,
   className,
   onClearSelection,
   onSelectAll,
@@ -222,7 +256,8 @@ const BulkActions = ({
     widthDelta
   });
   const isMobile = gridType === deviceType_1.DeviceType.Mobile;
-  const text = translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
+  const hasSelection = selected > 0 || allSelected || selectionCountUnknown;
+  const text = selectionCountUnknown ? translate("Selected") : translate("{1} selected").replace("{1}", allSelected ? translate("All") : selected.toFixed());
   return (0, jsx_runtime_1.jsxs)("div", {
     className: (0, classNames_1.classNames)(["zen-bulk-actions", className || "", isMobile ? "zen-bulk-actions--condensed" : ""]),
     ref: bulkActionsElement,
@@ -248,7 +283,7 @@ const BulkActions = ({
       className: "zen-bulk-actions__action-button-holder",
       ref: buttonHolder,
       children: [react_1.Children.map(visibleElements, element => (0, react_1.cloneElement)(element, {
-        disabled: selected > 0 || allSelected ? element.props.disabled : true
+        disabled: hasSelection ? element.props.disabled : true
       })), nonFittingElements.length > 0 ? (0, jsx_runtime_1.jsx)(menu_1.Menu, {
         title: translate("More"),
         trigger: (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
@@ -269,7 +304,7 @@ const BulkActions = ({
             id: props.id || "",
             name: props.title,
             icon: props.icon,
-            disabled: props.disabled,
+            disabled: hasSelection ? props.disabled : true,
             onClick: clickHandler,
             link: link
           }, props.id);
@@ -285,4 +320,4 @@ const BulkActions = ({
 exports.BulkActions = BulkActions;
 exports.BulkActions.ActionLink = bulkActionLink_1.BulkActionLink;
 exports.BulkActions.ActionButton = bulkActionButton_1.BulkActionButton;
-exports.BulkActions.translations = ["Clear selection", "More options", "{1} selected", "Selecting..."];
+exports.BulkActions.translations = ["Clear selection", "More options", "{1} selected", "Selecting...", "Selected"];

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/dropdown/dropdownTrigger.d.ts

@@ -1 +1 @@
-export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, autocomplete, buttonType, isError, popupId, handleFocusOnPopup, allyPattern, dataAnalyticsId, ...otherProps }: import("../dropdownRaw/dropdownTrigger").IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownTrigger: ({ name, onBlur, isActive, id, triggerRef, searchField, placeholder, disabled, fullWidth, currentSelection, handleClick, inputValue, className, onSearchChange, width, title, triggerAriaLabel, count, inputRef, autocomplete, buttonType, isError, popupId, handleFocusOnPopup, allyPattern, dataAnalyticsId, isFormItem, ...otherProps }: import("../dropdownRaw/dropdownTrigger").IDropdownTrigger) => import("react/jsx-runtime").JSX.Element;

package/dist/dropdownRaw/dropdownHelper.d.ts

@@ -12,15 +12,27 @@ export declare const isAllItemsHasOneParent: (listData: IDropdownRawItem[], chil
 export declare function prepareComboOptionsForList(actionListData: Set<string>, translate: (s: string) => string, options: IDropdownRawItem[], getSelectedFn: () => string[], getSelectedChildFn: (optionId: any) => string[], isFlatList: boolean, getTitle?: (itemId: string) => string, isAllSelected?: boolean): ICheckboxListWithActionOption[];
 export declare const createOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isAllSelected?: boolean) => ICheckboxListWithActionOption[];
 export declare const sortDropdownItemArray: (arr: IDropdownRawItem[], sortFn?: (a: IDropdownRawItem, b: IDropdownRawItem) => number) => IDropdownRawItem[];
+/**
+ * Floats selected items to the top of the list while preserving the relative order within each
+ * group (selected and unselected). When `selectedIds` is empty the original array is returned
+ * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ */
+export declare const applySortSelectedToTop: (items: IDropdownRawItem[], selectedIds: string[]) => IDropdownRawItem[];
 export declare const createSingleListOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[]) => {
+    destructive: boolean | undefined;
+    divider?: boolean | undefined;
     id: string;
     children: string;
+    title: string;
     disabled: boolean | undefined;
     multiLevel: boolean | undefined;
 }[];
 export declare const createListDataOptions: (stateObj: IDropdownState, translate: (s: string) => string, listItem: IDropdownRawItem[], isMultiselect: boolean, isAllSelected?: boolean) => ICheckboxListWithActionOption[] | {
+    destructive: boolean | undefined;
+    divider?: boolean | undefined;
     id: string;
     children: string;
+    title: string;
     disabled: boolean | undefined;
     multiLevel: boolean | undefined;
 }[];

package/dist/dropdownRaw/dropdownHelper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAllyTriggerProps = exports.getSelectedCount = exports.getStringFromAllSelected = exports.getStringFromSelected = exports.checkIsDataProblem = exports.prepareSelectedIdsToItems = exports.compareObjectsArrays = exports.compareStringsArrays = exports.createListDataOptions = exports.createSingleListOptions = exports.sortDropdownItemArray = exports.createOptions = exports.isAllItemsHasOneParent = exports.getDataForChange = exports.isEveryItemSelected = exports.isAllChildrenSelected = exports.getListDataWithDisabled = exports.getGroupsTreeItem = void 0;
+exports.getAllyTriggerProps = exports.getSelectedCount = exports.getStringFromAllSelected = exports.getStringFromSelected = exports.checkIsDataProblem = exports.prepareSelectedIdsToItems = exports.compareObjectsArrays = exports.compareStringsArrays = exports.createListDataOptions = exports.createSingleListOptions = exports.applySortSelectedToTop = exports.sortDropdownItemArray = exports.createOptions = exports.isAllItemsHasOneParent = exports.getDataForChange = exports.isEveryItemSelected = exports.isAllChildrenSelected = exports.getListDataWithDisabled = exports.getGroupsTreeItem = void 0;
 exports.prepareComboOptionsForList = prepareComboOptionsForList;
 const groupsHelper_1 = require("../groupsFilterRaw/groupsHelper");
 const stateReducerHelper_1 = require("./stateReducer/stateReducerHelper");
@@ -55,7 +55,7 @@ function prepareComboOptionsForList(actionListData, translate, options, getSelec
     const preparedOptions = options && options.length
         ? options.map(option => {
             const selectedChild = getSelectedChildFn(option.id);
-            return Object.assign({ label: (0, groupsHelper_1.getGroupDescription)(option, translate), property: option.id, checked: isAllSelected ? true : selectedIds.has(option.id), isWithAction: actionListData.has(option.id), partialChecked: isAllSelected ? false : selectedChild.length > 0, countSelectedChild: 0, blocked: isFlatList ? option.disabled || false : false }, (getTitle ? { title: getTitle(option.id) } : {}));
+            return Object.assign(Object.assign({ label: (0, groupsHelper_1.getGroupDescription)(option, translate), property: option.id, checked: isAllSelected ? true : selectedIds.has(option.id), isWithAction: actionListData.has(option.id), partialChecked: isAllSelected ? false : selectedChild.length > 0, countSelectedChild: 0, blocked: isFlatList ? option.disabled || false : false }, (getTitle ? { title: getTitle(option.id) } : {})), (option.divider ? { divider: true } : {}));
         })
         : [];
     return preparedOptions;
@@ -93,16 +93,33 @@ const sortDropdownItemArray = (arr, sortFn) => {
     return arr;
 };
 exports.sortDropdownItemArray = sortDropdownItemArray;
+/**
+ * Floats selected items to the top of the list while preserving the relative order within each
+ * group (selected and unselected). When `selectedIds` is empty the original array is returned
+ * unchanged (no allocation). Uses a single-pass partition to avoid traversing `items` twice.
+ */
+const applySortSelectedToTop = (items, selectedIds) => {
+    if (!selectedIds.length)
+        return items;
+    const selectedSet = new Set(selectedIds);
+    const selected = [];
+    const unselected = [];
+    for (const item of items) {
+        (selectedSet.has(item.id) ? selected : unselected).push(item);
+    }
+    return [...selected, ...unselected];
+};
+exports.applySortSelectedToTop = applySortSelectedToTop;
 const createSingleListOptions = (stateObj, translate, listItem) => {
     const preparedOptions = listItem && listItem.length
-        ? listItem.map(option => ({
-            id: option.id,
-            children: (0, groupsHelper_1.getGroupDescription)(stateObj.groupsMap[option.id] || option, translate),
-            disabled: option.disabled,
-            multiLevel: Object.keys(stateObj.groupsMap).length === 0
-                ? false
-                : option.children && option.children.length > 0 && stateObj.groupsMap[option.id] !== undefined
-        }))
+        ? listItem.map(option => {
+            const description = (0, groupsHelper_1.getGroupDescription)(stateObj.groupsMap[option.id] || option, translate);
+            return Object.assign(Object.assign({ id: option.id, children: description, 
+                // Long names are truncated by `zen-ellipsis`, so expose the full text on hover
+                title: description, disabled: option.disabled, multiLevel: Object.keys(stateObj.groupsMap).length === 0
+                    ? false
+                    : option.children && option.children.length > 0 && stateObj.groupsMap[option.id] !== undefined }, (option.divider ? { divider: true } : {})), { destructive: option.destructive });
+        })
         : [];
     return preparedOptions;
 };
@@ -124,7 +141,11 @@ const compareObjectsArrays = (arr1, arr2) => arr1.length === arr2.length &&
         const sameDisabled = el.disabled === el2.disabled ||
             (el.disabled === undefined && el2.disabled === false) ||
             (el2.disabled === undefined && el.disabled === false);
-        return sameId && sameDisabled;
+        const sameDivider = el.divider === el2.divider || (el.divider === undefined && el2.divider === false) || (el2.divider === undefined && el.divider === false);
+        const sameDestructive = el.destructive === el2.destructive ||
+            (el.destructive === undefined && el2.destructive === false) ||
+            (el2.destructive === undefined && el.destructive === false);
+        return sameId && sameDisabled && sameDivider && sameDestructive;
     });
 exports.compareObjectsArrays = compareObjectsArrays;
 const prepareSelectedIdsToItems = (selectedIds, groupsMap, groupsMapSelected) => {