@lotics/ui 2.6.1 → 3.0.0

package/src/grid/select_group_summary_cell.tsx

@@ -1,76 +0,0 @@
-import { Checkbox } from "@lotics/ui/checkbox";
-import { Text } from "@lotics/ui/text";
-import { GroupPathKey, RowPathKey } from "@lotics/ui/grid/layout";
-import { useContext, useMemo, useCallback, memo } from "react";
-import { RowSelectionContext } from "./data_grid_context";
-import { Pressable, View } from "react-native";
-import { colors } from "@lotics/ui/colors";
-
-export const SelectGroupSummaryCell = memo(function SelectGroupSummaryCell(props: {
-  groupKey: GroupPathKey;
-  descendantRowKeys: RowPathKey[];
-}) {
-  const { descendantRowKeys } = props;
-  const context = useContext(RowSelectionContext);
-  const selectedRows = context?.selectedRows;
-  const onSelectedRowsChange = context?.onSelectedRowsChange;
-
-  const selectedCount = useMemo(() => {
-    if (!selectedRows || descendantRowKeys.length === 0) {
-      return 0;
-    }
-    return descendantRowKeys.filter((rowPathKey) => selectedRows.has(rowPathKey)).length;
-  }, [selectedRows, descendantRowKeys]);
-
-  const isIndeterminate = selectedCount > 0 && selectedCount < descendantRowKeys.length;
-  const isAllSelected = selectedCount === descendantRowKeys.length && descendantRowKeys.length > 0;
-
-  const handlePress = useCallback(() => {
-    if (!onSelectedRowsChange) {
-      return;
-    }
-
-    const newSelectedRows = new Set(selectedRows ?? []);
-
-    if (isAllSelected) {
-      descendantRowKeys.forEach((rowPathKey) => {
-        newSelectedRows.delete(rowPathKey);
-      });
-    } else {
-      descendantRowKeys.forEach((rowPathKey) => {
-        newSelectedRows.add(rowPathKey);
-      });
-    }
-
-    onSelectedRowsChange(newSelectedRows);
-  }, [onSelectedRowsChange, selectedRows, descendantRowKeys, isAllSelected]);
-
-  const recordCount = descendantRowKeys.length;
-  const shouldShowCheckbox = isIndeterminate || isAllSelected;
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={{
-        paddingHorizontal: 6,
-        alignItems: "center",
-        flexDirection: "row",
-        height: "100%",
-        cursor: "pointer",
-        backgroundColor: colors.background,
-      }}
-    >
-      {({ hovered }) =>
-        hovered || shouldShowCheckbox ? (
-          <Checkbox checked={isAllSelected} indeterminate={isIndeterminate} />
-        ) : (
-          <View style={{ width: 24, alignItems: "center" }}>
-            <Text color="zinc-500" size="xs" userSelect="none">
-              {recordCount}
-            </Text>
-          </View>
-        )
-      }
-    </Pressable>
-  );
-});

package/src/grid/select_header_cell.tsx

@@ -1,32 +0,0 @@
-import { CheckboxInput } from "@lotics/ui/checkbox_input";
-import { useHeaderRowSelection } from "./data_grid_context";
-import { memo } from "react";
-import { View } from "react-native";
-
-export const SelectHeaderCell = memo(function SelectHeaderCell() {
-  const { isIndeterminate, isRowSelected, onRowSelectionChange } = useHeaderRowSelection();
-
-  return (
-    <View
-      style={{
-        paddingHorizontal: 6,
-        height: 40,
-        flexDirection: "row",
-        gap: 4,
-        alignItems: "center",
-      }}
-    >
-      <CheckboxInput
-        accessibilityLabel="Select all rows"
-        testID="table-header-checkbox"
-        indeterminate={isIndeterminate}
-        checked={isRowSelected}
-        onChange={(checked) => {
-          onRowSelectionChange({
-            checked: isIndeterminate ? false : checked,
-          });
-        }}
-      />
-    </View>
-  );
-});

package/src/grid/skeleton_row.module.css

@@ -1,34 +0,0 @@
-.skeleton_row {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  will-change: transform;
-  content-visibility: auto;
-}
-
-.skeleton_row::before {
-  content: "";
-  width: 100%;
-  height: 28px;
-  border-radius: 4px;
-  background-color: rgba(244, 244, 245, 1); /* zinc-100 */
-  background-image: linear-gradient(
-    90deg,
-    transparent 25%,
-    rgba(255, 255, 255, 0.6) 50%,
-    transparent 75%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 1.5s infinite linear;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}

package/src/grid/skeleton_row.tsx

@@ -1,20 +0,0 @@
-import { memo } from "react";
-import styles from "./skeleton_row.module.css";
-
-interface SkeletonRowProps {
-  y: number;
-  height: number;
-  width: number;
-}
-
-export const SkeletonRow = memo(function SkeletonRow(props: SkeletonRowProps) {
-  const { y, height, width } = props;
-
-  return (
-    <div
-      className={styles.skeleton_row}
-      data-testid="skeleton-row"
-      style={{ height, width, transform: `translateY(${y}px)` }}
-    />
-  );
-});

package/src/grid/use_grid_groups.ts

@@ -1,311 +0,0 @@
-import { useMemo, useRef } from "react";
-import type {
-  GridGroup,
-  RowPath,
-  RowPathKey,
-  GroupPath,
-  GroupPathKey,
-} from "@lotics/ui/grid/layout";
-import { rowPathToKey, groupPathToKey } from "@lotics/ui/grid/layout";
-import type { DataGridGroup } from "./data_grid";
-import { RowId } from "./data_grid_context";
-
-/**
- * Deep equality used to preserve referential identity across renders.
- * Vendored from @lotics/shared/utils so the grid module can be published
- * without depending on the workspace-private package.
- */
-function isEqual(a: unknown, b: unknown): boolean {
-  if (a === b) return true;
-  if (a == null || b == null) return a === b;
-  if (typeof a !== typeof b) return false;
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false;
-    return a.every((item, index) => isEqual(item, b[index]));
-  }
-  if (typeof a === "object" && typeof b === "object") {
-    const keysA = Object.keys(a as object);
-    const keysB = Object.keys(b as object);
-    if (keysA.length !== keysB.length) return false;
-    return keysA.every((key) =>
-      isEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key]),
-    );
-  }
-  return false;
-}
-
-/**
- * Group metadata stored in groupDataMap.
- */
-export interface GroupData<TRow = unknown> {
-  value: unknown;
-  level: number;
-  columnKey: string;
-  rows: TRow[];
-}
-
-/**
- * Cached descendant data for efficient group operations.
- */
-export interface DescendantData<TRow = unknown> {
-  /** Row path keys of all descendant rows */
-  rowPathKeys: RowPathKey[];
-  rows: TRow[];
-}
-
-interface UseGridGroupsParams<TRow> {
-  /** Pre-grouped data structure containing all rows. */
-  groups: DataGridGroup<TRow>[];
-  /** Returns the unique data identifier for a row. Used to track row identity across updates. */
-  rowIdGetter: (row: TRow) => RowId;
-}
-
-/**
- * Checks if a groups array represents a flat (ungrouped) structure.
- * A flat structure has a single group with columnKey "" (empty string).
- */
-function isFlatGroups<TRow>(groups: DataGridGroup<TRow>[]): boolean {
-  return groups.length === 1 && groups[0].columnKey === "";
-}
-
-/**
- * Hook that manages grid grouping logic.
- * Accepts pre-grouped data from parent and builds mappings for efficient rendering.
- */
-export function useGridGroups<TRow>(params: UseGridGroupsParams<TRow>) {
-  const { groups, rowIdGetter } = params;
-
-  // Track previous values for identity preservation
-  const prevRowsByKeyRef = useRef<Map<string, TRow>>(new Map());
-  const prevRowPathKeysRef = useRef<Set<RowPathKey>>(new Set());
-  const prevGridGroupsRef = useRef<GridGroup[]>([]);
-  const prevRowDataMapRef = useRef<Map<RowPathKey, TRow>>(new Map());
-  const prevGroupDataMapRef = useRef<Map<GroupPathKey, GroupData<TRow>>>(new Map());
-  const prevDescendantCacheRef = useRef<Map<GroupPathKey, DescendantData<TRow>>>(new Map());
-
-  // Convert pre-grouped structure to GridGroup format
-  const gridGroups: GridGroup[] = useMemo(() => {
-    let newGridGroups: GridGroup[];
-
-    if (isFlatGroups(groups)) {
-      // Flat structure - single row_group
-      newGridGroups = [
-        {
-          type: "row_group" as const,
-          rowCount: groups[0].rows?.length ?? 0,
-        },
-      ];
-    } else {
-      // Convert grouped structure to GridGroup format
-      const convertGroups = (gs: DataGridGroup<TRow>[]): GridGroup[] => {
-        return gs.map((group) => {
-          if (group.children && group.children.length > 0) {
-            return {
-              type: "group" as const,
-              children: convertGroups(group.children),
-            };
-          } else {
-            return {
-              type: "row_group" as const,
-              rowCount: group.rows?.length ?? 0,
-            };
-          }
-        });
-      };
-      newGridGroups = convertGroups(groups);
-    }
-
-    // Preserve identity if structure unchanged
-    const prevGridGroups = prevGridGroupsRef.current;
-    if (isEqual(prevGridGroups, newGridGroups)) {
-      return prevGridGroups;
-    }
-    prevGridGroupsRef.current = newGridGroups;
-    return newGridGroups;
-  }, [groups]);
-
-  // Build all data structures in single traversal
-  const { groupDataMap, rowDataMap, allRowPathKeys, descendantCache } = useMemo(() => {
-    const groupMap = new Map<GroupPathKey, GroupData<TRow>>();
-    const rowMap = new Map<RowPathKey, TRow>();
-    const rowPathKeySet = new Set<RowPathKey>();
-    const descendantMap = new Map<GroupPathKey, DescendantData<TRow>>();
-    const prevRowsByKey = prevRowsByKeyRef.current;
-    const newRowsByKey = new Map<string, TRow>();
-
-    // Helper to get row with preserved identity if unchanged
-    const getStableRow = (row: TRow): TRow => {
-      const dataKey = rowIdGetter(row);
-      const prevRow = prevRowsByKey.get(dataKey);
-      const stableRow = prevRow && isEqual(prevRow, row) ? prevRow : row;
-      newRowsByKey.set(dataKey, stableRow);
-      return stableRow;
-    };
-
-    if (isFlatGroups(groups)) {
-      // Flat structure - process rows directly
-      const rows = groups[0].rows ?? [];
-      rows.forEach((row, index) => {
-        const rowPath: RowPath = [0, index];
-        const rowPathKey = rowPathToKey(rowPath);
-        const stableRow = getStableRow(row);
-        rowMap.set(rowPathKey, stableRow);
-        rowPathKeySet.add(rowPathKey);
-      });
-
-      // Update ref with new rows map
-      prevRowsByKeyRef.current = newRowsByKey;
-
-      // Preserve allRowPathKeys identity if keys unchanged
-      const prevRowPathKeys = prevRowPathKeysRef.current;
-      const keysUnchanged =
-        prevRowPathKeys.size === rowPathKeySet.size &&
-        Array.from(rowPathKeySet).every((key) => prevRowPathKeys.has(key));
-      const stableRowPathKeys = keysUnchanged ? prevRowPathKeys : rowPathKeySet;
-      prevRowPathKeysRef.current = stableRowPathKeys;
-
-      // Preserve rowDataMap identity if all entries unchanged
-      const prevRowDataMap = prevRowDataMapRef.current;
-      const mapUnchanged =
-        prevRowDataMap.size === rowMap.size &&
-        Array.from(rowMap.entries()).every(([key, value]) => prevRowDataMap.get(key) === value);
-      const stableRowDataMap = mapUnchanged ? prevRowDataMap : rowMap;
-      prevRowDataMapRef.current = stableRowDataMap;
-
-      return {
-        groupDataMap: groupMap,
-        rowDataMap: stableRowDataMap,
-        allRowPathKeys: stableRowPathKeys,
-        descendantCache: descendantMap,
-      };
-    }
-
-    // Process grouped structure
-    const traverseGroups = (
-      gs: DataGridGroup<TRow>[],
-      parentPath: GroupPath,
-      level: number,
-    ): { rowPathKeys: RowPathKey[]; rows: TRow[] } => {
-      const aggregatedRowPathKeys: RowPathKey[] = [];
-      const aggregatedRows: TRow[] = [];
-
-      for (let groupIndex = 0; groupIndex < gs.length; groupIndex++) {
-        const group = gs[groupIndex];
-        const currentGroupPath: GroupPath = [...parentPath, groupIndex];
-        const groupPathKey = groupPathToKey(currentGroupPath);
-
-        groupMap.set(groupPathKey, {
-          value: group.value,
-          level: level,
-          columnKey: group.columnKey,
-          rows: group.rows ?? [],
-        });
-
-        let descendantRowPathKeys: RowPathKey[];
-        let descendantRows: TRow[];
-
-        if (group.children && group.children.length > 0) {
-          // Nested groups
-          const childResult = traverseGroups(group.children, currentGroupPath, level + 1);
-          descendantRowPathKeys = childResult.rowPathKeys;
-          descendantRows = childResult.rows;
-        } else {
-          // Leaf group with rows
-          descendantRowPathKeys = [];
-          descendantRows = [];
-          const groupRows = group.rows ?? [];
-          groupRows.forEach((row, rowIndex) => {
-            const rowPath: RowPath = [...currentGroupPath, rowIndex];
-            const rowPathKey = rowPathToKey(rowPath);
-            const stableRow = getStableRow(row);
-            rowMap.set(rowPathKey, stableRow);
-            rowPathKeySet.add(rowPathKey);
-            descendantRowPathKeys.push(rowPathKey);
-            descendantRows.push(stableRow);
-          });
-        }
-
-        descendantMap.set(groupPathKey, {
-          rowPathKeys: descendantRowPathKeys,
-          rows: descendantRows,
-        });
-
-        aggregatedRowPathKeys.push(...descendantRowPathKeys);
-        aggregatedRows.push(...descendantRows);
-      }
-
-      return { rowPathKeys: aggregatedRowPathKeys, rows: aggregatedRows };
-    };
-
-    traverseGroups(groups, [], 0);
-
-    // Update ref with new rows map
-    prevRowsByKeyRef.current = newRowsByKey;
-
-    // Preserve allRowPathKeys identity if keys unchanged
-    const prevRowPathKeys = prevRowPathKeysRef.current;
-    const keysUnchanged =
-      prevRowPathKeys.size === rowPathKeySet.size &&
-      Array.from(rowPathKeySet).every((key) => prevRowPathKeys.has(key));
-    const stableRowPathKeys = keysUnchanged ? prevRowPathKeys : rowPathKeySet;
-    prevRowPathKeysRef.current = stableRowPathKeys;
-
-    // Preserve rowDataMap identity if all entries unchanged
-    const prevRowDataMap = prevRowDataMapRef.current;
-    const mapUnchanged =
-      prevRowDataMap.size === rowMap.size &&
-      Array.from(rowMap.entries()).every(([key, value]) => prevRowDataMap.get(key) === value);
-    const stableRowDataMap = mapUnchanged ? prevRowDataMap : rowMap;
-    prevRowDataMapRef.current = stableRowDataMap;
-
-    // Preserve groupDataMap identity if all entries unchanged
-    const prevGroupDataMap = prevGroupDataMapRef.current;
-    const groupMapUnchanged =
-      prevGroupDataMap.size === groupMap.size &&
-      Array.from(groupMap.entries()).every(([key, value]) => {
-        const prevValue = prevGroupDataMap.get(key);
-        if (!prevValue) return false;
-        return (
-          prevValue.value === value.value &&
-          prevValue.level === value.level &&
-          prevValue.columnKey === value.columnKey &&
-          prevValue.rows.length === value.rows.length &&
-          prevValue.rows.every((r, i) => r === value.rows[i])
-        );
-      });
-    const stableGroupDataMap = groupMapUnchanged ? prevGroupDataMap : groupMap;
-    prevGroupDataMapRef.current = stableGroupDataMap;
-
-    // Preserve descendantCache identity if all entries unchanged
-    const prevDescendantCache = prevDescendantCacheRef.current;
-    const descendantCacheUnchanged =
-      prevDescendantCache.size === descendantMap.size &&
-      Array.from(descendantMap.entries()).every(([key, value]) => {
-        const prevValue = prevDescendantCache.get(key);
-        if (!prevValue) return false;
-        return (
-          prevValue.rowPathKeys.length === value.rowPathKeys.length &&
-          prevValue.rowPathKeys.every((k, i) => k === value.rowPathKeys[i]) &&
-          prevValue.rows.length === value.rows.length &&
-          prevValue.rows.every((r, i) => r === value.rows[i])
-        );
-      });
-    const stableDescendantCache = descendantCacheUnchanged ? prevDescendantCache : descendantMap;
-    prevDescendantCacheRef.current = stableDescendantCache;
-
-    return {
-      groupDataMap: stableGroupDataMap,
-      rowDataMap: stableRowDataMap,
-      allRowPathKeys: stableRowPathKeys,
-      descendantCache: stableDescendantCache,
-    };
-  }, [groups, rowIdGetter]);
-
-  return {
-    gridGroups,
-    groupDataMap,
-    rowDataMap,
-    allRowPathKeys,
-    descendantCache,
-  };
-}

package/src/grid/use_scroll_to_cell.ts

@@ -1,135 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { isEmpty, max } from "./helpers";
-import {
-  Column,
-  DataRow,
-  GridColumn,
-  GridDataRow,
-  GridRow,
-  RowPathKey,
-  rowPathToKey,
-} from "./layout";
-
-export interface ContentOffset {
-  x: number;
-  y: number;
-}
-
-export interface DataRowCell extends DataRow, Column {}
-
-interface UseScrollToCellOffsetProps {
-  scrollViewHeight: number;
-  scrollViewWidth: number;
-  scrollX: number | React.RefObject<number>;
-  scrollY: number | React.RefObject<number>;
-  frozenColumnCount: number;
-  columns: GridColumn[];
-  rows: GridRow[];
-  padding?: number;
-}
-
-export function useScrollToCellOffset(
-  props: UseScrollToCellOffsetProps,
-): (cell: Partial<DataRowCell>) => Partial<ContentOffset> {
-  const {
-    columns,
-    rows,
-    scrollViewHeight,
-    scrollViewWidth,
-    frozenColumnCount,
-    scrollX,
-    scrollY,
-    padding = 40,
-  } = props;
-
-  const dataRowsCache = useMemo(() => {
-    const cache = new Map<string, GridDataRow>();
-
-    if (isEmpty(rows)) {
-      return cache;
-    }
-
-    for (let i = 0; i < rows.length; i++) {
-      const row = rows[i];
-
-      if (row.type === "row") {
-        cache.set(rowPathToKey(row.rowPath), row);
-      }
-    }
-
-    return cache;
-  }, [rows]);
-
-  const getDataRow = useCallback(
-    (rowPathKey?: RowPathKey): GridDataRow | undefined => {
-      if (rowPathKey !== undefined) {
-        return dataRowsCache.get(rowPathKey);
-      }
-    },
-    [dataRowsCache],
-  );
-
-  const getScrollToRowOffset = useCallback(
-    (row?: GridDataRow) => {
-      if (row === undefined) {
-        return;
-      }
-
-      const currentScrollY = typeof scrollY === "number" ? scrollY : scrollY.current;
-      const { y, height } = row;
-
-      const above = currentScrollY >= y;
-      const below = y + height >= currentScrollY + scrollViewHeight;
-
-      if (above) {
-        return max(y - padding, 0);
-      } else if (below) {
-        return y + height - scrollViewHeight + padding;
-      }
-    },
-    [scrollY, scrollViewHeight, padding],
-  );
-
-  const getScrollToColumnOffset = useCallback(
-    (column?: number) => {
-      if (column === undefined) {
-        return;
-      }
-
-      if (column <= frozenColumnCount) {
-        return 0;
-      }
-
-      const columnIndex = column - 1 - frozenColumnCount;
-      if (columnIndex < 0 || columnIndex >= columns.length) {
-        return;
-      }
-
-      const currentScrollX = typeof scrollX === "number" ? scrollX : scrollX.current;
-      const { x, width } = columns[columnIndex];
-
-      const left = currentScrollX >= x;
-      const right = x + width >= currentScrollX + scrollViewWidth;
-
-      if (left) {
-        return max(x - padding, 0);
-      } else if (right) {
-        return x + width - scrollViewWidth + padding;
-      }
-    },
-    [scrollX, columns, frozenColumnCount, scrollViewWidth, padding],
-  );
-
-  return useCallback(
-    (cell: Partial<DataRowCell>): Partial<ContentOffset> => {
-      const { rowPath, column } = cell;
-      const rowPathKey = rowPath ? rowPathToKey(rowPath) : undefined;
-
-      return {
-        y: getScrollToRowOffset(getDataRow(rowPathKey)),
-        x: getScrollToColumnOffset(column),
-      };
-    },
-    [getScrollToRowOffset, getScrollToColumnOffset, getDataRow],
-  );
-}