@12-apps/ui 1.0.0 → 1.3.1

package/src/components/data-display/DataGrid/DataGrid.cells.tsx

@@ -0,0 +1,238 @@
+/**
+ * The DataGrid's cell and row renderers.
+ *
+ * Components rather than closures over the grid's scope: as inline `render*`
+ * functions they could reach every piece of the component's state, which is how
+ * the body grew past 700 lines. Each one now states exactly what it needs.
+ */
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import UnfoldMore from '@mui/icons-material/UnfoldMore';
+import { Button, Checkbox, IconButton, TableCell, TableRow, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+import { cellValue } from './DataGrid.rows';
+import type { DataGridModel } from './DataGrid.model';
+import type { DataGridProps, GridColumn, GridSort } from './DataGrid.types';
+
+/** The glyph for a column's current sort state — unsorted included. */
+function SortIcon({ dir }: { dir: GridSort['dir'] | undefined }): React.JSX.Element {
+  if (!dir) return <UnfoldMore fontSize="small" sx={{ opacity: 0.5 }} />;
+  return dir === 'asc' ? <ArrowUpward fontSize="small" /> : <ArrowDownward fontSize="small" />;
+}
+
+/** `aria-sort`'s three values, which are not the same words as `SortDirection`. */
+function ariaSort(dir: GridSort['dir'] | undefined): 'none' | 'ascending' | 'descending' {
+  if (!dir) return 'none';
+  return dir === 'asc' ? 'ascending' : 'descending';
+}
+
+export interface HeaderCellProps<T extends Record<string, unknown>> {
+  column: GridColumn<T>;
+  sort: GridSort | undefined;
+  sortable: boolean;
+  stickyHeader: boolean;
+  headerHeight: number;
+  onSort: (columnId: string) => void;
+}
+
+export function HeaderCell<T extends Record<string, unknown>>({
+  column,
+  sort,
+  sortable,
+  stickyHeader,
+  headerHeight,
+  onSort,
+}: HeaderCellProps<T>): React.JSX.Element {
+  const theme = useTheme();
+  const content = column.headerCell ? column.headerCell(column) : column.header;
+  return (
+    <TableCell
+      data-slot="header-cell"
+      data-sort={sort?.dir ?? 'none'}
+      sx={{
+        position: stickyHeader ? 'sticky' : 'static',
+        top: 0,
+        zIndex: 1,
+        backgroundColor: theme.palette.background.paper,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        height: headerHeight,
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        width: column.width,
+      }}
+      role="columnheader"
+      aria-sort={ariaSort(sort?.dir)}
+    >
+      {sortable ? (
+        <Button
+          onClick={() => onSort(column.id)}
+          sx={{
+            justifyContent: 'flex-start',
+            textTransform: 'none',
+            fontWeight: 500,
+            color: 'inherit',
+            p: 0,
+            minWidth: 0,
+            '&:hover': { backgroundColor: 'transparent', opacity: 0.8 },
+          }}
+          endIcon={<SortIcon dir={sort?.dir} />}
+          aria-label={column.ariaLabel ?? `Sort by ${String(column.header)}`}
+        >
+          {content}
+        </Button>
+      ) : (
+        <Typography variant="subtitle2" fontWeight={500}>
+          {content}
+        </Typography>
+      )}
+    </TableCell>
+  );
+}
+
+export interface DataCellProps<T extends Record<string, unknown>> {
+  row: T;
+  rowIndex: number;
+  rowId: string | number;
+  column: GridColumn<T>;
+  rowHeight: number;
+  editing: NonNullable<DataGridProps<T>['editing']>;
+  model: Pick<DataGridModel<T>, 'editingCell' | 'setEditingCell'>;
+}
+
+export function DataCell<T extends Record<string, unknown>>({
+  row,
+  rowIndex,
+  rowId,
+  column,
+  rowHeight,
+  editing,
+  model,
+}: DataCellProps<T>): React.JSX.Element {
+  const value = cellValue(row, column);
+  const isEditing =
+    model.editingCell?.rowId === rowId && model.editingCell?.colId === column.id;
+  const content = column.cell
+    ? column.cell({ value, row, rowIndex, col: column })
+    : String(value ?? '');
+  return (
+    <TableCell
+      data-slot="cell"
+      data-col-id={column.id}
+      data-editing={isEditing}
+      sx={{
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        width: column.width,
+        height: rowHeight,
+      }}
+      role="gridcell"
+      tabIndex={-1}
+    >
+      {isEditing && column.editor
+        ? column.editor({
+            value,
+            row,
+            onChange: () => undefined,
+            commit: () => {
+              editing.onEditCommit?.({ rowId, colId: column.id, value, row });
+              model.setEditingCell(null);
+            },
+            cancel: () => model.setEditingCell(null),
+          })
+        : content}
+    </TableCell>
+  );
+}
+
+export interface GridRowProps<T extends Record<string, unknown>> {
+  row: T;
+  index: number;
+  rowId: string | number;
+  isSelected: boolean;
+  isExpanded: boolean;
+  totalColumns: number;
+  model: DataGridModel<T>;
+  props: DataGridProps<T>;
+}
+
+/** The leading checkbox / chevron cells, which exist only for enabled features. */
+function RowControls<T extends Record<string, unknown>>({
+  index,
+  rowId,
+  isSelected,
+  isExpanded,
+  model,
+  props,
+}: GridRowProps<T>): React.JSX.Element {
+  const { selection = { mode: 'none' }, expansion } = props;
+  return (
+    <>
+      {selection.mode !== 'none' && (
+        <TableCell padding="checkbox">
+          <Checkbox
+            checked={isSelected}
+            onChange={(event) => model.onToggleRow(rowId, event.target.checked)}
+            inputProps={{ 'aria-label': `Select row ${index + 1}` }}
+          />
+        </TableCell>
+      )}
+      {expansion && (
+        <TableCell padding="checkbox">
+          <IconButton
+            size="small"
+            onClick={() => model.onToggleExpansion(rowId)}
+            aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+          >
+            {isExpanded ? <ExpandLess /> : <ExpandMore />}
+          </IconButton>
+        </TableCell>
+      )}
+    </>
+  );
+}
+
+export function GridRow<T extends Record<string, unknown>>(
+  rowProps: GridRowProps<T>,
+): React.JSX.Element {
+  const { row, index, rowId, isSelected, isExpanded, totalColumns, model, props } = rowProps;
+  const theme = useTheme();
+  const expansion = props.expansion;
+  return (
+    <React.Fragment>
+      <TableRow
+        data-slot="row"
+        data-selected={isSelected}
+        data-expanded={isExpanded}
+        sx={{
+          '&:hover': { backgroundColor: theme.palette.action.hover },
+          ...(isSelected && { backgroundColor: theme.palette.action.selected }),
+          height: model.rowHeight,
+        }}
+        role="row"
+        aria-selected={isSelected}
+      >
+        <RowControls {...rowProps} />
+        {model.visibleColumns.map((column) => (
+          <DataCell
+            key={column.id}
+            row={row}
+            rowIndex={index}
+            rowId={rowId}
+            column={column}
+            rowHeight={model.rowHeight}
+            editing={props.editing ?? { mode: 'none' }}
+            model={model}
+          />
+        ))}
+      </TableRow>
+      {expansion && isExpanded && (
+        <TableRow>
+          <TableCell colSpan={totalColumns}>{expansion.render(row, index)}</TableCell>
+        </TableRow>
+      )}
+    </React.Fragment>
+  );
+}

package/src/components/data-display/DataGrid/DataGrid.model.ts

@@ -0,0 +1,315 @@
+/**
+ * The DataGrid's STATE, in one hook.
+ *
+ * The component used to hold all of it inline, which made its body 700 lines
+ * long and put the row pipeline, the virtualization window and the JSX in one
+ * scope where any of them could reach any other. Split out, each piece is a
+ * hook with named inputs and the render is left with nothing to do but render.
+ *
+ * Controlled/uncontrolled is resolved in ONE place per feature: a caller that
+ * passes `sorting.sortBy` owns the sort, and a caller that does not gets the
+ * internal state — the component never holds a second, divergent copy.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type React from 'react';
+
+import { processRows } from './DataGrid.rows';
+import type {
+  DataGridProps,
+  GridColumn,
+  GridFilter,
+  GridSort,
+  SortDirection,
+} from './DataGrid.types';
+
+const DEFAULT_ROW_HEIGHT = 52;
+const DEFAULT_PAGE_SIZE = 50;
+/** Rows rendered on either side of the window, so a fast scroll stays filled. */
+const OVERSCAN_COUNT = 20;
+/** Below this many rows, virtualization costs more than it saves. */
+const VIRTUALIZATION_THRESHOLD = 100;
+/** The initial (and reset) window size, before a scroll has measured anything. */
+const INITIAL_WINDOW = 50;
+/** Re-window only past this much drift, so a scroll is not one setState per pixel. */
+const WINDOW_DRIFT = 5;
+
+/** Which id is being edited, or `null`. */
+export interface EditingCell {
+  rowId: string | number;
+  colId: string;
+}
+
+/** The visible slice of a virtualized body. */
+export interface VisibleRange {
+  start: number;
+  end: number;
+}
+
+/** Everything the render needs, and nothing it has to derive. */
+export interface DataGridModel<T extends Record<string, unknown>> {
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  rowHeight: number;
+  visibleColumns: GridColumn<T>[];
+  processedRows: T[];
+  visibleRows: T[];
+  visibleRange: VisibleRange;
+  virtualized: boolean;
+  sortBy: readonly GridSort[];
+  selectedRowIds: Array<string | number>;
+  selectedRowIdsSet: ReadonlySet<string | number>;
+  expandedRowIdsSet: ReadonlySet<string | number>;
+  editingCell: EditingCell | null;
+  setEditingCell: (cell: EditingCell | null) => void;
+  setSelectedRowIds: (ids: Array<string | number>) => void;
+  onSort: (columnId: string) => void;
+  onToggleRow: (rowId: string | number, isSelected: boolean) => void;
+  onToggleExpansion: (rowId: string | number) => void;
+  onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+}
+
+/** The row height a density implies. */
+function densityHeight(base: number, density: DataGridProps['density']): number {
+  if (density === 'compact') return Math.max(base * 0.8, 32);
+  if (density === 'spacious') return base * 1.2;
+  return base;
+}
+
+/** The rows this render should show, with every client-mode step resolved. */
+function useProcessedRows<T extends Record<string, unknown>>(
+  props: DataGridProps<T>,
+  columnMap: ReadonlyMap<string, GridColumn<T>>,
+  sortBy: readonly GridSort[],
+  filters: readonly GridFilter[],
+): T[] {
+  const { rows, filtering = {}, sorting = {}, pagination, virtualizeRows = true } = props;
+  const pageIndex = pagination?.pageIndex ?? 0;
+  const pageSize = pagination?.pageSize ?? DEFAULT_PAGE_SIZE;
+  return useMemo(
+    () =>
+      processRows({
+        rows,
+        columnMap,
+        filters,
+        sortBy,
+        needsFiltering: filtering.mode === 'client' && filters.length > 0,
+        needsSorting: sorting.mode === 'client' && sortBy.length > 0,
+        // Virtualization already slices; doing both would page a page.
+        needsPagination: pagination?.mode === 'client' && !virtualizeRows,
+        pageIndex,
+        pageSize,
+      }),
+    [
+      rows,
+      columnMap,
+      filters,
+      sortBy,
+      filtering.mode,
+      sorting.mode,
+      pagination?.mode,
+      virtualizeRows,
+      pageIndex,
+      pageSize,
+    ],
+  );
+}
+
+/**
+ * The virtualization window and the scroll handler that moves it.
+ *
+ * Throttled through `requestAnimationFrame`, and only committed once the window
+ * has drifted meaningfully — a `setState` per scroll event re-renders every
+ * visible row for a movement the eye cannot see.
+ */
+function useRowWindow(
+  rowCount: number,
+  rowHeight: number,
+  enabled: boolean,
+): { range: VisibleRange; onScroll: (event: React.UIEvent<HTMLDivElement>) => void } {
+  const [range, setRange] = useState<VisibleRange>({ start: 0, end: INITIAL_WINDOW });
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (rowCount < range.end) setRange({ start: 0, end: Math.min(INITIAL_WINDOW, rowCount) });
+  }, [rowCount, range.end]);
+
+  useEffect(
+    () => () => {
+      if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);
+    },
+    [],
+  );
+
+  const onScroll = useCallback(
+    (event: React.UIEvent<HTMLDivElement>) => {
+      if (!enabled) return;
+      const { scrollTop, clientHeight } = event.currentTarget;
+      if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);
+      rafRef.current = window.requestAnimationFrame(() => {
+        const first = Math.floor(scrollTop / rowHeight);
+        const visible = Math.ceil(clientHeight / rowHeight);
+        const start = Math.max(0, first - OVERSCAN_COUNT);
+        const end = Math.min(first + visible + OVERSCAN_COUNT, rowCount);
+        setRange((current) =>
+          Math.abs(start - current.start) > WINDOW_DRIFT ||
+          Math.abs(end - current.end) > WINDOW_DRIFT
+            ? { start, end }
+            : current,
+        );
+        rafRef.current = null;
+      });
+    },
+    [enabled, rowHeight, rowCount],
+  );
+
+  return { range, onScroll };
+}
+
+/** The next `sortBy` for a header press: asc → desc → unsorted. */
+function nextSortBy(current: readonly GridSort[], columnId: string): GridSort[] {
+  const existing = current.find((sort) => sort.id === columnId);
+  let dir: SortDirection = 'asc';
+  if (existing?.dir === 'asc') dir = 'desc';
+  else if (existing?.dir === 'desc') dir = null;
+  return dir ? [{ id: columnId, dir }] : current.filter((sort) => sort.id !== columnId);
+}
+
+/** Selection + expansion, each resolved once against its controlled prop. */
+function useRowFlags<T extends Record<string, unknown>>(
+  props: DataGridProps<T>,
+): Pick<
+  DataGridModel<T>,
+  | 'selectedRowIds'
+  | 'selectedRowIdsSet'
+  | 'expandedRowIdsSet'
+  | 'setSelectedRowIds'
+  | 'onToggleRow'
+  | 'onToggleExpansion'
+> {
+  const { selection = { mode: 'none' }, expansion } = props;
+  const [internalSelected, setInternalSelected] = useState(selection.defaultSelectedRowIds ?? []);
+  const [internalExpanded, setInternalExpanded] = useState(expansion?.defaultExpandedRowIds ?? []);
+  const selectedRowIds = selection.selectedRowIds ?? internalSelected;
+  const expandedRowIds = expansion?.expandedRowIds ?? internalExpanded;
+
+  const commitSelected = useCallback(
+    (ids: Array<string | number>) => {
+      if (selection.onChangeSelected) selection.onChangeSelected(ids);
+      else setInternalSelected(ids);
+    },
+    [selection],
+  );
+
+  return {
+    selectedRowIds,
+    selectedRowIdsSet: useMemo(() => new Set(selectedRowIds), [selectedRowIds]),
+    expandedRowIdsSet: useMemo(() => new Set(expandedRowIds), [expandedRowIds]),
+    setSelectedRowIds: commitSelected,
+    onToggleRow: (rowId, isSelected) => {
+      if (selection.mode === 'single') commitSelected(isSelected ? [rowId] : []);
+      else if (selection.mode === 'multi') {
+        commitSelected(
+          isSelected
+            ? [...selectedRowIds, rowId]
+            : selectedRowIds.filter((id) => id !== rowId),
+        );
+      }
+    },
+    onToggleExpansion: (rowId) => {
+      if (!expansion) return;
+      const next = expandedRowIds.includes(rowId)
+        ? expandedRowIds.filter((id) => id !== rowId)
+        : [...expandedRowIds, rowId];
+      if (expansion.onChangeExpanded) expansion.onChangeExpanded(next);
+      else setInternalExpanded(next);
+    },
+  };
+}
+
+/**
+ * A header press, routed to whoever owns the sort: the server (which must
+ * re-query — sorting the current page locally would reorder one page of a
+ * dataset and call it sorted), the caller's `onChangeSortBy`, or internal state.
+ */
+function useSortHandler<T extends Record<string, unknown>>(
+  props: DataGridProps<T>,
+  sortBy: readonly GridSort[],
+  filters: readonly GridFilter[],
+  setInternalSortBy: (next: GridSort[]) => void,
+): (columnId: string) => void {
+  const { sorting = {}, pagination, onRequestData } = props;
+  return useCallback(
+    (columnId: string) => {
+      const next = nextSortBy(sortBy, columnId);
+      if (sorting.mode === 'server' && onRequestData) {
+        onRequestData({
+          pageIndex: pagination?.pageIndex ?? 0,
+          pageSize: pagination?.pageSize ?? DEFAULT_PAGE_SIZE,
+          sortBy: next,
+          filters: [...filters],
+        });
+        return;
+      }
+      if (sorting.onChangeSortBy) sorting.onChangeSortBy(next);
+      else setInternalSortBy(next);
+    },
+    [sortBy, sorting, onRequestData, pagination, filters, setInternalSortBy],
+  );
+}
+
+/**
+ * Sort and filter, each resolved ONCE against its controlled prop: a caller
+ * that passes `sorting.sortBy` owns the sort, and one that does not gets the
+ * internal state. The grid never holds a second, divergent copy.
+ */
+function useSortAndFilter<T extends Record<string, unknown>>(
+  props: DataGridProps<T>,
+): {
+  sortBy: readonly GridSort[];
+  filters: readonly GridFilter[];
+  setInternalSortBy: (next: GridSort[]) => void;
+} {
+  const { sorting = {}, filtering = {} } = props;
+  const [internalSortBy, setInternalSortBy] = useState<GridSort[]>(sorting.defaultSortBy ?? []);
+  const [internalFilters] = useState<GridFilter[]>(filtering.defaultFilters ?? []);
+  return {
+    sortBy: sorting.sortBy ?? internalSortBy,
+    filters: filtering.filters ?? internalFilters,
+    setInternalSortBy,
+  };
+}
+
+export function useDataGridModel<T extends Record<string, unknown>>(
+  props: DataGridProps<T>,
+): DataGridModel<T> {
+  const { columns } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
+  const { sortBy, filters, setInternalSortBy } = useSortAndFilter(props);
+  const rowHeight = densityHeight(props.rowHeight ?? DEFAULT_ROW_HEIGHT, props.density);
+  const columnMap = useMemo(
+    () => new Map(columns.map((column) => [column.id, column])),
+    [columns],
+  );
+  const visibleColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+  const processedRows = useProcessedRows(props, columnMap, sortBy, filters);
+  const virtualized =
+    (props.virtualizeRows ?? true) && processedRows.length > VIRTUALIZATION_THRESHOLD;
+  const { range, onScroll } = useRowWindow(processedRows.length, rowHeight, virtualized);
+  const onSort = useSortHandler(props, sortBy, filters, setInternalSortBy);
+
+  return {
+    containerRef,
+    rowHeight,
+    visibleColumns,
+    processedRows,
+    visibleRows: virtualized ? processedRows.slice(range.start, range.end) : processedRows,
+    visibleRange: range,
+    virtualized,
+    sortBy,
+    editingCell,
+    setEditingCell,
+    onSort,
+    onScroll,
+    ...useRowFlags(props),
+  };
+}

package/src/components/data-display/DataGrid/DataGrid.rows.ts

@@ -0,0 +1,112 @@
+/**
+ * The DataGrid's CLIENT-MODE row pipeline: filter, sort, paginate.
+ *
+ * Lifted out of the component so it is a pure function of its inputs — no
+ * hooks, no theme, no refs — which is the only way the comparator can be read
+ * (and tested) at all. Server modes skip every step here: the rows arrived
+ * already filtered, sorted and paged, and re-doing any of it locally would make
+ * the grid disagree with the page count the server just sent.
+ */
+import type { GridColumn, GridFilter, GridSort } from './DataGrid.types';
+
+/** The value a column reads out of a row: accessor fn, accessor key, or id. */
+export function cellValue<T extends Record<string, unknown>>(
+  row: T,
+  column: GridColumn<T>,
+): unknown {
+  const { accessor } = column;
+  if (typeof accessor === 'function') return accessor(row);
+  if (accessor !== undefined) return row[accessor];
+  return row[column.id];
+}
+
+/**
+ * Order two cell values, with absent ones sorting first.
+ *
+ * Numbers compare as numbers and everything else as a string — the grid has no
+ * per-column comparator, and stringifying a number would sort 10 before 9.
+ */
+function compareValues(a: unknown, b: unknown): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  const left = typeof a === 'number' ? a : String(a);
+  const right = typeof b === 'number' ? b : String(b);
+  if (left < right) return -1;
+  return left > right ? 1 : 0;
+}
+
+/**
+ * A comparator over the whole `sortBy` list — earlier entries win, later ones
+ * break their ties. A sort entry naming an unknown column, or carrying a `null`
+ * direction, is skipped rather than treated as ascending.
+ */
+function makeComparator<T extends Record<string, unknown>>(
+  sortBy: readonly GridSort[],
+  columnMap: ReadonlyMap<string, GridColumn<T>>,
+): (a: T, b: T) => number {
+  return (a, b) => {
+    for (const sort of sortBy) {
+      const column = columnMap.get(sort.id);
+      if (!column || !sort.dir) continue;
+      const comparison = compareValues(cellValue(a, column), cellValue(b, column));
+      if (comparison !== 0) return sort.dir === 'desc' ? -comparison : comparison;
+    }
+    return 0;
+  };
+}
+
+/** Does `row` satisfy one filter? An unknown column or empty value matches all. */
+function matchesFilter<T extends Record<string, unknown>>(
+  row: T,
+  filter: GridFilter,
+  columnMap: ReadonlyMap<string, GridColumn<T>>,
+): boolean {
+  const column = columnMap.get(filter.id);
+  if (!column || !filter.value) return true;
+  const value = cellValue(row, column);
+  if (column.filterPredicate) return column.filterPredicate(value, filter.value, row);
+  return String(value ?? '')
+    .toLowerCase()
+    .includes(String(filter.value).toLowerCase());
+}
+
+/** Which client-mode steps this render actually needs. */
+interface RowPipeline<T extends Record<string, unknown>> {
+  rows: T[];
+  columnMap: ReadonlyMap<string, GridColumn<T>>;
+  filters: readonly GridFilter[];
+  sortBy: readonly GridSort[];
+  needsFiltering: boolean;
+  needsSorting: boolean;
+  needsPagination: boolean;
+  pageIndex: number;
+  pageSize: number;
+}
+
+/**
+ * Run the pipeline, copying the array only when a step actually has to modify
+ * it. The identity of the untouched array is load-bearing: the grid's memos and
+ * every consumer's `rows === prev` check depend on a no-op pipeline returning
+ * exactly what it was given.
+ */
+export function processRows<T extends Record<string, unknown>>(pipeline: RowPipeline<T>): T[] {
+  const { rows, columnMap, needsFiltering, needsSorting, needsPagination } = pipeline;
+  if (!needsFiltering && !needsSorting && !needsPagination) return rows;
+
+  let result = rows;
+  if (needsFiltering) {
+    result = result.filter((row) =>
+      pipeline.filters.every((filter) => matchesFilter(row, filter, columnMap)),
+    );
+  }
+  if (needsSorting) {
+    // Copy only here: `Array#sort` is in-place and the caller owns `rows`.
+    result = [...result].sort(makeComparator(pipeline.sortBy, columnMap));
+  }
+  if (needsPagination) {
+    const start = pipeline.pageIndex * pipeline.pageSize;
+    result = result.slice(start, start + pipeline.pageSize);
+  }
+  return result;
+}