@lotics/ui 2.6.1 → 3.1.0

package/src/grid/recycling.ts

@@ -1,172 +0,0 @@
-import React, { useMemo, useRef } from "react";
-import { differenceBy, intersectBy, isEmpty, max, maxBy, min } from "./helpers";
-import {
-  GridColumn,
-  GridDataRow,
-  GridGroupHeadingRow,
-  GridGroupSummaryRow,
-  GridRow,
-  GridSpacerRow,
-} from "./layout";
-
-export interface RecycledDataRow extends GridDataRow {
-  key: number;
-}
-
-export interface RecycledGroupHeadingRow extends GridGroupHeadingRow {
-  key: number;
-}
-
-export interface RecycledGroupSummaryRow extends GridGroupSummaryRow {
-  key: number;
-}
-
-export interface RecycledSpacerRow extends GridSpacerRow {
-  key: number;
-}
-
-export type RecycledRow =
-  | RecycledDataRow
-  | RecycledGroupHeadingRow
-  | RecycledGroupSummaryRow
-  | RecycledSpacerRow;
-
-export interface RecycledColumn extends GridColumn {
-  key: number;
-}
-
-export interface UseRowsRecyclerProps {
-  rows: GridRow[];
-  startIndex: number;
-  endIndex: number;
-}
-
-export interface UseColumnsRecyclerProps {
-  columns: GridColumn[];
-  startIndex: number;
-  endIndex: number;
-}
-
-interface RecycleItemsParams<T, K extends T> {
-  items: T[];
-  prevItems: K[];
-  toRecycledItem: (item: T, key: number) => K;
-  /** Value to recycle by */
-  getValue: (item: T | K) => number;
-  getKey: (item: K) => number;
-}
-
-interface RecycleRowsParams {
-  rows: GridRow[];
-  prevRows: RecycledRow[];
-  startIndex: number;
-  endIndex: number;
-}
-
-interface RecycleColumnsParams {
-  columns: GridColumn[];
-  prevColumns: RecycledColumn[];
-  startIndex: number;
-  endIndex: number;
-}
-
-export function recycleItems<T, K extends T>(params: RecycleItemsParams<T, K>): K[] {
-  const { items, prevItems, getValue, toRecycledItem, getKey } = params;
-
-  const reusedItems = intersectBy(prevItems, items, getValue, true);
-  const recycledItems = differenceBy(prevItems, items, getValue);
-  const newItems = differenceBy(items, prevItems, getValue);
-
-  if (isEmpty(prevItems)) {
-    return items.map((item, key) => toRecycledItem(item, key));
-  }
-
-  const recycledKeys = recycledItems.map((c) => getKey(c));
-  if (recycledKeys.length < newItems.length) {
-    let maxKey = maxBy(prevItems, getKey) as number;
-
-    while (recycledKeys.length !== newItems.length) {
-      recycledKeys.push(++maxKey);
-    }
-  }
-
-  return reusedItems
-    .concat(newItems.map((item, i) => toRecycledItem(item, recycledKeys[i])))
-    .sort((a, b) => getValue(a) - getValue(b));
-}
-
-export function useRowsRecycler(props: UseRowsRecyclerProps): RecycledRow[] {
-  const { rows, startIndex, endIndex } = props;
-
-  const prevRecycledRowsRef = useRef<RecycledRow[]>([]);
-
-  const recycledRows = useMemo(
-    (): RecycledRow[] =>
-      recycleRows({
-        rows,
-        prevRows: prevRecycledRowsRef.current,
-        startIndex,
-        endIndex,
-      }),
-    [rows, startIndex, endIndex],
-  );
-
-  prevRecycledRowsRef.current = recycledRows;
-
-  return recycledRows;
-}
-
-export function useColumnsRecycler(props: UseColumnsRecyclerProps): RecycledColumn[] {
-  const { columns, startIndex, endIndex } = props;
-
-  const prevRecycledColumnsRef = useRef<RecycledColumn[]>([]);
-
-  const recycledColumns = useMemo(
-    (): RecycledColumn[] =>
-      recycleColumns({
-        columns,
-        prevColumns: prevRecycledColumnsRef.current,
-        startIndex,
-        endIndex,
-      }),
-    [columns, startIndex, endIndex],
-  );
-
-  prevRecycledColumnsRef.current = recycledColumns;
-
-  return recycledColumns;
-}
-
-function recycleRows(params: RecycleRowsParams) {
-  const { rows, prevRows, startIndex, endIndex } = params;
-
-  const nextRows = rows.slice(startIndex, endIndex + 1);
-
-  return recycleItems({
-    items: nextRows,
-    prevItems: prevRows,
-    getValue: (row) => row.y,
-    getKey: (row) => row.key,
-    toRecycledItem: (row, key) => ({
-      ...row,
-      key,
-    }),
-  });
-}
-
-function recycleColumns(params: RecycleColumnsParams) {
-  const { columns, prevColumns, startIndex, endIndex } = params;
-
-  const nextColumns = columns.slice(startIndex, endIndex + 1);
-
-  return recycleItems({
-    items: nextColumns,
-    prevItems: prevColumns,
-    getValue: (column) => column.column,
-    getKey: (column) => column.key,
-    toRecycledItem: (column, key) => ({
-      ...column,
-      key,
-    }),
-  });
-}

package/src/grid/row_cell.module.css

@@ -1,105 +0,0 @@
-.row_cell {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  outline: none;
-  border-bottom: 1px solid var(--color-border);
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-/* Active cell (most recently selected) */
-.row_cell_active {
-  outline: 2px solid var(--color-blue-500);
-  outline-offset: -2px;
-  z-index: 2;
-}
-
-.row_cell_frozen {
-  background-color: var(--color-background);
-}
-
-.row_cell_in_selected_row {
-  background-color: var(--color-blue-50);
-}
-
-/* Selected cell styling */
-.row_cell_selected {
-  background-color: var(--color-blue-50);
-}
-
-/* Selected but not active */
-.row_cell_selected:not(.row_cell_active) {
-  outline: 1px solid var(--color-zinc-300);
-}
-
-.row_cell_fill_handle {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  width: 10px;
-  height: 10px;
-  background-color: var(--color-blue-500);
-  border: 1px solid var(--color-white);
-  cursor: crosshair;
-  z-index: 10;
-}
-
-.row_cell_fill_handle:hover {
-  background-color: var(--color-blue-600);
-  transform: scale(1.2);
-}
-
-/* Fill preview styling */
-.row_cell_fill_preview {
-  background-color: var(--color-blue-100);
-  outline: 1px solid var(--color-blue-400);
-}
-
-/* Value change animation */
-.row_cell_value_changed {
-  animation: valueChangeFlash 0.6s ease-out;
-}
-
-@keyframes valueChangeFlash {
-  0% {
-    box-shadow: inset 0 0 0 1000px var(--color-blue-200);
-  }
-  100% {
-    box-shadow: inset 0 0 0 1000px transparent;
-  }
-}
-
-/* Search highlight animation alternates class names so repeated reveals on
-   the same row restart the animation. */
-.row_cell_search_highlight_even {
-  animation: searchHighlightEven 1.5s ease-out;
-}
-
-.row_cell_search_highlight_odd {
-  animation: searchHighlightOdd 1.5s ease-out;
-}
-
-@keyframes searchHighlightEven {
-  0% {
-    box-shadow: inset 0 0 0 1000px var(--color-amber-100);
-  }
-  70% {
-    box-shadow: inset 0 0 0 1000px var(--color-amber-100);
-  }
-  100% {
-    box-shadow: inset 0 0 0 1000px transparent;
-  }
-}
-
-@keyframes searchHighlightOdd {
-  0% {
-    box-shadow: inset 0 0 0 1000px var(--color-amber-100);
-  }
-  70% {
-    box-shadow: inset 0 0 0 1000px var(--color-amber-100);
-  }
-  100% {
-    box-shadow: inset 0 0 0 1000px transparent;
-  }
-}

package/src/grid/row_cell.tsx

@@ -1,313 +0,0 @@
-import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { DataGridColumn, RowPathKey } from "./data_grid";
-import { RowId, useCellAnimation } from "./data_grid_context";
-import { useSearchHighlight } from "./search_highlight";
-
-import styles from "./row_cell.module.css";
-
-export type NavigationDirection = "up" | "down" | "left" | "right";
-
-interface RowCellProps<TRow, TValue> {
-  rowKey: RowPathKey;
-  rowId: RowId;
-  row: TRow;
-  value: TValue;
-  column: DataGridColumn<TRow>;
-  columnIdx: number;
-  active: boolean;
-  selected: boolean;
-  frozen: boolean;
-  inSelectedRow: boolean;
-  editing: boolean;
-  /** Row index for fill operations */
-  rowIndex: number;
-  /** Whether this cell is in the fill range (target cells during drag) */
-  inFillRange: boolean;
-  /** Background color for the row (from conditional coloring) */
-  rowBackgroundColor?: string;
-  onStartEditing: (rowKey: RowPathKey, columnIdx: number) => void;
-  onSelectStart: (rowKey: RowPathKey, columnIdx: number) => void;
-  onSelectUpdate: (rowKey: RowPathKey, columnIdx: number) => void;
-  onCommit: (nextValue: unknown, columnKey: string, rowKey: RowPathKey) => void;
-  onCancelEditing: () => void;
-  onNavigate: (direction: NavigationDirection, extend: boolean) => void;
-  onFillStart: (sourceRowIndex: number, column: number) => void;
-  onRequestLockedFieldChange?: (row: TRow, columnKey: string) => void;
-}
-
-export const RowCell = memo(function RowCell<TRow, TValue>(props: RowCellProps<TRow, TValue>) {
-  const {
-    rowKey,
-    rowId,
-    row,
-    value,
-    column,
-    columnIdx,
-    active,
-    selected,
-    frozen,
-    inSelectedRow,
-    editing,
-    rowIndex,
-    inFillRange,
-    rowBackgroundColor,
-    onStartEditing,
-    onSelectStart,
-    onSelectUpdate,
-    onCommit,
-    onCancelEditing,
-    onNavigate,
-    onFillStart,
-    onRequestLockedFieldChange,
-  } = props;
-
-  // Cell animation hook resolved via context. Records page provides one
-  // bound to useRealtimeChangeAnimation(tableId, …); iframe apps fall through
-  // to the noop default.
-  const isAnimating = useCellAnimation(rowId, column.key);
-  const searchHighlightRevealId = useSearchHighlight(rowId);
-
-  const editable = column.isCellEditable?.(row, column.key) ?? true;
-
-  const handleMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      // Only handle left mouse button
-      if (event.button !== 0) return;
-      if (event.shiftKey) {
-        // Shift+click extends selection
-        onSelectUpdate(rowKey, columnIdx);
-      } else {
-        // Start new selection
-        onSelectStart(rowKey, columnIdx);
-      }
-    },
-    [onSelectStart, onSelectUpdate, rowKey, columnIdx],
-  );
-
-  const handleMouseEnter = useCallback(
-    (event: React.MouseEvent) => {
-      // Extend selection if mouse button is pressed (dragging)
-      if (event.buttons === 1) {
-        onSelectUpdate(rowKey, columnIdx);
-      }
-    },
-    [onSelectUpdate, rowKey, columnIdx],
-  );
-
-  // Fill handle: start drag (just triggers callback, global listeners managed by DataGrid)
-  const handleFillHandleMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-      onFillStart(rowIndex, columnIdx);
-    },
-    [rowIndex, columnIdx, onFillStart],
-  );
-
-  const handleDoubleClick = useCallback(() => {
-    if (editable && column.renderEditCell) {
-      onStartEditing(rowKey, columnIdx);
-    } else if (!editable && onRequestLockedFieldChange) {
-      onRequestLockedFieldChange(row, column.key);
-    }
-  }, [
-    editable,
-    column.renderEditCell,
-    column.key,
-    onStartEditing,
-    onRequestLockedFieldChange,
-    row,
-    rowKey,
-    columnIdx,
-    rowId,
-  ]);
-
-  // Stable callback for cell value changes (avoids inline closure in renderCell)
-  const handleValueChange = useCallback(
-    (nextValue: TValue) => {
-      onCommit(nextValue, column.key, rowKey);
-    },
-    [onCommit, column.key, rowKey],
-  );
-
-  // Compute CSS class based on active and selected states
-  let className = styles.row_cell;
-  if (active) {
-    className += ` ${styles.row_cell_active}`;
-  }
-  if (selected) {
-    className += ` ${styles.row_cell_selected}`;
-  }
-  if (frozen) {
-    className += ` ${styles.row_cell_frozen}`;
-  }
-  if (inSelectedRow) {
-    className += ` ${styles.row_cell_in_selected_row}`;
-  }
-  if (inFillRange) {
-    className += ` ${styles.row_cell_fill_preview}`;
-  }
-  if (isAnimating) {
-    className += ` ${styles.row_cell_value_changed}`;
-  }
-  if (searchHighlightRevealId !== null) {
-    className +=
-      searchHighlightRevealId % 2 === 0
-        ? ` ${styles.row_cell_search_highlight_even}`
-        : ` ${styles.row_cell_search_highlight_odd}`;
-  }
-
-  // Show fill handle on active cell when editable and has renderEditCell
-  const showFillHandle = active && !editing && editable;
-
-  // Render editing cell as a separate component so it mounts fresh,
-  // initializing draft state correctly without flash
-  if (editing && editable && column.renderEditCell) {
-    return (
-      <RowCellEditor
-        className={className}
-        rowKey={rowKey}
-        rowId={rowId}
-        row={row}
-        value={value}
-        column={column}
-        onCommit={onCommit}
-        onCancelEditing={onCancelEditing}
-        onNavigate={onNavigate}
-      />
-    );
-  }
-
-  // Apply row background color when not selected
-  const cellStyle =
-    rowBackgroundColor && !selected && !inSelectedRow
-      ? { backgroundColor: rowBackgroundColor }
-      : undefined;
-
-  return (
-    <div
-      data-row-index={rowIndex}
-      data-row-key={rowKey}
-      data-row-id={rowId}
-      data-column={columnIdx}
-      onMouseDown={handleMouseDown}
-      onMouseEnter={handleMouseEnter}
-      onDoubleClick={handleDoubleClick}
-      className={className}
-      style={cellStyle}
-    >
-      {column.renderCell?.({
-        rowKey,
-        rowId,
-        row,
-        columnKey: column.key,
-        value,
-        active,
-        editable,
-        onValueChange: handleValueChange,
-      })}
-      {showFillHandle && (
-        <div className={styles.row_cell_fill_handle} onMouseDown={handleFillHandleMouseDown} />
-      )}
-    </div>
-  );
-}) as <TRow, TValue>(props: RowCellProps<TRow, TValue>) => React.ReactNode;
-
-/**
- * Separate component for editing mode.
- * Mounts fresh each time editing starts, so useState initializes correctly.
- */
-interface RowCellEditorProps<TRow, TValue> {
-  className: string;
-  rowKey: RowPathKey;
-  rowId: RowId;
-  row: TRow;
-  value: TValue;
-  column: DataGridColumn<TRow>;
-  onCommit: (nextValue: unknown, columnKey: string, rowKey: RowPathKey) => void;
-  onCancelEditing: () => void;
-  onNavigate: (direction: NavigationDirection, extend: boolean) => void;
-}
-
-function RowCellEditor<TRow, TValue>(props: RowCellEditorProps<TRow, TValue>) {
-  const { className, rowKey, row, rowId, value, column, onCommit, onCancelEditing, onNavigate } =
-    props;
-
-  // State initializes fresh each time this component mounts (editing starts)
-  const [draftValue, setDraftValue] = useState<TValue>(value);
-  const draftValueRef = useRef<TValue>(value);
-  const cancelledRef = useRef(false);
-
-  // Refs for stable access in unmount cleanup (no stale closures)
-  const onCommitRef = useRef(onCommit);
-  onCommitRef.current = onCommit;
-  const rowKeyRef = useRef(rowKey);
-  rowKeyRef.current = rowKey;
-  const columnKeyRef = useRef(column.key);
-  columnKeyRef.current = column.key;
-
-  // Single commit path: flush draft value on unmount unless cancelled.
-  // All exit paths (Enter, Tab, blur, click-outside) unmount this component;
-  // the cleanup commits the final draft value exactly once.
-  // Uses rowKeyRef to identify the correct row regardless of selection changes.
-  useEffect(() => {
-    return () => {
-      if (!cancelledRef.current) {
-        onCommitRef.current(draftValueRef.current, columnKeyRef.current, rowKeyRef.current);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleValueChange = useCallback((nextValue: TValue) => {
-    setDraftValue(nextValue);
-    draftValueRef.current = nextValue;
-  }, []);
-
-  const handleCancel = useCallback(() => {
-    cancelledRef.current = true;
-    onCancelEditing();
-  }, [onCancelEditing]);
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        event.stopPropagation();
-        handleCancel();
-        return;
-      }
-
-      if (event.key === "Enter" && !event.shiftKey) {
-        event.preventDefault();
-        event.stopPropagation();
-        onCancelEditing();
-        return;
-      }
-
-      if (event.key === "Tab") {
-        event.preventDefault();
-        event.stopPropagation();
-        onCancelEditing();
-        onNavigate(event.shiftKey ? "left" : "right", false);
-        return;
-      }
-    },
-    [handleCancel, onCancelEditing, onNavigate],
-  );
-
-  return (
-    <div className={className} onKeyDown={handleKeyDown}>
-      {column.renderEditCell!({
-        rowKey,
-        rowId,
-        row,
-        columnKey: column.key,
-        value: draftValue,
-        onValueChange: handleValueChange,
-        onClose: onCancelEditing,
-        onCancel: handleCancel,
-      })}
-    </div>
-  );
-}

package/src/grid/search_highlight.ts

@@ -1,71 +0,0 @@
-import { useSyncExternalStore } from "react";
-import { dispatchSafely } from "./dispatch_safely";
-
-/**
- * Lightweight external store for search-highlight state.
- * Only the row cells matching the highlighted row re-render
- * (useSyncExternalStore compares the boolean selector with Object.is).
- *
- * Supports ownership: callers pass an `owner` token when setting/clearing.
- * A clear with a mismatched owner is a no-op, preventing stale unmount
- * cleanup from wiping a newer highlight.
- */
-
-let highlightedId: string | null = null;
-let highlightedRevealId: number | null = null;
-let currentOwner: string | null = null;
-const listeners = new Set<() => void>();
-
-function notify() {
-  dispatchSafely(listeners, (listener) => listener());
-}
-
-interface SearchHighlightUpdate {
-  owner?: string;
-  revealId?: number;
-}
-
-export function setSearchHighlight(id: string | null, update?: SearchHighlightUpdate) {
-  if (id === null) {
-    // Clear only if the caller owns the current highlight (or no owner specified)
-    if (update?.owner && currentOwner !== update.owner) return;
-    highlightedId = null;
-    highlightedRevealId = null;
-    currentOwner = null;
-  } else {
-    highlightedId = id;
-    highlightedRevealId = update?.revealId ?? null;
-    currentOwner = update?.owner ?? null;
-  }
-  notify();
-}
-
-function subscribe(listener: () => void) {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-}
-
-/**
- * Returns the current reveal token when this row is highlighted, or null otherwise.
- * This lets the same row re-render on repeated reveals so the animation can restart.
- */
-export function useSearchHighlight(rowId: string): number | null {
-  return useSyncExternalStore(
-    subscribe,
-    () => (highlightedId === rowId ? highlightedRevealId : null),
-  );
-}
-
-/** Exposed for tests only. */
-export function _getHighlightState() {
-  return { highlightedId, highlightedRevealId, currentOwner };
-}
-
-/** Exposed for tests only — resets to clean state between tests. */
-export function _resetHighlightState() {
-  highlightedId = null;
-  highlightedRevealId = null;
-  currentOwner = null;
-}

package/src/grid/select_cell.tsx

@@ -1,58 +0,0 @@
-import { Checkbox } from "@lotics/ui/checkbox";
-import { Text } from "@lotics/ui/text";
-import { useRowSelection } from "./data_grid_context";
-import type { RowPathKey } from "@lotics/ui/grid/layout";
-
-import { memo, useCallback, useMemo } from "react";
-import { Pressable, View } from "react-native";
-
-/** Props for checkbox cell - needs rowKey for row selection */
-export interface SelectCellProps {
-  rowKey: RowPathKey;
-}
-
-export const SelectCell = memo(function SelectCell(props: SelectCellProps) {
-  const { rowKey } = props;
-  const { isRowSelected, onRowSelectionChange } = useRowSelection();
-
-  const checked = useMemo(() => isRowSelected(rowKey), [isRowSelected, rowKey]);
-
-  const handlePress = useCallback(() => {
-    onRowSelectionChange({
-      rowKey: rowKey,
-      checked: !checked,
-      isShiftClick: false,
-    });
-  }, [onRowSelectionChange, rowKey, checked]);
-
-  // Extract the row number from the key (last segment after the final comma)
-  const rowNumber = useMemo(() => {
-    const parts = rowKey.split(",");
-    return Number(parts[parts.length - 1]) + 1;
-  }, [rowKey]);
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={{
-        paddingHorizontal: 6,
-        alignItems: "center",
-        flexDirection: "row",
-        height: "100%",
-        cursor: "pointer",
-      }}
-    >
-      {({ hovered }) =>
-        hovered || checked ? (
-          <Checkbox checked={checked} />
-        ) : (
-          <View style={{ width: 24, alignItems: "center" }}>
-            <Text color="zinc-500" size="xs" userSelect="none">
-              {rowNumber}
-            </Text>
-          </View>
-        )
-      }
-    </Pressable>
-  );
-});