@raystack/apsara 0.14.2 → 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

@@ -31748,7 +31748,7 @@ function DataTableFilterOptions({ children, ...props }) {
                     })] })) : 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",
@@ -32207,21 +32207,17 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
         : elements));
 }
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, loaderRow = 5, ...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 [tableState, setTableState] = useState({});
     const tableData = isLoading
         ? [...new Array(loaderRow)].map((_, i) => ({ id: i }))
         : data;
-    const [columnVisibility, setColumnVisibility] = React__default.useState({});
-    const [rowSelection, setRowSelection] = React__default.useState({});
-    const [globalFilter, setGlobalFilter] = React__default.useState("");
     const { filteredColumns, addFilterColumn, removeFilterColumn, resetColumns } = useTableColumn();
     const columnWithCustomFilter = columns.map((col) => {
         // @ts-ignore;
@@ -32244,36 +32240,30 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         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,
@@ -32291,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] }) }));
 }