@raystack/apsara 0.10.9 → 0.11.0

package/dist/index.css

@@ -1454,39 +1454,6 @@
 .switch-module_thumb__b4Y8H[data-state="checked"] {
   transform: translateX(16px);
 }
-.datatable-module_wrapper__Sxg2d {
-  width: 100%;
-  height: 100%;
-}
-
-.datatable-module_datatable__z-Th2 {
-  flex: 1;
-}
-
-.datatable-module_head__zCfCW {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.datatable-module_toolbar__lO-aI {
-  width: 100%;
-  padding: 16px 24px;
-  border-bottom: 1px solid var(--border-base);
-}
-
-.datatable-module_chipWrapper__iz69x {
-  
-}
-
-.datatable-module_chip__IiwTD {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pd-8);
-  border: 1px solid var(--border-base);
-  border-radius: var(--pd-4);
-  padding: var(--pd-4) var(--pd-8);
-}
 .textfield-module_textfield__u4AGg {
   appearance: none;
   box-sizing: border-box;
@@ -1559,11 +1526,46 @@
 .textfield-module_textfield-leading__AE-ld {
   padding-left: 32px;
 }
+.datatable-module_wrapper__Sxg2d {
+  width: 100%;
+  height: 100%;
+}
+
+.datatable-module_datatable__z-Th2 {
+  flex: 1;
+}
+
+.datatable-module_table__x2IkY {
+  height: 100vh;
+  overflow: visible;
+}
+
+.datatable-module_head__zCfCW {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.datatable-module_toolbar__lO-aI {
+  width: 100%;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border-base);
+}
+
+.datatable-module_chip__IiwTD {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pd-8);
+  border: 1px solid var(--border-base);
+  border-radius: var(--pd-4);
+  padding: var(--pd-4) var(--pd-8);
+}
 .table-module_table__mqnXB {
   width: 100%;
   font-size: 12px;
   line-height: 16px;
   caption-side: bottom;
+  overflow: visible;
   color: var(--foreground-base);
 }
 
@@ -1572,27 +1574,29 @@
   color: var(--foreground-muted);
 }
 
+.table-module_header__YGJoz {
+  top: 0px;
+  position: sticky;
+  background: var(--background-base);
+  margin: 0 0 0 0;
+}
+
 .table-module_header__YGJoz tr {
   border-bottom: 1px solid var(--foreground-muted);
 }
 
 .table-module_head__zosk- {
-  height: 3rem;
   color: var(--foreground-muted);
   font-weight: 500;
   text-align: left;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 0.5rem;
   vertical-align: middle;
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.table-module_row__-1ieK {
-}
-
 .table-module_cell__-FP3s {
   font-weight: 500;
-  padding: 1rem;
+  padding: 14px 0.5rem;
   border-bottom: 1px solid var(--border-subtle);
 }
 

package/dist/index.js

@@ -9281,8 +9281,8 @@ function Grid({ children, align, justify, flow, columns, gap, gapX, gapY, classN
 var styles$f = {"image":"image-module_image__KDN-Q"};
 
 const image = cva(styles$f.image);
-function Image({ children, className, ...props }) {
-    return jsxRuntimeExports.jsx("img", { className: image({ className }), ...props });
+function Image({ alt, children, className, ...props }) {
+    return jsxRuntimeExports.jsx("img", { alt: alt, className: image({ className }), ...props });
 }
 
 const InputField = ({ label, children, ...props }) => {
@@ -15290,8 +15290,6 @@ function DataTableClearFilter({ children, ...props }) {
         }, style: { width: "100%" }, ...props, children: children || (jsxRuntimeExports.jsxs(Flex, { gap: "small", align: "center", justify: "center", children: ["Clear filters ", jsxRuntimeExports.jsx(Cross2Icon, { width: 12, height: "12" })] })) }));
 }
 
-var styles$4 = {"wrapper":"datatable-module_wrapper__Sxg2d","datatable":"datatable-module_datatable__z-Th2","head":"datatable-module_head__zCfCW","toolbar":"datatable-module_toolbar__lO-aI","chipWrapper":"datatable-module_chipWrapper__iz69x","chip":"datatable-module_chip__IiwTD"};
-
 function DataTableFilterOptions({ children, ...props }) {
     const { table, filteredColumns, addFilterColumn } = useTable();
     const availableColumns = table
@@ -15303,20 +15301,20 @@ function DataTableFilterOptions({ children, ...props }) {
                     })] })) : null] }));
 }
 
-var styles$3 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-invlid":"textfield-module_textfield-invlid__zo9MF","textfield-valid":"textfield-module_textfield-valid__6rMM9","textfield-leading":"textfield-module_textfield-leading__AE-ld"};
+var styles$4 = {"textfield":"textfield-module_textfield__u4AGg","textfield-sm":"textfield-module_textfield-sm__OKPic","textfield-md":"textfield-module_textfield-md__e2ayW","textfield-invlid":"textfield-module_textfield-invlid__zo9MF","textfield-valid":"textfield-module_textfield-valid__6rMM9","textfield-leading":"textfield-module_textfield-leading__AE-ld"};
 
-const textfield = cva(styles$3.textfield, {
+const textfield = cva(styles$4.textfield, {
     variants: {
         size: {
-            small: styles$3["textfield-sm"],
-            medium: styles$3["textfield-md"],
+            small: styles$4["textfield-sm"],
+            medium: styles$4["textfield-md"],
         },
         state: {
-            invalid: styles$3["textfield-invalid"],
-            valid: styles$3["textfield-valid"],
+            invalid: styles$4["textfield-invalid"],
+            valid: styles$4["textfield-valid"],
         },
         leading: {
-            true: styles$3["textfield-leading"],
+            true: styles$4["textfield-leading"],
         },
     },
     defaultVariants: {
@@ -15328,6 +15326,8 @@ const TextField = ({ leading, className, src, size, state, style, ...props }) =>
 };
 TextField.displayName = "TextField";
 
+var styles$3 = {"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"};
+
 const FilteredChip = ({ column }) => {
     const { table, removeFilterColumn } = useTable();
     const { filterVariant } = column?.columnDef;
@@ -15361,7 +15361,7 @@ const FilteredChip = ({ column }) => {
             }
         }
     };
-    return (jsxRuntimeExports.jsxs(Box, { className: styles$4.chip, children: [jsxRuntimeExports.jsx(Text, { children: column.id }), jsxRuntimeExports.jsx(Text, { children: "is" }), renderInputs(), jsxRuntimeExports.jsx(Flex, { children: jsxRuntimeExports.jsx(Cross1Icon, { height: "12", width: "12", onClick: () => {
+    return (jsxRuntimeExports.jsxs(Box, { className: styles$3.chip, children: [jsxRuntimeExports.jsx(Text, { children: column.id }), jsxRuntimeExports.jsx(Text, { children: "is" }), renderInputs(), jsxRuntimeExports.jsx(Flex, { children: jsxRuntimeExports.jsx(Cross1Icon, { height: "12", width: "12", onClick: () => {
                         column.setFilterValue(undefined);
                         removeFilterColumn(column.id);
                     } }) })] }));
@@ -15374,14 +15374,14 @@ function DataTableFilterChips(props) {
         .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide());
     if (!filteredColumns.length)
         return null;
-    return (jsxRuntimeExports.jsxs(Flex, { gap: "small", align: "center", className: styles$4.chipWrapper, ...props, children: [filteredColumns.map((filter, index) => {
+    return (jsxRuntimeExports.jsxs(Flex, { gap: "small", align: "center", className: styles$3.chipWrapper, ...props, children: [filteredColumns.map((filter, index) => {
                 const filteredColumn = table.getColumn(filter);
-                return jsxRuntimeExports.jsx(FilteredChip, { column: filteredColumn });
+                return jsxRuntimeExports.jsx(FilteredChip, { column: filteredColumn }, index);
             }), filteredColumns.length < tableColumns.length && (jsxRuntimeExports.jsx(DataTableFilterOptions, { variant: "ghost", style: { border: "none", background: "none" }, children: jsxRuntimeExports.jsx(PlusIcon, { width: 16, height: 16 }) }))] }));
 }
 
 function DataTableFooter({ children, }) {
-    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$4.toolbar, children: children }));
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$3.toolbar, children: children }));
 }
 
 function DataTableGloabalSearch(props) {
@@ -15394,7 +15394,7 @@ function DataTableGloabalSearch(props) {
 }
 
 function DataTableToolbar({ children, ...props }) {
-    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$4.toolbar, ...props, children: children }));
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", className: styles$3.toolbar, ...props, children: children }));
 }
 
 function DataTableViewOptions({ children, ...props }) {
@@ -15434,7 +15434,7 @@ const useTableColumn = () => {
     };
 };
 
-var styles$2 = {"table":"table-module_table__mqnXB","caption":"table-module_caption__xw-5e","header":"table-module_header__YGJoz","head":"table-module_head__zosk-","row":"table-module_row__-1ieK","cell":"table-module_cell__-FP3s"};
+var styles$2 = {"table":"table-module_table__mqnXB","caption":"table-module_caption__xw-5e","header":"table-module_header__YGJoz","head":"table-module_head__zosk-","cell":"table-module_cell__-FP3s"};
 
 const table = cva(styles$2.table);
 const TableRoot = React.forwardRef(({ className, ...props }, ref) => (jsxRuntimeExports.jsx("div", { style: { width: "100%", overflow: "auto" }, children: jsxRuntimeExports.jsx("table", { ref: ref, className: table({ className }), ...props }) })));
@@ -15470,11 +15470,12 @@ const Table = Object.assign(TableRoot, {
     Caption: TableCaption,
 });
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, ...props }) {
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, ShouldShowHeader = true, ...props }) {
     const convertedChildren = Children.toArray(children);
-    const header = convertedChildren.find((child) => child.type === DataTableToolbar) || jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
-    const footer = convertedChildren.find((child) => child.type === DataTableFooter) || jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
-    const detail = convertedChildren.find((child) => child.type === TableDetailContainer) || jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+    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 [columnVisibility, setColumnVisibility] = React__default.useState({});
@@ -15486,6 +15487,7 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, ...pr
         columns,
         globalFilterFn: "auto",
         enableRowSelection: true,
+        manualPagination: true,
         onGlobalFilterChange: setGlobalFilter,
         onSortingChange: setSorting,
         onColumnFiltersChange: setColumnFilters,
@@ -15505,7 +15507,8 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, ...pr
             rowSelection,
         },
     });
-    return (jsxRuntimeExports.jsx(Flex, { direction: "column", justify: "between", className: styles$4.wrapper, children: jsxRuntimeExports.jsxs(TableContext.Provider, { value: {
+    console.log(table.getRowModel().rows?.length);
+    return (jsxRuntimeExports.jsx(Flex, { direction: "column", justify: "between", className: styles$3.wrapper, children: jsxRuntimeExports.jsxs(TableContext.Provider, { value: {
                 table,
                 globalFilter,
                 filteredColumns,
@@ -15514,16 +15517,19 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, ...pr
                 resetColumns,
                 onGlobalFilterChange: setGlobalFilter,
                 onChange: () => ({}),
-            }, children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$4.datatable, children: [header, jsxRuntimeExports.jsxs(Flex, { style: parentStyle, children: [jsxRuntimeExports.jsxs(Table, { ...props, children: [jsxRuntimeExports.jsx(Table.Header, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup.headers.map((header) => {
-                                                    return (jsxRuntimeExports.jsx(Table.Head, { style: {
-                                                            ...(header.column.columnDef?.meta?.style ?? {}),
-                                                        }, children: jsxRuntimeExports.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
-                                                                    ? null
-                                                                    : flexRender(header.column.columnDef.header, header.getContext()), {
-                                                                    asc: jsxRuntimeExports.jsx(ArrowUpIcon, {}),
-                                                                    desc: jsxRuntimeExports.jsx(ArrowDownIcon, {}),
-                                                                }[header.column.getIsSorted()] ?? null] }) }, header.id));
-                                                }) }, headerGroup.id))) }), jsxRuntimeExports.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsxRuntimeExports.jsx(Table.Cell, { style: {
+            }, children: [jsxRuntimeExports.jsxs(Flex, { direction: "column", className: styles$3.datatable, children: [header, jsxRuntimeExports.jsxs(Flex, { className: styles$3.tableContainer, style: parentStyle, children: [jsxRuntimeExports.jsxs(Table, { ...props, children: [jsxRuntimeExports.jsx(Table.Header, { children: ShouldShowHeader
+                                                ? table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports.jsx(Table.Row, { children: headerGroup.headers.map((header) => {
+                                                        return (jsxRuntimeExports.jsx(Table.Head, { style: {
+                                                                ...(header.column.columnDef?.meta?.style ?? {}),
+                                                            }, children: jsxRuntimeExports.jsxs(Text, { className: styles$3.head, children: [header.isPlaceholder
+                                                                        ? null
+                                                                        : flexRender(header.column.columnDef.header, header.getContext()), {
+                                                                        asc: jsxRuntimeExports.jsx(ArrowUpIcon, {}),
+                                                                        desc: jsxRuntimeExports.jsx(ArrowDownIcon, {}),
+                                                                    }[header.column.getIsSorted()] ??
+                                                                        null] }) }, header.id));
+                                                    }) }, headerGroup.id)))
+                                                : null }), jsxRuntimeExports.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsxRuntimeExports.jsx(Table.Cell, { style: {
                                                         ...(cell.column.columnDef?.meta?.style ?? {}),
                                                     }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) })) })] }), detail] })] }), footer] }) }));
 }