@adaptabletools/adaptable 17.0.0-canary.8 → 17.0.0-canary.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "17.0.0-canary.8",
+  "version": "17.0.0-canary.9",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1705055572519;
+declare const _default: 1705222747066;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1705055572519;
+exports.default = 1705222747066;

package/src/AdaptableOptions/ColumnFilterOptions.d.ts

@@ -127,14 +127,6 @@ export interface QuickFilterOptions<TData = any> {
      * @noCodeItem
      */
     quickFilterTrigger?: 'mouseenter' | 'click';
-    /**
-     * Open Quick Filter Values dropdown with mouse hover or click
-     *
-     * @defaultValue 'mouseenter'
-     * @gridInfoItem
-     * @noCodeItem
-     */
-    quickFilterValuesTrigger?: 'mouseenter' | 'click';
     /**
      * Sets a height for Quick Filter Bar (if not provided AG Grid's default is used)
      *
@@ -231,6 +223,14 @@ export interface ValuesFilterOptions<TData = any> {
      * @gridInfoItem
      */
     sortValuesFilter?: boolean;
+    /**
+     * Open Values dropdown with mouse hover or click
+     *
+     * @defaultValue 'mouseenter'
+     * @gridInfoItem
+     * @noCodeItem
+     */
+    valuesFilterTrigger?: 'mouseenter' | 'click';
 }
 /**
  * Context provided when Column Filtering

package/src/Utilities/Defaults/DefaultAdaptableOptions.js

@@ -186,7 +186,6 @@ exports.DefaultAdaptableOptions = {
             hideQuickFilterDropdown: undefined,
             hideQuickFilterInput: undefined,
             quickFilterTrigger: 'mouseenter',
-            quickFilterValuesTrigger: 'mouseenter',
             quickFilterDebounce: 250,
             quickFilterHeight: null,
             showQuickFilter: true,
@@ -198,6 +197,7 @@ exports.DefaultAdaptableOptions = {
             defaultFilterFormTab: 'Values',
         },
         valuesFilterOptions: {
+            valuesFilterTrigger: 'mouseenter',
             sortValuesFilter: false,
             filterValuesUsingTime: false,
             showDistinctFilteredValuesOnly: false,

package/src/Utilities/Services/ModuleService.js

@@ -106,7 +106,7 @@ class ModuleService {
             case 'ColumnFilter':
                 return learnUrl + 'handbook-column-filter';
             case 'GridFilter':
-                return learnUrl + 'handbook-column-filter';
+                return learnUrl + 'handbook-grid-filter';
             case 'FlashingCell':
                 return learnUrl + 'handbook-flashing-cell';
             case 'FormatColumn':

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -50,7 +50,7 @@ const CalculatedColumnExpressionWizardSection = (props) => {
                 return 'quantileAggregatedScalar';
         }
     };
-    return (React.createElement(Tabs_1.Tabs, { autoFocus: false },
+    return (React.createElement(Tabs_1.Tabs, { autoFocus: false, height: "100%" },
         React.createElement(Tabs_1.Tabs.Tab, null, (0, StringExtensions_1.Humanize)(props.expressionType)),
         React.createElement(Tabs_1.Tabs.Content, null, (() => {
             switch (props.expressionType) {

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.js

@@ -100,7 +100,7 @@ const CalculatedColumnWizard = (props) => {
                 isValid: CalculatedColumnExpressionWizardSection_1.isValidCalculatedColumnExpression,
                 renderSummary: CalculatedColumnExpressionWizardSection_1.renderCalculatedColumnExpressionSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { p: 2 },
+                    return (React.createElement(rebass_1.Box, { height: "100%", p: 2 },
                         React.createElement(CalculatedColumnExpressionWizardSection_1.CalculatedColumnExpressionWizardSection, { expressionType: expressionType, onChange: setCalculatedColumn })));
                 },
             },

package/src/View/Components/FilterForm/FilterForm.js

@@ -110,7 +110,8 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().valuesFilterOptions.showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await (0, runIfNotResolvedIn_1.runIfNotResolvedIn)(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().valuesFilterOptions
+            .showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
         if (this._isMounted) {
             this.setState({
                 distinctColumnValues,
@@ -178,7 +179,13 @@ class FilterFormComponent extends React.Component {
                     } })));
         }
         return (_a = predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => (React.createElement(rebass_1.Flex, { key: index, flexDirection: "row" },
-            React.createElement(AdaptableInput_1.default, { disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
+            React.createElement(AdaptableInput_1.default, { onMouseDown: (event) => {
+                    console.log('onMouseDown', predicateInput.type, event);
+                    if (predicateInput.type === 'date') {
+                        // This prevents the ag-grid dropdown closing when a date is selected
+                        event.stopPropagation();
+                    }
+                }, disabled: this.isFilterDisabled(), type: predicateInput.type, autoFocus: index === 0, value: filter.Predicate.Inputs[index], onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), mb: 1, flex: 1, fontSize: 2 }))));
     }
     isFilterDisabled() {
         var _a;

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -57,7 +57,8 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions
+            .hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             const columnFilterContext = {
                 column: this.props.currentColumn,
@@ -102,7 +103,7 @@ class QuickFilterFormComponent extends React.Component {
                         api.show();
                         this.shouldOpenValuesDropdown = false;
                     }
-                }, quickFilterValuesTrigger: this.props.quickFilterValuesTrigger }));
+                }, valuesFilterTrigger: this.props.valuesFilterTrigger }));
         }
         return (activePredicateDef &&
             (activePredicateDef === null || activePredicateDef === void 0 ? void 0 : activePredicateDef.inputs) === undefined && (React.createElement(rebass_1.Box, { color: this.isFilterDisabled() ? undefined : 'var(--ab-color-text-on-primary)', disabled: this.isFilterDisabled(), p: 1, alignSelf: "center" }, activePredicateDef.label)));
@@ -252,6 +253,6 @@ function mapDispatchToProps(dispatch) {
 const QuickFilterForm = (0, react_redux_1.connect)(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
 const QuickFilterFormReact = (columnFilterProps) => {
     var _a, _b, _c;
-    return (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(QuickFilterForm, { api: columnFilterProps.Adaptable.api, quickFilterTrigger: (_a = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterOptions.quickFilterTrigger, quickFilterValuesTrigger: (_b = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _b === void 0 ? void 0 : _b.quickFilterOptions.quickFilterValuesTrigger, quickFilterDebounce: (_c = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _c === void 0 ? void 0 : _c.quickFilterOptions.quickFilterDebounce, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu }), columnFilterProps.Adaptable);
+    return (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(QuickFilterForm, { api: columnFilterProps.Adaptable.api, quickFilterTrigger: (_a = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterOptions.quickFilterTrigger, valuesFilterTrigger: (_b = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _b === void 0 ? void 0 : _b.valuesFilterOptions.valuesFilterTrigger, quickFilterDebounce: (_c = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _c === void 0 ? void 0 : _c.quickFilterOptions.quickFilterDebounce, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu }), columnFilterProps.Adaptable);
 };
 exports.QuickFilterFormReact = QuickFilterFormReact;

package/src/View/Components/FilterForm/QuickFilterValues.d.ts

@@ -2,7 +2,7 @@
 import { ColumnFilter } from '../../../PredefinedConfig/Common/ColumnFilter';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
-import { QuickFilterOptions } from '../../../types';
+import { ValuesFilterOptions } from '../../../types';
 export interface QuickFilterValuesProps {
     api: AdaptableApi;
     currentColumn: AdaptableColumn;
@@ -14,6 +14,6 @@ export interface QuickFilterValuesProps {
         show: () => any;
         hide: () => any;
     }) => void;
-    quickFilterValuesTrigger?: QuickFilterOptions['quickFilterValuesTrigger'];
+    valuesFilterTrigger?: ValuesFilterOptions['valuesFilterTrigger'];
 }
 export declare const QuickFilterValues: (props: QuickFilterValuesProps) => JSX.Element;

package/src/View/Components/FilterForm/QuickFilterValues.js

@@ -99,7 +99,7 @@ const QuickFilterValues = (props) => {
         }
     };
     let showEvent = 'mouseenter';
-    if (props.quickFilterValuesTrigger === 'click') {
+    if (props.valuesFilterTrigger === 'click') {
         showEvent = 'click';
     }
     let selectedValues = props.columnFilter.Predicate.PredicateId === 'Values' ? 'Select Values' : 'Exclude Values';

package/src/View/GridFilter/GridFilterPopup.js

@@ -9,6 +9,7 @@ const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
 const ButtonExpand_1 = require("../Components/Buttons/ButtonExpand");
 const ButtonInvalid_1 = require("../Components/Buttons/ButtonInvalid");
@@ -20,23 +21,24 @@ const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const NamedQuerySelector_1 = require("./NamedQuerySelector");
 const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
 const GridFilterPopup = () => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
+    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     const handleEnter = (e) => {
         if (e.key === 'Enter') {
             runQuery();
         }
     };
     const disabled = isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter" },
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
         React.createElement(Panel_1.default, { bodyProps: { height: '100%' }, height: "100%" },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Expression" },
                     React.createElement(FieldWrap_1.default, { marginRight: 1, width: "100%" },
-                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Open Expression Editor", marginLeft: 1 }),
+                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
                         React.createElement(Input_1.default, { onKeyDown: handleEnter, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
-                        isExpressionValid ? (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: isSuspended || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })) : (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: isSuspended || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
+                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
                         ' ',
-                        (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression) !== '' && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
+                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
                 React.createElement(FormLayout_1.FormRow, { label: "" },
                     React.createElement(rebass_1.Flex, { justifyContent: "space-around" },
                         React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }, "Save"),

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -29,7 +29,7 @@ const QueryViewPanelComponent = (props) => {
             runQuery();
         }
     };
-    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Open Expression Editor", marginLeft: 1 }));
+    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: isSuspended, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
     const renderTextInput = () => {
         return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 500 },
             buttonExpand,

package/src/View/GridFilter/useGridFilterExpressionEditor.d.ts

@@ -21,4 +21,6 @@ export declare const useGridFilterExpressionEditor: () => {
     unSuspendGridFilter: () => void;
     setGridFilterExpression: (expression: string) => void;
     gridFilterAccessLevel: import("../../types").AccessLevel;
+    gridFilterHelpPage: string;
+    gridFilterLinkDisabled: boolean;
 };

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -27,6 +27,8 @@ const useGridFilterExpressionEditor = () => {
     const onAddCachedQuery = (cachedQuery) => {
         dispatch(SystemRedux.SystemCachedQueryAdd(cachedQuery));
     };
+    const gridFilterHelpPage = adaptable.ModuleService.getModuleById('GridFilter').moduleInfo.HelpPage;
+    const gridFilterLinkDisabled = !adaptable.api.internalApi.isDocumentationLinksDisplayed();
     React.useEffect(() => {
         adaptable.api.eventApi.on('AdaptableReady', () => {
             setIsAdaptableReady(true);
@@ -45,7 +47,11 @@ const useGridFilterExpressionEditor = () => {
     let availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
         return {
             label: col.friendlyName,
-            onClick: () => setExpression(expression + `[${col.columnId}]`),
+            onClick: () => {
+                // Bogdan - im sure there is a better way to do this check with fancy operators i dont know
+                const newExp = StringExtensions_1.default.IsNotNullOrEmpty(expression) ? expression : '';
+                setExpression(newExp + `[${col.columnId}]`);
+            },
         };
     });
     const clearQuery = () => {
@@ -123,6 +129,8 @@ const useGridFilterExpressionEditor = () => {
             adaptable.api.gridFilterApi.setGridFilterExpression(expression);
         },
         gridFilterAccessLevel,
+        gridFilterHelpPage,
+        gridFilterLinkDisabled,
     };
 };
 exports.useGridFilterExpressionEditor = useGridFilterExpressionEditor;

package/src/components/Datepicker/index.js

@@ -17,13 +17,13 @@ const DatepickerContext_1 = require("./DatepickerContext");
 const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
 const addBusinessDays_1 = tslib_1.__importDefault(require("date-fns/addBusinessDays"));
 const react_day_picker_1 = require("react-day-picker");
-const DatepickerOverlay = ({ onHide, children, onKeyDown, }) => {
+const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     React.useEffect(() => {
         var _a;
         (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onBlur: (e) => {
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             var _a;
             const { relatedTarget } = e;
             const node = domRef.current;
@@ -87,7 +87,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(rebass_1.Flex, null,
-        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -110,9 +110,9 @@ const QueryBuilder = (props) => {
         } },
         React.createElement(QueryBuilderContext.Provider, { value: context },
             React.createElement(rebass_1.Box, { className: QUERY_BUILDER_CLASSNAME },
-                React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
+                React.createElement(HelpBlock_1.default, { "data-name": "query-builder-help", mt: 2, mb: 2, p: 2, fontSize: 3 }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),
                 errorOrEditor,
-                React.createElement(Panel_1.default, { variant: "default", header: "AdapTableQL Expression", mt: 3 },
+                React.createElement(Panel_1.default, { "data-name": "query-builder-expression-preview", variant: "default", header: "AdapTableQL Expression", mt: 3 },
                     React.createElement(rebass_1.Box, { className: `${QUERY_BUILDER_CLASSNAME}__expression`, minHeight: 48, my: 2, p: 3 }, expressionStr || 'Outputted Expression will display here'))))));
 };
 exports.QueryBuilder = QueryBuilder;

package/src/components/Select/Select.js

@@ -71,7 +71,9 @@ const Select = function (props) {
         };
     }, []);
     const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
-    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_g = props.menuPosition) !== null && _g !== void 0 ? _g : 'fixed', isClearable: props.isClearable, onChange: (option) => {
+    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_g = props.menuPosition) !== null && _g !== void 0 ? _g : 'absolute', 
+        // This needed so the menu is not clipped by overflow: hidden
+        menuPortalTarget: document.body, isClearable: props.isClearable, onChange: (option) => {
             if (props.isMulti) {
                 props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
             }