@godxjp/ui 13.9.3 → 13.11.0

package/dist/components/data-grid/data-grid.js

@@ -0,0 +1,402 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  Layers,
+  Layers2,
+  SlidersHorizontal
+} from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { cn } from "../../lib/utils";
+import { densityClass } from "../../lib/variants";
+import { tableCellPaddingClass, tableRowHeightClass } from "../../lib/control-styles";
+import { Flex } from "../layout/flex";
+import { Button } from "../general/button";
+import { Checkbox } from "../data-entry/checkbox";
+import { SearchInput } from "../data-entry/search-input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../data-entry/select";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../navigation/dropdown-menu";
+import { EmptyState } from "../data-display/empty-state";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../data-display/table";
+const DataGridContext = React.createContext(null);
+function useDataGrid() {
+  const ctx = React.useContext(DataGridContext);
+  if (!ctx) throw new Error("DataGrid.* must be used inside <DataGrid>");
+  return ctx;
+}
+const DataGrid = function DataGridRoot({
+  columns,
+  data,
+  getRowId,
+  rowIdKey = "id",
+  sorting,
+  onSortingChange,
+  columnFilters,
+  onColumnFiltersChange,
+  globalFilter,
+  onGlobalFilterChange,
+  pagination,
+  onPaginationChange,
+  rowCount,
+  rowSelection,
+  onRowSelectionChange,
+  enableRowSelection = false,
+  columnVisibility: columnVisibilityProp,
+  onColumnVisibilityChange,
+  manualSorting = true,
+  manualFiltering = true,
+  manualPagination = true,
+  density: densityProp,
+  onDensityChange,
+  loading = false,
+  empty,
+  onRowClick,
+  className,
+  children
+}) {
+  const [internalDensity, setInternalDensity] = React.useState("comfortable");
+  const density = densityProp ?? internalDensity;
+  const setDensity = (d) => {
+    if (!densityProp) setInternalDensity(d);
+    onDensityChange?.(d);
+  };
+  const [internalSorting, setInternalSorting] = React.useState([]);
+  const [internalFilters, setInternalFilters] = React.useState([]);
+  const [internalGlobal, setInternalGlobal] = React.useState("");
+  const [internalPagination, setInternalPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const [internalSelection, setInternalSelection] = React.useState({});
+  const [internalVisibility, setInternalVisibility] = React.useState({});
+  const resolveRowId = React.useCallback(
+    (row) => getRowId ? getRowId(row) : String(row[rowIdKey]),
+    [getRowId, rowIdKey]
+  );
+  const table = useReactTable({
+    data,
+    columns,
+    getRowId: resolveRowId,
+    getCoreRowModel: getCoreRowModel(),
+    ...manualSorting ? {} : { getSortedRowModel: getSortedRowModel() },
+    ...manualFiltering ? {} : { getFilteredRowModel: getFilteredRowModel() },
+    ...manualPagination ? {} : { getPaginationRowModel: getPaginationRowModel() },
+    manualSorting,
+    manualFiltering,
+    manualPagination,
+    rowCount,
+    enableRowSelection,
+    state: {
+      sorting: sorting ?? internalSorting,
+      columnFilters: columnFilters ?? internalFilters,
+      globalFilter: globalFilter ?? internalGlobal,
+      pagination: pagination ?? internalPagination,
+      rowSelection: rowSelection ?? internalSelection,
+      columnVisibility: columnVisibilityProp ?? internalVisibility
+    },
+    onSortingChange: onSortingChange ?? setInternalSorting,
+    onColumnFiltersChange: onColumnFiltersChange ?? setInternalFilters,
+    onGlobalFilterChange: onGlobalFilterChange ?? setInternalGlobal,
+    onPaginationChange: onPaginationChange ?? setInternalPagination,
+    onRowSelectionChange: onRowSelectionChange ?? setInternalSelection,
+    onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalVisibility
+  });
+  const ctx = {
+    table,
+    density,
+    setDensity,
+    loading,
+    empty,
+    onRowClick
+  };
+  return /* @__PURE__ */ jsx(DataGridContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "ui-data-table-root",
+        densityClass[density === "compact" ? "compact" : "comfortable"],
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsx(DataGrid.Content, {})
+    }
+  ) });
+};
+DataGrid.displayName = "DataGrid";
+DataGrid.Toolbar = function DataGridToolbar({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction: "row",
+      align: "center",
+      justify: "between",
+      gap: "sm",
+      wrap: true,
+      className: cn("ui-data-table-toolbar", className),
+      children
+    }
+  );
+};
+DataGrid.Toolbar.displayName = "DataGrid.Toolbar";
+DataGrid.Search = function DataGridSearch({ placeholder, className }) {
+  const { table } = useDataGrid();
+  const { t } = useTranslation();
+  const value = table.getState().globalFilter ?? "";
+  return /* @__PURE__ */ jsx(
+    SearchInput,
+    {
+      value,
+      onValueChange: (q) => table.setGlobalFilter(q),
+      onSearch: (q) => table.setGlobalFilter(q),
+      placeholder: placeholder ?? t("dataGrid.searchPlaceholder"),
+      ariaLabel: t("dataGrid.search"),
+      className
+    }
+  );
+};
+DataGrid.Search.displayName = "DataGrid.Search";
+DataGrid.ViewOptions = function DataGridViewOptions({ className }) {
+  const { table } = useDataGrid();
+  const { t } = useTranslation();
+  const hideable = table.getAllLeafColumns().filter((c) => c.getCanHide());
+  if (hideable.length === 0) return null;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className, children: [
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+      t("dataGrid.view")
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("dataGrid.toggleColumns") }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      hideable.map((column) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (v) => column.toggleVisibility(!!v),
+          children: columnLabel(column)
+        },
+        column.id
+      ))
+    ] })
+  ] });
+};
+DataGrid.ViewOptions.displayName = "DataGrid.ViewOptions";
+function columnLabel(column) {
+  const meta = column.columnDef.meta;
+  if (meta?.label) return meta.label;
+  if (typeof column.columnDef.header === "string") return column.columnDef.header;
+  return column.id;
+}
+DataGrid.BulkActions = function DataGridBulkActions({ children }) {
+  const { table } = useDataGrid();
+  const count = table.getSelectedRowModel().rows.length;
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsx(Flex, { direction: "row", align: "center", gap: "sm", children: children(count) });
+};
+DataGrid.BulkActions.displayName = "DataGrid.BulkActions";
+DataGrid.DensityToggle = function DataGridDensityToggle() {
+  const { density, setDensity } = useDataGrid();
+  const { t } = useTranslation();
+  const next = density === "compact" ? "comfortable" : "compact";
+  const Icon = density === "compact" ? Layers : Layers2;
+  const nextLabel = next === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable");
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      onClick: () => setDensity(next),
+      "aria-label": t("dataTable.densitySwitch", { density: nextLabel }),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+        density === "compact" ? t("dataTable.densityCompact") : t("dataTable.densityComfortable")
+      ]
+    }
+  );
+};
+DataGrid.DensityToggle.displayName = "DataGrid.DensityToggle";
+DataGrid.Content = function DataGridContent() {
+  const { table, loading, empty, onRowClick } = useDataGrid();
+  const { t } = useTranslation();
+  const leafCount = table.getVisibleLeafColumns().length;
+  const enableSelection = table.options.enableRowSelection;
+  const colSpan = leafCount + (enableSelection ? 1 : 0);
+  const isInteractive = (target) => !!target.closest("button, a, input, select, textarea, [role=menuitem], [role=checkbox]");
+  return /* @__PURE__ */ jsx("div", { className: "ui-data-table-scroll", "aria-busy": loading, children: /* @__PURE__ */ jsx("div", { className: "ui-data-table-surface min-w-[640px] sm:min-w-0", children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { className: "bg-secondary sticky top-0 z-10", children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      enableSelection && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
+          onCheckedChange: (v) => table.toggleAllPageRowsSelected(!!v),
+          "aria-label": t("dataTable.selectAll")
+        }
+      ) }),
+      hg.headers.map((header) => {
+        const canSort = header.column.getCanSort();
+        const sorted = header.column.getIsSorted();
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            "aria-sort": canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0,
+            className: cn(canSort && "select-none"),
+            children: header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "ui-data-table-sort-button focus-visible:ring-ring inline-flex items-center gap-1 rounded-sm focus-visible:ring-2",
+                onClick: header.column.getToggleSortingHandler(),
+                children: [
+                  flexRender(header.column.columnDef.header, header.getContext()),
+                  sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+                    ChevronsUpDown,
+                    {
+                      className: "text-muted-foreground size-3",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            ) : flexRender(header.column.columnDef.header, header.getContext())
+          },
+          header.id
+        );
+      })
+    ] }, hg.id)) }),
+    /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "h-32 text-center", "aria-live": "polite", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataTable.loading") }) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "ui-data-table-empty", "aria-live": "polite", children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") }) }) }) : table.getRowModel().rows.map((row) => {
+      const selected = row.getIsSelected();
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          "data-state": selected ? "selected" : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
+          onClick: (e) => {
+            if (isInteractive(e.target)) return;
+            onRowClick?.(row.original);
+          },
+          onKeyDown: onRowClick ? (e) => {
+            if (e.key !== "Enter" && e.key !== " ") return;
+            if (e.target !== e.currentTarget) return;
+            e.preventDefault();
+            onRowClick(row.original);
+          } : void 0,
+          className: cn(
+            tableRowHeightClass,
+            onRowClick && "hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
+            selected && "bg-muted/30"
+          ),
+          children: [
+            enableSelection && /* @__PURE__ */ jsx(TableCell, { className: tableCellPaddingClass, children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selected,
+                onCheckedChange: (v) => row.toggleSelected(!!v),
+                "aria-label": t("dataTable.selectRow", { id: row.id }),
+                onClick: (e) => e.stopPropagation()
+              }
+            ) }),
+            row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: tableCellPaddingClass, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          ]
+        },
+        row.id
+      );
+    }) })
+  ] }) }) });
+};
+DataGrid.Content.displayName = "DataGrid.Content";
+DataGrid.Pagination = function DataGridPagination({
+  pageSizeOptions = [10, 20, 50, 100],
+  className
+}) {
+  const { table } = useDataGrid();
+  const { t } = useTranslation();
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "row",
+      align: "center",
+      justify: "between",
+      gap: "md",
+      wrap: true,
+      className: cn("ui-data-table-pagination", className),
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataGrid.rowsPerPage") }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: String(pageSize),
+              onValueChange: (v) => table.setPageSize(Number(v)),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": t("dataGrid.rowsPerPage"), className: "tabular-nums", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), className: "tabular-nums", children: n }, n)) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: t("dataGrid.pageOf", { page: pageIndex + 1, total: Math.max(1, pageCount) }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              disabled: !table.getCanPreviousPage(),
+              onClick: () => table.previousPage(),
+              "aria-label": t("common.previous") ?? "Previous",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              disabled: !table.getCanNextPage(),
+              onClick: () => table.nextPage(),
+              "aria-label": t("common.next") ?? "Next",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+DataGrid.Pagination.displayName = "DataGrid.Pagination";
+export {
+  DataGrid
+};

package/dist/components/data-grid/index.d.ts

@@ -1,71 +1,2 @@
-import * as React from 'react';
-import { RowData, ColumnDef, SortingState, OnChangeFn, ColumnFiltersState, PaginationState, RowSelectionState, VisibilityState } from '@tanstack/react-table';
-export { ColumnDef } from '@tanstack/react-table';
-import { T as TableDensityProp } from '../../layout.prop-CXvl2rVR.js';
-
-type DataGridDensity = TableDensityProp;
-
-declare module "@tanstack/react-table" {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        label?: React.ReactNode;
-    }
-}
-interface DataGridProps<T> {
-    columns: ColumnDef<T, unknown>[];
-    data: T[];
-    getRowId?: (row: T) => string;
-    /** Stable id key when getRowId is omitted (defaults to "id"). */
-    rowIdKey?: keyof T & string;
-    sorting?: SortingState;
-    onSortingChange?: OnChangeFn<SortingState>;
-    columnFilters?: ColumnFiltersState;
-    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
-    globalFilter?: string;
-    onGlobalFilterChange?: OnChangeFn<string>;
-    pagination?: PaginationState;
-    onPaginationChange?: OnChangeFn<PaginationState>;
-    /** Total server row count (manual pagination) — drives the page count. */
-    rowCount?: number;
-    rowSelection?: RowSelectionState;
-    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
-    enableRowSelection?: boolean;
-    columnVisibility?: VisibilityState;
-    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
-    manualSorting?: boolean;
-    manualFiltering?: boolean;
-    manualPagination?: boolean;
-    density?: DataGridDensity;
-    onDensityChange?: (d: DataGridDensity) => void;
-    loading?: boolean;
-    empty?: React.ReactNode;
-    onRowClick?: (row: T) => void;
-    className?: string;
-    children?: React.ReactNode;
-}
-interface DataGridComponent {
-    <T>(props: DataGridProps<T>): React.ReactElement;
-    Toolbar: React.FC<{
-        children?: React.ReactNode;
-        className?: string;
-    }>;
-    Search: React.FC<{
-        placeholder?: string;
-        className?: string;
-    }>;
-    ViewOptions: React.FC<{
-        className?: string;
-    }>;
-    BulkActions: React.FC<{
-        children: (count: number) => React.ReactNode;
-    }>;
-    DensityToggle: React.FC;
-    Content: React.FC;
-    Pagination: React.FC<{
-        pageSizeOptions?: number[];
-        className?: string;
-    }>;
-    displayName?: string;
-}
-declare const DataGrid: DataGridComponent;
-
-export { DataGrid, type DataGridDensity, type DataGridProps };
+export { DataGrid } from "./data-grid";
+export type { DataGridProps, DataGridDensity, ColumnDef } from "./data-grid";