@alepha/ui 0.16.2 → 0.17.1

package/src/core/components/table/DataTable.tsx

@@ -1,16 +1,25 @@
-import { Checkbox, Flex, Table, Text, UnstyledButton } from "@mantine/core";
-import { useDebouncedCallback } from "@mantine/hooks";
+import {
+  Checkbox,
+  Drawer,
+  Flex,
+  Table,
+  Text,
+  UnstyledButton,
+} from "@mantine/core";
 import {
   IconArrowDown,
   IconArrowsSort,
   IconArrowUp,
+  IconChevronDown,
+  IconChevronRight,
 } from "@tabler/icons-react";
 import { Alepha, type Static, type TObject, t } from "alepha";
 import { DateTimeProvider } from "alepha/datetime";
 import { useInject } from "alepha/react";
 import { type FormModel, useForm } from "alepha/react/form";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ui } from "../../constants/ui.ts";
+import ActionButton from "../buttons/ActionButton.tsx";
 import DataTableFilters, {
   type DataTableFiltersProps,
 } from "./DataTableFilters.tsx";
@@ -23,8 +32,8 @@ import type {
   FilterVisibility,
   MaybePage,
 } from "./types.ts";
-
-const DEFAULT_VISIBLE_COLUMN_COUNT = 10;
+import { DEFAULT_MAX_VISIBLE_COLUMNS } from "./types.ts";
+import { useTableSelection } from "./useTableSelection.ts";
 
 type SortDirection = "asc" | "desc" | null;
 
@@ -73,15 +82,21 @@ const toggleSort = (
   return parts.length > 0 ? parts.join(",") : undefined;
 };
 
+const toAriaSort = (
+  dir: SortDirection,
+): "ascending" | "descending" | "none" => {
+  if (dir === "asc") return "ascending";
+  if (dir === "desc") return "descending";
+  return "none";
+};
+
+const FIT_STYLE = { width: 1, whiteSpace: "nowrap" } as const;
+
 const DataTable = <T extends object, Filters extends TObject>(
   props: DataTableProps<T, Filters>,
 ) => {
   const [items, setItems] = useState<MaybePage<T>>(
-    typeof props.items === "function"
-      ? {
-          content: [],
-        }
-      : props.items,
+    typeof props.items === "function" ? { content: [] } : props.items,
   );
 
   const defaultSize = props.infinityScroll ? 100 : props.defaultSize || 10;
@@ -89,54 +104,39 @@ const DataTable = <T extends object, Filters extends TObject>(
   const [size, setSize] = useState(String(defaultSize));
   const [currentPage, setCurrentPage] = useState(0);
   const alepha = useInject(Alepha);
+  const sentinelRef = useRef<HTMLDivElement>(null);
 
   // Column visibility state
   const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>(
     () => {
-      if (props.defaultColumnVisibility) {
-        return props.defaultColumnVisibility;
-      }
-      const columnKeys = Object.keys(props.columns);
-      const maxVisible =
-        props.defaultVisibleColumnCount ?? DEFAULT_VISIBLE_COLUMN_COUNT;
-      return columnKeys.reduce(
-        (acc, key, index) => ({
-          ...acc,
-          [key]: index < maxVisible,
-        }),
-        {} as ColumnVisibility,
-      );
+      const entries = Object.entries(props.columns);
+      let visibleCount = 0;
+      return entries.reduce((acc, [key, col]) => {
+        if (col.defaultHidden) {
+          acc[key] = false;
+        } else if (visibleCount < DEFAULT_MAX_VISIBLE_COLUMNS) {
+          acc[key] = true;
+          visibleCount++;
+        } else {
+          acc[key] = false;
+        }
+        return acc;
+      }, {} as ColumnVisibility);
     },
   );
 
-  // Filter visibility state
+  // Filter visibility state — default: none visible
   const [filterVisibility, setFilterVisibility] = useState<FilterVisibility>(
     () => {
-      if (props.defaultFilterVisibility) {
-        return props.defaultFilterVisibility;
-      }
-      if (!props.filters?.properties) {
-        return {};
-      }
+      if (!props.filters?.properties) return {};
+      const defaults = new Set(props.defaultFilters ?? []);
       return Object.keys(props.filters.properties).reduce(
-        (acc, key) => ({ ...acc, [key]: true }),
+        (acc, key) => ({ ...acc, [key]: defaults.has(key) }),
         {} as FilterVisibility,
       );
     },
   );
 
-  // Handle column visibility changes
-  const handleColumnVisibilityChange = (visibility: ColumnVisibility) => {
-    setColumnVisibility(visibility);
-    props.onColumnVisibilityChange?.(visibility);
-  };
-
-  // Handle filter visibility changes
-  const handleFilterVisibilityChange = (visibility: FilterVisibility) => {
-    setFilterVisibility(visibility);
-    props.onFilterVisibilityChange?.(visibility);
-  };
-
   // Compute visible columns
   const visibleColumns = useMemo(() => {
     return Object.entries(props.columns).filter(
@@ -144,7 +144,7 @@ const DataTable = <T extends object, Filters extends TObject>(
     );
   }, [props.columns, columnVisibility]);
 
-  // Current sort string from form
+  // Current sort string
   const [sortString, setSortString] = useState<string | undefined>(undefined);
 
   // Handle column header click for sorting
@@ -156,88 +156,52 @@ const DataTable = <T extends object, Filters extends TObject>(
     form.input.page.set(0); // Reset to first page when sorting changes
   };
 
-  // Checkbox selection state
-  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
-
-  // Default getItemKey uses JSON.stringify if not provided
+  // Item key resolver — prefers explicit prop, falls back to .id, then JSON
   const getItemKey = useCallback(
     (item: T): string => {
-      if (props.getItemKey) {
-        return props.getItemKey(item);
-      }
+      if (props.getItemKey) return props.getItemKey(item);
+      if ("id" in item) return String((item as Record<string, unknown>).id);
       return JSON.stringify(item);
     },
     [props.getItemKey],
   );
 
-  // Get selected items from current content
-  const selectedItems = useMemo(() => {
-    if (!props.withCheckbox) return [];
-    return items.content.filter((item) =>
-      selectedKeys.has(getItemKey(item as T)),
-    ) as T[];
-  }, [items.content, selectedKeys, getItemKey, props.withCheckbox]);
-
-  // Check if all current page items are selected
-  const allSelected = useMemo(() => {
-    if (items.content.length === 0) return false;
-    return items.content.every((item) =>
-      selectedKeys.has(getItemKey(item as T)),
-    );
-  }, [items.content, selectedKeys, getItemKey]);
-
-  // Check if some (but not all) items are selected
-  const someSelected = useMemo(() => {
-    if (items.content.length === 0) return false;
-    const selectedCount = items.content.filter((item) =>
-      selectedKeys.has(getItemKey(item as T)),
-    ).length;
-    return selectedCount > 0 && selectedCount < items.content.length;
-  }, [items.content, selectedKeys, getItemKey]);
-
-  // Toggle selection of a single item
-  const toggleItemSelection = useCallback(
-    (item: T) => {
-      const key = getItemKey(item);
-      setSelectedKeys((prev) => {
-        const next = new Set(prev);
-        if (next.has(key)) {
-          next.delete(key);
-        } else {
-          next.add(key);
-        }
-        return next;
-      });
-    },
-    [getItemKey],
+  // Checkbox selection (extracted hook)
+  const selection = useTableSelection(
+    items.content as T[],
+    getItemKey,
+    props.withCheckbox ?? false,
   );
 
-  // Toggle selection of all items on current page
-  const toggleAllSelection = useCallback(() => {
-    if (allSelected) {
-      // Deselect all current page items
-      setSelectedKeys((prev) => {
-        const next = new Set(prev);
-        for (const item of items.content) {
-          next.delete(getItemKey(item as T));
-        }
-        return next;
-      });
-    } else {
-      // Select all current page items
-      setSelectedKeys((prev) => {
-        const next = new Set(prev);
-        for (const item of items.content) {
-          next.add(getItemKey(item as T));
-        }
-        return next;
-      });
+  // Panel — normalize shorthand vs object form
+  const panelConfig = useMemo(() => {
+    if (!props.panel) return null;
+    if (typeof props.panel === "function") {
+      return { render: props.panel, can: undefined };
     }
-  }, [allSelected, items.content, getItemKey]);
-
-  // Clear all selections
-  const clearSelection = useCallback(() => {
-    setSelectedKeys(new Set());
+    return props.panel;
+  }, [props.panel]);
+
+  // Drawer — normalize shorthand vs object form
+  const [drawerItem, setDrawerItem] = useState<T | null>(null);
+  const drawerConfig = useMemo(() => {
+    if (!props.drawer) return null;
+    if (typeof props.drawer === "function") {
+      return { render: props.drawer, can: undefined, props: undefined };
+    }
+    return props.drawer;
+  }, [props.drawer]);
+
+  // Panel expand state
+  const [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set());
+
+  const toggleExpand = useCallback((key: string) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
   }, []);
 
   const form = useForm(
@@ -276,7 +240,7 @@ const DataTable = <T extends object, Filters extends TObject>(
       },
       onReset: async () => {
         setPage(1);
-        setSize("10");
+        setSize(String(defaultSize));
         await form.submit();
       },
       onChange: async (key, value) => {
@@ -302,10 +266,6 @@ const DataTable = <T extends object, Filters extends TObject>(
     [items],
   );
 
-  const submitDebounce = useDebouncedCallback(() => form.submit(), {
-    delay: 800,
-  });
-
   const dt = useInject(DateTimeProvider);
 
   useEffect(() => {
@@ -326,30 +286,27 @@ const DataTable = <T extends object, Filters extends TObject>(
     }
   }, [props.items]);
 
-  // Infinity scroll detection
+  // Infinity scroll via IntersectionObserver
   useEffect(() => {
     if (!props.infinityScroll || typeof props.items !== "function") return;
 
-    const handleScroll = () => {
-      if (form.submitting) return;
-
-      const scrollTop = window.scrollY;
-      const windowHeight = window.innerHeight;
-      const docHeight = document.documentElement.scrollHeight;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
 
-      const isNearBottom = scrollTop + windowHeight >= docHeight - 300;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries[0].isIntersecting || form.submitting) return;
 
-      if (isNearBottom) {
         const totalPages = items.page?.totalPages ?? 1;
-
         if (currentPage + 1 < totalPages) {
           form.input.page.set(currentPage + 1);
         }
-      }
-    };
+      },
+      { rootMargin: "300px" },
+    );
 
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
+    observer.observe(sentinel);
+    return () => observer.disconnect();
   }, [
     props.infinityScroll,
     form.submitting,
@@ -358,13 +315,19 @@ const DataTable = <T extends object, Filters extends TObject>(
     form,
   ]);
 
+  // Total column count (for colSpan)
+  const totalColumns =
+    visibleColumns.length +
+    (panelConfig ? 1 : 0) +
+    (props.withCheckbox ? 1 : 0);
+
   // Checkbox header column
   const checkboxHeader = props.withCheckbox ? (
     <Table.Th style={{ width: 40 }}>
       <Checkbox
-        checked={allSelected}
-        indeterminate={someSelected}
-        onChange={toggleAllSelection}
+        checked={selection.allSelected}
+        indeterminate={selection.someSelected}
+        onChange={selection.toggleAll}
         aria-label="Select all"
       />
     </Table.Th>
@@ -376,74 +339,145 @@ const DataTable = <T extends object, Filters extends TObject>(
       ? getSortDirection(sortString, sortField)
       : null;
 
-    const headerContent = (
-      <Flex align="center" gap={4}>
-        <Text size="xs">{col.label}</Text>
-        {col.sortable && (
-          <Flex c="dimmed">
-            {sortDir === "asc" && <IconArrowUp size={ui.sizes.icon.sm} />}
-            {sortDir === "desc" && <IconArrowDown size={ui.sizes.icon.sm} />}
-            {sortDir === null && <IconArrowsSort size={ui.sizes.icon.sm} />}
-          </Flex>
-        )}
-      </Flex>
-    );
-
     return (
       <Table.Th
         key={key}
+        onClick={
+          col.sortable ? () => handleSortClick(key, col.sortKey) : undefined
+        }
+        aria-sort={col.sortable ? toAriaSort(sortDir) : undefined}
         style={{
-          ...(col.fit
-            ? {
-                // TODO: not working well (bad formatting in some cases)
-                // width: "1%",
-                // whiteSpace: "nowrap",
-              }
-            : {}),
-          ...(col.sortable ? { cursor: "pointer" } : {}),
+          ...(col.fit ? FIT_STYLE : {}),
+          ...(col.sortable ? { cursor: "pointer", userSelect: "none" } : {}),
         }}
       >
-        {col.sortable ? (
-          <UnstyledButton onClick={() => handleSortClick(key, col.sortKey)}>
-            {headerContent}
-          </UnstyledButton>
-        ) : (
-          headerContent
-        )}
+        <Flex align="center" gap={4}>
+          <Text size="xs">{col.label}</Text>
+          {col.sortable && (
+            <Flex c="dimmed">
+              {sortDir === "asc" && <IconArrowUp size={ui.sizes.icon.sm} />}
+              {sortDir === "desc" && <IconArrowDown size={ui.sizes.icon.sm} />}
+              {sortDir === null && <IconArrowsSort size={ui.sizes.icon.sm} />}
+            </Flex>
+          )}
+        </Flex>
       </Table.Th>
     );
   });
 
-  const rows = items.content.map((item, index) => {
+  const rows = items.content.flatMap((item, index) => {
     const trProps = props.tableTrProps ? props.tableTrProps(item as T) : {};
     const itemKey = getItemKey(item as T);
-    const isSelected = selectedKeys.has(itemKey);
-
-    return (
-      <Table.Tr key={itemKey} {...trProps}>
+    const isSelected = selection.isSelected(item as T);
+    const showPanel =
+      panelConfig && (panelConfig.can ? panelConfig.can(item as T) : true);
+    const isExpanded = expandedKeys.has(itemKey);
+    const canOpenDrawer =
+      drawerConfig && (drawerConfig.can ? drawerConfig.can(item as T) : true);
+
+    const elements = [
+      <Table.Tr
+        key={itemKey}
+        {...trProps}
+        style={{
+          ...(canOpenDrawer ? { cursor: "pointer" } : {}),
+          ...(trProps.style ?? {}),
+        }}
+        onClick={(e) => {
+          if (canOpenDrawer) setDrawerItem(item as T);
+          trProps.onClick?.(e);
+        }}
+      >
+        {panelConfig && (
+          <Table.Td style={{ width: 36, textAlign: "center" }} py={2} px={0}>
+            {showPanel && (
+              <UnstyledButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleExpand(itemKey);
+                }}
+                style={{ display: "inline-flex" }}
+              >
+                <Flex c="dimmed" align="center" justify="center">
+                  {isExpanded ? (
+                    <IconChevronDown size={ui.sizes.icon.sm} />
+                  ) : (
+                    <IconChevronRight size={ui.sizes.icon.sm} />
+                  )}
+                </Flex>
+              </UnstyledButton>
+            )}
+          </Table.Td>
+        )}
         {props.withCheckbox && (
-          <Table.Td style={{ width: 40 }}>
+          <Table.Td style={{ width: 40 }} onClick={(e) => e.stopPropagation()}>
             <Checkbox
               checked={isSelected}
-              onChange={() => toggleItemSelection(item as T)}
+              onChange={() => selection.toggleItem(item as T)}
               aria-label="Select row"
             />
           </Table.Td>
         )}
-        {visibleColumns.map(([key, col]) => (
-          <Table.Td key={key}>
-            {col.value(
-              item as T,
-              {
-                index,
-                form: form as unknown as FormModel<Filters>,
-                alepha,
-              } as DataTableColumnContext<Filters>,
-            )}
+        {visibleColumns.map(([key, col]) => {
+          const ctx = {
+            index,
+            form: form as unknown as FormModel<Filters>,
+            alepha,
+          } as DataTableColumnContext<Filters>;
+
+          if (col.actions) {
+            const rowActions = col
+              .actions(item as T, ctx)
+              .filter((a) => a.visible !== false);
+            return (
+              <Table.Td
+                py={2}
+                px={4}
+                key={key}
+                style={col.fit ? FIT_STYLE : undefined}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Flex gap={4}>
+                  {rowActions.map(({ visible: _, ...actionProps }, i) => (
+                    <ActionButton
+                      key={i}
+                      variant="subtle"
+                      size="xs"
+                      preventDefault
+                      h={20}
+                      {...actionProps}
+                    />
+                  ))}
+                </Flex>
+              </Table.Td>
+            );
+          }
+
+          return (
+            <Table.Td
+              py={2}
+              px={4}
+              key={key}
+              style={col.fit ? FIT_STYLE : undefined}
+            >
+              {col.value?.(item as T, ctx)}
+            </Table.Td>
+          );
+        })}
+      </Table.Tr>,
+    ];
+
+    if (panelConfig && showPanel && isExpanded) {
+      elements.push(
+        <Table.Tr key={`${itemKey}-panel`}>
+          <Table.Td colSpan={totalColumns} p={0}>
+            {panelConfig.render(item as T)}
           </Table.Td>
-        ))}
-      </Table.Tr>
-    );
+        </Table.Tr>,
+      );
+    }
+
+    return elements;
   });
 
   const filterSchema = useMemo(() => {
@@ -452,26 +486,21 @@ const DataTable = <T extends object, Filters extends TObject>(
   }, [props.filters, form.options.schema]);
 
   return (
-    <Flex
-      flex={1}
-      p={0}
-      bg="var(--alepha-elevated)"
-      bdrs="sm"
-      bd="1px solid var(--alepha-border)"
-      direction="column"
-    >
+    <Flex flex={1} p={0} bdrs="sm" direction="column">
       <DataTableToolbar
         columns={props.columns}
         filters={props.filters}
         columnVisibility={columnVisibility}
         filterVisibility={filterVisibility}
-        onColumnVisibilityChange={handleColumnVisibilityChange}
-        onFilterVisibilityChange={handleFilterVisibilityChange}
+        onColumnVisibilityChange={setColumnVisibility}
+        onFilterVisibilityChange={setFilterVisibility}
         actions={props.actions}
         onRefresh={() => form.submit()}
-        selectedItems={selectedItems}
+        items={items.content as T[]}
+        withExport={props.withExport}
+        selectedItems={selection.selectedItems}
         checkboxActions={props.checkboxActions}
-        onClearSelection={clearSelection}
+        onClearSelection={selection.clear}
       />
 
       {filterSchema && props.filters && (
@@ -486,17 +515,52 @@ const DataTable = <T extends object, Filters extends TObject>(
       )}
 
       <Flex className="overflow-auto">
-        <Table withColumnBorders withRowBorders {...props.tableProps}>
-          <Table.Thead>
+        <Table
+          aria-label="Data table"
+          withColumnBorders
+          withRowBorders
+          {...props.tableProps}
+        >
+          <Table.Thead
+            style={{
+              position: "sticky",
+              top: 0,
+              zIndex: 1,
+              backgroundColor: "var(--mantine-color-body)",
+            }}
+          >
             <Table.Tr>
+              {panelConfig && <Table.Th style={{ width: 36 }} />}
               {checkboxHeader}
               {head}
             </Table.Tr>
           </Table.Thead>
-          <Table.Tbody>{rows}</Table.Tbody>
+          <Table.Tbody
+            style={{
+              opacity: form.submitting ? 0.5 : 1,
+              transition: "opacity 150ms ease",
+            }}
+          >
+            {rows}
+            {items.content.length === 0 && (
+              <Table.Tr>
+                <Table.Td
+                  colSpan={totalColumns || 1}
+                  py="xl"
+                  style={{ textAlign: "center" }}
+                >
+                  <Text c="dimmed" size="sm">
+                    {form.submitting ? "Loading…" : "No results"}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            )}
+          </Table.Tbody>
         </Table>
       </Flex>
 
+      {props.infinityScroll && <div ref={sentinelRef} />}
+
       {!props.infinityScroll && (
         <DataTablePagination
           page={page}
@@ -510,6 +574,18 @@ const DataTable = <T extends object, Filters extends TObject>(
           }}
         />
       )}
+
+      {drawerConfig && (
+        <Drawer
+          opened={drawerItem !== null}
+          onClose={() => setDrawerItem(null)}
+          position="right"
+          size="xl"
+          {...drawerConfig.props}
+        >
+          {drawerItem && drawerConfig.render(drawerItem)}
+        </Drawer>
+      )}
     </Flex>
   );
 };

package/src/core/components/table/DataTableFilters.tsx

@@ -51,11 +51,19 @@ const DataTableFilters = ({
       style={{ borderBottom: "1px solid var(--alepha-border)" }}
     >
       <TypeForm
+        size={"xs"}
         {...typeFormProps}
         skipSubmitButton
         fill
         form={form}
         schema={visibleSchema}
+        columns={{
+          base: 1,
+          sm: 2,
+          md: 3,
+          lg: 4,
+          xl: 6,
+        }}
       />
     </Flex>
   );