@quillsql/react 1.6.0 → 1.6.3

package/lib/ReportBuilder.js

@@ -55,7 +55,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useContext, useCallback, useEffect, useRef, } from 'react';
+import { useState, useContext, useCallback, useEffect } from 'react';
 // import './nightOwlLight.css';
 import axios from 'axios';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
@@ -64,7 +64,7 @@ import { convertPostgresColumn } from './SQLEditor';
 import { format } from 'date-fns';
 export default function ReportBuilder(_a) {
     var _this = this;
-    var onChangeQuery = _a.onChangeQuery, onChangeData = _a.onChangeData, onChangeColumns = _a.onChangeColumns, onChangeLoading = _a.onChangeLoading, onError = _a.onError, SelectComponent = _a.SelectComponent;
+    var onChangeQuery = _a.onChangeQuery, onChangeData = _a.onChangeData, onChangeColumns = _a.onChangeColumns, onChangeLoading = _a.onChangeLoading, onError = _a.onError, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
     var _b = useState([]), data = _b[0], setData = _b[1];
     var client = useContext(ClientContext)[0];
     var _c = useContext(SchemaContext), schema = _c[0], setSchema = _c[1];
@@ -136,25 +136,32 @@ export default function ReportBuilder(_a) {
         };
     }, []);
     var runQuery = function (query) { return __awaiter(_this, void 0, void 0, function () {
-        var publicKey, customerId, environment, response;
+        var publicKey, customerId, environment, queryEndpoint, queryHeaders, response;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
-                    return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
-                            query: query,
-                        }, {
-                            params: {
-                                orgId: customerId,
-                                publicKey: publicKey,
-                            },
-                            headers: {
-                                Authorization: "Bearer ",
-                                environment: environment || undefined,
-                            },
-                        })];
+                    publicKey = client.publicKey, customerId = client.customerId, environment = client.environment, queryEndpoint = client.queryEndpoint, queryHeaders = client.queryHeaders;
+                    if (!queryEndpoint) return [3 /*break*/, 2];
+                    return [4 /*yield*/, axios.post(queryEndpoint, { metadata: { query: query, task: 'query' } }, { headers: queryHeaders })];
                 case 1:
                     response = _a.sent();
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, axios.post("https://quill-344421.uc.r.appspot.com/dashquery", {
+                        query: query,
+                    }, {
+                        params: {
+                            orgId: customerId,
+                            publicKey: publicKey,
+                        },
+                        headers: {
+                            Authorization: "Bearer ",
+                            environment: environment || undefined,
+                        },
+                    })];
+                case 3:
+                    response = _a.sent();
+                    _a.label = 4;
+                case 4:
                     if (response && response.data && response.data.errorMessage) {
                         onError(response.data.errorMessage);
                         setData([]);
@@ -176,7 +183,7 @@ export default function ReportBuilder(_a) {
     if (!schema.length) {
         return null;
     }
-    return (_jsx(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent }));
+    return (_jsx(ReportingTool, { theme: theme, data: data, schema: schema, onChangeQuery: onChangeQuery, runQuery: runQuery, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle }));
 }
 export function getPostgresBasicType(column) {
     var format;
@@ -228,7 +235,7 @@ export function getPostgresBasicType(column) {
 }
 function ReportingTool(_a) {
     var _this = this;
-    var schema = _a.schema, data = _a.data, runQuery = _a.runQuery, SelectComponent = _a.SelectComponent, onChangeQuery = _a.onChangeQuery, theme = _a.theme;
+    var schema = _a.schema, data = _a.data, runQuery = _a.runQuery, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, onChangeQuery = _a.onChangeQuery, theme = _a.theme, ModalComponent = _a.ModalComponent, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
     var _b = useState(schema[0]), selectedTable = _b[0], setSelectedTable = _b[1];
     var _c = useState(schema[0].columns[0]), selectedColumn = _c[0], setSelectedColumn = _c[1];
     var _d = useState([]), filters = _d[0], setFilters = _d[1];
@@ -946,54 +953,50 @@ function ReportingTool(_a) {
     if (!schema || !schema.length) {
         return null;
     }
-    return (_jsxs("div", __assign({ style: { marginLeft: '25px' } }, { children: [_jsx("div", __assign({ style: {
-                    fontSize: '0.8rem',
-                    marginBottom: '6px',
-                    fontWeight: 'bold',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                } }, { children: "Table" })), _jsx(SelectComponent, { value: selectedTable.displayName, onChange: function (e) {
-                    var table = schema.find(function (t) { return t.displayName === e; });
-                    setSelectedTable(table);
-                }, options: (schema === null || schema === void 0 ? void 0 : schema.length)
-                    ? schema.map(function (elem) {
-                        return { label: elem.displayName, value: elem.displayName };
-                    })
-                    : [] }), _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: '12px' } }, { children: [_jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, theme: theme }), _jsx(GroupByModal2, { selectedTable: selectedTable, groupBys: groupBys, selectedGroupByColumn: selectedGroupByColumn, setSelectedGroupByColumn: setSelectedGroupByColumn, addGroupBy: addGroupBy, groupByColumnType: groupByColumnType, removeGroupBy: removeGroupBy, selectGroupBy: selectGroupBy, groupByIndexBeingEdited: groupByIndexBeingEdited, updateGroupBy: updateGroupBy, aggregations: aggregations, setAggregationColumn: setAggregationColumn, setAggregationType: setAggregationType, SelectComponent: SelectComponent, addAggregation: addAggregation, dateBucket: dateBucket, setDateBucket: setDateBucket, theme: theme }), _jsx(SortByModal, { selectedTable: selectedTable, sortableColumns: sortableColumns, sortBys: sortBys, selectedSortByColumn: selectedSortByColumn, setSelectedSortByColumn: setSelectedSortByColumn, selectedSortByDirection: selectedSortByDirection, setSelectedSortByDirection: setSelectedSortByDirection, addSortBy: addSortBy, removeSortBy: removeSortBy, selectSortBy: selectSortBy, sortByIndexBeingEdited: sortByIndexBeingEdited, updateSortBy: updateSortBy, SelectComponent: SelectComponent, theme: theme })] }))] })));
+    return (_jsxs("div", __assign({ style: { marginLeft: '25px' } }, { children: [_jsxs("div", __assign({ style: { maxWidth: 245 } }, { children: [_jsx("div", __assign({ style: {
+                            fontSize: 14,
+                            marginBottom: '6px',
+                            fontWeight: '600',
+                            color: theme.secondaryTextColor,
+                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                        } }, { children: "Table" })), _jsx(SelectComponent, { label: "Table", value: selectedTable.displayName, onChange: function (e) {
+                            var table = schema.find(function (t) { return t.displayName === e; });
+                            setSelectedTable(table);
+                        }, options: (schema === null || schema === void 0 ? void 0 : schema.length)
+                            ? schema.map(function (elem) {
+                                return { label: elem.displayName, value: elem.displayName };
+                            })
+                            : [] })] })), _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: '12px' } }, { children: [_jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, dateStart: dateStart, setDateStart: setDateStart, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, dateEnd: dateEnd, setDateEnd: setDateEnd, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, theme: theme }), _jsx(GroupByModal2, { selectedTable: selectedTable, groupBys: groupBys, selectedGroupByColumn: selectedGroupByColumn, setSelectedGroupByColumn: setSelectedGroupByColumn, addGroupBy: addGroupBy, groupByColumnType: groupByColumnType, removeGroupBy: removeGroupBy, selectGroupBy: selectGroupBy, groupByIndexBeingEdited: groupByIndexBeingEdited, updateGroupBy: updateGroupBy, aggregations: aggregations, setAggregationColumn: setAggregationColumn, setAggregationType: setAggregationType, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, TextInputComponent: TextInputComponent, tagStyle: tagStyle, addAggregation: addAggregation, dateBucket: dateBucket, setDateBucket: setDateBucket, theme: theme }), _jsx(SortByModal, { selectedTable: selectedTable, sortableColumns: sortableColumns, sortBys: sortBys, selectedSortByColumn: selectedSortByColumn, setSelectedSortByColumn: setSelectedSortByColumn, selectedSortByDirection: selectedSortByDirection, setSelectedSortByDirection: setSelectedSortByDirection, addSortBy: addSortBy, removeSortBy: removeSortBy, selectSortBy: selectSortBy, sortByIndexBeingEdited: sortByIndexBeingEdited, updateSortBy: updateSortBy, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, ModalComponent: ModalComponent, ModalTriggerComponent: ModalTriggerComponent, tagStyle: tagStyle, theme: theme })] }))] })));
 }
 function FilterTag(_a) {
-    var id = _a.id, label = _a.label, removeFilter = _a.removeFilter, index = _a.index, selectFilter = _a.selectFilter, theme = _a.theme;
+    var id = _a.id, label = _a.label, removeFilter = _a.removeFilter, index = _a.index, setIsOpen = _a.setIsOpen, selectFilter = _a.selectFilter, theme = _a.theme, tagStyle = _a.tagStyle;
     var handleRemoveFilter = function () {
         removeFilter(index);
     };
     var handleSelectFilter = function () {
         selectFilter(index);
+        setIsOpen(true);
     };
-    return (_jsxs("div", __assign({ id: id, onClick: handleSelectFilter, style: {
+    return (_jsxs("div", __assign({ id: id, onClick: handleSelectFilter, style: tagStyle || {
             marginLeft: '12px',
             cursor: 'pointer',
-            border: '1px',
-            borderColor: '#EFF0FC',
-            borderRadius: 6,
+            borderRadius: 8,
             backgroundColor: '#EFF0FC',
-            paddingLeft: '1rem',
-            paddingRight: '0.5rem',
-            // paddingTop: "0.44rem",
-            // paddingBottom: "0.44rem",
-            height: 35,
+            paddingLeft: '12px',
+            paddingRight: '8px',
+            height: 30,
             display: 'flex',
             alignItems: 'center',
-            fontSize: 14,
+            fontSize: 13,
             fontWeight: 'medium',
-            color: theme.primaryTextColor,
+            color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
             outline: 'none',
-            // ring: "2",
-            // ringColor: "white",
-            // ringOpacity: "75",
         } }, { children: [_jsx("div", __assign({ id: id, style: {
                     textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
-                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                    overflow: 'hidden',
+                    maxWidth: '80px',
                 } }, { children: label })), _jsx("div", __assign({ 
                 // onClick={handleRemoveFilter}
                 onClick: function (e) {
@@ -1004,83 +1007,34 @@ function FilterTag(_a) {
                     flexDirection: 'row',
                     alignItems: 'center',
                     cursor: 'pointer',
-                    paddingLeft: '0.375rem',
+                    paddingLeft: '6px',
                 } }, { children: _jsx(XMarkIcon, { style: {
-                        height: '1.25rem',
-                        width: '1.25rem',
-                        color: theme.primaryTextColor,
+                        height: '20px',
+                        width: '20px',
+                        color: (tagStyle === null || tagStyle === void 0 ? void 0 : tagStyle.color) || (theme === null || theme === void 0 ? void 0 : theme.primaryTextColor),
                     }, "aria-hidden": "true" }) }))] })));
 }
 var SortByModal = function (_a) {
-    var selectedSortByColumn = _a.selectedSortByColumn, selectedSortByDirection = _a.selectedSortByDirection, setSelectedSortByColumn = _a.setSelectedSortByColumn, setSelectedSortByDirection = _a.setSelectedSortByDirection, selectedTable = _a.selectedTable, sortableColumns = _a.sortableColumns, removeSortBy = _a.removeSortBy, selectSortBy = _a.selectSortBy, updateSortBy = _a.updateSortBy, addSortBy = _a.addSortBy, sortBys = _a.sortBys, SelectComponent = _a.SelectComponent, sortByIndexBeingEdited = _a.sortByIndexBeingEdited, theme = _a.theme;
-    var dropdownRef = useRef(null);
+    var selectedSortByColumn = _a.selectedSortByColumn, selectedSortByDirection = _a.selectedSortByDirection, setSelectedSortByColumn = _a.setSelectedSortByColumn, setSelectedSortByDirection = _a.setSelectedSortByDirection, selectedTable = _a.selectedTable, sortableColumns = _a.sortableColumns, removeSortBy = _a.removeSortBy, selectSortBy = _a.selectSortBy, updateSortBy = _a.updateSortBy, addSortBy = _a.addSortBy, sortBys = _a.sortBys, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, tagStyle = _a.tagStyle, ModalTriggerComponent = _a.ModalTriggerComponent, sortByIndexBeingEdited = _a.sortByIndexBeingEdited, theme = _a.theme;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    useEffect(function () {
-        // Event listener to close the dropdown menu when clicking outside
-        var handleOutsideClick = function (event) {
-            if (event.target.id === 'sort-toggle-button' ||
-                event.target.id === 'sort-tag') {
-                setIsOpen(function (isOpen) { return !isOpen; });
-                return;
-            }
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        // Attach the event listener to the document
-        document.addEventListener('click', handleOutsideClick);
-        // Clean up the event listener on component unmount
-        return function () {
-            document.removeEventListener('click', handleOutsideClick);
-        };
-    }, []);
     return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column', marginTop: 12 } }, { children: _jsxs("div", __assign({ style: {
-                position: 'relative',
-                display: 'inline-block',
-                textAlign: 'left',
+            // position: 'relative',
+            // display: 'inline-block',
+            // textAlign: 'left',
             } }, { children: [_jsxs("div", __assign({ style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
-                    } }, { children: [_jsx("button", __assign({ id: "sort-toggle-button", 
-                            // onClick={() => setIsOpen((isOpen) => !isOpen)}
-                            type: "button", "aria-haspopup": "menu", "aria-expanded": "true", "data-headlessui-state": "open", style: {
-                                display: 'inline-flex',
-                                boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-                                borderRadius: '0.375rem',
-                                backgroundColor: 'rgba(0, 0, 0, 0)',
-                                padding: '0.375rem 0.75rem',
-                                fontSize: '0.875rem',
-                                fontWeight: '500',
-                                color: theme.primaryTextColor,
-                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                borderWidth: 1,
-                                borderStyle: 'solid',
-                                borderColor: theme.borderColor,
-                                cursor: 'pointer',
-                            } }, { children: "Sort" })), _jsx("div", __assign({ style: {
+                    } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Add sort +" }), _jsx("div", __assign({ style: {
                                 overflowX: 'scroll',
                                 display: 'flex',
                                 flexDirection: 'row',
                                 alignItems: 'center',
-                            } }, { children: sortBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "sort-tag", label: elem.column, removeFilter: removeSortBy, selectFilter: selectSortBy, index: index, theme: theme })); }) }))] })), isOpen && (_jsxs("div", __assign({ ref: dropdownRef, role: "menu", tabindex: "0", "data-headlessui-state": "open", style: {
-                        zIndex: 120,
-                        position: 'absolute',
-                        left: '0px',
-                        marginTop: '12px',
-                        transformOrigin: 'right top',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        padding: '1rem',
-                        borderRadius: '0.375rem',
-                        backgroundColor: 'rgb(255, 255, 255)',
-                        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
-                    }, className: "transform opacity-100 scale-100" }, { children: [_jsx("div", __assign({ style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                            } }, { children: _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
-                                            fontSize: '0.875rem',
+                            } }, { children: sortBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "sort-tag", label: elem.column, removeFilter: removeSortBy, selectFilter: selectSortBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'sort' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add sort" }, { children: _jsxs("div", __assign({ style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                        } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
+                                            fontSize: '14px',
                                             marginBottom: '6px',
                                             fontWeight: '600',
                                             color: theme.secondaryTextColor,
@@ -1089,142 +1043,72 @@ var SortByModal = function (_a) {
                                             setSelectedSortByColumn(e);
                                         }, options: sortableColumns.map(function (elem) {
                                             return { label: elem, value: elem };
-                                        }) })] })) })), _jsx("div", __assign({ style: {
-                                fontSize: '0.875rem',
-                                marginBottom: '6px',
-                                fontWeight: '600',
-                                color: theme.secondaryTextColor,
-                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                marginTop: 20,
-                            } }, { children: "Direction" })), _jsx(SelectComponent, { value: selectedSortByDirection, onChange: function (e) {
-                                setSelectedSortByDirection(e);
-                            }, options: [
-                                { label: 'ascending', value: 'ascending' },
-                                { label: 'descending', value: 'descending' },
-                            ] }), _jsx("button", __assign({ style: {
-                                width: '15.3125rem',
-                                marginTop: '1.25rem',
-                                paddingTop: '0.5rem',
-                                paddingBottom: '0.5rem',
-                                paddingLeft: '0.75rem',
-                                paddingRight: '0.75rem',
-                                backgroundColor: theme.primaryButtonColor,
-                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                // hover: { opacity: "90" },
-                                color: 'white',
-                                fontWeight: '500',
-                                borderRadius: '0.375rem',
-                                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                                outline: 'none',
-                                border: 'none',
-                                cursor: 'pointer',
-                            }, onClick: function () {
-                                if (sortByIndexBeingEdited > -1) {
-                                    updateSortBy(sortByIndexBeingEdited);
+                                        }) })] })), _jsx("div", __assign({ style: {
+                                    fontSize: '14px',
+                                    marginBottom: '6px',
+                                    fontWeight: '600',
+                                    color: theme.secondaryTextColor,
+                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                    marginTop: 20,
+                                } }, { children: "Direction" })), _jsx(SelectComponent, { value: selectedSortByDirection, onChange: function (e) {
+                                    setSelectedSortByDirection(e);
+                                }, options: [
+                                    { label: 'ascending', value: 'ascending' },
+                                    { label: 'descending', value: 'descending' },
+                                ] }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
+                                    if (sortByIndexBeingEdited > -1) {
+                                        updateSortBy(sortByIndexBeingEdited);
+                                        setIsOpen(false);
+                                        // close();
+                                        return;
+                                    }
+                                    addSortBy();
                                     setIsOpen(false);
                                     // close();
-                                    return;
-                                }
-                                addSortBy();
-                                setIsOpen(false);
-                                // close();
-                            } }, { children: sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort' }))] })))] })) })));
+                                }, label: sortByIndexBeingEdited > -1 ? 'Edit sort' : 'Add sort' })] })) }))] })) })));
 };
 var GroupByModal2 = function (_a) {
-    var selectedGroupByColumn = _a.selectedGroupByColumn, addGroupBy = _a.addGroupBy, setSelectedGroupByColumn = _a.setSelectedGroupByColumn, selectedTable = _a.selectedTable, groupByColumnType = _a.groupByColumnType, groupByIndexBeingEdited = _a.groupByIndexBeingEdited, updateGroupBy = _a.updateGroupBy, groupBys = _a.groupBys, removeGroupBy = _a.removeGroupBy, selectGroupBy = _a.selectGroupBy, SelectComponent = _a.SelectComponent, aggregations = _a.aggregations, setAggregationColumn = _a.setAggregationColumn, setAggregationType = _a.setAggregationType, addAggregation = _a.addAggregation, dateBucket = _a.dateBucket, setDateBucket = _a.setDateBucket, theme = _a.theme;
-    var dropdownRef = useRef(null);
+    var selectedGroupByColumn = _a.selectedGroupByColumn, addGroupBy = _a.addGroupBy, setSelectedGroupByColumn = _a.setSelectedGroupByColumn, selectedTable = _a.selectedTable, groupByColumnType = _a.groupByColumnType, groupByIndexBeingEdited = _a.groupByIndexBeingEdited, updateGroupBy = _a.updateGroupBy, groupBys = _a.groupBys, removeGroupBy = _a.removeGroupBy, selectGroupBy = _a.selectGroupBy, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, aggregations = _a.aggregations, setAggregationColumn = _a.setAggregationColumn, setAggregationType = _a.setAggregationType, addAggregation = _a.addAggregation, dateBucket = _a.dateBucket, setDateBucket = _a.setDateBucket, theme = _a.theme, ModalComponent = _a.ModalComponent, theme = _a.theme, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    useEffect(function () {
-        // Event listener to close the dropdown menu when clicking outside
-        var handleOutsideClick = function (event) {
-            if (event.target.id === 'group-toggle-button' ||
-                event.target.id === 'group-tag') {
-                setIsOpen(function (isOpen) { return !isOpen; });
-                return;
-            }
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        // Attach the event listener to the document
-        document.addEventListener('click', handleOutsideClick);
-        // Clean up the event listener on component unmount
-        return function () {
-            document.removeEventListener('click', handleOutsideClick);
-        };
-    }, []);
-    return (_jsx("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: _jsxs("div", __assign({ style: {
-                position: 'relative',
-                display: 'inline-block',
-                textAlign: 'left',
-            } }, { children: [_jsxs("div", __assign({ style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    } }, { children: [_jsx("button", __assign({ id: "group-toggle-button", 
-                            // onClick={() => setIsOpen((isOpen) => !isOpen)}
-                            type: "button", "aria-haspopup": "menu", "aria-expanded": "true", "data-headlessui-state": "open", style: {
-                                display: 'inline-flex',
-                                boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-                                borderRadius: '0.375rem',
-                                backgroundColor: 'rgba(0, 0, 0, 0)',
-                                padding: '0.375rem 0.75rem',
-                                fontSize: '0.875rem',
-                                fontWeight: '500',
-                                color: theme.primaryButtonColor,
-                                borderWidth: 1,
-                                borderStyle: 'solid',
-                                borderColor: theme.borderColor,
-                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                cursor: 'pointer',
-                            } }, { children: "Groups" })), _jsx("div", __assign({ style: {
-                                overflowX: 'scroll',
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                            } }, { children: groupBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "group-tag", label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, index: index, theme: theme })); }) }))] })), isOpen && (_jsxs("div", __assign({ ref: dropdownRef, role: "menu", tabindex: "0", "data-headlessui-state": "open", style: {
-                        zIndex: 120,
-                        position: 'absolute',
-                        left: '0px',
-                        marginTop: '12px',
-                        transformOrigin: 'right top',
-                        padding: '1rem',
-                        borderRadius: '0.375rem',
-                        backgroundColor: 'rgb(255, 255, 255)',
-                        boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
-                    } }, { children: [_jsxs("div", __assign({ style: {
+    return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Add group by +" }), _jsx("div", __assign({ style: {
+                            overflowX: 'scroll',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        } }, { children: groupBys.map(function (elem, index) { return (_jsx(FilterTag, { id: "group-tag", label: elem.tag, removeFilter: removeGroupBy, selectFilter: selectGroupBy, setIsOpen: setIsOpen, index: index, theme: theme, tagStyle: tagStyle }, 'groupby' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add group by" }, { children: _jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
+                                        fontSize: '14px',
+                                        marginBottom: '6px',
+                                        fontWeight: '600',
+                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                        color: theme.secondaryTextColor,
+                                    } }, { children: "Column" })), _jsx(SelectComponent, { label: "Column", value: selectedGroupByColumn.name, onChange: function (e) {
+                                        var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                        setSelectedGroupByColumn(column);
+                                    }, options: selectedTable.columns.map(function (elem) {
+                                        return { label: elem.name, value: elem.name };
+                                    }) })] })), groupByColumnType === 'date' && (_jsxs("div", __assign({ style: {
                                 display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                            } }, { children: [_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsx("div", __assign({ style: {
-                                                fontSize: '0.875rem',
-                                                marginBottom: '6px',
-                                                fontWeight: '600',
-                                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                color: theme.secondaryTextColor,
-                                            } }, { children: "Column" })), _jsx(SelectComponent, { value: selectedGroupByColumn.name, onChange: function (e) {
-                                                var column = selectedTable.columns.find(function (c) { return c.name === e; });
-                                                setSelectedGroupByColumn(column);
-                                            }, options: selectedTable.columns.map(function (elem) {
-                                                return { label: elem.name, value: elem.name };
-                                            }) })] })), groupByColumnType === 'date' && (_jsxs("div", __assign({ style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        marginLeft: 12,
-                                    } }, { children: [_jsx("div", __assign({ style: {
-                                                fontSize: '0.875rem',
-                                                marginBottom: '6px',
-                                                fontWeight: '600',
-                                                color: theme.secondaryTextColor,
-                                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                            } }, { children: "Bucket" })), _jsx(SelectComponent, { value: dateBucket, onChange: function (e) {
-                                                setDateBucket(e);
-                                            }, options: [
-                                                { label: 'month', value: 'month' },
-                                                { label: 'day', value: 'day' },
-                                                { label: 'week', value: 'week' },
-                                            ] })] })))] })), _jsx("div", __assign({ style: {
-                                fontSize: '0.875rem',
+                                flexDirection: 'column',
+                                // marginLeft: 12,
+                            } }, { children: [_jsx("div", __assign({ style: {
+                                        fontSize: '14px',
+                                        marginBottom: '6px',
+                                        fontWeight: '600',
+                                        color: theme.secondaryTextColor,
+                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                        marginTop: 20,
+                                    } }, { children: "Bucket" })), _jsx(SelectComponent, { label: "Bucket", value: dateBucket, onChange: function (e) {
+                                        setDateBucket(e);
+                                    }, options: [
+                                        { label: 'month', value: 'month' },
+                                        { label: 'day', value: 'day' },
+                                        { label: 'week', value: 'week' },
+                                    ] })] }))), _jsx("div", __assign({ style: {
+                                fontSize: 14,
                                 marginBottom: '6px',
                                 fontWeight: '600',
                                 marginTop: 20,
@@ -1243,31 +1127,14 @@ var GroupByModal2 = function (_a) {
                                             setAggregationColumn(column, index);
                                         }, options: selectedTable.columns.map(function (elem) {
                                             return { label: elem.name, value: elem.name };
-                                        }) }), _jsx("div", { style: { width: 12 } }), _jsx(SelectComponent, { value: aggregation.aggregationType, onChange: function (e) {
+                                        }) }), _jsx("div", { style: { width: 16 } }), _jsx(SelectComponent, { value: aggregation.aggregationType, onChange: function (e) {
                                             setAggregationType(e, index);
                                         }, options: [
                                             { label: 'sum', value: 'sum' },
                                             { label: 'average', value: 'average' },
                                             { label: 'count', value: 'count' },
-                                        ] })] })));
-                        }), _jsx("button", __assign({ style: {
-                                width: '100%',
-                                marginTop: '1.25rem',
-                                paddingTop: '0.5rem',
-                                paddingBottom: '0.5rem',
-                                paddingLeft: '0.75rem',
-                                paddingRight: '0.75rem',
-                                backgroundColor: theme.primaryButtonColor,
-                                // hover: { opacity: "90" },
-                                color: 'white',
-                                fontWeight: '500',
-                                borderRadius: '0.375rem',
-                                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                                fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                border: 'none',
-                                outline: 'none',
-                                cursor: 'pointer',
-                            }, onClick: function () {
+                                        ] })] }), 'agg' + index));
+                        }), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
                                 if (groupByIndexBeingEdited > -1) {
                                     updateGroupBy(groupByIndexBeingEdited);
                                     setIsOpen(false);
@@ -1277,31 +1144,11 @@ var GroupByModal2 = function (_a) {
                                 addGroupBy();
                                 setIsOpen(false);
                                 // close();
-                            } }, { children: groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by' }))] })))] })) })));
+                            }, label: groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by' })] })) }))] })));
 };
 var AddFilterModal2 = function (_a) {
-    var filters = _a.filters, selectedColumn = _a.selectedColumn, numberStart = _a.numberStart, numberEnd = _a.numberEnd, dateStart = _a.dateStart, setDateStart = _a.setDateStart, columnStats = _a.columnStats, stringFilterValues = _a.stringFilterValues, setStringFilterValues = _a.setStringFilterValues, addFilter = _a.addFilter, setSelectedColumn = _a.setSelectedColumn, setNumberStart = _a.setNumberStart, setNumberEnd = _a.setNumberEnd, selectedTable = _a.selectedTable, columnType = _a.columnType, setDateEnd = _a.setDateEnd, dateEnd = _a.dateEnd, removeFilter = _a.removeFilter, selectFilter = _a.selectFilter, indexBeingEdited = _a.indexBeingEdited, updateFilter = _a.updateFilter, SelectComponent = _a.SelectComponent, theme = _a.theme;
-    var dropdownRef = useRef(null);
+    var filters = _a.filters, selectedColumn = _a.selectedColumn, numberStart = _a.numberStart, numberEnd = _a.numberEnd, dateStart = _a.dateStart, setDateStart = _a.setDateStart, columnStats = _a.columnStats, stringFilterValues = _a.stringFilterValues, setStringFilterValues = _a.setStringFilterValues, addFilter = _a.addFilter, setSelectedColumn = _a.setSelectedColumn, setNumberStart = _a.setNumberStart, setNumberEnd = _a.setNumberEnd, selectedTable = _a.selectedTable, columnType = _a.columnType, setDateEnd = _a.setDateEnd, dateEnd = _a.dateEnd, removeFilter = _a.removeFilter, selectFilter = _a.selectFilter, indexBeingEdited = _a.indexBeingEdited, updateFilter = _a.updateFilter, SelectComponent = _a.SelectComponent, ButtonComponent = _a.ButtonComponent, ModalComponent = _a.ModalComponent, theme = _a.theme, ModalTriggerComponent = _a.ModalTriggerComponent, TextInputComponent = _a.TextInputComponent, tagStyle = _a.tagStyle;
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    useEffect(function () {
-        // Event listener to close the dropdown menu when clicking outside
-        var handleOutsideClick = function (event) {
-            if (event.target.id === 'toggle-button' ||
-                event.target.id === 'filter-tag') {
-                setIsOpen(function (isOpen) { return !isOpen; });
-                return;
-            }
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        // Attach the event listener to the document
-        document.addEventListener('click', handleOutsideClick);
-        // Clean up the event listener on component unmount
-        return function () {
-            document.removeEventListener('click', handleOutsideClick);
-        };
-    }, []);
     return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [_jsxs("div", __assign({ style: {
                     position: 'relative',
                     display: 'inline-block',
@@ -1310,56 +1157,52 @@ var AddFilterModal2 = function (_a) {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
-                        } }, { children: [_jsx("button", __assign({ id: "toggle-button", 
-                                // onClick={() => setIsOpen((isOpen) => !isOpen)}
-                                type: "button", "aria-haspopup": "menu", "aria-expanded": "true", "data-headlessui-state": "open", style: {
-                                    display: 'inline-flex',
-                                    borderWidth: '1px',
-                                    borderStyle: 'solid',
-                                    borderColor: theme.borderColor,
-                                    boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-                                    borderRadius: '0.375rem',
-                                    backgroundColor: theme.backgroundColor,
-                                    padding: '0.375rem 0.75rem',
-                                    fontSize: '0.875rem',
-                                    fontWeight: '500',
-                                    color: theme.primaryTextColor,
-                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                    cursor: 'pointer',
-                                } }, { children: "Filters" })), _jsx("div", __assign({ style: {
+                        } }, { children: [_jsx(ModalTriggerComponent, { onClick: function () { return setIsOpen(function (isOpen) { return !isOpen; }); }, label: "Add filter +" }), _jsx("div", __assign({ style: {
                                     overflowX: 'scroll',
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                } }, { children: filters.map(function (elem, index) { return (_jsx(FilterTag, { id: "filter-tag", label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index, theme: theme })); }) }))] })), isOpen && (_jsxs("div", __assign({ ref: dropdownRef, role: "menu", tabindex: "0", "data-headlessui-state": "open", style: {
-                            zIndex: 120,
-                            position: 'absolute',
-                            left: '0px',
-                            marginTop: '12px',
-                            transformOrigin: 'right top',
-                            padding: '1rem',
-                            borderRadius: '0.375rem',
-                            backgroundColor: 'rgb(255, 255, 255)',
-                            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 1px 5px 0px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                        } }, { children: [_jsx("div", __assign({ style: {
-                                    fontSize: '0.875rem',
-                                    marginBottom: '6px',
-                                    fontWeight: '600',
-                                    color: theme.secondaryTextColor,
-                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                    // opacity: 0.7,
-                                } }, { children: "Column" })), _jsx(SelectComponent, { value: selectedColumn.name, onChange: function (e) {
-                                    var column = selectedTable.columns.find(function (c) { return c.name === e; });
-                                    setSelectedColumn(column);
-                                }, options: selectedTable.columns.map(function (elem) {
-                                    return { label: elem.name, value: elem.name };
-                                }) }), columnType === 'number' && (_jsx("div", __assign({ style: {
-                                    width: '245px',
-                                    maxWidth: '245px',
-                                    zIndex: 50,
-                                } }, { children: _jsxs("div", __assign({ style: {
+                                } }, { children: filters.map(function (elem, index) { return (_jsx(FilterTag, { id: "filter-tag", label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle }, 'filter' + index)); }) }))] })), _jsx(ModalComponent, __assign({ isOpen: isOpen, onClose: function () { return setIsOpen(false); }, title: "Add filter" }, { children: _jsxs("div", __assign({ style: {
+                                backgroundColor: 'rgb(255, 255, 255)',
+                                display: 'flex',
+                                flexDirection: 'column',
+                            } }, { children: [_jsx("div", __assign({ style: {
+                                        fontSize: 14,
+                                        marginBottom: '6px',
+                                        fontWeight: '600',
+                                        color: theme.secondaryTextColor,
+                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                    } }, { children: "Column" })), _jsx(SelectComponent, { id: "custom-select", value: selectedColumn.name, onChange: function (e) {
+                                        var column = selectedTable.columns.find(function (c) { return c.name === e; });
+                                        setSelectedColumn(column);
+                                    }, options: selectedTable.columns.map(function (elem) {
+                                        return { label: elem.name, value: elem.name };
+                                    }) }), columnType === 'number' && (_jsx("div", { children: _jsxs("div", __assign({ style: {
+                                            display: 'flex',
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            justifyContent: 'space-between',
+                                        } }, { children: [_jsxs("div", __assign({ style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    marginTop: '20px',
+                                                } }, { children: [_jsx("div", __assign({ style: {
+                                                            fontSize: '14px',
+                                                            fontWeight: '600',
+                                                            color: theme.secondaryTextColor,
+                                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                            marginBottom: 6,
+                                                        } }, { children: "Minimum" })), _jsx(TextInputComponent, { id: "min-input", value: numberStart, onChange: function (e) { return setNumberStart(e.target.value); } })] })), _jsx("div", { style: { width: 16 } }), _jsxs("div", __assign({ style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    marginTop: '20px',
+                                                } }, { children: [_jsx("div", __assign({ style: {
+                                                            fontSize: '14px',
+                                                            fontWeight: '600',
+                                                            color: theme.secondaryTextColor,
+                                                            fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                            marginBottom: 6,
+                                                        } }, { children: "Maximum" })), _jsx(TextInputComponent, { id: "max-input", value: numberEnd, onChange: function (e) { return setNumberEnd(e.target.value); } })] }))] })) })), columnType === 'date' && (_jsxs("div", __assign({ style: {
                                         display: 'flex',
                                         flexDirection: 'row',
                                         alignItems: 'center',
@@ -1369,188 +1212,69 @@ var AddFilterModal2 = function (_a) {
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
                                             } }, { children: [_jsx("div", __assign({ style: {
-                                                        fontSize: '0.875rem',
+                                                        fontSize: 14,
                                                         fontWeight: '600',
-                                                        color: theme.secondaryTextColor,
-                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                    } }, { children: "Minimum" })), _jsx("input", { 
-                                                    // type="number"
-                                                    value: numberStart, onChange: function (e) { return setNumberStart(e.target.value); }, placeholder: "", style: {
-                                                        textAlign: 'right',
-                                                        width: '100px',
-                                                        border: '1px solid #E7E7E7',
-                                                        color: theme.primaryTextColor,
-                                                        marginTop: '4px',
-                                                        height: 38,
-                                                        paddingRight: 8,
-                                                        backgroundColor: 'white',
-                                                        borderRadius: '0.375rem',
-                                                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
+                                                        color: 'rgba(56, 65, 81, 0.7)',
                                                         fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                    } })] })), _jsxs("div", __assign({ style: {
+                                                    } }, { children: "Start date" })), _jsx("input", { type: "date", value: dateStart, onChange: function (e) { return setDateStart(e.target.value); }, placeholder: "Start date" })] })), _jsxs("div", __assign({ style: {
                                                 display: 'flex',
                                                 flexDirection: 'column',
                                                 marginTop: '20px',
                                             } }, { children: [_jsx("div", __assign({ style: {
-                                                        fontSize: '0.875rem',
+                                                        fontSize: 14,
                                                         fontWeight: '600',
-                                                        color: theme.secondaryTextColor,
-                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                    } }, { children: "Maximum" })), _jsx("input", { 
-                                                    // type="number"
-                                                    value: numberEnd, onChange: function (e) { return setNumberEnd(e.target.value); }, placeholder: "", style: {
-                                                        textAlign: 'right',
-                                                        width: '100px',
-                                                        border: '1px solid #E7E7E7',
-                                                        color: theme.primaryTextColor,
+                                                        color: 'rgba(56, 65, 81, 0.7)',
                                                         fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                        marginTop: '4px',
-                                                        paddingRight: 8,
-                                                        height: 38,
-                                                        backgroundColor: 'white',
-                                                        borderRadius: '0.375rem',
-                                                        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
-                                                    } })] }))] })) }))), columnType === 'date' && (_jsxs("div", __assign({ style: {
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                } }, { children: [_jsxs("div", __assign({ style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            marginTop: '20px',
-                                        } }, { children: [_jsx("div", __assign({ style: {
-                                                    fontSize: '0.8rem',
-                                                    fontWeight: '600',
-                                                    color: 'rgba(56, 65, 81, 0.7)',
-                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                } }, { children: "Start date" })), _jsx("input", { type: "date", value: dateStart, onChange: function (e) { return setDateStart(e.target.value); }, placeholder: "Start date", style: {
-                                                    width: '115px',
-                                                    fontSize: '0.8rem',
-                                                    color: theme.primaryTextColor,
-                                                    borderWidth: '1px',
-                                                    marginTop: '4px',
-                                                    borderColor: '#E7E7E7',
-                                                    backgroundColor: 'white',
-                                                    borderRadius: '0.375rem',
-                                                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                                                    paddingLeft: '0.5rem',
-                                                    paddingRight: '0.5rem',
-                                                    paddingTop: '0.375rem',
-                                                    paddingBottom: '0.375rem',
-                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                } })] })), _jsxs("div", __assign({ style: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            marginTop: '20px',
-                                        } }, { children: [_jsx("div", __assign({ style: {
-                                                    fontSize: '0.8rem',
-                                                    fontWeight: '600',
-                                                    color: 'rgba(56, 65, 81, 0.7)',
-                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                } }, { children: "End date" })), _jsx("input", { type: "date", value: dateEnd, onChange: function (e) { return setDateEnd(e.target.value); }, placeholder: "End date", style: {
-                                                    width: '115px',
-                                                    fontSize: '0.8rem',
-                                                    color: theme.primaryTextColor,
-                                                    borderWidth: '1px',
-                                                    marginTop: '4px',
-                                                    borderColor: '#E7E7E7',
-                                                    backgroundColor: 'white',
-                                                    borderRadius: '0.375rem',
-                                                    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                                                    paddingLeft: '0.5rem',
-                                                    paddingRight: '0.5rem',
-                                                    paddingTop: '0.375rem',
-                                                    paddingBottom: '0.375rem',
-                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                } })] }))] }))), columnType === 'string' &&
-                                columnStats &&
-                                columnStats.length > 0 && (_jsx("div", __assign({ style: {
-                                    flex: 'flex',
-                                    flexDirection: 'column',
-                                    marginTop: '14px',
-                                } }, { children: columnStats.map(function (value) { return (_jsx("div", __assign({ style: {
-                                        display: 'flex',
-                                        flexDirection: 'row',
-                                        alignItems: 'center',
-                                    } }, { children: _jsxs("div", __assign({ style: {
+                                                    } }, { children: "End date" })), _jsx("input", { type: "date", value: dateEnd, onChange: function (e) { return setDateEnd(e.target.value); }, placeholder: "End date" })] }))] }))), columnType === 'string' &&
+                                    columnStats &&
+                                    columnStats.length > 0 && (_jsx("div", __assign({ style: {
+                                        flex: 'flex',
+                                        flexDirection: 'column',
+                                        marginTop: '14px',
+                                        overflow: 'hidden',
+                                    } }, { children: columnStats.map(function (value) { return (_jsx("div", __assign({ style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',
-                                            paddingTop: 6,
-                                            paddinBottom: 6,
-                                        } }, { children: [_jsx(DivCheckbox
-                                            //   type="checkbox"
-                                            //   style={{
-                                            //     border: "1px solid red",
-                                            //     borderRadius: "4px",
-                                            //   boxSizing: "border-box",
-                                            // color: "#fff",
-                                            //     height: "18px",
-                                            //     minWidth: "18px",
-                                            //     position: "relative",
-                                            //     width: "18px",
-                                            //   }}
-                                            // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
-                                            , { 
-                                                //   type="checkbox"
-                                                //   style={{
-                                                //     border: "1px solid red",
-                                                //     borderRadius: "4px",
-                                                //   boxSizing: "border-box",
-                                                // color: "#fff",
-                                                //     height: "18px",
-                                                //     minWidth: "18px",
-                                                //     position: "relative",
-                                                //     width: "18px",
-                                                //   }}
-                                                // className="border-[#E7E7E7] border-[1px] shadow-sm rounded-sm bg-white cursor-pointer"
-                                                checked: stringFilterValues.includes(value), onChange: function () {
-                                                    setStringFilterValues(function (prev) {
-                                                        return prev.includes(value)
-                                                            ? prev.filter(function (v) { return v !== value; })
-                                                            : __spreadArray(__spreadArray([], prev, true), [value], false);
-                                                    });
-                                                } }), _jsx("div", __assign({ style: {
-                                                    marginLeft: 6,
-                                                    display: 'block',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                    color: theme.primaryTextColor,
-                                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                                } }, { children: value }))] }), value) }), value)); }) }))), _jsx("button", __assign({ style: {
-                                    width: '245px',
-                                    marginTop: '20px',
-                                    padding: '0.5rem 0.75rem',
-                                    backgroundColor: 'rgb(56, 65, 81)',
-                                    color: 'rgb(255, 255, 255)',
-                                    fontWeight: '500',
-                                    borderRadius: '0.375rem',
-                                    boxShadow: 'rgba(0, 0, 0, 0.05) 0px 1px 2px 0px',
-                                    fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
-                                    border: 'none',
-                                    outline: 'none',
-                                    cursor: 'pointer',
-                                }, onClick: function () {
-                                    if (indexBeingEdited > -1) {
-                                        updateFilter(indexBeingEdited);
+                                        } }, { children: _jsxs("div", __assign({ style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                alignItems: 'center',
+                                                paddingTop: 6,
+                                                paddingBottom: 6,
+                                            } }, { children: [_jsx(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: function () {
+                                                        setStringFilterValues(function (prev) {
+                                                            return prev.includes(value)
+                                                                ? prev.filter(function (v) { return v !== value; })
+                                                                : __spreadArray(__spreadArray([], prev, true), [value], false);
+                                                        });
+                                                    } }), _jsx("div", __assign({ style: {
+                                                        marginLeft: 6,
+                                                        display: 'block',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                        color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
+                                                        fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+                                                    } }, { children: value }))] }), value) }), value)); }) }))), _jsx("div", { style: { height: 20 } }), _jsx(ButtonComponent, { id: "custom-button", onClick: function () {
+                                        if (indexBeingEdited > -1) {
+                                            updateFilter(indexBeingEdited);
+                                            setIsOpen(false);
+                                            return;
+                                        }
+                                        addFilter();
                                         setIsOpen(false);
-                                        return;
-                                    }
-                                    addFilter();
-                                    setIsOpen(false);
-                                } }, { children: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }))] })))] })), _jsx("div", { style: { height: '12px' } })] })));
+                                    }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' })] })) }))] })), _jsx("div", { style: { height: '12px' } })] })));
 };
 var DivCheckbox = function (_a) {
-    var onChange = _a.onChange, checked = _a.checked;
+    var onChange = _a.onChange, checked = _a.checked, theme = _a.theme;
     var toggleCheckbox = function () {
         if (onChange) {
             onChange(!checked);
         }
     };
     var style = {
-        display: 'inline-block',
+        // display: 'inline-block',
         width: '18px',
         height: '18px',
         background: checked ? '#384151' : '#fff',
@@ -1560,9 +1284,13 @@ var DivCheckbox = function (_a) {
         cursor: 'pointer',
         boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
         fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
     };
     return (_jsx("div", __assign({ style: style, onClick: toggleCheckbox, "aria-checked": checked, 
         // className="shadow-sm"
-        role: "checkbox" }, { children: checked && _jsx(CheckIcon, { className: "text-white", "aria-hidden": "true" }) })));
+        role: "checkbox" }, { children: checked && (_jsx(CheckIcon, { style: { color: theme === null || theme === void 0 ? void 0 : theme.backgroundColor, height: 16, width: 16 }, className: "text-white", "aria-hidden": "true" })) })));
 };
 //# sourceMappingURL=ReportBuilder.js.map