@lotics/ui 2.6.1 → 3.0.0

package/src/grid/data_grid_columns.test.ts

@@ -1,72 +0,0 @@
-import { deriveHasSelectColumn, buildGridColumns } from "./data_grid_columns";
-import type { DataGridColumn } from "./data_grid";
-import type { RowPathKey } from "./layout";
-
-interface Row {
-  name: string;
-}
-
-const userColumns: DataGridColumn<Row>[] = [
-  { key: "name", name: "Name" },
-  { key: "status", name: "Status" },
-];
-
-const selectColumn: DataGridColumn<Row> = { key: "select", name: "" };
-
-const noop = (_rows: Set<RowPathKey>): void => {};
-
-// ─── deriveHasSelectColumn ────────────────────────────────────────────────
-// The select column exists only when the consumer participates in row
-// selection — by supplying `selectedRows`, `onSelectedRowsChange`, or both.
-
-test("deriveHasSelectColumn - false when selection is unwired", () => {
-  expect(deriveHasSelectColumn(undefined, undefined)).toBe(false);
-});
-
-test("deriveHasSelectColumn - true when onSelectedRowsChange is provided", () => {
-  expect(deriveHasSelectColumn(undefined, noop)).toBe(true);
-});
-
-test("deriveHasSelectColumn - true when only selectedRows is provided (read-only display)", () => {
-  expect(deriveHasSelectColumn(new Set<RowPathKey>(), undefined)).toBe(true);
-});
-
-test("deriveHasSelectColumn - true when both props are provided", () => {
-  expect(deriveHasSelectColumn(new Set<RowPathKey>(["0"]), noop)).toBe(true);
-});
-
-// ─── buildGridColumns ─────────────────────────────────────────────────────
-
-test("buildGridColumns - prepends the select column when selection is wired", () => {
-  const columns = buildGridColumns(true, selectColumn, userColumns);
-
-  expect(columns).toHaveLength(3);
-  expect(columns[0].key).toBe("select");
-  expect(columns[1].key).toBe("name");
-});
-
-test("buildGridColumns - omits the select column when selection is unwired", () => {
-  const columns = buildGridColumns(false, selectColumn, userColumns);
-
-  expect(columns).toHaveLength(2);
-  // The first user column sits at index 0 — no inert checkbox column ahead of it.
-  expect(columns[0].key).toBe("name");
-  expect(columns.some((c) => c.key === "select")).toBe(false);
-});
-
-test("buildGridColumns - read-only selection (selectedRows only) still renders the select column", () => {
-  const hasSelectColumn = deriveHasSelectColumn(new Set<RowPathKey>(["0"]), undefined);
-  const columns = buildGridColumns(hasSelectColumn, selectColumn, userColumns);
-
-  expect(columns[0].key).toBe("select");
-});
-
-test("buildGridColumns - does not mutate the input userColumns array", () => {
-  const input: DataGridColumn<Row>[] = [{ key: "name", name: "Name" }];
-  const before = [...input];
-
-  buildGridColumns(true, selectColumn, input);
-  buildGridColumns(false, selectColumn, input);
-
-  expect(input).toEqual(before);
-});

package/src/grid/data_grid_columns.ts

@@ -1,30 +0,0 @@
-import type { RowPathKey } from "@lotics/ui/grid/layout";
-import type { DataGridColumn } from "./data_grid";
-
-/**
- * Whether the grid renders a select (checkbox) column. Row selection is fully
- * controlled: the column is interactive only when the consumer supplies
- * `selectedRows` (to display selection) or `onSelectedRowsChange` (to mutate
- * it). With neither, the column would be inert — uncheckable and unobservable —
- * so it must not exist or occupy layout space.
- */
-export function deriveHasSelectColumn(
-  selectedRows: Set<RowPathKey> | undefined,
-  onSelectedRowsChange: ((selectedRows: Set<RowPathKey>) => void) | undefined,
-): boolean {
-  return selectedRows !== undefined || onSelectedRowsChange !== undefined;
-}
-
-/**
- * Assemble the grid's column list. The select column is prepended only when
- * `hasSelectColumn` is true (see `deriveHasSelectColumn`).
- *
- * Pure: returns a new array, never mutates `userColumns`.
- */
-export function buildGridColumns<TRow>(
-  hasSelectColumn: boolean,
-  selectColumn: DataGridColumn<TRow>,
-  userColumns: DataGridColumn<TRow>[],
-): DataGridColumn<TRow>[] {
-  return hasSelectColumn ? [selectColumn, ...userColumns] : [...userColumns];
-}

package/src/grid/data_grid_context.ts

@@ -1,119 +0,0 @@
-import { createContext, useCallback, useContext, useMemo } from "react";
-import type { RowPathKey } from "@lotics/ui/grid/layout";
-
-export type RowId = string;
-
-// ─── Cell animation hook — optional, default returns false ────────────────
-//
-// Records page wires this to useRealtimeChangeAnimation(tableId, …) so remote
-// updates flash matching cells. Iframe apps leave it unset; row_cell always
-// calls the contextualized hook, so React's hook-order stays stable.
-
-export type UseCellAnimationFn = (rowId: RowId, columnKey: string) => boolean;
-
-/** Default no-op when consumer doesn't supply useCellAnimation. Module-level
- *  so its identity is stable across renders. Exported so DataGrid can wire it
- *  into its Provider without redeclaring. */
-export const noopUseCellAnimation: UseCellAnimationFn = () => false;
-
-export const CellAnimationContext = createContext<UseCellAnimationFn>(noopUseCellAnimation);
-
-export function useCellAnimation(rowId: RowId, columnKey: string): boolean {
-  const fn = useContext(CellAnimationContext);
-  return fn(rowId, columnKey);
-}
-
-export interface RowSelectionContextValue {
-  selectedRows?: Set<RowPathKey>;
-  onSelectedRowsChange?: (selectedRows: Set<RowPathKey>) => void;
-  allRowPathKeys: Set<RowPathKey>;
-}
-
-export const RowSelectionContext = createContext<RowSelectionContextValue | null>(null);
-
-export function useRowSelection() {
-  const context = useContext(RowSelectionContext);
-  if (!context) {
-    throw new Error("useRowSelection must be used within a DataGrid");
-  }
-
-  const { selectedRows, onSelectedRowsChange } = context;
-
-  const isRowSelected = useCallback(
-    (rowKey: RowPathKey) => {
-      return selectedRows?.has(rowKey) ?? false;
-    },
-    [selectedRows],
-  );
-
-  const onRowSelectionChange = useCallback(
-    (params: { rowKey: RowPathKey; checked: boolean; isShiftClick: boolean }) => {
-      if (!onSelectedRowsChange) {
-        return;
-      }
-
-      const newSelectedRows = new Set(selectedRows ?? []);
-
-      if (params.checked) {
-        newSelectedRows.add(params.rowKey);
-      } else {
-        newSelectedRows.delete(params.rowKey);
-      }
-
-      onSelectedRowsChange(newSelectedRows);
-    },
-    [selectedRows, onSelectedRowsChange],
-  );
-
-  return {
-    isRowSelected,
-    onRowSelectionChange,
-  };
-}
-
-export function useHeaderRowSelection() {
-  const context = useContext(RowSelectionContext);
-  if (!context) {
-    throw new Error("useHeaderRowSelection must be used within a DataGrid");
-  }
-
-  const { selectedRows, onSelectedRowsChange, allRowPathKeys } = context;
-
-  const selectedCount = useMemo(() => {
-    if (!selectedRows || !allRowPathKeys || !allRowPathKeys.size) {
-      return 0;
-    }
-    return Array.from(allRowPathKeys).filter((key) => selectedRows.has(key)).length;
-  }, [selectedRows, allRowPathKeys]);
-
-  const isIndeterminate = useMemo(
-    () => selectedCount > 0 && selectedCount < (allRowPathKeys?.size ?? 0),
-    [selectedCount, allRowPathKeys?.size],
-  );
-
-  const isRowSelected = useMemo(
-    () => selectedCount === (allRowPathKeys?.size ?? 0) && (allRowPathKeys?.size ?? 0) > 0,
-    [selectedCount, allRowPathKeys?.size],
-  );
-
-  const onRowSelectionChange = useCallback(
-    (params: { checked: boolean }) => {
-      if (!onSelectedRowsChange) {
-        return;
-      }
-
-      if (params.checked) {
-        onSelectedRowsChange(new Set(allRowPathKeys));
-      } else {
-        onSelectedRowsChange(new Set());
-      }
-    },
-    [onSelectedRowsChange, allRowPathKeys],
-  );
-
-  return {
-    isIndeterminate,
-    isRowSelected,
-    onRowSelectionChange,
-  };
-}

package/src/grid/dispatch_safely.ts

@@ -1,39 +0,0 @@
-/**
- * Pub-sub dispatcher with hard isolation between subscribers.
- *
- * Contract:
- *   1. Every item in `items` is invoked exactly once per call.
- *   2. A throwing invocation never stops later items from being invoked.
- *   3. A throwing invocation never propagates back to the dispatcher's caller.
- *
- * Subscriber exceptions are re-raised to the host error handler
- * (`globalThis.reportError`, falling back to a fresh task) so they surface
- * via `window.onerror` with full original stack. This is NOT a swallow:
- * the error is fully reported, loudly, with context — same mechanism the
- * HTML spec uses for EventTarget.dispatchEvent to "report the exception"
- * without joining listener failures to the dispatcher's call stack.
- *
- * Vendored from @lotics/ui-internal/dispatch_safely (workspace-private).
- * Kept inline in @lotics/ui/grid so the grid module can be published
- * without a dependency on the internal package.
- */
-export function dispatchSafely<T>(items: Iterable<T>, invoke: (item: T) => void): void {
-  for (const item of items) {
-    try {
-      invoke(item);
-    } catch (error) {
-      reportListenerError(error);
-    }
-  }
-}
-
-function reportListenerError(error: unknown): void {
-  const globalReportError = (globalThis as { reportError?: (error: unknown) => void }).reportError;
-  if (typeof globalReportError === "function") {
-    globalReportError(error);
-    return;
-  }
-  setTimeout(() => {
-    throw error;
-  }, 0);
-}

package/src/grid/engine.module.css

@@ -1,114 +0,0 @@
-.root {
-  position: relative;
-  overflow: scroll;
-  will-change: scroll-position;
-  height: 100%;
-  width: 100%;
-}
-
-.content {
-  position: relative;
-  transform: translateZ(0);
-}
-
-.rows_wrapper {
-  position: absolute;
-  transform: translateZ(0);
-}
-
-.row_wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: row;
-  will-change: transform;
-  content-visibility: auto;
-}
-
-.row {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-}
-
-.frozen_cells {
-  position: sticky;
-  left: 0;
-  z-index: 3;
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-.frozen_cells::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: -6px;
-  width: 6px;
-  height: 100%;
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s ease-out;
-}
-
-/* Show shadow only when grid is scrolled horizontally */
-.root[data-scrolled-x] .frozen_cells::after {
-  opacity: 1;
-}
-
-.scrollable_cells {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.cell {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  contain: layout style paint;
-  box-sizing: border-box;
-}
-
-.header_wrapper {
-  position: sticky;
-  top: 0;
-  z-index: 4;
-  display: flex;
-  flex-direction: row;
-  will-change: transform;
-}
-
-.footer_wrapper {
-  position: sticky;
-  bottom: 0;
-  display: flex;
-  flex-direction: row;
-}
-
-.group_heading_wrapper {
-  position: absolute;
-  top: 0;
-  display: flex;
-  flex-direction: row;
-  will-change: transform;
-  content-visibility: auto;
-}
-
-.group_heading_content {
-  position: sticky;
-  left: 0px;
-}
-
-.spacer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  will-change: transform;
-  content-visibility: auto;
-}