@raystack/apsara 0.16.1 → 0.16.2

package/dist/index.css

@@ -731,7 +731,7 @@ html[data-theme="dark"] {
 .dialog-module_overlay__t-jUE {
   position: fixed;
   inset: 0;
-
+  z-index: 49;
   background-color: rgba(0, 0, 0, 0.15);
 }
 

package/dist/index.js

@@ -31705,14 +31705,14 @@ function DataTableClearFilter({ children, ...props }) {
 }
 
 function DataTableFilterOptions({ children, ...props }) {
-    const { table, filteredColumns, addFilterColumn } = useTable();
+    const { table, filteredColumns, addFilterColumn, isLoading } = useTable();
     const availableColumns = table
         .getAllColumns()
         .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.jsxs(DropdownMenu, { children: [jsxRuntimeExports$1.jsx(DropdownMenu.Trigger, { asChild: true, disabled: isLoading, 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) => {
                         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));
@@ -32177,7 +32177,7 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
         : elements));
 }
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, initialState, loaderRow = 5, onRowClick, ...props }) {
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, initialState, loaderRow = 5, onRowClick, onStateChange = () => { }, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = useState({});
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -32200,6 +32200,11 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
             : col.cell;
         return col;
     });
+    useEffect(() => {
+        if (onStateChange) {
+            onStateChange(tableState);
+        }
+    }, [tableState]);
     const updateColumnCustomFilter = (id, filterFn) => {
         setTableCustomFilter((old) => ({ ...old, [id]: filterFn }));
     };
@@ -32237,6 +32242,7 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
                 onChange: () => ({}),
                 tableCustomFilter,
                 updateColumnCustomFilter,
+                isLoading,
             }, children: [jsxRuntimeExports$1.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports$1.jsxs(Flex, { className: styles$4.tableContainer, style: parentStyle, children: [jsxRuntimeExports$1.jsxs(Table, { ...props, style: tableStyle, children: [jsxRuntimeExports$1.jsx(Table.Header, { children: ShouldShowHeader
                                                 ? table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports$1.jsx(Table.Row, { children: headerGroup.headers.map((header, index) => {
                                                         return (jsxRuntimeExports$1.jsx(Table.Head, { style: {