@lotics/ui 2.6.1 → 3.1.0

package/src/grid/layout.ts

@@ -1,425 +0,0 @@
-import { useMemo } from "react";
-import { isEmpty, sum, sumBy } from "./helpers";
-
-interface UseGridLayoutParams {
-  groups: GridGroup[];
-  leafRowHeight: number;
-  groupHeadingHeight: number;
-  groupSummaryHeight: number;
-  spacerHeight: number;
-  columns: number[];
-  frozenColumnCount: number;
-  collapsedRows?: GroupPathKey[] | null;
-  /** Maximum width for frozen columns. If frozen columns exceed this, they will be scaled down proportionally. */
-  maxFrozenColumnsWidth?: number;
-}
-
-interface GridLayoutData {
-  contentHeight: number;
-  contentWidth: number;
-  frozenColumns: GridColumn[];
-  frozenColumnsWidth: number;
-  scrollableColumns: GridColumn[];
-  scrollableColumnsWidth: number;
-  rows: GridRow[];
-}
-
-export interface Column {
-  column: number;
-}
-
-export interface GridColumn extends Column {
-  width: number;
-  x: number;
-}
-
-/**
- * Group path: array representing the positional path to a group in the hierarchy.
- * Example: [0, 1] means the second child of the first top-level group.
- * This is a grid-internal positioning concept, NOT a data identifier.
- */
-export type GroupPath = number[];
-
-/**
- * Row path: GroupPath + row index within that group.
- * Example: [0, 1, 2] means row at index 2 in group [0, 1].
- * This is a grid-internal positioning concept, NOT a data identifier.
- */
-export type RowPath = number[];
-
-/**
- * String key for GroupPath, used as Map/Set keys for efficient lookups.
- * Created by `groupPathToKey()`. Example: "0,1"
- */
-export type GroupPathKey = string;
-
-/**
- * String key for RowPath, used as Map/Set keys for efficient lookups.
- * Created by `rowPathToKey()`. Example: "0,1,2"
- */
-export type RowPathKey = string;
-
-export interface DataRow {
-  rowPath: RowPath;
-}
-
-export interface GridDataRow extends DataRow {
-  type: "row";
-  height: number;
-  y: number;
-}
-
-export interface GroupRow {
-  groupPath: GroupPath;
-}
-
-export interface GridGroupHeadingRow extends GroupRow {
-  type: "group_heading";
-  height: number;
-  y: number;
-}
-
-export interface GridGroupSummaryRow extends GroupRow {
-  type: "group_summary";
-  height: number;
-  y: number;
-}
-
-export interface GridGroupRow extends GroupRow {
-  type: "group";
-  height: number;
-  y: number;
-}
-
-export interface GridSpacerRow {
-  type: "spacer";
-  y: number;
-  height: number;
-}
-
-export type GridRow = GridDataRow | GridGroupHeadingRow | GridGroupSummaryRow | GridSpacerRow;
-
-export function useGridLayout(params: UseGridLayoutParams): GridLayoutData {
-  const {
-    columns,
-    frozenColumnCount,
-    groups,
-    groupHeadingHeight,
-    groupSummaryHeight,
-    leafRowHeight,
-    spacerHeight,
-    collapsedRows,
-    maxFrozenColumnsWidth,
-  } = params;
-
-  const rawStickyColumnWidths = useMemo(
-    () => columns.slice(0, frozenColumnCount),
-    [columns, frozenColumnCount],
-  );
-
-  // Scale down frozen column widths if they exceed maxFrozenColumnsWidth
-  // The first column (select checkbox) is preserved at its original width;
-  // only data columns are scaled.
-  const stickyColumnWidths = useMemo(() => {
-    if (maxFrozenColumnsWidth === undefined) return rawStickyColumnWidths;
-    if (rawStickyColumnWidths.length <= 1) return rawStickyColumnWidths;
-
-    // Preserve the first column (select checkbox) width
-    const firstColumnWidth = rawStickyColumnWidths[0];
-    const dataColumnWidths = rawStickyColumnWidths.slice(1);
-    const dataColumnsTotal = sum(dataColumnWidths);
-
-    // Calculate remaining space for data columns after reserving first column
-    const remainingWidth = maxFrozenColumnsWidth - firstColumnWidth;
-    if (remainingWidth <= 0 || dataColumnsTotal <= remainingWidth) {
-      return rawStickyColumnWidths;
-    }
-
-    // Scale only the data columns
-    const scale = remainingWidth / dataColumnsTotal;
-    const scaledDataColumns = dataColumnWidths.map((w) => Math.floor(w * scale));
-
-    return [firstColumnWidth, ...scaledDataColumns];
-  }, [rawStickyColumnWidths, maxFrozenColumnsWidth]);
-
-  const scrollableColumnWidths = useMemo(
-    () => columns.slice(frozenColumnCount),
-    [columns, frozenColumnCount],
-  );
-  const frozenColumnsWidth = useMemo(() => sum(stickyColumnWidths), [stickyColumnWidths]);
-  const scrollableColumnsWidth = useMemo(
-    () => sum(scrollableColumnWidths),
-    [scrollableColumnWidths],
-  );
-  const frozenColumns = useMemo(() => getColumns(stickyColumnWidths), [stickyColumnWidths]);
-  const scrollableColumns = useMemo(
-    () => getColumns(scrollableColumnWidths, frozenColumnCount),
-    [scrollableColumnWidths, frozenColumnCount],
-  );
-  const rows = useMemo(
-    () =>
-      getRows(
-        groups,
-        groupHeadingHeight,
-        groupSummaryHeight,
-        leafRowHeight,
-        spacerHeight,
-        collapsedRows,
-      ),
-    [groups, groupHeadingHeight, groupSummaryHeight, leafRowHeight, spacerHeight, collapsedRows],
-  );
-  const contentHeight = useMemo(() => sumBy(rows, (row) => row.height), [rows]);
-  const contentWidth = frozenColumnsWidth + scrollableColumnsWidth;
-
-  return {
-    contentHeight,
-    contentWidth,
-    frozenColumns,
-    frozenColumnsWidth,
-    scrollableColumns,
-    scrollableColumnsWidth,
-    rows,
-  };
-}
-
-export interface RowGridGroup {
-  type: "row_group";
-  rowCount: number;
-}
-
-export interface NestedGridGroup {
-  type: "group";
-  children: GridGroup[];
-}
-
-export type GridGroup = RowGridGroup | NestedGridGroup;
-
-/**
- * Converts a GroupPath to a GroupPathKey string for efficient lookups.
- */
-export function groupPathToKey(path: GroupPath): GroupPathKey {
-  return path.join(",");
-}
-
-/**
- * Converts a RowPath to a RowPathKey string for efficient lookups.
- */
-export function rowPathToKey(path: RowPath): RowPathKey {
-  return path.join(",");
-}
-
-export function getRows(
-  groups: GridGroup[],
-  groupHeadingHeight: number,
-  groupSummaryHeight: number,
-  leafRowHeight: number,
-  spacerHeight: number,
-  collapsedGroupKeys?: GroupPathKey[] | null,
-): GridRow[] {
-  const collapsedSet = new Set<GroupPathKey>();
-  if (collapsedGroupKeys) {
-    for (const groupPathKey of collapsedGroupKeys) {
-      collapsedSet.add(groupPathKey);
-    }
-  }
-
-  // Check if this is a flat list (single row_group at root level)
-  const isFlatList = groups.length === 1 && groups[0].type === "row_group";
-
-  const descriptors = flattenGroupHierarchy({
-    groups,
-    parentGroupPath: [],
-    collapsedSet,
-    isFlatList,
-    spacerHeight,
-  });
-
-  return applyLayoutToDescriptors({
-    descriptors,
-    groupHeadingHeight,
-    groupSummaryHeight,
-    leafRowHeight,
-    spacerHeight,
-  });
-}
-
-type RowDescriptor =
-  | { kind: "group_heading"; groupPath: GroupPath }
-  | { kind: "group_summary"; groupPath: GroupPath }
-  | { kind: "row"; rowPath: RowPath }
-  | { kind: "spacer" };
-
-interface FlattenGroupHierarchyParams {
-  groups: GridGroup[];
-  parentGroupPath: GroupPath;
-  collapsedSet: Set<GroupPathKey>;
-  spacerHeight: number;
-  isFlatList?: boolean;
-}
-
-function flattenGroupHierarchy(params: FlattenGroupHierarchyParams): RowDescriptor[] {
-  const { groups, parentGroupPath, collapsedSet, spacerHeight, isFlatList = false } = params;
-
-  if (isEmpty(groups)) {
-    return [];
-  }
-
-  // For flat lists, emit only row descriptors without group structure
-  if (isFlatList && groups.length === 1 && groups[0].type === "row_group") {
-    return createRowDescriptors([0], groups[0].rowCount);
-  }
-
-  const descriptors: RowDescriptor[] = [];
-
-  for (let index = 0; index < groups.length; index++) {
-    const group = groups[index];
-    const groupPath: GroupPath = [...parentGroupPath, index];
-    const collapsed = collapsedSet.has(groupPathToKey(groupPath));
-
-    descriptors.push({ kind: "group_heading", groupPath });
-    // Always show group summary row (even when collapsed)
-    descriptors.push({ kind: "group_summary", groupPath });
-
-    // Only show data rows when not collapsed
-    if (collapsed === false) {
-      if (group.type === "row_group") {
-        descriptors.push(...createRowDescriptors(groupPath, group.rowCount));
-      } else {
-        descriptors.push(
-          ...flattenGroupHierarchy({
-            groups: group.children,
-            parentGroupPath: groupPath,
-            collapsedSet,
-            spacerHeight,
-          }),
-        );
-      }
-    }
-
-    if (groupPath.length === 1 && spacerHeight > 0) {
-      descriptors.push({ kind: "spacer" });
-    }
-  }
-
-  return descriptors;
-}
-
-function createRowDescriptors(groupPath: GroupPath, rowCount: number): RowDescriptor[] {
-  if (rowCount === 0) {
-    return [];
-  }
-
-  const descriptors: RowDescriptor[] = [];
-
-  for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-    const rowPath: RowPath = [...groupPath, rowIndex];
-    descriptors.push({
-      kind: "row",
-      rowPath,
-    });
-  }
-
-  return descriptors;
-}
-
-interface ApplyLayoutToDescriptorsParams {
-  descriptors: RowDescriptor[];
-  groupHeadingHeight: number;
-  groupSummaryHeight: number;
-  leafRowHeight: number;
-  spacerHeight: number;
-}
-
-function applyLayoutToDescriptors(params: ApplyLayoutToDescriptorsParams): GridRow[] {
-  const { descriptors, groupHeadingHeight, groupSummaryHeight, leafRowHeight, spacerHeight } =
-    params;
-
-  let offset = 0;
-
-  return descriptors.map((descriptor) => {
-    const height = getDescriptorHeight(descriptor, {
-      groupHeadingHeight,
-      groupSummaryHeight,
-      leafRowHeight,
-      spacerHeight,
-    });
-
-    const row =
-      descriptor.kind === "group_heading"
-        ? {
-            type: "group_heading" as const,
-            height,
-            y: offset,
-            groupPath: descriptor.groupPath,
-          }
-        : descriptor.kind === "group_summary"
-          ? {
-              type: "group_summary" as const,
-              height,
-              y: offset,
-              groupPath: descriptor.groupPath,
-            }
-          : descriptor.kind === "row"
-            ? {
-                type: "row" as const,
-                height,
-                y: offset,
-                rowPath: descriptor.rowPath,
-              }
-            : {
-                type: "spacer" as const,
-                height,
-                y: offset,
-              };
-
-    offset += height;
-    return row;
-  });
-}
-
-interface GetDescriptorHeightParams {
-  groupHeadingHeight: number;
-  groupSummaryHeight: number;
-  leafRowHeight: number;
-  spacerHeight: number;
-}
-
-function getDescriptorHeight(
-  descriptor: RowDescriptor,
-  heights: GetDescriptorHeightParams,
-): number {
-  const { groupHeadingHeight, groupSummaryHeight, leafRowHeight, spacerHeight } = heights;
-
-  switch (descriptor.kind) {
-    case "group_heading":
-      return groupHeadingHeight;
-    case "group_summary":
-      return groupSummaryHeight;
-    case "row":
-      return leafRowHeight;
-    case "spacer":
-      return spacerHeight;
-  }
-}
-
-export function getColumns(columnWidths: number[], offset = 0): GridColumn[] {
-  const result: GridColumn[] = [];
-
-  if (columnWidths.length === 0) {
-    return result;
-  }
-
-  let cumulativeX = 0;
-
-  for (let i = 0; i < columnWidths.length; i++) {
-    const width = columnWidths[i];
-    result.push({
-      width,
-      x: cumulativeX,
-      column: i + offset,
-    });
-    cumulativeX += width;
-  }
-
-  return result;
-}

package/src/grid/recycling.test.ts

@@ -1,236 +0,0 @@
-import { recycleItems } from "./recycling";
-
-interface Item {
-  value: number;
-}
-
-interface RecycledItem {
-  key: number;
-  value: number;
-}
-
-function recycle(items: Item[], prevItems: RecycledItem[]) {
-  return recycleItems({
-    items,
-    prevItems,
-    toRecycledItem: (item, key) => ({ ...item, key }),
-    getValue: (item) => item.value,
-    getKey: (item) => item.key,
-  });
-}
-
-test("recycleItems - with empty previous items", () => {
-  const items: Item[] = [{ value: 1 }, { value: 2 }, { value: 3 }];
-
-  const expected: RecycledItem[] = [
-    { value: 1, key: 0 },
-    { value: 2, key: 1 },
-    { value: 3, key: 2 },
-  ];
-
-  expect(recycle(items, [])).toEqual(expected);
-});
-
-test("recycleItems - with previous items, in middle", () => {
-  const items: Item[] = [{ value: 2 }, { value: 3 }, { value: 4 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-  ];
-
-  const expected: RecycledItem[] = [
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-    { value: 4, key: 1 },
-  ];
-
-  expect(recycle(items, prevItems)).toEqual(expected);
-});
-
-test("recycleItems - with previous items, at the end", () => {
-  const items: Item[] = [{ value: 4 }, { value: 5 }, { value: 6 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-  ];
-
-  const expected: RecycledItem[] = [
-    { value: 4, key: 1 },
-    { value: 5, key: 2 },
-    { value: 6, key: 3 },
-  ];
-
-  expect(recycle(items, prevItems)).toEqual(expected);
-});
-
-test("recycleItems - with no matching prev items", () => {
-  const items: Item[] = [{ value: 1 }, { value: 2 }, { value: 3 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 10, key: 1 },
-    { value: 20, key: 2 },
-    { value: 30, key: 3 },
-  ];
-
-  const expected: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-  ];
-
-  expect(recycle(items, prevItems)).toEqual(expected);
-});
-
-test("recycleItems - more items than previous", () => {
-  const items: Item[] = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-  ];
-
-  const expected: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-    { value: 4, key: 4 },
-    { value: 5, key: 5 },
-  ];
-
-  expect(recycle(items, prevItems)).toEqual(expected);
-});
-
-test("recycleItems - with changed other value", () => {
-  interface ComplexItem {
-    value: number;
-    other: string;
-  }
-
-  interface RecycledComplexItem {
-    key: number;
-    value: number;
-    other: string;
-  }
-
-  const items: ComplexItem[] = [
-    { value: 1, other: "a" },
-    { value: 2, other: "b-changed" },
-    { value: 3, other: "c" },
-  ];
-
-  const prevItems: RecycledComplexItem[] = [
-    { value: 1, key: 1, other: "a" },
-    { value: 2, key: 2, other: "b" },
-    { value: 3, key: 3, other: "c" },
-  ];
-
-  const expected: RecycledComplexItem[] = [
-    { value: 1, key: 1, other: "a" },
-    { value: 2, key: 2, other: "b-changed" },
-    { value: 3, key: 3, other: "c" },
-  ];
-
-  const result = recycleItems({
-    items,
-    prevItems,
-    toRecycledItem: (item, key) => ({ ...item, key }),
-    getValue: (item) => item.value,
-    getKey: (item) => item.key,
-  });
-
-  expect(result).toEqual(expected);
-});
-
-test("recycleItems - fewer items than previous", () => {
-  const items: Item[] = [{ value: 2 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-  ];
-
-  const expected: RecycledItem[] = [{ value: 2, key: 2 }];
-
-  expect(recycle(items, prevItems)).toEqual(expected);
-});
-
-test("recycleItems - reuses keys from middle items", () => {
-  const items: Item[] = [{ value: 1 }, { value: 5 }, { value: 3 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-    { value: 3, key: 3 },
-  ];
-
-  const expected: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 3, key: 3 },
-    { value: 5, key: 2 }, // Reuses key from removed item
-  ];
-
-  expect(recycle(items, prevItems)).toEqual(expected);
-});
-
-test("recycleItems - maintains sort order by value", () => {
-  const items: Item[] = [{ value: 3 }, { value: 1 }, { value: 2 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 10 },
-    { value: 2, key: 20 },
-    { value: 3, key: 30 },
-  ];
-
-  const result = recycle(items, prevItems);
-
-  // Should be sorted by value (1, 2, 3)
-  expect(result[0].value).toBe(1);
-  expect(result[1].value).toBe(2);
-  expect(result[2].value).toBe(3);
-});
-
-test("recycleItems - all items replaced", () => {
-  const items: Item[] = [{ value: 10 }, { value: 20 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 1 },
-    { value: 2, key: 2 },
-  ];
-
-  const expected: RecycledItem[] = [
-    { value: 10, key: 1 },
-    { value: 20, key: 2 },
-  ];
-
-  expect(recycle(items, prevItems)).toEqual(expected);
-});
-
-test("recycleItems - partial overlap", () => {
-  const items: Item[] = [{ value: 2 }, { value: 3 }, { value: 5 }];
-
-  const prevItems: RecycledItem[] = [
-    { value: 1, key: 10 },
-    { value: 2, key: 20 },
-    { value: 3, key: 30 },
-    { value: 4, key: 40 },
-  ];
-
-  const result = recycle(items, prevItems);
-
-  // Should reuse keys 20 and 30 for values 2 and 3
-  const item2 = result.find((item) => item.value === 2);
-  const item3 = result.find((item) => item.value === 3);
-  const item5 = result.find((item) => item.value === 5);
-
-  expect(item2?.key).toBe(20);
-  expect(item3?.key).toBe(30);
-  expect(item5?.key).toBeDefined();
-  // item5 should recycle from removed items (10 or 40)
-  expect([10, 40]).toContain(item5?.key);
-});