@raystack/apsara 0.14.0 → 0.14.2

package/dist/index.css

@@ -1999,6 +1999,7 @@ html[data-theme="dark"] {
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: var(--pd-2);
 }
 
 .datatable-module_toolbar__lO-aI {

package/dist/index.js

@@ -2384,11 +2384,11 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   return target;
 }
 
-var _excluded$e = ["color"];
-var ArrowDownIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+var _excluded$I = ["color"];
+var CalendarIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$I);
 
   return createElement("svg", Object.assign({
     width: "15",
@@ -2399,18 +2399,18 @@ var ArrowDownIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }, props, {
     ref: forwardedRef
   }), createElement("path", {
-    d: "M7.5 2C7.77614 2 8 2.22386 8 2.5L8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.75979 12.9473 7.63261 13 7.5 13C7.36739 13 7.24021 12.9473 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 2.5C7 2.22386 7.22386 2 7.5 2Z",
+    d: "M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z",
     fill: color,
     fillRule: "evenodd",
     clipRule: "evenodd"
   }));
 });
 
-var _excluded$j = ["color"];
-var ArrowUpIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+var _excluded$N = ["color"];
+var CaretDownIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$N);
 
   return createElement("svg", Object.assign({
     width: "15",
@@ -2421,18 +2421,18 @@ var ArrowUpIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }, props, {
     ref: forwardedRef
   }), createElement("path", {
-    d: "M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z",
+    d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
     fill: color,
     fillRule: "evenodd",
     clipRule: "evenodd"
   }));
 });
 
-var _excluded$I = ["color"];
-var CalendarIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+var _excluded$Q = ["color"];
+var CaretSortIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$I);
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$Q);
 
   return createElement("svg", Object.assign({
     width: "15",
@@ -2443,7 +2443,29 @@ var CalendarIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   }, props, {
     ref: forwardedRef
   }), createElement("path", {
-    d: "M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z",
+    d: "M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z",
+    fill: color,
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+});
+
+var _excluded$R = ["color"];
+var CaretUpIcon = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      props = _objectWithoutPropertiesLoose$1(_ref, _excluded$R);
+
+  return createElement("svg", Object.assign({
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props, {
+    ref: forwardedRef
+  }), createElement("path", {
+    d: "M4.18179 8.81819C4.00605 8.64245 4.00605 8.35753 4.18179 8.18179L7.18179 5.18179C7.26618 5.0974 7.38064 5.04999 7.49999 5.04999C7.61933 5.04999 7.73379 5.0974 7.81819 5.18179L10.8182 8.18179C10.9939 8.35753 10.9939 8.64245 10.8182 8.81819C10.6424 8.99392 10.3575 8.99392 10.1818 8.81819L7.49999 6.13638L4.81819 8.81819C4.64245 8.99392 4.35753 8.99392 4.18179 8.81819Z",
     fill: color,
     fillRule: "evenodd",
     clipRule: "evenodd"
@@ -31715,10 +31737,14 @@ function DataTableFilterOptions({ children, ...props }) {
     const { table, filteredColumns, addFilterColumn } = useTable();
     const availableColumns = table
         .getAllColumns()
-        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+        .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.jsx(DropdownMenu.Item, { onSelect: () => addFilterColumn(column.id), children: column.id }, column.id));
+                        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] }));
 }
 
@@ -31989,7 +32015,9 @@ function DataTableFilterChips(props) {
     const { filteredColumns, table, updateColumnCustomFilter } = useTable();
     const tableColumns = table
         .getAllColumns()
-        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide());
+        .filter((column) => typeof column.accessorFn !== "undefined" &&
+        column.getCanHide() &&
+        column.getCanFilter());
     if (!filteredColumns.length)
         return null;
     return (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", className: styles$4.chipWrapper, ...props, children: [filteredColumns.map((filter, index) => {
@@ -32179,7 +32207,7 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
         : elements));
 }
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, ...props }) {
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, loaderRow = 5, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = React__default.useState({});
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -32188,6 +32216,9 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         null;
     const [sorting, setSorting] = React__default.useState([]);
     const [columnFilters, setColumnFilters] = React__default.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("");
@@ -32207,7 +32238,7 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         setTableCustomFilter((old) => ({ ...old, [id]: filterFn }));
     };
     const table = useReactTable({
-        data,
+        data: tableData,
         columns: columnWithCustomFilter,
         globalFilterFn: "auto",
         enableRowSelection: true,
@@ -32249,14 +32280,16 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
             }, 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: {
+                                                                cursor: "pointer",
                                                                 ...(header.column.columnDef?.meta?.style ?? {}),
-                                                            }, children: jsxRuntimeExports$1.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
+                                                            }, onClick: header.column.getToggleSortingHandler(), children: jsxRuntimeExports$1.jsxs(Text, { className: styles$4.head, children: [header.isPlaceholder
                                                                         ? null
-                                                                        : flexRender(header.column.columnDef.header, header.getContext()), {
-                                                                        asc: jsxRuntimeExports$1.jsx(ArrowUpIcon, {}),
-                                                                        desc: jsxRuntimeExports$1.jsx(ArrowDownIcon, {}),
-                                                                    }[header.column.getIsSorted()] ??
-                                                                        null] }) }, `${header.id}_${index}`));
+                                                                        : flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort()
+                                                                        ? {
+                                                                            asc: jsxRuntimeExports$1.jsx(CaretUpIcon, {}),
+                                                                            desc: jsxRuntimeExports$1.jsx(CaretDownIcon, {}),
+                                                                        }[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: {
                                                         ...(cell.column.columnDef?.meta?.style ?? {}),