@raystack/apsara 0.16.1 → 0.17.0

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);
 }
 
@@ -1449,9 +1449,9 @@ html[data-theme="dark"] {
   border: none;
 
   color: var(--foreground-base);
-  padding: var(--pd-8);
   background-color: var(--background-base);
   font-size: 12px;
+
   line-height: 16px;
   border-radius: var(--br-4);
   outline: 0.5px solid var(--border-base);
@@ -1461,6 +1461,14 @@ html[data-theme="dark"] {
   user-select: none;
 }
 
+.select-module_trigger-sm__rcLow {
+  padding: var(--pd-4);
+}
+
+.select-module_trigger-md__iDsne {
+  padding: var(--pd-8);
+}
+
 .select-module_trigger__1tSaG:hover {
   cursor: pointer;
 }
@@ -2011,6 +2019,10 @@ html[data-theme="dark"] {
   gap: var(--pd-2);
 }
 
+.datatable-module_header__7-CAd {
+  z-index: 1;
+}
+
 .datatable-module_toolbar__lO-aI {
   width: 100%;
   padding: 0 !important;

package/dist/index.js

@@ -20073,10 +20073,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.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.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.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 }) })));
@@ -31705,21 +31715,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",
@@ -32177,7 +32187,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 +32210,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,7 +32252,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",