@raystack/apsara 0.12.0 → 0.13.0

package/dist/index.css

@@ -1993,6 +1993,10 @@ html[data-theme="dark"] {
   border-top: 1px solid var(--border-base);
 }
 
+.datatable-module_filterOperator__qtDsH {
+  min-width: fit-content;
+}
+
 .table-module_table__mqnXB {
   width: 100%;
   font-size: 12px;

package/dist/index.js

@@ -31632,49 +31632,188 @@ const TextField = forwardRef(({ leading, className, src, size, state, style, ...
 });
 TextField.displayName = "TextField";
 
-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"};
+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"};
 
-const FilteredChip = ({ column }) => {
+const columnTypesMap = {
+    select: "select",
+    number: "number",
+    text: "text",
+};
+const filterValueTypeMap = {
+    select: "select",
+    text: "text",
+};
+
+const operationsOptions = {
+    [columnTypesMap.select]: [
+        {
+            label: "is",
+            value: "is",
+            fn: (row, columnId, filterValue) => {
+                return row.getValue(columnId) === filterValue.value;
+            },
+        },
+        {
+            label: "is not",
+            value: "is not",
+            fn: (row, columnId, filterValue) => {
+                return row.getValue(columnId) !== filterValue.value;
+            },
+        },
+    ],
+    [columnTypesMap.number]: [
+        {
+            label: "=",
+            value: "=",
+            fn: (row, columnId, filterValue) => {
+                return Number(row.getValue(columnId)) === Number(filterValue.value);
+            },
+        },
+        {
+            label: "!=",
+            value: "!=",
+            fn: (row, columnId, filterValue) => {
+                return Number(row.getValue(columnId)) !== Number(filterValue.value);
+            },
+        },
+        {
+            label: ">",
+            value: ">",
+            fn: (row, columnId, filterValue) => {
+                return Number(row.getValue(columnId)) > Number(filterValue.value);
+            },
+        },
+        {
+            label: ">=",
+            value: ">=",
+            fn: (row, columnId, filterValue) => {
+                return Number(row.getValue(columnId)) >= Number(filterValue.value);
+            },
+        },
+        {
+            label: "<",
+            value: "<",
+            fn: (row, columnId, filterValue) => {
+                return Number(row.getValue(columnId)) < Number(filterValue.value);
+            },
+        },
+        {
+            label: "<=",
+            value: "<=",
+            fn: (row, columnId, filterValue) => {
+                return Number(row.getValue(columnId)) <= Number(filterValue.value);
+            },
+        },
+    ],
+    [columnTypesMap.text]: [
+        {
+            label: "contains",
+            value: "contains",
+            fn: (row, columnId, filterValue) => {
+                const columnValue = row.getValue(columnId).toLowerCase();
+                const filterStr = filterValue.value.toLowerCase();
+                return columnValue.includes(filterStr);
+            },
+        },
+        {
+            label: "does not contains",
+            value: "does not contains",
+            fn: (row, columnId, filterValue) => {
+                const columnValue = row.getValue(columnId).toLowerCase();
+                const filterStr = filterValue.value.toLowerCase();
+                return !columnValue.includes(filterStr);
+            },
+        },
+        {
+            label: "starts with",
+            value: "starts with",
+            fn: (row, columnId, filterValue) => {
+                const columnValue = row.getValue(columnId).toLowerCase();
+                const filterStr = filterValue.value.toLowerCase();
+                return columnValue.startsWith(filterStr);
+            },
+        },
+        {
+            label: "ends with",
+            value: "ends with",
+            fn: (row, columnId, filterValue) => {
+                const columnValue = row.getValue(columnId).toLowerCase();
+                const filterStr = filterValue.value.toLowerCase();
+                return columnValue.endsWith(filterStr);
+            },
+        },
+        {
+            label: "is empty",
+            value: "is empty",
+            fn: (row, columnId, filterValue) => {
+                return row.getValue(columnId).length === 0;
+            },
+            hideValueField: true,
+        },
+        {
+            label: "is not empty",
+            value: "is not empty",
+            fn: (row, columnId, filterValue) => {
+                return row.getValue(columnId).length > 0;
+            },
+            hideValueField: true,
+        },
+    ],
+};
+
+const FilterValues = ({ columnType = filterValueTypeMap.text, options = [], onValueChange, }) => {
+    const [value, setValue] = useState("");
+    const valueType = columnType === columnTypesMap.select
+        ? filterValueTypeMap.select
+        : filterValueTypeMap.text;
+    useEffect(() => {
+        if (value && onValueChange) {
+            onValueChange({ value });
+        }
+    }, [value]);
+    return valueType === filterValueTypeMap.select ? (jsxRuntimeExports$1.jsxs(Select, { value: value, onValueChange: setValue, children: [jsxRuntimeExports$1.jsx(Select.Trigger, { children: jsxRuntimeExports$1.jsx(Select.Value, { placeholder: "Select value" }) }), jsxRuntimeExports$1.jsx(Select.Content, { children: options.map((opt) => {
+                    return (jsxRuntimeExports$1.jsx(Select.Item, { value: opt.value, children: opt.label || opt.value }, opt.key));
+                }) })] })) : (jsxRuntimeExports$1.jsx(TextField, { value: value, onChange: (e) => setValue(e.target.value) }));
+};
+const Operation = ({ columnType = columnTypesMap.text, onOperationSelect, }) => {
+    const options = operationsOptions[columnType] || [];
+    const [value, setValue] = useState(options?.[0].value);
+    useEffect(() => {
+        const selectedOption = options.find((o) => o.value === value);
+        if (selectedOption) {
+            onOperationSelect(selectedOption);
+        }
+    }, [value]);
+    return (jsxRuntimeExports$1.jsxs(Select, { defaultValue: value, onValueChange: setValue, children: [jsxRuntimeExports$1.jsx(Select.Trigger, { className: styles$4.filterOperator, children: jsxRuntimeExports$1.jsx(Select.Value, { placeholder: "Select operation" }) }), jsxRuntimeExports$1.jsx(Select.Content, { children: options.map((opt) => {
+                    return (jsxRuntimeExports$1.jsx(Select.Item, { value: opt.label, children: opt.label }, opt.label));
+                }) })] }));
+};
+const FilteredChip = ({ column, updateColumnCustomFilter, }) => {
+    const [filterOperation, setFilterOperation] = useState();
+    const [filterValue, setFilterValue] = useState();
     const { table, removeFilterColumn } = useTable();
     const { filterVariant } = column?.columnDef;
     const options = column?.columnDef?.meta?.data || [];
-    const facets = column?.getFacetedUniqueValues();
-    const renderInputs = () => {
-        switch (filterVariant) {
-            case "text": {
-                return (jsxRuntimeExports$1.jsx(TextField, { onChange: (e) => column.setFilterValue(e.target.value) }));
-            }
-            case "select": {
-                new Set(column?.getFilterValue());
-                return (jsxRuntimeExports$1.jsxs(Select, { children: [jsxRuntimeExports$1.jsx(Select.Trigger, { children: jsxRuntimeExports$1.jsx(Select.Value, { placeholder: "Select a value" }) }), jsxRuntimeExports$1.jsx(Select.Content, { children: jsxRuntimeExports$1.jsx(Select.Group, { children: options.map((option) => (jsxRuntimeExports$1.jsx(Select.Item, { value: option.value, children: option?.label || option?.value }, option.value))) }) })] }));
-            }
-            default: {
-                const selectedValues = new Set(column?.getFilterValue());
-                return (jsxRuntimeExports$1.jsxs(Popover, { children: [jsxRuntimeExports$1.jsx(Popover.Trigger, { asChild: true, children: jsxRuntimeExports$1.jsxs(Button$1, { children: [selectedValues.size, " selected"] }) }), jsxRuntimeExports$1.jsx(Popover.Content, { align: "start", style: { padding: 0 }, children: jsxRuntimeExports$1.jsxs(Command, { children: [jsxRuntimeExports$1.jsx(Command.Input, {}), jsxRuntimeExports$1.jsxs(Command.List, { children: [jsxRuntimeExports$1.jsx(Command.Empty, { children: "No results found." }), jsxRuntimeExports$1.jsx(Command.Group, { children: options.map((option) => {
-                                                    const isSelected = selectedValues.has(option.value);
-                                                    return (jsxRuntimeExports$1.jsx(Command.Item, { onSelect: () => {
-                                                            if (isSelected) {
-                                                                selectedValues.delete(option.value);
-                                                            }
-                                                            else {
-                                                                selectedValues.add(option.value);
-                                                            }
-                                                            const filterValues = Array.from(selectedValues);
-                                                            console.log(selectedValues, filterValues);
-                                                            column?.setFilterValue(filterValues.length ? filterValues : undefined);
-                                                        }, children: jsxRuntimeExports$1.jsxs(Flex, { justify: "between", gap: "small", children: [jsxRuntimeExports$1.jsxs(Flex, { align: "center", gap: "small", children: [jsxRuntimeExports$1.jsx(Checkbox, { checked: isSelected }), option.icon && (jsxRuntimeExports$1.jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" })), jsxRuntimeExports$1.jsx("span", { children: option.label })] }), facets?.get(option.value) && (jsxRuntimeExports$1.jsx("span", { children: facets.get(option.value) }))] }) }, option.value));
-                                                }) }), selectedValues.size > 0 && (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsx(Command.Separator, {}), jsxRuntimeExports$1.jsx(Command.Group, { children: jsxRuntimeExports$1.jsx(Command.Item, { onSelect: () => column?.setFilterValue(undefined), className: "justify-center text-center", children: "Clear filters" }) })] }))] })] }) })] }));
-            }
+    column?.getFacetedUniqueValues();
+    const columnHeader = column?.columnDef?.header;
+    const columnName = (typeof columnHeader === "string" && columnHeader) || column.id;
+    useEffect(() => {
+        if (filterOperation?.fn && filterValue) {
+            updateColumnCustomFilter(column.id, filterOperation?.fn);
+            column.setFilterValue(filterValue);
         }
-    };
-    return (jsxRuntimeExports$1.jsxs(Box, { className: styles$4.chip, children: [jsxRuntimeExports$1.jsx(Text, { children: column.id }), jsxRuntimeExports$1.jsx(Text, { children: "is" }), renderInputs(), jsxRuntimeExports$1.jsx(Flex, { children: jsxRuntimeExports$1.jsx(Cross1Icon, { height: "12", width: "12", onClick: () => {
-                        column.setFilterValue(undefined);
-                        removeFilterColumn(column.id);
-                    } }) })] }));
+    }, [filterOperation, filterValue]);
+    function removeFilter() {
+        column.setFilterValue(undefined);
+        removeFilterColumn(column.id);
+        setFilterOperation(undefined);
+        setFilterValue({});
+    }
+    return (jsxRuntimeExports$1.jsxs(Box, { className: styles$4.chip, children: [jsxRuntimeExports$1.jsx(Text, { children: columnName }), jsxRuntimeExports$1.jsx(Operation, { columnType: filterVariant, onOperationSelect: setFilterOperation }), filterOperation?.hideValueField ? null : (jsxRuntimeExports$1.jsx(FilterValues, { columnType: filterVariant, options: options, onValueChange: setFilterValue })), jsxRuntimeExports$1.jsx(Flex, { children: jsxRuntimeExports$1.jsx(Cross1Icon, { height: "12", width: "12", onClick: removeFilter }) })] }));
 };
 
 function DataTableFilterChips(props) {
-    const { filteredColumns, table } = useTable();
+    const { filteredColumns, table, updateColumnCustomFilter } = useTable();
     const tableColumns = table
         .getAllColumns()
         .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide());
@@ -31682,7 +31821,7 @@ function DataTableFilterChips(props) {
         return null;
     return (jsxRuntimeExports$1.jsxs(Flex, { gap: "small", align: "center", className: styles$4.chipWrapper, ...props, children: [filteredColumns.map((filter, index) => {
                 const filteredColumn = table.getColumn(filter);
-                return jsxRuntimeExports$1.jsx(FilteredChip, { column: filteredColumn }, index);
+                return (jsxRuntimeExports$1.jsx(FilteredChip, { column: filteredColumn, updateColumnCustomFilter: updateColumnCustomFilter }, index));
             }), filteredColumns.length < tableColumns.length && (jsxRuntimeExports$1.jsx(DataTableFilterOptions, { variant: "ghost", style: { border: "none", background: "none" }, children: jsxRuntimeExports$1.jsx(PlusIcon, { width: 16, height: 16 }) }))] }));
 }
 
@@ -31777,6 +31916,7 @@ const Table = Object.assign(TableRoot, {
 });
 
 function DataTableRoot({ columns, data, emptyState, children, parentStyle, ShouldShowHeader = true, ...props }) {
+    const [tableCustomFilter, setTableCustomFilter] = React__default.useState({});
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
     const footer = convertedChildren.find((child) => child.type === DataTableFooter) || null;
@@ -31788,9 +31928,20 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, Shoul
     const [rowSelection, setRowSelection] = React__default.useState({});
     const [globalFilter, setGlobalFilter] = React__default.useState("");
     const { filteredColumns, addFilterColumn, removeFilterColumn, resetColumns } = useTableColumn();
+    const columnWithCustomFilter = columns.map((col) => {
+        // @ts-ignore;
+        const colId = col.id || col?.accessorKey;
+        if (colId && tableCustomFilter.hasOwnProperty(colId)) {
+            col.filterFn = tableCustomFilter[colId];
+        }
+        return col;
+    });
+    const updateColumnCustomFilter = (id, filterFn) => {
+        setTableCustomFilter((old) => ({ ...old, [id]: filterFn }));
+    };
     const table = useReactTable({
         data,
-        columns,
+        columns: columnWithCustomFilter,
         globalFilterFn: "auto",
         enableRowSelection: true,
         manualPagination: true,
@@ -31826,6 +31977,8 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, Shoul
                 resetColumns,
                 onGlobalFilterChange: setGlobalFilter,
                 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
                                                 ? table.getHeaderGroups().map((headerGroup) => (jsxRuntimeExports$1.jsx(Table.Row, { children: headerGroup.headers.map((header, index) => {
                                                         return (jsxRuntimeExports$1.jsx(Table.Head, { style: {