@lotics/ui 1.19.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -96,7 +96,11 @@
     "./accordion": "./src/accordion.tsx",
     "./stepper": "./src/stepper.tsx",
     "./tabs": "./src/tabs.tsx",
-    "./table": "./src/table.tsx",
+    "./table": {
+      "react-native": "./src/table.tsx",
+      "default": "./src/table.web.tsx"
+    },
+    "./table_types": "./src/table_types.ts",
     "./auto_sizer": "./src/auto_sizer.tsx",
     "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",

package/src/table.tsx

@@ -1,68 +1,51 @@
-import { Pressable, ScrollView, View, ViewStyle, StyleSheet } from "react-native";
+import { Fragment, useState } from "react";
+import { Pressable, ScrollView, View, StyleSheet } from "react-native";
 import { Text } from "@lotics/ui/text";
-import { ReactNode } from "react";
+import { Icon } from "@lotics/ui/icon";
 import { colors } from "@lotics/ui/colors";
+import type { Column, TableProps } from "./table_types";
 
-export type SortDir = "asc" | "desc";
-export interface TableSort<TRow extends Record<string, unknown>> {
-  key: keyof TRow;
-  dir: SortDir;
-}
-
-interface TableProps<TRow extends Record<string, unknown>> {
-  columns: Column<TRow>[];
-  rows: (TRow | null | false)[];
-  rowKey?: keyof TRow;
-  rowStyle?: (row: TRow) => ViewStyle | undefined;
-  /** Current sort. Pair with `onSortChange` to render sortable headers. The
-   *  parent owns the actual sorting of `rows` — this only drives the indicator. */
-  sort?: TableSort<TRow> | null;
-  /** Pressing a `sortable` header calls this with the column key (the parent
-   *  toggles asc/desc and re-sorts `rows`). */
-  onSortChange?: (key: keyof TRow) => void;
-  /** Pressing a row calls this — e.g. to open a detail drilldown. The row
-   *  becomes a Pressable with a hover/press surface. Interactive cells nested
-   *  inside (Pressables/buttons) capture their own press and don't bubble. */
-  onRowPress?: (row: TRow) => void;
-}
+export type { SortDir, TableSort, Column, TableProps } from "./table_types";
 
-interface Column<TRow extends Record<string, unknown>> {
-  key: keyof TRow;
-  label: string;
-  width?: number;
-  /** Horizontal alignment of header + cell content. Default "left". */
-  align?: "left" | "right";
-  /** When true (and `onSortChange` is set), the header is pressable + shows a
-   *  sort arrow when this column is the active `sort`. */
-  sortable?: boolean;
-  renderCell?: RenderCell<TRow>;
-}
-
-type RenderCell<TRow extends Record<string, unknown>> = (params: {
-  row: TRow;
-  column: Column<TRow>;
-}) => ReactNode;
+// Native table. RN primitives; a click-to-expand row is a Pressable whose
+// `interactive` cells are their own Pressables — RN's responder system grants the
+// press to the innermost responder, so an action cell never toggles the row (the
+// web DOM-nesting concern doesn't exist here). The detail panel renders below.
 
 const stickyHeader = [0];
+const CHEVRON_W = 44;
 
 export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
-  const { columns, rows, rowKey, rowStyle, sort, onSortChange, onRowPress } = props;
+  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow } = props;
+  const [internal, setInternal] = useState<Set<string>>(() => new Set());
+  const expanded = expandedKeys ?? internal;
+  const expandable = !!renderDetail;
+
+  const toggle = (key: string, row: TRow) => {
+    onToggleRow?.(key, row);
+    if (expandedKeys === undefined) {
+      setInternal((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        return next;
+      });
+    }
+  };
+
+  const cellWidth = (col: Column<TRow>) => (col.width ? { width: col.width } : styles.flexColumn);
 
   return (
     <ScrollView style={styles.container} stickyHeaderIndices={stickyHeader}>
       <View style={styles.headerRow}>
-        {columns.map((column) => {
-          const sortable = column.sortable && !!onSortChange;
-          const active = sort?.key === column.key;
-          const cellStyle = [
-            column.width ? { width: column.width } : styles.flexColumn,
-            styles.headerCell,
-            column.align === "right" ? styles.alignEnd : null,
-          ];
+        {columns.map((col) => {
+          const sortable = col.sortable && !!onSortChange;
+          const active = sort?.key === col.key;
+          const cellStyle = [cellWidth(col), styles.headerCell, col.align === "right" ? styles.alignEnd : null];
           const inner = (
             <View style={styles.headerInner}>
-              <Text weight="medium" numberOfLines={1} userSelect="none">
-                {column.label}
+              <Text size="xs" weight="medium" color="muted" transform="uppercase" numberOfLines={1} userSelect="none">
+                {col.label}
               </Text>
               {sortable ? (
                 <Text size="xs" color="muted" userSelect="none">
@@ -72,55 +55,45 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
             </View>
           );
           return sortable ? (
-            <Pressable
-              key={column.key as string}
-              accessibilityRole="button"
-              accessibilityLabel={`Sắp xếp theo ${column.label}`}
-              onPress={() => onSortChange?.(column.key)}
-              style={cellStyle}
-            >
+            <Pressable key={col.key as string} accessibilityRole="button" accessibilityLabel={`Sắp xếp theo ${col.label}`} onPress={() => onSortChange?.(col.key)} style={cellStyle}>
               {inner}
             </Pressable>
           ) : (
-            <View key={column.key as string} style={cellStyle}>
+            <View key={col.key as string} style={cellStyle}>
               {inner}
             </View>
           );
         })}
+        {expandable ? <View style={{ width: CHEVRON_W }} /> : null}
       </View>
-      {rows.filter(Boolean).map((r, i) => {
-        const row = r as TRow;
-        const extraStyle = rowStyle?.(row);
-        const cells = columns.map((column) => (
-          <View
-            key={column.key as string}
-            style={[
-              column.width ? { width: column.width } : styles.flexColumn,
-              styles.bodyCell,
-              column.align === "right" ? styles.alignEnd : null,
-            ]}
-          >
-            {column.renderCell ? (
-              column.renderCell({ row, column })
-            ) : (
-              <Text numberOfLines={1}>{row[column.key]?.toString()}</Text>
-            )}
+      {rows.filter((r): r is TRow => Boolean(r)).map((row, i) => {
+        const key = rowKey ? String(row[rowKey]) : String(i);
+        const isOpen = expanded.has(key);
+        const extra = rowStyle?.(row);
+        const cells = columns.map((col) => (
+          <View key={col.key as string} style={[cellWidth(col), styles.bodyCell, col.align === "right" ? styles.alignEnd : null]}>
+            {col.renderCell ? col.renderCell({ row, column: col }) : <Text numberOfLines={1}>{row[col.key] != null ? String(row[col.key]) : ""}</Text>}
           </View>
         ));
-        const key = rowKey ? String(row[rowKey]) : i;
-        return onRowPress ? (
-          <Pressable
-            key={key}
-            accessibilityRole="button"
-            onPress={() => onRowPress(row)}
-            style={({ pressed }) => [styles.bodyRow, pressed ? styles.rowPressed : null, extraStyle]}
-          >
-            {cells}
-          </Pressable>
-        ) : (
-          <View key={key} style={[styles.bodyRow, extraStyle]}>
-            {cells}
-          </View>
+        return (
+          <Fragment key={key}>
+            {expandable ? (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityState={{ expanded: isOpen }}
+                onPress={() => toggle(key, row)}
+                style={({ pressed }) => [styles.bodyRow, pressed ? styles.rowPressed : null, extra]}
+              >
+                {cells}
+                <View style={styles.chevron}>
+                  <Icon name={isOpen ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
+                </View>
+              </Pressable>
+            ) : (
+              <View style={[styles.bodyRow, extra]}>{cells}</View>
+            )}
+            {expandable && isOpen ? <View style={styles.detail}>{renderDetail!(row)}</View> : null}
+          </Fragment>
         );
       })}
     </ScrollView>
@@ -128,48 +101,15 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    marginHorizontal: -8,
-  },
-  headerRow: {
-    flexDirection: "row",
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    backgroundColor: colors.zinc[50],
-  },
-  headerCell: {
-    minHeight: 40,
-    justifyContent: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-  },
-  headerInner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-  },
-  bodyRow: {
-    flexDirection: "row",
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-    alignItems: "stretch",
-  },
-  rowPressed: {
-    backgroundColor: colors.zinc[50],
-  },
-  // No fixed height — the row sizes to its content + vertical padding, so rich
-  // cells (avatar chips, buttons, stacked badges) get room instead of squeezing.
-  bodyCell: {
-    minHeight: 44,
-    justifyContent: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-  },
-  alignEnd: {
-    alignItems: "flex-end",
-  },
-  flexColumn: {
-    flex: 1,
-  },
+  container: { flex: 1, marginHorizontal: -8 },
+  headerRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, backgroundColor: colors.white },
+  headerCell: { minHeight: 40, justifyContent: "center", paddingHorizontal: 12, paddingVertical: 10 },
+  headerInner: { flexDirection: "row", alignItems: "center", gap: 4 },
+  bodyRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, alignItems: "stretch", backgroundColor: colors.white },
+  rowPressed: { backgroundColor: colors.zinc[50] },
+  bodyCell: { minHeight: 44, justifyContent: "center", paddingHorizontal: 12, paddingVertical: 12 },
+  chevron: { width: CHEVRON_W, alignItems: "center", justifyContent: "center" },
+  detail: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 18, backgroundColor: colors.zinc[50], borderBottomWidth: 1, borderBottomColor: colors.border },
+  alignEnd: { alignItems: "flex-end" },
+  flexColumn: { flex: 1 },
 });

package/src/table.web.tsx

@@ -0,0 +1,218 @@
+import { CSSProperties, Fragment, useState } from "react";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+import type { Column, TableProps } from "./table_types";
+
+export type { SortDir, TableSort, Column, TableProps } from "./table_types";
+
+// Web table. Built from raw <div>s (not RN Pressable) so a click-to-expand row
+// can legally contain interactive cells: the row is a <div role="row">, never a
+// <button>, and an `interactive` cell's clicks are skipped via a centralized
+// `closest('[data-interactive]')` guard — no stopPropagation, no nested <button>,
+// no absolute overlay. The detail panel renders full-width below the row.
+
+const CHEVRON_W = 44;
+
+function colWidth<TRow extends Record<string, unknown>>(col: Column<TRow>): CSSProperties {
+  return col.width ? { width: col.width, flexShrink: 0 } : { flex: 1, minWidth: 0 };
+}
+
+export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
+  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow } = props;
+  const [internal, setInternal] = useState<Set<string>>(() => new Set());
+  const [hoverKey, setHoverKey] = useState<string | null>(null);
+  const expanded = expandedKeys ?? internal;
+  const expandable = !!renderDetail;
+
+  const toggle = (key: string, row: TRow) => {
+    onToggleRow?.(key, row);
+    if (expandedKeys === undefined) {
+      setInternal((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        return next;
+      });
+    }
+  };
+
+  const visibleRows = rows.filter((r): r is TRow => Boolean(r));
+
+  return (
+    <div style={containerStyle} role="table">
+      {/* Header */}
+      <div style={headerRowStyle} role="row">
+        {columns.map((col) => {
+          const sortable = col.sortable && !!onSortChange;
+          const active = sort?.key === col.key;
+          const style: CSSProperties = {
+            ...headerCellStyle,
+            ...colWidth(col),
+            justifyContent: col.align === "right" ? "flex-end" : "flex-start",
+            cursor: sortable ? "pointer" : "default",
+          };
+          const inner = (
+            <>
+              <Text size="xs" weight="medium" color="muted" numberOfLines={1} userSelect="none" transform="uppercase">
+                {col.label}
+              </Text>
+              {sortable ? (
+                <Text size="xs" color="muted" userSelect="none">
+                  {active ? (sort?.dir === "asc" ? "↑" : "↓") : "↕"}
+                </Text>
+              ) : null}
+            </>
+          );
+          return sortable ? (
+            <div
+              key={col.key as string}
+              role="columnheader"
+              aria-sort={active ? (sort?.dir === "asc" ? "ascending" : "descending") : undefined}
+              tabIndex={0}
+              onClick={() => onSortChange?.(col.key)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onSortChange?.(col.key);
+                }
+              }}
+              style={style}
+            >
+              {inner}
+            </div>
+          ) : (
+            <div key={col.key as string} role="columnheader" style={style}>
+              {inner}
+            </div>
+          );
+        })}
+        {expandable ? <div style={{ width: CHEVRON_W, flexShrink: 0 }} /> : null}
+      </div>
+
+      {/* Body */}
+      {visibleRows.map((row, i) => {
+        const key = rowKey ? String(row[rowKey]) : String(i);
+        const isOpen = expanded.has(key);
+        const extra = (rowStyle?.(row) as CSSProperties | undefined) ?? undefined;
+        const rowStyleFinal: CSSProperties = {
+          ...bodyRowStyle,
+          cursor: expandable ? "pointer" : "default",
+          background: hoverKey === key && expandable ? colors.zinc[50] : colors.white,
+          ...extra,
+        };
+        return (
+          <Fragment key={key}>
+            <div
+              role="row"
+              onClick={
+                expandable
+                  ? (e: React.MouseEvent) => {
+                      // Whole-row click expands, EXCEPT clicks inside an interactive cell
+                      // (pickers/buttons) — they keep their own behaviour. The disclosure
+                      // chevron is the keyboard/AT affordance.
+                      if ((e.target as HTMLElement).closest("[data-interactive]")) return;
+                      toggle(key, row);
+                    }
+                  : undefined
+              }
+              onMouseEnter={expandable ? () => setHoverKey(key) : undefined}
+              onMouseLeave={expandable ? () => setHoverKey((k) => (k === key ? null : k)) : undefined}
+              style={rowStyleFinal}
+            >
+              {columns.map((col) => (
+                <div
+                  key={col.key as string}
+                  role="cell"
+                  data-interactive={col.interactive || undefined}
+                  style={{
+                    ...bodyCellStyle,
+                    ...colWidth(col),
+                    alignItems: col.align === "right" ? "flex-end" : "flex-start",
+                  }}
+                >
+                  {col.renderCell ? (
+                    col.renderCell({ row, column: col })
+                  ) : (
+                    <Text numberOfLines={1}>{row[col.key] != null ? String(row[col.key]) : ""}</Text>
+                  )}
+                </div>
+              ))}
+              {expandable ? (
+                <button
+                  type="button"
+                  data-interactive
+                  aria-expanded={isOpen}
+                  aria-label={isOpen ? "Collapse row" : "Expand row"}
+                  onClick={() => toggle(key, row)}
+                  style={chevronButtonStyle}
+                >
+                  <Icon name={isOpen ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
+                </button>
+              ) : null}
+            </div>
+            {expandable && isOpen ? (
+              <div role="row" style={detailRowStyle}>
+                <div role="cell" style={detailCellStyle}>
+                  {renderDetail!(row)}
+                </div>
+              </div>
+            ) : null}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+const containerStyle: CSSProperties = { width: "100%", overflow: "auto" };
+const headerRowStyle: CSSProperties = {
+  display: "flex",
+  position: "sticky",
+  top: 0,
+  zIndex: 1,
+  background: colors.white,
+  borderBottom: `1px solid ${colors.border}`,
+};
+const headerCellStyle: CSSProperties = {
+  minHeight: 40,
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 4,
+  padding: "10px 12px",
+  boxSizing: "border-box",
+};
+const bodyRowStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "stretch",
+  borderBottom: `1px solid ${colors.border}`,
+};
+const bodyCellStyle: CSSProperties = {
+  minHeight: 44,
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: 12,
+  boxSizing: "border-box",
+};
+const chevronButtonStyle: CSSProperties = {
+  width: CHEVRON_W,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "transparent",
+  border: "none",
+  padding: 0,
+  cursor: "pointer",
+};
+const detailRowStyle: CSSProperties = {
+  background: colors.zinc[50],
+  borderBottom: `1px solid ${colors.border}`,
+};
+const detailCellStyle: CSSProperties = {
+  padding: "4px 16px 18px",
+  width: "100%",
+  boxSizing: "border-box",
+};

package/src/table_types.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import type { ViewStyle } from "react-native";
+
+export type SortDir = "asc" | "desc";
+
+export interface TableSort<TRow extends Record<string, unknown>> {
+  key: keyof TRow;
+  dir: SortDir;
+}
+
+export interface Column<TRow extends Record<string, unknown>> {
+  key: keyof TRow;
+  label: string;
+  width?: number;
+  /** Horizontal alignment of header + cell content. Default "left". */
+  align?: "left" | "right";
+  /** When true (and `onSortChange` is set), the header is pressable + shows a
+   *  sort arrow when this column is the active `sort`. */
+  sortable?: boolean;
+  /** Cells whose own controls (buttons, pickers) must NOT toggle the row. The
+   *  row's expand handler ignores clicks originating inside an interactive cell,
+   *  so the rest of the row stays click-to-expand. */
+  interactive?: boolean;
+  renderCell?: (params: { row: TRow; column: Column<TRow> }) => ReactNode;
+}
+
+export interface TableProps<TRow extends Record<string, unknown>> {
+  columns: Column<TRow>[];
+  rows: (TRow | null | false)[];
+  /** Stable per-row key. Required when `renderDetail` is set (expansion is
+   *  tracked by this key, not row index, so it survives sort/filter). */
+  rowKey?: keyof TRow;
+  rowStyle?: (row: TRow) => ViewStyle | undefined;
+  /** Current sort. Pair with `onSortChange` to render sortable headers; the
+   *  parent owns the actual sorting of `rows` — this only drives the indicator. */
+  sort?: TableSort<TRow> | null;
+  onSortChange?: (key: keyof TRow) => void;
+  /** Render an inline detail panel, full-width below the row. When set, the
+   *  whole row (except `interactive` cells) is click-to-expand. */
+  renderDetail?: (row: TRow) => ReactNode;
+  /** Controlled set of expanded row keys. Omit for internal (uncontrolled) state. */
+  expandedKeys?: Set<string>;
+  /** Called when a row's expand state toggles (with its `rowKey` value). */
+  onToggleRow?: (key: string, row: TRow) => void;
+}