@raystack/apsara 0.16.1 → 0.17.0

package/dist/index.cjs

@@ -20093,10 +20093,20 @@ function Text({ children, className, size, weight, ...props }) {
     return (jsxRuntimeExports$1.jsx("span", { className: text$1({ size, className, weight }), ...props, children: children }));
 }
 
-var styles$d = {"content":"select-module_content__X0QJ-","menuitem":"select-module_menuitem__DfVEU","separator":"select-module_separator__2UBNd","menugroup":"select-module_menugroup__zJbzr","trigger":"select-module_trigger__1tSaG","triggerIcon":"select-module_triggerIcon__iaoZ3"};
+var styles$d = {"content":"select-module_content__X0QJ-","menuitem":"select-module_menuitem__DfVEU","separator":"select-module_separator__2UBNd","menugroup":"select-module_menugroup__zJbzr","trigger":"select-module_trigger__1tSaG","trigger-sm":"select-module_trigger-sm__rcLow","trigger-md":"select-module_trigger-md__iDsne","triggerIcon":"select-module_triggerIcon__iaoZ3"};
 
-const trigger$1 = cva(styles$d.trigger);
-const SelectTrigger = React__namespace.forwardRef(({ className, children, ...props }, ref) => (jsxRuntimeExports$1.jsxs($cc7e05a45900e73f$export$41fb9f06171c75f4, { ref: ref, className: trigger$1({ className }), ...props, children: [children, jsxRuntimeExports$1.jsx($cc7e05a45900e73f$export$f04a61298a47a40f, { asChild: true, children: jsxRuntimeExports$1.jsx(ChevronDownIcon, { className: styles$d.triggerIcon }) })] })));
+const trigger$1 = cva(styles$d.trigger, {
+    variants: {
+        size: {
+            small: styles$d["trigger-sm"],
+            medium: styles$d["trigger-md"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const SelectTrigger = React__namespace.forwardRef(({ size, className, children, ...props }, ref) => (jsxRuntimeExports$1.jsxs($cc7e05a45900e73f$export$41fb9f06171c75f4, { ref: ref, className: trigger$1({ size, className }), ...props, children: [children, jsxRuntimeExports$1.jsx($cc7e05a45900e73f$export$f04a61298a47a40f, { asChild: true, children: jsxRuntimeExports$1.jsx(ChevronDownIcon, { className: styles$d.triggerIcon }) })] })));
 SelectTrigger.displayName = $cc7e05a45900e73f$export$41fb9f06171c75f4.displayName;
 const content$1 = cva(styles$d.content);
 const SelectContent = React__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => (jsxRuntimeExports$1.jsx($cc7e05a45900e73f$export$602eac185826482c, { children: jsxRuntimeExports$1.jsx($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { ref: ref, className: content$1({ className }), position: position, ...props, children: children }) })));
@@ -31725,21 +31735,21 @@ 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));
                     })] })) : 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","tRow":"datatable-module_tRow__GrMHh","tRowClick":"datatable-module_tRowClick__7wzkh"};
+var styles$4 = {"wrapper":"datatable-module_wrapper__Sxg2d","datatable":"datatable-module_datatable__z-Th2","table":"datatable-module_table__x2IkY","head":"datatable-module_head__zCfCW","header":"datatable-module_header__7-CAd","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",
@@ -32197,7 +32207,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] = React.useState({});
     const convertedChildren = React.Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -32220,6 +32230,11 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
             : col.cell;
         return col;
     });
+    React.useEffect(() => {
+        if (onStateChange) {
+            onStateChange(tableState);
+        }
+    }, [tableState]);
     const updateColumnCustomFilter = (id, filterFn) => {
         setTableCustomFilter((old) => ({ ...old, [id]: filterFn }));
     };
@@ -32257,7 +32272,8 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
                 onChange: () => ({}),
                 tableCustomFilter,
                 updateColumnCustomFilter,
-            }, 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
+                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, { className: styles$4.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: {
                                                                 cursor: "pointer",