@raystack/apsara 0.14.2 → 0.14.4

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

@@ -31730,7 +31730,7 @@ function DataTableClearFilter({ children, ...props }) {
     return (jsxRuntimeExports$1.jsx(Button$1, { variant: "ghost", onClick: () => {
             table.resetColumnFilters();
             resetColumns();
-        }, style: { width: "100%" }, ...props, children: children || (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", justify: "center", children: ["Clear filters ", jsxRuntimeExports$1.jsx(Cross2Icon, { width: 12, height: "12" })] })) }));
+        }, ...props, children: children || (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", justify: "center", style: { textWrap: "nowrap" }, children: ["Clear filters ", jsxRuntimeExports$1.jsx(Cross2Icon, { width: 12, height: "12" })] })) }));
 }
 
 function DataTableFilterOptions({ children, ...props }) {
@@ -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",
@@ -31946,15 +31946,14 @@ const getFilterValueType = ({ filterOperation, columnType, }) => {
         return filterValueTypeMap.text;
     }
 };
-const FilterValues = ({ columnType = filterValueTypeMap.text, options = [], onValueChange, filterOperation, ...props }) => {
-    const [value, setValue] = useState({
-        value: "",
-        date: new Date(),
-        dateRange: {
-            to: new Date(),
-            from: new Date(),
-        },
-    });
+const FilterValues = ({ column, columnType = filterValueTypeMap.text, options = [], onValueChange, filterOperation, ...props }) => {
+    const [value, setValue] = useState(column?.columnDef?.meta?.defaultValue
+        ? { value: (column?.columnDef.meta).defaultValue }
+        : {
+            value: "",
+            date: new Date(),
+            dateRange: { to: new Date(), from: new Date() },
+        });
     const valueType = getFilterValueType({ filterOperation, columnType });
     useEffect(() => {
         if (onValueChange) {
@@ -32008,7 +32007,7 @@ const FilteredChip = ({ column, updateColumnCustomFilter, }) => {
         setFilterOperation(undefined);
         setFilterValue({});
     }
-    return (jsxRuntimeExports$1.jsxs(Box, { className: styles$4.chip, children: [jsxRuntimeExports$1.jsx(Text, { className: styles$4.filterText, children: columnName }), jsxRuntimeExports$1.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntimeExports$1.jsx(FilterValues, { columnType: filterVariant, options: options, onValueChange: setFilterValue, filterOperation: filterOperation })), jsxRuntimeExports$1.jsx(Flex, { children: jsxRuntimeExports$1.jsx(Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
+    return (jsxRuntimeExports$1.jsxs(Box, { className: styles$4.chip, children: [jsxRuntimeExports$1.jsx(Text, { className: styles$4.filterText, children: columnName }), jsxRuntimeExports$1.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntimeExports$1.jsx(FilterValues, { column: column, columnType: filterVariant, options: options, onValueChange: setFilterValue, filterOperation: filterOperation })), jsxRuntimeExports$1.jsx(Flex, { children: jsxRuntimeExports$1.jsx(Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
 };
 
 function DataTableFilterChips(props) {
@@ -32207,21 +32206,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 +32239,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 +32280,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] }) }));
 }