@raystack/apsara 0.14.1 → 0.14.3

package/dist/index.css

@@ -2033,6 +2033,14 @@ html[data-theme="dark"] {
   flex: 1;
 }
 
+.datatable-module_tRow__GrMHh:hover {
+  background-color: var(--background-base-hover);
+}
+
+.datatable-module_tRowClick__7wzkh:hover {
+  cursor: pointer;
+}
+
 .table-module_table__mqnXB {
   width: 100%;
   font-size: 12px;

package/dist/index.js

@@ -31737,14 +31737,18 @@ function DataTableFilterOptions({ children, ...props }) {
     const { table, filteredColumns, addFilterColumn } = useTable();
     const availableColumns = table
         .getAllColumns()
-        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+        .filter((column) => typeof column.accessorFn !== "undefined" &&
+        column.getCanHide() &&
+        column.getCanFilter())
         .filter((column) => !filteredColumns.includes(column.id));
     return (jsxRuntimeExports$1.jsxs(DropdownMenu, { children: [jsxRuntimeExports$1.jsx(DropdownMenu.Trigger, { asChild: true, children: jsxRuntimeExports$1.jsx(Button$1, { variant: "ghost", ...props, children: children || (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", justify: "center", children: [jsxRuntimeExports$1.jsx(PlusIcon, { width: 12, height: "12" }), " Filter"] })) }) }), availableColumns.length ? (jsxRuntimeExports$1.jsxs(DropdownMenu.Content, { align: "end", className: "w-[150px]", children: [jsxRuntimeExports$1.jsx(DropdownMenu.Label, { children: "Filter column" }), jsxRuntimeExports$1.jsx(DropdownMenu.Separator, {}), availableColumns.map((column) => {
-                        return (jsxRuntimeExports$1.jsx(DropdownMenu.Item, { onSelect: () => addFilterColumn(column.id), children: column.id }, column.id));
+                        const columnHeader = column?.columnDef?.header;
+                        const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
+                        return (jsxRuntimeExports$1.jsx(DropdownMenu.Item, { onSelect: () => addFilterColumn(column.id), children: columnName }, column.id));
                     })] })) : null] }));
 }
 
-var styles$4 = {"wrapper":"datatable-module_wrapper__Sxg2d","datatable":"datatable-module_datatable__z-Th2","table":"datatable-module_table__x2IkY","head":"datatable-module_head__zCfCW","toolbar":"datatable-module_toolbar__lO-aI","chip":"datatable-module_chip__IiwTD","chipWrapper":"datatable-module_chipWrapper__iz69x","filterOperator":"datatable-module_filterOperator__qtDsH","filterText":"datatable-module_filterText__w00L8","flex1":"datatable-module_flex1__fA-kQ"};
+var styles$4 = {"wrapper":"datatable-module_wrapper__Sxg2d","datatable":"datatable-module_datatable__z-Th2","table":"datatable-module_table__x2IkY","head":"datatable-module_head__zCfCW","toolbar":"datatable-module_toolbar__lO-aI","chip":"datatable-module_chip__IiwTD","chipWrapper":"datatable-module_chipWrapper__iz69x","filterOperator":"datatable-module_filterOperator__qtDsH","filterText":"datatable-module_filterText__w00L8","flex1":"datatable-module_flex1__fA-kQ","tRow":"datatable-module_tRow__GrMHh","tRowClick":"datatable-module_tRowClick__7wzkh"};
 
 const columnTypesMap = {
     select: "select",
@@ -32011,7 +32015,9 @@ function DataTableFilterChips(props) {
     const { filteredColumns, table, updateColumnCustomFilter } = useTable();
     const tableColumns = table
         .getAllColumns()
-        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide());
+        .filter((column) => typeof column.accessorFn !== "undefined" &&
+        column.getCanHide() &&
+        column.getCanFilter());
     if (!filteredColumns.length)
         return null;
     return (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", className: styles$4.chipWrapper, ...props, children: [filteredColumns.map((filter, index) => {
@@ -32201,18 +32207,17 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
         : elements));
 }
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, ...props }) {
-    const [tableCustomFilter, setTableCustomFilter] = React__default.useState({});
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, initialState, loaderRow = 5, onRowClick, ...props }) {
+    const [tableCustomFilter, setTableCustomFilter] = useState({});
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
     const footer = convertedChildren.find((child) => child.type === DataTableFooter) || null;
     const detail = convertedChildren.find((child) => child.type === TableDetailContainer) ||
         null;
-    const [sorting, setSorting] = React__default.useState([]);
-    const [columnFilters, setColumnFilters] = React__default.useState([]);
-    const [columnVisibility, setColumnVisibility] = React__default.useState({});
-    const [rowSelection, setRowSelection] = React__default.useState({});
-    const [globalFilter, setGlobalFilter] = React__default.useState("");
+    const [tableState, setTableState] = useState({});
+    const tableData = isLoading
+        ? [...new Array(loaderRow)].map((_, i) => ({ id: i }))
+        : data;
     const { filteredColumns, addFilterColumn, removeFilterColumn, resetColumns } = useTableColumn();
     const columnWithCustomFilter = columns.map((col) => {
         // @ts-ignore;
@@ -32229,42 +32234,36 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         setTableCustomFilter((old) => ({ ...old, [id]: filterFn }));
     };
     const table = useReactTable({
-        data,
+        data: tableData,
         columns: columnWithCustomFilter,
         globalFilterFn: "auto",
         enableRowSelection: true,
         manualPagination: true,
         pageCount: -1,
-        onGlobalFilterChange: setGlobalFilter,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        onColumnVisibilityChange: setColumnVisibility,
-        onRowSelectionChange: setRowSelection,
+        onStateChange: (updater) => setTableState(updater),
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getFacetedRowModel: getFacetedRowModel(),
         getFacetedUniqueValues: getFacetedUniqueValues(),
-        state: {
-            sorting,
-            globalFilter,
-            columnFilters,
-            columnVisibility,
-            rowSelection,
-        },
+        initialState,
+        state: tableState,
     });
-    const tableStyle = table.getRowModel().rows?.length
-        ? { width: "100%" }
-        : { width: "100%", height: "100%" };
+    const tableStyle = {
+        ...(table.getRowModel().rows?.length
+            ? { width: "100%" }
+            : { width: "100%", height: "100%" }),
+        ...{ "border-collapse": "collapse" },
+    };
     return (jsxRuntimeExports$1.jsx(Flex, { direction: "column", justify: "between", className: styles$4.wrapper, children: jsxRuntimeExports$1.jsxs(TableContext.Provider, { value: {
                 table,
-                globalFilter,
+                globalFilter: tableState.globalFilter,
                 filteredColumns,
                 addFilterColumn,
                 removeFilterColumn,
                 resetColumns,
-                onGlobalFilterChange: setGlobalFilter,
+                onGlobalFilterChange: (value) => setTableState((prev) => ({ ...prev, globalFilter: value })),
                 onChange: () => ({}),
                 tableCustomFilter,
                 updateColumnCustomFilter,
@@ -32282,7 +32281,7 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
                                                                         }[header.column.getIsSorted()] ?? jsxRuntimeExports$1.jsx(CaretSortIcon, {})
                                                                         : null] }) }, `${header.id}_${index}`));
                                                     }) }, headerGroup.id)))
-                                                : null }), jsxRuntimeExports$1.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports$1.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell, index) => (jsxRuntimeExports$1.jsx(Table.Cell, { style: {
+                                                : null }), jsxRuntimeExports$1.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports$1.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", onClick: () => onRowClick?.(row.original), className: `${styles$4.tRow} ${onRowClick ? styles$4.tRowClick : ""}`, children: row.getVisibleCells().map((cell, index) => (jsxRuntimeExports$1.jsx(Table.Cell, { style: {
                                                         ...(cell.column.columnDef?.meta?.style ?? {}),
                                                     }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}_${index}`))) }, row.id)))) : (jsxRuntimeExports$1.jsx(Table.Row, { children: jsxRuntimeExports$1.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) })) })] }), detail] })] }), footer] }) }));
 }