blixify-ui-web 1.2.68 → 1.2.69

package/lib/components/data/dataTemplate/settingsModal.js

@@ -94,27 +94,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabModal = exports.FilterModal = exports.OverviewModal = exports.SortModal = void 0;
+exports.TabModal = void 0;
 exports.ExpressionModal = ExpressionModal;
 var outline_1 = require("@heroicons/react/24/outline");
 var react_1 = __importStar(require("react"));
 var button_1 = require("../../action/button");
-var iconButton_1 = require("../../action/iconButton");
-var table_1 = require("../../display/table");
 var form_1 = require("../../input/form");
 var select_1 = require("../../input/select");
 var textInput_1 = require("../../input/textInput");
 var allIcons = __importStar(require("@heroicons/react/24/solid"));
-var sortType = [
-    {
-        key: "asc",
-        label: "Ascending",
-    },
-    {
-        key: "desc",
-        label: "Descending",
-    },
-];
 var tabTableType = [
     { key: "grid", label: "Grid" },
     { key: "list", label: "List" },
@@ -124,359 +112,6 @@ var tabTableType = [
     { key: "feeds", label: "Feeds" },
     { key: "iframe", label: "IFrame" },
 ];
-var SortModal = /** @class */ (function (_super) {
-    __extends(SortModal, _super);
-    function SortModal() {
-        var _a, _b, _c, _d;
-        var _this = _super.apply(this, arguments) || this;
-        _this.state = {
-            sortId: (_b = (_a = _this.props.sort) === null || _a === void 0 ? void 0 : _a.sortId) !== null && _b !== void 0 ? _b : "",
-            sortType: (_d = (_c = _this.props.sort) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : "",
-        };
-        _this.componentDidUpdate = function (prevProps) {
-            var _a, _b;
-            if (JSON.stringify(prevProps === null || prevProps === void 0 ? void 0 : prevProps.sort) !== JSON.stringify(_this.props.sort)) {
-                _this.setState({
-                    sortId: (_a = _this.props.sort) === null || _a === void 0 ? void 0 : _a.sortId,
-                    sortType: (_b = _this.props.sort) === null || _b === void 0 ? void 0 : _b.type,
-                });
-            }
-        };
-        return _this;
-    }
-    SortModal.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e;
-        return (react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { className: "pb-28" },
-                react_1.default.createElement(select_1.Select, { containerClassName: "mt-5", value: (_a = this.state.sortId) !== null && _a !== void 0 ? _a : "", label: "Sort By", options: (_d = (_c = (_b = this.props).renderReferenceLabelOptions) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : [], onChange: function (value) {
-                        _this.setState({ sortId: value });
-                    } }),
-                react_1.default.createElement(select_1.Select, { containerClassName: "mt-10", value: (_e = this.state.sortType) !== null && _e !== void 0 ? _e : "", label: "Sort Order", options: sortType, onChange: function (value) {
-                        _this.setState({ sortType: value });
-                    } })),
-            react_1.default.createElement("div", { className: "mt-24 flex justify-end" },
-                react_1.default.createElement(button_1.Button, { text: "Sort", type: "normal", onClick: function () {
-                        if (_this.props.onChangeSort) {
-                            _this.props.onChangeSort({
-                                sortId: _this.state.sortId,
-                                type: _this.state.sortType,
-                            });
-                        }
-                        _this.props.onClose();
-                    } }))));
-    };
-    return SortModal;
-}(react_1.Component));
-exports.SortModal = SortModal;
-var OverviewModal = /** @class */ (function (_super) {
-    __extends(OverviewModal, _super);
-    function OverviewModal() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            model: [],
-        };
-        _this.componentDidMount = function () {
-            _this.setState({
-                model: _this.props.model,
-            });
-        };
-        _this.componentDidUpdate = function (prevProps) {
-            if (JSON.stringify(prevProps.model) !== JSON.stringify(_this.props.model))
-                _this.setState({
-                    model: _this.props.model,
-                });
-        };
-        _this.handleDragStart = function (e, id) {
-            e.dataTransfer.setData("itemId", id);
-        };
-        _this.handleDragOver = function (e) {
-            e.preventDefault();
-        };
-        _this.handleDrop = function (e, id) {
-            e.preventDefault();
-            var data = e.dataTransfer.getData("itemId");
-            var clonedModel = JSON.parse(JSON.stringify(_this.state.model));
-            var selectedIndex = clonedModel.findIndex(function (item) { return item.id === data; });
-            var selectedItem = clonedModel.splice(selectedIndex, 1)[0];
-            var placingIndex = clonedModel.findIndex(function (item) { return item.id === id; });
-            clonedModel.splice(placingIndex, 0, selectedItem);
-            _this.setState({
-                model: clonedModel,
-            });
-        };
-        _this.handleHideDS = function (eachKey, hide) {
-            var clonedModel = JSON.parse(JSON.stringify(_this.state.model));
-            clonedModel.map(function (eachModel) {
-                if (eachModel.id === eachKey)
-                    eachModel.hide = hide;
-                return eachModel;
-            });
-            _this.setState({
-                model: clonedModel,
-            });
-        };
-        _this.renderOverviewContent = function () {
-            var _a;
-            var overviewList = [];
-            var index = 1;
-            (_a = _this.state.model) === null || _a === void 0 ? void 0 : _a.map(function (eachModel) {
-                if (eachModel.id === "id" ||
-                    eachModel.id === "_id" ||
-                    eachModel.hideOverview)
-                    return null;
-                overviewList.push(react_1.default.createElement("div", { className: "flex flex-row w-full" },
-                    index,
-                    " . ",
-                    eachModel.name,
-                    react_1.default.createElement("div", { className: "flex-grow" }),
-                    react_1.default.createElement("div", { draggable: true, onDragStart: function (e) {
-                            _this.handleDragStart(e, eachModel.id);
-                        }, onDrop: function (e) {
-                            _this.handleDrop(e, eachModel.id);
-                        }, onDragOver: _this.handleDragOver },
-                        react_1.default.createElement(outline_1.ArrowsPointingOutIcon, { className: "text-primary-600 h-4 w-4 cursor-pointer mr-1" })),
-                    eachModel.hide ? (react_1.default.createElement(outline_1.EyeSlashIcon, { className: "text-primary-600 h-4 w-4 cursor-pointer", onClick: function () {
-                            _this.handleHideDS(eachModel.id, false);
-                        } })) : (react_1.default.createElement(outline_1.EyeIcon, { className: "text-primary-600 h-4 w-4 cursor-pointer", onClick: function () {
-                            _this.handleHideDS(eachModel.id, true);
-                        } }))));
-                index += 1;
-                return null;
-            });
-            return overviewList;
-        };
-        return _this;
-    }
-    OverviewModal.prototype.render = function () {
-        var _this = this;
-        return (react_1.default.createElement("div", null,
-            react_1.default.createElement("div", { className: "gap-y-2" }, this.renderOverviewContent()),
-            react_1.default.createElement("div", { className: "mt-24 flex justify-end" },
-                react_1.default.createElement(button_1.Button, { text: "Confirm", type: "normal", onClick: function () {
-                        var _a, _b, _c;
-                        (_b = (_a = _this.props).onChangeHide) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = _this.state.model) !== null && _c !== void 0 ? _c : []);
-                        _this.props.onClose();
-                    } }))));
-    };
-    return OverviewModal;
-}(react_1.Component));
-exports.OverviewModal = OverviewModal;
-var defaultQueryInput = {
-    type: "",
-    value: "",
-    options: [],
-};
-var FilterModal = /** @class */ (function (_super) {
-    __extends(FilterModal, _super);
-    function FilterModal() {
-        var _a;
-        var _this = _super.apply(this, arguments) || this;
-        _this.state = {
-            filterQueryModal: false,
-            query: defaultQueryInput,
-            queries: (_a = _this.props.filter) !== null && _a !== void 0 ? _a : [],
-            optionList: [],
-        };
-        _this.queryFormRef = (0, react_1.createRef)();
-        _this.queryTypeRef = (0, react_1.createRef)();
-        _this.queryValueRef = (0, react_1.createRef)();
-        _this.filterTableHeader = [
-            { key: "type", title: "Type" },
-            { key: "value", title: "Column" },
-            { key: "sort", title: "Sort" },
-            { key: "del", title: "Delete" },
-        ];
-        _this.filterOptionHeader = [
-            { key: "name", title: "Name", type: "string" },
-            { key: "sort", title: "Sort" },
-            { key: "del", title: "Delete" },
-        ];
-        _this.mongofilterType = [
-            {
-                key: "reference",
-                label: "Reference",
-            },
-            {
-                key: "list",
-                label: "List",
-            },
-            {
-                key: "range",
-                label: "Range",
-            },
-        ];
-        _this.fbFilterType = [
-            { key: "search", label: "Search" },
-            {
-                key: "reference",
-                label: "Reference",
-            },
-            {
-                key: "list",
-                label: "List",
-            },
-            {
-                key: "range",
-                label: "Range",
-            },
-        ];
-        _this.componentDidUpdate = function (prevProps) {
-            if (JSON.stringify(prevProps.filter) !== JSON.stringify(_this.props.filter)) {
-                _this.setState({
-                    queries: _this.props.filter,
-                });
-            }
-        };
-        _this.handleOnChangeQueryInput = function (id, value) {
-            var _a;
-            var clonedQueryInput = JSON.parse(JSON.stringify(_this.state.query));
-            clonedQueryInput[id] = value;
-            if (clonedQueryInput.type === "reference") {
-                if (clonedQueryInput.value) {
-                    var selectedRefModel = (_a = _this.props.model) === null || _a === void 0 ? void 0 : _a.find(function (eachItem) { return eachItem.id === clonedQueryInput.value; });
-                    if (selectedRefModel) {
-                        clonedQueryInput["label"] = selectedRefModel.referenceLabel;
-                        clonedQueryInput["spaceId"] = selectedRefModel.referenceSpaceId;
-                    }
-                }
-            }
-            else {
-                delete clonedQueryInput["label"];
-                delete clonedQueryInput["spaceId"];
-            }
-            _this.setState({ query: clonedQueryInput });
-        };
-        _this.handleFilterQuery = function (index, sortType, isOption) {
-            var _a, _b;
-            var sortList = JSON.parse(JSON.stringify(isOption ? _this.state.optionList : _this.state.queries));
-            var ascIndex = sortType === "up" ? index - 1 : index + 1;
-            _a = [
-                sortList[ascIndex],
-                sortList[index],
-            ], sortList[index] = _a[0], sortList[ascIndex] = _a[1];
-            _this.setState((_b = {}, _b[isOption ? "optionList" : "queries"] = sortList, _b));
-        };
-        _this.handleAddFilterData = function (isOption, data) {
-            var _a, _b, _c, _d, _e, _f;
-            if (isOption) {
-                var clonedOptionList = (_a = _this.state.optionList) !== null && _a !== void 0 ? _a : [];
-                var optionText = data["name"];
-                if (_this.state.optionList && optionText)
-                    clonedOptionList.push(optionText);
-                _this.setState({ optionList: clonedOptionList });
-            }
-            else {
-                if (((_b = _this.state.query) === null || _b === void 0 ? void 0 : _b.type) === "list" &&
-                    ((_c = _this.state.optionList) === null || _c === void 0 ? void 0 : _c.length) === 0) {
-                    (_e = (_d = _this.props).setNotification) === null || _e === void 0 ? void 0 : _e.call(_d, {
-                        type: false,
-                        title: "Slice Error",
-                        msg: "Please at least add one option into the list",
-                    });
-                }
-                else {
-                    var clonedQueries = (_f = _this.state.queries) !== null && _f !== void 0 ? _f : [];
-                    var currentQuery = JSON.parse(JSON.stringify(_this.state.query));
-                    currentQuery["options"] = JSON.parse(JSON.stringify(_this.state.optionList));
-                    clonedQueries.push(currentQuery);
-                    _this.setState({
-                        queries: clonedQueries,
-                        filterQueryModal: false,
-                        optionList: [],
-                    });
-                }
-            }
-        };
-        _this.handleUpdateNewQueryModal = function (filterQueryModal) {
-            _this.setState({ filterQueryModal: filterQueryModal });
-        };
-        _this.handleSpliceFilter = function (index, isOption) {
-            var _a;
-            var temp = JSON.parse(JSON.stringify(isOption ? _this.state.optionList : _this.state.queries));
-            temp.splice(index, 1);
-            _this.setState((_a = {}, _a[isOption ? "optionList" : "queries"] = temp, _a));
-        };
-        _this.renderFilterData = function (isOption) {
-            var filterQueryStructureView = [];
-            var sortComponent = undefined;
-            var list = isOption ? _this.state.optionList : _this.state.queries;
-            list === null || list === void 0 ? void 0 : list.map(function (data, index) {
-                if (list && list.length > 1) {
-                    var upData_1 = index === list.length - 1;
-                    sortComponent = (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                            _this.handleFilterQuery(index, upData_1 ? "up" : "down", isOption);
-                        } }, upData_1 ? (react_1.default.createElement(outline_1.ArrowUpIcon, { className: "block w-5 h-5 text-primary-600" })) : (react_1.default.createElement(outline_1.ArrowDownIcon, { className: "block w-5 h-5 text-primary-600" }))));
-                }
-                var eachData = isOption
-                    ? { key: index, name: data }
-                    : { key: index, type: data.type, value: data.value };
-                filterQueryStructureView.push(__assign(__assign({}, eachData), { sort: sortComponent, del: (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                            _this.handleSpliceFilter(index, isOption);
-                        } },
-                        react_1.default.createElement(outline_1.TrashIcon, { className: "block w-5 h-5 text-primary-600" }))) }));
-                return "";
-            });
-            return filterQueryStructureView;
-        };
-        return _this;
-    }
-    FilterModal.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        var isFirebase = this.props.server === "fbServer" || this.props.server === "firebase";
-        if (this.state.filterQueryModal) {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(form_1.Form, { className: "mt-5 pb-5", refList: [this.queryTypeRef, this.queryValueRef], handleComplete: function () {
-                        _this.handleAddFilterData();
-                    }, ref: this.queryFormRef },
-                    react_1.default.createElement(select_1.Select, { ref: this.queryTypeRef, value: (_b = (_a = this.state.query) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : "", label: "Slice Type", options: isFirebase ? this.fbFilterType : this.mongofilterType, onChange: function (value) {
-                            _this.handleOnChangeQueryInput("type", value);
-                        } }),
-                    react_1.default.createElement(select_1.Select, { containerClassName: "mt-5", ref: this.queryValueRef, value: (_d = (_c = this.state.query) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : "", label: "Column", options: (_l = (((_e = this.state.query) === null || _e === void 0 ? void 0 : _e.type) === "reference"
-                            ? (_g = (_f = this.props).renderReferenceLabelOptions) === null || _g === void 0 ? void 0 : _g.call(_f, "", true, "reference")
-                            : (_j = (_h = this.props).renderReferenceLabelOptions) === null || _j === void 0 ? void 0 : _j.call(_h, "", false, ((_k = this.state.query) === null || _k === void 0 ? void 0 : _k.type) === "range" ? "date" : undefined))) !== null && _l !== void 0 ? _l : [], onChange: function (value) {
-                            _this.handleOnChangeQueryInput("value", value);
-                        }, staticDropdown: true }),
-                    ((_m = this.state.query) === null || _m === void 0 ? void 0 : _m.type) === "list" && (react_1.default.createElement(table_1.Table, { className: "py-7", header: this.filterOptionHeader, data: this.renderFilterData(true), loading: false, addable: {
-                            active: true,
-                            onAddData: function (data) {
-                                _this.handleAddFilterData(true, data);
-                            },
-                        } }))),
-                react_1.default.createElement("div", { className: "flex justify-end items-end" },
-                    react_1.default.createElement(button_1.Button, { className: "mr-5", text: "Back", type: "light", onClick: function () {
-                            _this.handleUpdateNewQueryModal(false);
-                        } }),
-                    react_1.default.createElement(button_1.Button, { text: "Add", type: "normal", onClick: function () {
-                            var _a;
-                            (_a = _this.queryFormRef.current) === null || _a === void 0 ? void 0 : _a.handleSubmit();
-                        } }))));
-        }
-        else {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: "flex flex-row mb-2 items-center mt-3" },
-                    react_1.default.createElement("h2", { className: "text-2xl font-bold text-gray-700" }, "New Query"),
-                    react_1.default.createElement("div", { className: "grow" }),
-                    react_1.default.createElement(iconButton_1.IconButton, { className: "sm mt-2", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () {
-                            _this.setState({
-                                query: defaultQueryInput,
-                            }, function () {
-                                _this.handleUpdateNewQueryModal(true);
-                            });
-                        } })),
-                react_1.default.createElement(table_1.Table, { className: "py-7", header: this.filterTableHeader, data: this.renderFilterData(), loading: false }),
-                react_1.default.createElement("div", { className: "mt-24 flex justify-end" },
-                    react_1.default.createElement(button_1.Button, { text: "Slice", type: "normal", onClick: function () {
-                            var _a, _b, _c;
-                            (_b = (_a = _this.props).onChangeFilter) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = _this.state.queries) !== null && _c !== void 0 ? _c : []);
-                            _this.props.onClose();
-                        } }))));
-        }
-    };
-    return FilterModal;
-}(react_1.Component));
-exports.FilterModal = FilterModal;
 var TabModal = /** @class */ (function (_super) {
     __extends(TabModal, _super);
     function TabModal() {
@@ -575,7 +210,8 @@ var TabModal = /** @class */ (function (_super) {
                 var suportedModelTypes_1 = ["string", "reference"];
                 var titleOptionList = _this.props.model
                     .filter(function (eachModel) {
-                    return suportedModelTypes_1.includes(eachModel.type) && eachModel.id !== "id";
+                    return suportedModelTypes_1.includes(eachModel.type) &&
+                        eachModel.id !== "id";
                 })
                     .map(function (eachModel) { return ({
                     key: eachModel.id,
@@ -700,7 +336,8 @@ var TabModal = /** @class */ (function (_super) {
                 var suportedModelTypes_2 = ["list", "reference"];
                 var titleOptionList = _this.props.model
                     .filter(function (eachModel) {
-                    return suportedModelTypes_2.includes(eachModel.type) && eachModel.id !== "id";
+                    return suportedModelTypes_2.includes(eachModel.type) &&
+                        eachModel.id !== "id";
                 })
                     .map(function (eachModel) { return ({
                     key: eachModel.id,
@@ -733,51 +370,51 @@ var TabModal = /** @class */ (function (_super) {
                 react_1.default.createElement(textInput_1.TextInput, { id: "tabName", ref: this.tabNameRef, value: this.state.tabName, type: "text", label: "Name", placeholder: "eg. Grid", onChange: function (e) {
                         _this.setState({ tabName: e.target.value });
                     } }),
-                react_1.default.createElement(select_1.Select, { label: "View Type", ref: this.tabTypeSelectionRef, options: this.renderViewTabOptions(), value: (_a = this.state.tabTypeSelection) !== null && _a !== void 0 ? _a : "", onChange: function (value) {
+                react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "View Type", ref: this.tabTypeSelectionRef, options: this.renderViewTabOptions(), value: (_a = this.state.tabTypeSelection) !== null && _a !== void 0 ? _a : "", onChange: function (value) {
                         _this.setState({ tabTypeSelection: value });
                     }, staticDropdown: true }),
                 (this.state.tabTypeSelection === "grid" ||
-                    this.state.tabTypeSelection === "list") && (react_1.default.createElement(select_1.Select, { id: "tabPreviewImage", label: "Preview Image", ref: this.tabPreviewImageRef, options: (_d = (_c = (_b = this.props).renderReferenceLabelOptions) === null || _c === void 0 ? void 0 : _c.call(_b, "", false, "image")) !== null && _d !== void 0 ? _d : [], value: (_e = this.state.previewImageSelection) !== null && _e !== void 0 ? _e : "", onChange: function (value) {
+                    this.state.tabTypeSelection === "list") && (react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabPreviewImage", label: "Preview Image", ref: this.tabPreviewImageRef, options: (_d = (_c = (_b = this.props).renderReferenceLabelOptions) === null || _c === void 0 ? void 0 : _c.call(_b, "", false, "image")) !== null && _d !== void 0 ? _d : [], value: (_e = this.state.previewImageSelection) !== null && _e !== void 0 ? _e : "", onChange: function (value) {
                         _this.setState({ previewImageSelection: value });
                     }, staticDropdown: true })),
                 this.state.tabTypeSelection === "calendar" && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(select_1.Select, { id: "tabCalendarTitle", label: "Title Column", ref: this.tabCalendarTitleRef, options: (_g = (_f = this.renderCalendarTitleOptions) === null || _f === void 0 ? void 0 : _f.call(this)) !== null && _g !== void 0 ? _g : [], value: (_h = this.state.calendarTitleColumn) !== null && _h !== void 0 ? _h : "", onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabCalendarTitle", label: "Title Column", ref: this.tabCalendarTitleRef, options: (_g = (_f = this.renderCalendarTitleOptions) === null || _f === void 0 ? void 0 : _f.call(this)) !== null && _g !== void 0 ? _g : [], value: (_h = this.state.calendarTitleColumn) !== null && _h !== void 0 ? _h : "", onChange: function (value) {
                             _this.setState({ calendarTitleColumn: value });
                         } }),
-                    react_1.default.createElement(select_1.Select, { id: "tabStartDate", label: "Start Date Column", ref: this.tabCalendarStartDateRef, options: (_k = (_j = this.renderCalendarDateOptions) === null || _j === void 0 ? void 0 : _j.call(this, "startDate")) !== null && _k !== void 0 ? _k : [], value: (_l = this.state.calendarStartDateColumn) !== null && _l !== void 0 ? _l : "", onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabStartDate", label: "Start Date Column", ref: this.tabCalendarStartDateRef, options: (_k = (_j = this.renderCalendarDateOptions) === null || _j === void 0 ? void 0 : _j.call(this, "startDate")) !== null && _k !== void 0 ? _k : [], value: (_l = this.state.calendarStartDateColumn) !== null && _l !== void 0 ? _l : "", onChange: function (value) {
                             _this.setState({ calendarStartDateColumn: value });
                         } }),
-                    react_1.default.createElement(select_1.Select, { id: "tabEndDate", label: "End Date Column (Optional)", ref: this.tabCalendarEndDateRef, options: (_o = (_m = this.renderCalendarDateOptions) === null || _m === void 0 ? void 0 : _m.call(this, "endDate")) !== null && _o !== void 0 ? _o : [], value: (_p = this.state.calendarEndDateColumn) !== null && _p !== void 0 ? _p : "", onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabEndDate", label: "End Date Column (Optional)", ref: this.tabCalendarEndDateRef, options: (_o = (_m = this.renderCalendarDateOptions) === null || _m === void 0 ? void 0 : _m.call(this, "endDate")) !== null && _o !== void 0 ? _o : [], value: (_p = this.state.calendarEndDateColumn) !== null && _p !== void 0 ? _p : "", onChange: function (value) {
                             _this.setState({ calendarEndDateColumn: value });
                         } }))),
                 this.state.tabTypeSelection === "iframe" && (react_1.default.createElement(textInput_1.TextInput, { id: "tabIframe", ref: this.tabIframeRef, value: (_q = this.state.iframeLink) !== null && _q !== void 0 ? _q : "", type: "text", label: "Iframe Src", placeholder: "eg. https://link.com", onChange: function (e) {
                         _this.setState({ iframeLink: e.target.value });
                     } })),
                 this.state.tabTypeSelection === "feeds" && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(select_1.Select, { id: "tabFeedsTitle", label: "Title Column", ref: this.tabFeedsTitleRef, options: (_r = this.renderFeedsColumnOptions("title")) !== null && _r !== void 0 ? _r : [], value: (_s = this.state.feedTitleColumn) !== null && _s !== void 0 ? _s : "", staticDropdown: true, onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabFeedsTitle", label: "Title Column", ref: this.tabFeedsTitleRef, options: (_r = this.renderFeedsColumnOptions("title")) !== null && _r !== void 0 ? _r : [], value: (_s = this.state.feedTitleColumn) !== null && _s !== void 0 ? _s : "", staticDropdown: true, onChange: function (value) {
                             _this.setState({ feedTitleColumn: value });
                         } }),
-                    react_1.default.createElement(select_1.Select, { id: "tabFeedsContent", label: "Content Column", ref: this.tabFeedsContentRef, options: (_t = this.renderFeedsColumnOptions("content")) !== null && _t !== void 0 ? _t : [], value: (_u = this.state.feedContentColumn) !== null && _u !== void 0 ? _u : "", staticDropdown: true, onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabFeedsContent", label: "Content Column", ref: this.tabFeedsContentRef, options: (_t = this.renderFeedsColumnOptions("content")) !== null && _t !== void 0 ? _t : [], value: (_u = this.state.feedContentColumn) !== null && _u !== void 0 ? _u : "", staticDropdown: true, onChange: function (value) {
                             _this.setState({ feedContentColumn: value });
                         } }),
-                    react_1.default.createElement(select_1.Select, { id: "tabFeedsDesc", label: "Description Column (Optional)", options: (_v = this.renderFeedsColumnOptions("desc")) !== null && _v !== void 0 ? _v : [], value: (_w = this.state.feedDescColumn) !== null && _w !== void 0 ? _w : "", optional: true, staticDropdown: true, onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabFeedsDesc", label: "Description Column (Optional)", options: (_v = this.renderFeedsColumnOptions("desc")) !== null && _v !== void 0 ? _v : [], value: (_w = this.state.feedDescColumn) !== null && _w !== void 0 ? _w : "", optional: true, staticDropdown: true, onChange: function (value) {
                             _this.setState({ feedDescColumn: value });
                         } }),
-                    react_1.default.createElement(select_1.Select, { id: "tabFeedsIcon", label: "Icon Column (Optional)", options: (_x = this.renderFeedsColumnOptions("icon")) !== null && _x !== void 0 ? _x : [], value: (_y = this.state.feedIconColumn) !== null && _y !== void 0 ? _y : "", staticDropdown: true, type: "icon", onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabFeedsIcon", label: "Icon Column (Optional)", options: (_x = this.renderFeedsColumnOptions("icon")) !== null && _x !== void 0 ? _x : [], value: (_y = this.state.feedIconColumn) !== null && _y !== void 0 ? _y : "", staticDropdown: true, type: "icon", onChange: function (value) {
                             _this.setState({ feedIconColumn: value });
                         } }))),
                 this.state.tabTypeSelection === "map" && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(select_1.Select, { id: "tabMapAddress", ref: this.tabMapAddressRef, label: "Address Column", options: (_z = this.renderMapColumnOptions("address")) !== null && _z !== void 0 ? _z : [], value: (_0 = this.state.mapAddressColumn) !== null && _0 !== void 0 ? _0 : "", staticDropdown: true, onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabMapAddress", ref: this.tabMapAddressRef, label: "Address Column", options: (_z = this.renderMapColumnOptions("address")) !== null && _z !== void 0 ? _z : [], value: (_0 = this.state.mapAddressColumn) !== null && _0 !== void 0 ? _0 : "", staticDropdown: true, onChange: function (value) {
                             _this.setState({ mapAddressColumn: value });
                         } }),
-                    react_1.default.createElement(select_1.Select, { id: "tabMapTitle", label: "Title Column (Optional)", options: (_1 = this.renderMapColumnOptions("title")) !== null && _1 !== void 0 ? _1 : [], value: (_2 = this.state.mapTitleColumn) !== null && _2 !== void 0 ? _2 : "", staticDropdown: true, onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabMapTitle", label: "Title Column (Optional)", options: (_1 = this.renderMapColumnOptions("title")) !== null && _1 !== void 0 ? _1 : [], value: (_2 = this.state.mapTitleColumn) !== null && _2 !== void 0 ? _2 : "", staticDropdown: true, onChange: function (value) {
                             _this.setState({ mapTitleColumn: value });
                         } }),
-                    react_1.default.createElement(select_1.Select, { id: "tabMapGroup", label: "Group Column (Optional)", options: (_3 = this.renderMapColumnOptions("group")) !== null && _3 !== void 0 ? _3 : [], value: (_4 = this.state.mapGroupColumn) !== null && _4 !== void 0 ? _4 : "", staticDropdown: true, onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "tabMapGroup", label: "Group Column (Optional)", options: (_3 = this.renderMapColumnOptions("group")) !== null && _3 !== void 0 ? _3 : [], value: (_4 = this.state.mapGroupColumn) !== null && _4 !== void 0 ? _4 : "", staticDropdown: true, onChange: function (value) {
                             _this.setState({ mapGroupColumn: value });
                         } }))),
                 this.state.tabTypeSelection === "kanban" && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(select_1.Select, { id: "kanbanTitleColumn", label: "Title Column", ref: this.tabKanbanTitleRef, options: (_6 = (_5 = this.renderKanbanTitleOptions) === null || _5 === void 0 ? void 0 : _5.call(this)) !== null && _6 !== void 0 ? _6 : [], value: (_7 = this.state.kanbanTitleColumn) !== null && _7 !== void 0 ? _7 : "", onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "kanbanTitleColumn", label: "Title Column", ref: this.tabKanbanTitleRef, options: (_6 = (_5 = this.renderKanbanTitleOptions) === null || _5 === void 0 ? void 0 : _5.call(this)) !== null && _6 !== void 0 ? _6 : [], value: (_7 = this.state.kanbanTitleColumn) !== null && _7 !== void 0 ? _7 : "", onChange: function (value) {
                             _this.setState({ kanbanTitleColumn: value });
                         } })))),
             react_1.default.createElement("div", { className: "flex justify-end item-end" },
@@ -935,7 +572,9 @@ function ExpressionModal(props) {
     };
     // Update field selection
     var handleUpdateField = function (id, field) {
-        setExpressions(expressions.map(function (item) { return (item.id === id ? __assign(__assign({}, item), field) : item); }));
+        setExpressions(expressions.map(function (item) {
+            return item.id === id ? __assign(__assign({}, item), field) : item;
+        }));
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "p-4 overflow-y-auto pb-20 h-full" },
@@ -946,10 +585,10 @@ function ExpressionModal(props) {
                 expressions.map(function (item, index) {
                     var _a, _b, _c, _d;
                     return (react_1.default.createElement("div", { key: item.id, className: "flex items-center gap-2" },
-                        index === 0 ? (react_1.default.createElement(select_1.Select, { id: "attribute", label: "Column ".concat(index + 1), options: (_b = (_a = props.renderReferenceLabelOptions) === null || _a === void 0 ? void 0 : _a.call(props, "", false, "number")) !== null && _b !== void 0 ? _b : [], newValue: true, value: item.field, onChange: function (value) {
+                        index === 0 ? (react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "attribute", label: "Column ".concat(index + 1), options: (_b = (_a = props.renderReferenceLabelOptions) === null || _a === void 0 ? void 0 : _a.call(props, "", false, "number")) !== null && _b !== void 0 ? _b : [], newValue: true, value: item.field, onChange: function (value) {
                                 handleUpdateField(item.id, { field: value });
                             } })) : (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(select_1.Select, { id: "operator", label: "Operator", options: [
+                            react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "operator", label: "Operator", options: [
                                     {
                                         key: "+",
                                         label: "+",
@@ -969,7 +608,7 @@ function ExpressionModal(props) {
                                 ], value: item.operator, onChange: function (value) {
                                     handleUpdateField(item.id, { operator: value });
                                 } }),
-                            react_1.default.createElement(select_1.Select, { id: "attribute", label: "Column ".concat(index + 1), options: (_d = (_c = props.renderReferenceLabelOptions) === null || _c === void 0 ? void 0 : _c.call(props, "", false, "number")) !== null && _d !== void 0 ? _d : [], newValue: true, value: item.field, onChange: function (value) {
+                            react_1.default.createElement(select_1.Select, { portalDropdown: true, id: "attribute", label: "Column ".concat(index + 1), options: (_d = (_c = props.renderReferenceLabelOptions) === null || _c === void 0 ? void 0 : _c.call(props, "", false, "number")) !== null && _d !== void 0 ? _d : [], newValue: true, value: item.field, onChange: function (value) {
                                     handleUpdateField(item.id, { field: value });
                                 } }))),
                         index > 0 && (react_1.default.createElement(outline_1.TrashIcon, { className: "block w-10 h-10 text-primary-600 cursor-pointer", onClick: function () {