@zentauri-ui/zentauri-components 2.1.6 → 2.1.8

package/dist/ui/data-table.mjs

@@ -0,0 +1,611 @@
+"use client";
+import { useTableSort } from '../chunk-W6DO36XD.mjs';
+import { useVirtualList } from '../chunk-QKO5DA4N.mjs';
+import { useTableFilter } from '../chunk-ZOHCADDL.mjs';
+import '../chunk-TDK5TVJE.mjs';
+import { TableBase, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../chunk-BYXFSXNG.mjs';
+import { Pagination } from '../chunk-D7ZTSAA6.mjs';
+import { usePagination } from '../chunk-YNBJAFI2.mjs';
+import { Input } from '../chunk-LHBJD57K.mjs';
+import '../chunk-O22T5X4G.mjs';
+import '../chunk-VBNW2B4D.mjs';
+import { Button } from '../chunk-OWVQVAOY.mjs';
+import '../chunk-4PAHLHYF.mjs';
+import { Checkbox } from '../chunk-CYKSS5S5.mjs';
+import '../chunk-ILCT3P7D.mjs';
+import { zuiDataTableRootBase, zuiDataTableToolbarBase, zuiDataTableToolbarGroupBase, zuiDataTableColumnPanelBase, zuiDataTableStatusBase, zuiDataTableStateCellBase, zuiDataTableVirtualScrollBase } from '../chunk-UVP3MUBU.mjs';
+import '../chunk-2NQKFH26.mjs';
+import '../chunk-XY3TKIIH.mjs';
+import '../chunk-FX5KR2GP.mjs';
+import '../chunk-ZBAKTM2R.mjs';
+import '../chunk-4ZBMDWWY.mjs';
+import '../chunk-YH6MOKHR.mjs';
+import '../chunk-T4ZLTKV2.mjs';
+import '../chunk-PUSCPBT2.mjs';
+import '../chunk-523VQLCW.mjs';
+import '../chunk-3VW4HMJT.mjs';
+import '../chunk-LRYKMXKI.mjs';
+import '../chunk-XFJIX2YP.mjs';
+import '../chunk-4WG3VNVL.mjs';
+import '../chunk-YPTHTFVF.mjs';
+import '../chunk-JEDMUBYI.mjs';
+import '../chunk-EJ3UMMCS.mjs';
+import '../chunk-EE53BIXR.mjs';
+import '../chunk-YXU2MJMT.mjs';
+import '../chunk-3IE4IELX.mjs';
+import '../chunk-BUEI4RMR.mjs';
+import '../chunk-5AOVTY2X.mjs';
+import '../chunk-SS3T3BUL.mjs';
+import '../chunk-SCWQSQBJ.mjs';
+import '../chunk-ZPGYR2UP.mjs';
+import '../chunk-MBEQ4GQ7.mjs';
+import '../chunk-34LHS26H.mjs';
+import '../chunk-YKTANA3H.mjs';
+import '../chunk-ENYZGL4R.mjs';
+import '../chunk-2VPXQ2LA.mjs';
+import '../chunk-GUB3RSPR.mjs';
+import '../chunk-6ERBVFDA.mjs';
+import '../chunk-DOA4ESKS.mjs';
+import '../chunk-QX6PPTWL.mjs';
+import '../chunk-U64ISRUX.mjs';
+import '../chunk-TKAOHMVA.mjs';
+import '../chunk-HFQJRAG7.mjs';
+import '../chunk-NIVJFG5Z.mjs';
+import '../chunk-COCPCZMR.mjs';
+import '../chunk-ZJWOSRAS.mjs';
+import '../chunk-JOLSS7UY.mjs';
+import '../chunk-NGZTAVQO.mjs';
+import { cn } from '../chunk-4D54YOL6.mjs';
+import '../chunk-J5LGTIGS.mjs';
+import { useMemo, useId, useState, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var dataTableRootVariants = cva(zuiDataTableRootBase);
+var dataTableToolbarVariants = cva(zuiDataTableToolbarBase);
+var dataTableToolbarGroupVariants = cva(zuiDataTableToolbarGroupBase);
+var dataTableColumnPanelVariants = cva(zuiDataTableColumnPanelBase);
+var dataTableStatusVariants = cva(zuiDataTableStatusBase);
+var dataTableStateCellVariants = cva(zuiDataTableStateCellBase);
+var dataTableVirtualScrollVariants = cva(
+  zuiDataTableVirtualScrollBase
+);
+var defaultLoadingContent = "Loading data";
+var defaultEmptyContent = "No results found";
+var globalFilterKey = "__zui_global_filter__";
+function getAccessorValue(row, column) {
+  if (typeof column.accessor === "function") {
+    return column.accessor(row);
+  }
+  if (column.accessor && row && typeof row === "object") {
+    return row[column.accessor];
+  }
+  if (row && typeof row === "object" && column.id in row) {
+    return row[column.id];
+  }
+  return void 0;
+}
+function normalizeComparable(value) {
+  if (value instanceof Date) {
+    return value.getTime();
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "boolean") {
+    return value ? 1 : 0;
+  }
+  return value == null ? "" : String(value).toLowerCase();
+}
+function compareValues(left, right) {
+  const normalizedLeft = normalizeComparable(left);
+  const normalizedRight = normalizeComparable(right);
+  if (typeof normalizedLeft === "number" && typeof normalizedRight === "number") {
+    return normalizedLeft - normalizedRight;
+  }
+  return String(normalizedLeft).localeCompare(String(normalizedRight));
+}
+function resolveSearchOptions(search) {
+  if (!search) {
+    return null;
+  }
+  if (search === true) {
+    return {};
+  }
+  return search;
+}
+function validateSearchOptions(searchOptions) {
+  if (searchOptions?.filterColumnIds && searchOptions.filterColumnIds.length === 0) {
+    console.warn(
+      "DataTable search.filterColumnIds is empty. It should include at least one column id."
+    );
+  }
+}
+function isSelected(selectedRowIds, rowId) {
+  return selectedRowIds.includes(rowId);
+}
+function toggleId(ids, id, checked) {
+  if (checked) {
+    return ids.includes(id) ? [...ids] : [...ids, id];
+  }
+  return ids.filter((item) => item !== id);
+}
+function textAlignClass(textAlign) {
+  if (textAlign === "center") {
+    return "text-center";
+  }
+  if (textAlign === "right") {
+    return "text-right";
+  }
+  return void 0;
+}
+function paginationAppearanceFor(appearance) {
+  if (appearance === "striped" || appearance === "bordered" || appearance === "ghost") {
+    return "default";
+  }
+  return appearance;
+}
+function uniqueVisibleColumnIds(columns, ids) {
+  const columnIds = new Set(columns.map((column) => column.id));
+  const initialIds = ids ?? columns.filter((column) => column.visible !== false).map((column) => column.id);
+  return initialIds.filter((id, index) => {
+    return columnIds.has(id) && initialIds.indexOf(id) === index;
+  });
+}
+function DataTableBase(props) {
+  const {
+    className,
+    columns,
+    data,
+    getRowId,
+    caption,
+    tableClassName,
+    tableScrollAreaAriaLabel,
+    appearance = "default",
+    size = "md",
+    stickyHeader,
+    textAlign,
+    search,
+    sortKey,
+    defaultSortKey,
+    sortDirection,
+    defaultSortDirection = "none",
+    onSortChange,
+    enableRowSelection = false,
+    selectedRowIds,
+    defaultSelectedRowIds = [],
+    onRowSelectionChange,
+    enableColumnVisibility = false,
+    visibleColumnIds,
+    defaultVisibleColumnIds,
+    onColumnVisibilityChange,
+    bulkActions = [],
+    pagination,
+    virtualization,
+    showRowCount = true,
+    loading = false,
+    loadingContent = defaultLoadingContent,
+    emptyContent = defaultEmptyContent,
+    ref,
+    "aria-label": ariaLabel = "Data table",
+    ...rest
+  } = props;
+  const searchOptions = resolveSearchOptions(search);
+  validateSearchOptions(searchOptions);
+  const keyedData = useMemo(
+    () => data.map((row, index) => ({
+      row,
+      id: getRowId ? getRowId(row, index) : String(index)
+    })),
+    [data, getRowId]
+  );
+  const resolvedAppearance = appearance ?? "default";
+  const resolvedSize = size ?? "md";
+  const resolvedPaginationAppearance = paginationAppearanceFor(resolvedAppearance);
+  const columnPanelId = useId();
+  const [columnPanelOpen, setColumnPanelOpen] = useState(false);
+  const [internalSelectedRowIds, setInternalSelectedRowIds] = useState(() => [
+    ...defaultSelectedRowIds
+  ]);
+  const selectedIds = useMemo(
+    () => selectedRowIds ? [...selectedRowIds] : internalSelectedRowIds,
+    [internalSelectedRowIds, selectedRowIds]
+  );
+  const isSelectionControlled = selectedRowIds !== void 0;
+  const [internalVisibleColumnIds, setInternalVisibleColumnIds] = useState(() => uniqueVisibleColumnIds(columns, defaultVisibleColumnIds));
+  const currentVisibleColumnIds = visibleColumnIds ? uniqueVisibleColumnIds(columns, visibleColumnIds) : uniqueVisibleColumnIds(columns, internalVisibleColumnIds);
+  const isVisibilityControlled = visibleColumnIds !== void 0;
+  const visibleColumns = useMemo(
+    () => columns.filter((column) => currentVisibleColumnIds.includes(column.id)),
+    [columns, currentVisibleColumnIds]
+  );
+  const [internalSearchValue, setInternalSearchValue] = useState(
+    () => searchOptions?.defaultValue ?? ""
+  );
+  const searchValue = searchOptions?.value ?? internalSearchValue;
+  const isSearchControlled = searchOptions?.value !== void 0;
+  const searchableColumns = useMemo(() => {
+    const filterColumnIds = searchOptions?.filterColumnIds;
+    const hasFilterColumns = Boolean(
+      filterColumnIds && filterColumnIds.length > 0
+    );
+    return visibleColumns.filter((column) => {
+      if (hasFilterColumns && !filterColumnIds?.includes(column.id)) {
+        return false;
+      }
+      return column.filterable !== false;
+    });
+  }, [searchOptions?.filterColumnIds, visibleColumns]);
+  const filterState = searchValue ? { [globalFilterKey]: searchValue } : void 0;
+  const { filteredData } = useTableFilter({
+    data: keyedData,
+    filters: filterState,
+    filterPredicate: ({ row }, filterValue) => {
+      const query = filterValue.trim().toLowerCase();
+      if (!query) {
+        return true;
+      }
+      return searchableColumns.some((column) => {
+        const value = column.filterValue ? column.filterValue(row) : getAccessorValue(row, column);
+        return String(value ?? "").toLowerCase().includes(query);
+      });
+    }
+  });
+  const tableSort = useTableSort({
+    sortKey,
+    defaultSortKey,
+    sortDirection,
+    defaultSortDirection,
+    onSortChange
+  });
+  const sortedData = useMemo(() => {
+    if (!tableSort.sortKey || tableSort.sortDirection === "none") {
+      return filteredData;
+    }
+    const sortedColumn = columns.find(
+      (column) => column.id === tableSort.sortKey
+    );
+    if (!sortedColumn || !sortedColumn.sortable) {
+      return filteredData;
+    }
+    const direction = tableSort.sortDirection === "ascending" ? 1 : -1;
+    return [...filteredData].sort((left, right) => {
+      const leftValue = sortedColumn.sortValue ? sortedColumn.sortValue(left.row) : getAccessorValue(left.row, sortedColumn);
+      const rightValue = sortedColumn.sortValue ? sortedColumn.sortValue(right.row) : getAccessorValue(right.row, sortedColumn);
+      return compareValues(leftValue, rightValue) * direction;
+    });
+  }, [columns, filteredData, tableSort.sortDirection, tableSort.sortKey]);
+  const paginationOptions = pagination && pagination !== true ? pagination : void 0;
+  const paginationEnabled = Boolean(pagination);
+  const pageSize = Math.max(1, paginationOptions?.pageSize ?? 10);
+  const pageCount = paginationEnabled ? Math.ceil(sortedData.length / pageSize) : 1;
+  const paginationState = usePagination({
+    pageCount,
+    page: paginationOptions?.page,
+    defaultPage: paginationOptions?.defaultPage,
+    siblingCount: paginationOptions?.siblingCount,
+    boundaryCount: paginationOptions?.boundaryCount,
+    onPageChange: paginationOptions?.onPageChange
+  });
+  const processedRows = paginationEnabled ? sortedData.slice(
+    (paginationState.currentPage - 1) * pageSize,
+    paginationState.currentPage * pageSize
+  ) : sortedData;
+  const virtualizationEnabled = Boolean(virtualization?.enabled) && processedRows.length > 0;
+  const virtualList = useVirtualList({
+    itemCount: processedRows.length,
+    itemHeight: virtualization?.rowHeight ?? 48,
+    overscan: virtualization?.overscan
+  });
+  const renderedRows = virtualizationEnabled ? virtualList.virtualItems.map((item) => ({
+    entry: processedRows[item.index],
+    index: item.index,
+    start: item.start
+  })) : processedRows.map((entry, index) => ({ entry, index, start: 0 }));
+  const virtualOffset = virtualizationEnabled ? virtualList.virtualItems[0]?.start ?? 0 : 0;
+  const selectableRows = useMemo(
+    () => processedRows.map((entry) => ({
+      row: entry.row,
+      id: entry.id
+    })),
+    [processedRows]
+  );
+  const selectedRows = useMemo(
+    () => keyedData.filter((entry) => isSelected(selectedIds, entry.id)).map((entry) => entry.row),
+    [keyedData, selectedIds]
+  );
+  const allVisibleSelected = selectableRows.length > 0 && selectableRows.every((item) => isSelected(selectedIds, item.id));
+  const someVisibleSelected = selectableRows.some((item) => isSelected(selectedIds, item.id)) && !allVisibleSelected;
+  const setSelectedIds = useCallback(
+    (nextIds) => {
+      if (!isSelectionControlled) {
+        setInternalSelectedRowIds(nextIds);
+      }
+      const nextRows = keyedData.filter((entry) => nextIds.includes(entry.id)).map((entry) => entry.row);
+      onRowSelectionChange?.(nextIds, nextRows);
+    },
+    [keyedData, isSelectionControlled, onRowSelectionChange]
+  );
+  const setColumnVisible = useCallback(
+    (columnId, checked) => {
+      const nextIds = checked ? [...currentVisibleColumnIds, columnId] : currentVisibleColumnIds.filter((id) => id !== columnId);
+      const normalized = uniqueVisibleColumnIds(columns, nextIds);
+      if (!isVisibilityControlled) {
+        setInternalVisibleColumnIds(normalized);
+      }
+      onColumnVisibilityChange?.(normalized);
+    },
+    [
+      columns,
+      currentVisibleColumnIds,
+      isVisibilityControlled,
+      onColumnVisibilityChange
+    ]
+  );
+  const handleSearchChange = useCallback(
+    (value) => {
+      if (!isSearchControlled) {
+        setInternalSearchValue(value);
+      }
+      searchOptions?.onValueChange?.(value);
+    },
+    [isSearchControlled, searchOptions]
+  );
+  const headerColSpan = visibleColumns.length + (enableRowSelection ? 1 : 0) || 1;
+  const renderStateRow = (content) => /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      colSpan: headerColSpan,
+      className: dataTableStateCellVariants(),
+      children: content
+    }
+  ) });
+  const renderRow = (entry, rowIndex) => {
+    const { row, id: rowId } = entry;
+    const rowSelected = isSelected(selectedIds, rowId);
+    const labelColumn = visibleColumns[0] ?? columns[0];
+    const rowSelectionLabel = labelColumn ? String(getAccessorValue(row, labelColumn) ?? rowId) : rowId;
+    return /* @__PURE__ */ jsxs(TableRow, { "data-state": rowSelected ? "selected" : void 0, children: [
+      enableRowSelection ? /* @__PURE__ */ jsx(TableCell, { className: "w-10", children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          "aria-label": `Select ${rowSelectionLabel}`,
+          checked: rowSelected,
+          onCheckedChange: (checked) => {
+            setSelectedIds(toggleId(selectedIds, rowId, checked));
+          }
+        }
+      ) }) : null,
+      visibleColumns.map((column, columnIndex) => {
+        const value = getAccessorValue(row, column);
+        const content = column.cell ? column.cell({ row, value, column, rowIndex }) : String(value ?? "");
+        const isRowHeader = columnIndex === 0;
+        return /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            scope: isRowHeader ? "row" : void 0,
+            className: cn(
+              textAlignClass(column.textAlign),
+              column.className,
+              column.cellClassName
+            ),
+            ...column.cellProps,
+            children: content
+          },
+          column.id
+        );
+      })
+    ] }, rowId);
+  };
+  const tableElement = /* @__PURE__ */ jsxs(
+    TableBase,
+    {
+      "aria-label": ariaLabel,
+      appearance: resolvedAppearance,
+      size: resolvedSize,
+      stickyHeader,
+      textAlign,
+      scrollAreaAriaLabel: tableScrollAreaAriaLabel,
+      className: tableClassName,
+      children: [
+        caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          enableRowSelection ? /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              "aria-label": "Select all rows",
+              checked: allVisibleSelected,
+              indeterminate: someVisibleSelected,
+              onCheckedChange: (checked) => {
+                const visibleIds = selectableRows.map((item) => item.id);
+                const nextIds = checked ? [.../* @__PURE__ */ new Set([...selectedIds, ...visibleIds])] : selectedIds.filter((id) => !visibleIds.includes(id));
+                setSelectedIds(nextIds);
+              }
+            }
+          ) }) : null,
+          visibleColumns.map((column) => {
+            const header = typeof column.header === "function" ? column.header({ column }) : column.header;
+            return /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                className: cn(
+                  textAlignClass(column.textAlign),
+                  column.className,
+                  column.headerClassName
+                ),
+                ...column.sortable ? tableSort.getSortProps(column.id) : {},
+                ...column.headerProps,
+                children: header
+              },
+              column.id
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: loading ? renderStateRow(loadingContent) : renderedRows.length === 0 ? renderStateRow(emptyContent) : renderedRows.map(({ entry, index }) => renderRow(entry, index)) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      "data-slot": "data-table",
+      className: cn(dataTableRootVariants(), className),
+      ...rest,
+      children: [
+        searchOptions || enableColumnVisibility || bulkActions.length > 0 ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "data-table-toolbar",
+            className: dataTableToolbarVariants(),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "data-table-toolbar-primary",
+                  className: dataTableToolbarGroupVariants(),
+                  children: [
+                    searchOptions ? /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        as: "input",
+                        type: "search",
+                        "aria-label": searchOptions.label ?? "Search table",
+                        placeholder: searchOptions.placeholder ?? "Search table",
+                        value: searchValue,
+                        onChange: (event) => handleSearchChange(event.currentTarget.value),
+                        className: "min-w-56"
+                      }
+                    ) : null,
+                    selectedRows.length > 0 ? /* @__PURE__ */ jsxs("span", { className: dataTableStatusVariants(), "aria-live": "polite", children: [
+                      selectedRows.length,
+                      " selected"
+                    ] }) : null
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "data-table-toolbar-actions",
+                  className: dataTableToolbarGroupVariants(),
+                  children: [
+                    bulkActions.map((action, index) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        appearance: "outline",
+                        size: "sm",
+                        disabled: action.disabled || selectedRows.length === 0,
+                        onClick: () => action.onSelect(selectedRows),
+                        children: action.label
+                      },
+                      index
+                    )),
+                    enableColumnVisibility ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          appearance: "outline",
+                          size: "sm",
+                          "aria-expanded": columnPanelOpen,
+                          "aria-controls": columnPanelId,
+                          onClick: () => setColumnPanelOpen((open) => !open),
+                          children: "Columns"
+                        }
+                      ),
+                      columnPanelOpen ? /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          id: columnPanelId,
+                          "data-slot": "data-table-column-panel",
+                          className: dataTableColumnPanelVariants(),
+                          children: columns.map((column) => {
+                            const canHide = column.enableHiding !== false;
+                            return /* @__PURE__ */ jsxs(
+                              Checkbox,
+                              {
+                                checked: currentVisibleColumnIds.includes(column.id),
+                                disabled: !canHide,
+                                onCheckedChange: (checked) => setColumnVisible(column.id, checked),
+                                children: [
+                                  String(
+                                    typeof column.header === "function" ? column.id : column.header
+                                  ),
+                                  " ",
+                                  "column"
+                                ]
+                              },
+                              column.id
+                            );
+                          })
+                        }
+                      ) : null
+                    ] }) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null,
+        virtualizationEnabled ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: virtualList.setContainerRef,
+            "data-slot": "data-table-virtual-scroll",
+            className: dataTableVirtualScrollVariants(),
+            style: { maxHeight: virtualization?.height },
+            children: /* @__PURE__ */ jsx("div", { style: { minHeight: virtualList.totalHeight }, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "data-table-virtual-offset",
+                style: { transform: `translateY(${virtualOffset}px)` },
+                children: tableElement
+              }
+            ) })
+          }
+        ) : tableElement,
+        paginationEnabled && pageCount > 1 ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-wrap items-center gap-3",
+              showRowCount ? "justify-between" : "justify-end"
+            ),
+            children: [
+              showRowCount ? /* @__PURE__ */ jsxs("span", { className: dataTableStatusVariants(), children: [
+                "Showing ",
+                processedRows.length,
+                " of ",
+                sortedData.length
+              ] }) : null,
+              /* @__PURE__ */ jsx(
+                Pagination,
+                {
+                  appearance: resolvedPaginationAppearance,
+                  size: resolvedSize,
+                  pageCount,
+                  page: paginationState.currentPage,
+                  siblingCount: paginationOptions?.siblingCount,
+                  boundaryCount: paginationOptions?.boundaryCount,
+                  onPageChange: paginationState.setPage,
+                  className: "w-auto"
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+DataTableBase.displayName = "DataTable";
+function DataTable(props) {
+  return /* @__PURE__ */ jsx(DataTableBase, { ...props });
+}
+DataTable.displayName = "DataTable";
+
+export { DataTable, dataTableColumnPanelVariants, dataTableRootVariants, dataTableStateCellVariants, dataTableStatusVariants, dataTableToolbarGroupVariants, dataTableToolbarVariants, dataTableVirtualScrollVariants };
+//# sourceMappingURL=data-table.mjs.map
+//# sourceMappingURL=data-table.mjs.map