@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.2

package/src/View/ColumnInfo/ColumnInfo.js

@@ -5,7 +5,6 @@ import FormLayout, { FormRow } from '../../components/FormLayout';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
 import { Tabs } from '../../components/Tabs';
-import { SelectionMode } from '../../PredefinedConfig/Common/Enums';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableObjectList } from '../Components/AdaptableObjectList';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
@@ -46,10 +45,6 @@ const ColumnDefPreview = (props) => {
             Key: 'Header',
             Value: props.column ? props.column.friendlyName : null,
         },
-        {
-            Key: 'Aggregatable',
-            Value: props.column ? props.column.aggregatable : null,
-        },
         {
             Key: 'DataType',
             Value: props.column ? props.column.dataType : null,
@@ -58,6 +53,10 @@ const ColumnDefPreview = (props) => {
             Key: 'Groupable',
             Value: props.column ? props.column.groupable : null,
         },
+        {
+            Key: 'Aggregatable',
+            Value: props.column ? props.column.aggregatable : null,
+        },
         {
             Key: 'Filterable',
             Value: props.column ? props.column.filterable : null,
@@ -118,7 +117,7 @@ const ModuleView = (props) => {
     var _a, _b, _c, _d;
     const adaptable = useAdaptable();
     const module = adaptable.ModuleService.getModuleById(props.moduleName);
-    if (!module.isModuleAvailable()) {
+    if (!module || !module.isModuleAvailable()) {
         return null;
     }
     const moduleInfo = module.moduleInfo;
@@ -168,10 +167,10 @@ export const ColumnInfo = (props) => {
         React.createElement(Box, { mb: 3 },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Select Column" },
-                    React.createElement(ColumnSelector, { SelectedColumnIds: [selectedColumnId], ColumnList: adaptable.api.columnApi.getColumns(), onColumnChange: (columns) => { var _a, _b; return setSelectedColumnId((_b = (_a = columns === null || columns === void 0 ? void 0 : columns[0]) === null || _a === void 0 ? void 0 : _a.columnId) !== null && _b !== void 0 ? _b : undefined); }, SelectionMode: SelectionMode.Single })))),
+                    React.createElement(ColumnSelector, { value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
         selectedColumnId && (React.createElement(Tabs, { mb: 3 },
             React.createElement(Tabs.Tab, null, "Config"),
-            React.createElement(Tabs.Tab, null, "Info"),
+            React.createElement(Tabs.Tab, null, "Column Summary"),
             React.createElement(Tabs.Content, null, selectedColumnId && (React.createElement(Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
                 return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
             })))),

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
-export declare type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "type" | "key" | "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "step" | "value" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+export type AdaptableDateInputProps = AdaptableInputProps;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/AdaptableInput/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { InputProps } from '../../../components/Input';
-export declare type AdaptableInputProps = InputProps;
+export type AdaptableInputProps = InputProps;
 declare const AdaptableInput: (props: AdaptableInputProps) => JSX.Element;
 export default AdaptableInput;

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -49,7 +49,7 @@ export const AdaptableObjectCompactListItem = (props) => {
                 : objectView.item.view,
             Boolean(((_f = objectView.item) === null || _f === void 0 ? void 0 : _f.values) && ((_h = (_g = objectView.item) === null || _g === void 0 ? void 0 : _g.values) === null || _h === void 0 ? void 0 : _h.length)) && (React.createElement(Box, { mb: 2, className: `${baseClassName}__Item__Values` },
                 React.createElement(ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
-        suspendAction && unSuspendAction && (React.createElement(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'play' : 'pause' })),
+        suspendAction && unSuspendAction && (React.createElement(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: isSuspended ? 'neutral' : 'success', variant: "text", icon: isSuspended ? 'resume' : 'pause' })),
         React.createElement(Flex, { ml: 1, flex: '0 0 auto' }, deleteAction && (React.createElement(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel })))));
 };
 export const AdaptableObjectCompactList = (props) => {
@@ -80,7 +80,7 @@ export const AdaptableObjectCompactList = (props) => {
         React.createElement(Flex, { className: `${baseClassName}__Header`, fontSize: 3 },
             React.createElement(Flex, { className: `${baseClassName}__Title`, alignItems: 'center' }, props.module.moduleInfo.FriendlyName),
             React.createElement(Box, { flex: 1 }),
-            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton, { mr: 2, onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'play', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
+            suspendAllAction && unSuspendAllAction && (React.createElement(SimpleButton, { mr: 2, onMouseDown: handleSuspendUnsuspendAll, tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All')),
             deleteAllAction && (React.createElement(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel }, "Clear All"))),
         React.createElement(Box, { className: `${baseClassName}__Body` }, props.abObjects.map((abObject) => {
             return (React.createElement(AdaptableObjectCompactListItem, { key: abObject.Uuid, abObject: abObject, module: props.module }));

package/src/View/Components/Buttons/ButtonBase/index.d.ts

@@ -16,7 +16,7 @@ export interface ButtonBaseProps extends BtnProps {
     iconPosition?: string;
     hideToolTip?: boolean;
 }
-export declare type ButtonProps = ButtonBaseProps;
+export type ButtonProps = ButtonBaseProps;
 export declare class ButtonBase extends React.Component<ButtonBaseProps, {}> {
     static defaultProps: ButtonBaseProps;
     render(): JSX.Element;

package/src/View/Components/Buttons/ButtonOpen.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+export declare class ButtonOpen extends React.Component<SimpleButtonProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Buttons/ButtonOpen.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import SimpleButton from '../../../components/SimpleButton';
+export class ButtonOpen extends React.Component {
+    render() {
+        return (React.createElement(SimpleButton, Object.assign({ "data-name": "open", iconSize: 20, icon: "folder-open", tooltip: "Open", variant: "text" }, this.props)));
+    }
+}

package/src/View/Components/Buttons/ButtonUnsuspend.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+export interface PauseButtonProps extends SimpleButtonProps {
+    fillColor?: 'neutral' | 'red';
+}
+export declare class ButtonUnsuspend extends React.Component<PauseButtonProps, {}> {
+    render(): JSX.Element;
+}

package/src/View/Components/Buttons/ButtonUnsuspend.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import SimpleButton from '../../../components/SimpleButton';
+export class ButtonUnsuspend extends React.Component {
+    render() {
+        const buttonIcon = this.props.fillColor === 'red'
+            ? {
+                name: 'resume',
+                style: {
+                    fill: 'red',
+                },
+            }
+            : {
+                name: 'resume',
+            };
+        return (React.createElement(SimpleButton, Object.assign({ "data-name": "unsuspend", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text" }, this.props)));
+    }
+}

package/src/View/Components/CellPopup/index.d.ts

@@ -4,7 +4,7 @@ export interface CellPopupProps {
     columnId: string;
     primaryKeyValue: number | string;
 }
-export declare type CellPopupHandle = {
+export type CellPopupHandle = {
     refreshContent: () => void;
 };
 export declare const CellPopup: React.ForwardRefExoticComponent<CellPopupProps & {

package/src/View/Components/ColumnSelector/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AdaptableColumn } from '../../../types';
-declare type NewColumnSelectorProps = {
+type NewColumnSelectorProps = {
     availableColumns: AdaptableColumn[];
     selected: string[];
     singleSelect?: boolean;

package/src/View/Components/EntityRulesEditor/index.d.ts

@@ -3,10 +3,10 @@ import { FlexProps } from 'rebass';
 import type { AdaptableColumnPredicate, AdaptableModule, AdaptablePredicateDef, AdaptableScope } from '../../../types';
 import type { XOR } from '../../../Utilities/Extensions/TypeExtensions';
 import { AdaptableQuery } from '../../../PredefinedConfig/Common/AdaptableQuery';
-export declare type RuleType = XOR<{
+export type RuleType = XOR<{
     Predicates: AdaptableColumnPredicate[];
 }, AdaptableQuery>;
-export declare type EntityRulesEditorProps<T> = {
+export type EntityRulesEditorProps<T> = {
     data: T;
     module: AdaptableModule;
     showNoRule?: boolean;

package/src/View/Components/EntityRulesEditor/index.js

@@ -29,9 +29,17 @@ export const EntityRulesSummary = (props) => {
         !((_e = data === null || data === void 0 ? void 0 : data.Rule) === null || _e === void 0 ? void 0 : _e.AggregatedBooleanExpression)) {
         return React.createElement(Text, { fontSize: 2 }, "No Rule defined");
     }
-    return (React.createElement(Text, { fontSize: 2 }, data.Rule.Predicates ? (React.createElement(React.Fragment, null, (_h = (_g = (_f = data.Rule) === null || _f === void 0 ? void 0 : _f.Predicates) === null || _g === void 0 ? void 0 : _g.map) === null || _h === void 0 ? void 0 : _h.call(_g, (predicate, index) => (
-    // predicate id is not unique
-    React.createElement(React.Fragment, { key: index }, props.renderPredicate(predicateApi.predicateToString(predicate))))))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))));
+    return (React.createElement(
+        Text,
+        { fontSize: 2 },
+        data.Rule.Predicates ? (React.createElement(React.Fragment, null, (_h = (_g = (_f = data.Rule) === null || _f === void 0 ? void 0 : _f.Predicates) === null || _g === void 0 ? void 0 : _g.map) === null || _h === void 0 ? void 0 : _h.call(_g, (predicate, index) => (
+        // predicate id is not unique
+        (React.createElement(
+            React.Fragment,
+            { key: index },
+            props.renderPredicate(predicateApi.predicateToString(predicate))
+        )))))) : (React.createElement(React.Fragment, null, props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule))))
+    ));
 };
 const RuleTabTitle = (props) => {
     return props.showRadio ? (React.createElement(Radio, { tabIndex: -1, margin: 0, checked: props.checked }, props.children)) : (React.createElement(React.Fragment, null, "props.children"));

package/src/View/Components/ExternalRenderer.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CustomRenderContext } from '../../../types';
 import { AdaptableFrameworkComponent } from '../../types';
-declare type Render = (customRenderContext: CustomRenderContext) => string | null;
+type Render = (customRenderContext: CustomRenderContext) => string | null;
 interface ExternalRendererProps {
     componentName?: string;
     render?: Render;

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

@@ -25,32 +25,11 @@ const panelStyle = {
     minWidth: 150,
 };
 class FilterFormComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._isMounted = false;
-        this.handleFilterChange = (filter) => {
-            if (this.state.suppressClientSideFilter) {
-                this.loadPermittedValues(filter);
-            }
-        };
-        this._isMounted = true;
-        const existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
-        this.state = {
-            columnFilters: props.columnFilters,
-            distinctColumnValues: [],
-            isDistinctColumnValuesLoading: false,
-            showTab: true,
-            selectedTab: ColumnMenuTab.Filter,
-            editedColumnFilter: existingColumnFilter,
-            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
-            suppressClientSideFilter: false,
-        };
-    }
     static createColumnFilterFromProps(props) {
         let existingColumnFilter = props.columnFilters.find((cf) => cf.ColumnId == props.currentColumn.columnId);
         if (!existingColumnFilter) {
             const columnFilterOptions = props.api.optionsApi.getColumnFilterOptions();
-            if (columnFilterOptions.defaultFilterFormTab == 'Values') {
+            if (columnFilterOptions.filterFormOptions.defaultFilterFormTab == 'Values') {
                 return ObjectFactory.CreateColumnFilter(props.currentColumn.columnId, 'Values', []);
             }
             if (props.currentColumn.dataType === 'Number') {
@@ -97,6 +76,27 @@ class FilterFormComponent extends React.Component {
                 : state.currentTab,
         };
     }
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this.handleFilterChange = (filter) => {
+            if (this.state.suppressClientSideFilter) {
+                this.loadPermittedValues(filter);
+            }
+        };
+        this._isMounted = true;
+        const existingColumnFilter = FilterFormComponent.createColumnFilterFromProps(this.props);
+        this.state = {
+            columnFilters: props.columnFilters,
+            distinctColumnValues: [],
+            isDistinctColumnValuesLoading: false,
+            showTab: true,
+            selectedTab: ColumnMenuTab.Filter,
+            editedColumnFilter: existingColumnFilter,
+            currentTab: FilterFormComponent.getCurrentTab(existingColumnFilter),
+            suppressClientSideFilter: false,
+        };
+    }
     componentWillUnmount() {
         this._isMounted = false;
     }
@@ -106,7 +106,7 @@ class FilterFormComponent extends React.Component {
         }
     }
     async loadPermittedValues(filter = '') {
-        const { values: distinctColumnValues, suppressClientSideFilter } = await runIfNotResolvedIn(this.props.api.gridApi.internalApi.getDistinctFilterDisplayValuesForColumn(this.props.currentColumn.columnId, filter, this.props.api.optionsApi.getColumnFilterOptions().showDistinctFilteredValuesOnly), () => this._isMounted && this.setState({ isDistinctColumnValuesLoading: true }));
+        const { values: distinctColumnValues, suppressClientSideFilter } = await 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,
@@ -130,7 +130,7 @@ class FilterFormComponent extends React.Component {
             Helper.objectNotExists(this.state.editedColumnFilter.Predicate.PredicateId);
         let closeButton = (React.createElement(ButtonClose, { onClick: () => this.onCloseForm(), tooltip: null, accessLevel: 'Full' }));
         let clearFilterButton = (React.createElement(ButtonClear, { onClick: () => this.onClearFilter(), disabled: isEmptyFilter, tooltip: null, accessLevel: 'Full', showText: true, showIcon: false }));
-        const useAgGridStyle = !!columnFilterOptions.useAgGridFilterFormStyle;
+        const useAgGridStyle = !!columnFilterOptions.filterFormOptions.useAgGridFilterFormStyle;
         return (React.createElement("div", { className: "ab-FilterForm", "data-name": "filter-form" }, StringExtensions.IsNullOrEmpty(isFilterable) ? (React.createElement(FilterFormPanel, { style: panelStyle, ColumnMenuTab: this.state.selectedTab, ColumnMenuTabChanged: (e) => this.onSelectTab(e), IsAlwaysFilter: this.props.embedColumnMenu, clearFilterButton: clearFilterButton, closeButton: closeButton, showCloseButton: this.props.showCloseButton, autoApplyFilter: columnFilterOptions.autoApplyFilter ? true : false, useAgGridStyle: useAgGridStyle, applyFilterButtonDisabled: isEmptyFilter, onColumnFilterApplied: () => this.onColumnFilterApplied() }, this.state.selectedTab == ColumnMenuTab.Menu ? (React.createElement(ListBoxMenu, { MenuItems: this.props.api.gridApi.internalApi.buildStandaloneColumnHeader(this.props.currentColumn), onMenuItemClick: (menuItem) => this.onMenuItemClick(menuItem) })) : (React.createElement(React.Fragment, null,
             this.state.showTab && (React.createElement(React.Fragment, null,
                 React.createElement(Radio, { "data-name": "values", flex: 1, marginLeft: 1, checked: this.state.currentTab == 'values', onChange: () => this.setState({ currentTab: 'values' }) },

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

@@ -53,7 +53,7 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions.hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             const columnFilterContext = {
                 column: this.props.currentColumn,
@@ -64,7 +64,7 @@ class QuickFilterFormComponent extends React.Component {
             showQuickFilterDropdown = !hideQuickFilterDropdownFunction(columnFilterContext);
         }
         let showQuickFilterInput = true;
-        let hideQuickFilterInputFunction = this.props.api.optionsApi.getColumnFilterOptions().hideQuickFilterInput;
+        let hideQuickFilterInputFunction = this.props.api.optionsApi.getColumnFilterOptions().quickFilterOptions.hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
             const columnFilterContext = {
                 column: this.props.currentColumn,
@@ -248,5 +248,5 @@ function mapDispatchToProps(dispatch) {
 const QuickFilterForm = connect(mapStateToProps, mapDispatchToProps)(QuickFilterFormComponent);
 export const QuickFilterFormReact = (columnFilterProps) => {
     var _a, _b, _c;
-    return renderWithAdaptableContext(React.createElement(QuickFilterForm, { api: columnFilterProps.Adaptable.api, quickFilterTrigger: (_a = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _a === void 0 ? void 0 : _a.quickFilterTrigger, quickFilterValuesTrigger: (_b = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _b === void 0 ? void 0 : _b.quickFilterValuesTrigger, quickFilterDebounce: (_c = columnFilterProps.Adaptable.adaptableOptions.columnFilterOptions) === null || _c === void 0 ? void 0 : _c.quickFilterDebounce, currentColumn: columnFilterProps.Column, teamSharingActivated: false, embedColumnMenu: columnFilterProps.Adaptable.embedColumnMenu }), columnFilterProps.Adaptable);
+    return 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);
 };

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 { ColumnFilterOptions } from '../../../types';
+import { QuickFilterOptions } from '../../../types';
 export interface QuickFilterValuesProps {
     api: AdaptableApi;
     currentColumn: AdaptableColumn;
@@ -14,6 +14,6 @@ export interface QuickFilterValuesProps {
         show: () => any;
         hide: () => any;
     }) => void;
-    quickFilterValuesTrigger?: ColumnFilterOptions['quickFilterValuesTrigger'];
+    quickFilterValuesTrigger?: QuickFilterOptions['quickFilterValuesTrigger'];
 }
 export declare const QuickFilterValues: (props: QuickFilterValuesProps) => JSX.Element;

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

@@ -47,7 +47,7 @@ export const QuickFilterValues = (props) => {
         let ignore = false;
         setIsDistinctColumnValuesLoading(true);
         api.gridApi.internalApi
-            .getDistinctFilterDisplayValuesForColumn(props.columnFilter.ColumnId, textFilterValue, api.optionsApi.getColumnFilterOptions().showDistinctFilteredValuesOnly)
+            .getDistinctFilterDisplayValuesForColumn(props.columnFilter.ColumnId, textFilterValue, api.optionsApi.getColumnFilterOptions().valuesFilterOptions.showDistinctFilteredValuesOnly)
             .then((distinctFilterDisplayValues) => {
             if (ignore) {
                 return;
@@ -111,7 +111,7 @@ export const QuickFilterValues = (props) => {
             return label !== null && label !== void 0 ? label : input;
         }).join(', ');
     }
-    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterValuesWidth;
+    const quickFilterValuesWidth = props.api.optionsApi.getAdaptableOptions().columnFilterOptions.quickFilterOptions.quickFilterValuesWidth;
     const getPopoverWidth = (targetWidth) => {
         if (quickFilterValuesWidth === 'auto') {
             return Math.max(180, targetWidth);

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-export declare type WaitingProps = React.ClassAttributes<Waiting> & {
+export type WaitingProps = React.ClassAttributes<Waiting> & {
     WaitingMessage: string;
 } & FlexProps;
 export declare class Waiting extends React.Component<WaitingProps, {}> {

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -1,6 +1,6 @@
 import { InputProps } from '../../../components/Input';
 import { CSSProperties } from 'react';
-export declare type AdaptableFormControlTextClearProps = {
+export type AdaptableFormControlTextClearProps = {
     OnTextChange: (textValue: string) => void;
     focusOnClear?: boolean;
     autoFocus?: boolean;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -93,7 +93,7 @@ export const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = (React.createElement(SimpleButton, { mr: 2, onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'play', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
+        suspendButton = (React.createElement(SimpleButton, { mr: 2, onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel }, isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All'));
     }
     const handleWizardClose = () => {
         var _a;

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { STANDALONE_MODULE_POPUPS, DEFAULT_NAVIGATION_ITEMS, } from '../../../../Utilities/Defaults/DefaultSettingsPanel';
+import { STANDALONE_MODULE_POPUPS, DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS, } from '../../../../Utilities/Defaults/DefaultSettingsPanel';
 import { useAdaptable } from '../../../AdaptableContext';
 import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
 export const useMenuItems = () => {
@@ -11,7 +11,7 @@ export const useMenuItems = () => {
         var _a;
         let navigationItems = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.navigation) === null || _a === void 0 ? void 0 : _a.items;
         if (!navigationItems) {
-            navigationItems = [...DEFAULT_NAVIGATION_ITEMS];
+            navigationItems = [...DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS];
             if (settingsPanelOptions.customSettingsPanels) {
                 navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
             }

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -1,26 +1,22 @@
 import * as React from 'react';
 import { Box, Flex } from 'rebass';
 import { isAdaptableSystemIcon } from '../../../components/Icon';
-import DropdownButton from '../../../components/DropdownButton';
 import HelpBlock from '../../../components/HelpBlock';
 import { Tag } from '../../../components/Tag';
 import AdaptableInput from '../AdaptableInput';
 import { PermitedValuesSelector } from '../PermittedValuesSelector';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
+import { Select } from '../../../components/Select';
 const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
 export const PredicateEditor = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const baseClassName = 'ab-PredicateEditor';
-    const placeholder = (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Rule';
     const predicateDefsOptions = React.useMemo(() => {
         var _a;
         return (_a = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _a === void 0 ? void 0 : _a.map((item) => ({
             value: item.id,
             label: item.label,
-            onClick: () => {
-                var _a;
-                props.onChange(Object.assign(Object.assign({}, props.predicate), { PredicateId: item.id, Inputs: ((_a = item === null || item === void 0 ? void 0 : item.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }) }));
-            },
+            inputs: item.inputs,
         }));
     }, [props.predicateDefs, props.onChange]);
     const handlePredicateInputChange = (e, index) => {
@@ -33,7 +29,7 @@ export const PredicateEditor = (props) => {
     const handlePredicateValuesChange = (inputs) => {
         props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: inputs }));
     };
-    const currentPredicateDef = (_b = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _b === void 0 ? void 0 : _b.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
+    const currentPredicateDef = (_a = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _a === void 0 ? void 0 : _a.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     let icon = null;
     if (currentPredicateDef) {
         if (isAdaptableSystemIcon(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
@@ -46,8 +42,12 @@ export const PredicateEditor = (props) => {
     return (React.createElement(Box, { className: baseClassName },
         React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
             icon && React.createElement(Tag, { mr: 2 }, icon),
-            React.createElement(DropdownButton, { mb: 0, style: { flex: 1 }, listStyle: { minWidth: 150 }, "data-name": "select-predicate", className: `${baseClassName}__predicate-dropdown`, placeholder: placeholder, showClearButton: !!props.predicate, onClear: props.onClear, items: predicateDefsOptions, columns: ['label'] }, currentPredicateDef ? currentPredicateDef.label : placeholder)),
-        React.createElement(Flex, null, (_c = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _c === void 0 ? void 0 : _c.map((predicateDefInput, index) => {
+            React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.id, onChange: (value) => {
+                    var _a;
+                    const option = predicateDefsOptions.find((x) => x.value === value);
+                    props.onChange(Object.assign(Object.assign({}, props.predicate), { PredicateId: option === null || option === void 0 ? void 0 : option.value, Inputs: ((_a = option === null || option === void 0 ? void 0 : option.inputs) !== null && _a !== void 0 ? _a : []).map((input) => { var _a; return (_a = input.defaultValue) !== null && _a !== void 0 ? _a : ''; }) }));
+                } })),
+        React.createElement(Flex, null, (_b = currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.inputs) === null || _b === void 0 ? void 0 : _b.map((predicateDefInput, index) => {
             var _a, _b;
             return (React.createElement(React.Fragment, null,
                 index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),

package/src/View/Components/RangesComponent.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Flex, Text } from 'rebass';
+import { Box, Flex, Text } from 'rebass';
 import { ColorPicker } from '../../components/ColorPicker';
 import clamp from 'lodash/clamp';
 import { CheckBox } from '../../components/CheckBox';
@@ -8,7 +8,6 @@ import { NumberInput } from '../../components/Input/NumberInput';
 import SimpleButton from '../../components/SimpleButton';
 import { getHexForName, GRAY, DARK_GREEN } from '../UIHelper';
 import { ColumnSelector } from './Selectors/ColumnSelector';
-import { SelectionMode } from '../../PredefinedConfig/Common/Enums';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
 export class RangesComponent extends React.Component {
@@ -89,11 +88,15 @@ export class RangesComponent extends React.Component {
                         React.createElement(FormLayout, { columns: ['label', 'first', 'or', 'second'], sizes: ['auto', 'auto', 'auto', '1fr'] },
                             React.createElement(FormRow, { label: "Min Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMinValue(value);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMinValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMinColumnSelectedChanged(columns), SelectionMode: SelectionMode.Single }) }),
+                                    } }), or: "OR", second: React.createElement(Box, { maxWidth: '15rem' },
+                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "Number", onChange: (columnId) => {
+                                            this.onMinColumnSelectedChanged(columnId);
+                                        } })) }),
                             ' ',
                             React.createElement(FormRow, { label: "Max Value:", first: React.createElement(NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMaxValue(value);
-                                    } }), or: "OR", second: React.createElement(ColumnSelector, { disabled: this.props.disabled, style: { maxWidth: '15rem' }, SelectedColumnIds: [comparisonMaxValueColumnId], ColumnList: this.props.api.columnApi.getNumericColumns(), onColumnChange: (columns) => this.onMaxColumnSelectedChanged(columns), SelectionMode: SelectionMode.Single }) }),
+                                    } }), or: "OR", second: React.createElement(Box, { maxWidth: '15rem' },
+                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "Number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
                             React.createElement(FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
@@ -208,9 +211,9 @@ export class RangesComponent extends React.Component {
         columnComparison.MinValue = value;
         this.props.updateColumnComparison(columnComparison);
     }
-    onMinColumnSelectedChanged(columns) {
+    onMinColumnSelectedChanged(columnId) {
         const { columnComparison } = this.props;
-        columnComparison.MinValue = columns.length > 0 ? columns[0].columnId : undefined;
+        columnComparison.MinValue = columnId || undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonMaxValue(value) {
@@ -218,9 +221,9 @@ export class RangesComponent extends React.Component {
         columnComparison.MaxValue = value;
         this.props.updateColumnComparison(columnComparison);
     }
-    onMaxColumnSelectedChanged(columns) {
+    onMaxColumnSelectedChanged(columnId) {
         const { columnComparison } = this.props;
-        columnComparison.MaxValue = columns.length > 0 ? columns[0].columnId : undefined;
+        columnComparison.MaxValue = columnId || undefined;
         this.props.updateColumnComparison(columnComparison);
     }
     changeColumnComparisonColor(value) {

package/src/View/Components/Selectors/ColumnSelector.d.ts

@@ -1,18 +1,13 @@
-import * as React from 'react';
-import { SelectionMode } from '../../../PredefinedConfig/Common/Enums';
-import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
-export interface ColumnSelectorProps extends React.HTMLProps<ColumnSelector> {
-    ColumnList: AdaptableColumn[];
-    SelectedColumnIds: string[];
-    onColumnChange: (SelectedColumns: AdaptableColumn[]) => void;
-    SelectionMode: SelectionMode;
-    className?: string;
-    placeHolder?: string;
-    showClearButton?: boolean;
+/// <reference types="react" />
+import { SelectProps } from '../../../components/Select';
+import { AdaptableColumn } from '../../../types';
+export type ColumnSelectorProps<IsMulti extends boolean = false> = {
+    type?: AdaptableColumn['dataType'];
+    isMulti?: IsMulti;
     disabled?: boolean;
-}
-export declare class ColumnSelector extends React.Component<ColumnSelectorProps, {}> {
-    render(): JSX.Element;
-    onClearButton(): void;
-    onColumnChange(selected: AdaptableColumn[], isEmptySelection: boolean): void;
-}
+    menuPosition?: SelectProps<any>['menuPosition'];
+    filterColumn?: (column: AdaptableColumn) => boolean;
+    value?: IsMulti extends true ? string[] : string;
+    onChange: (column: IsMulti extends true ? string[] : string) => void;
+};
+export declare const ColumnSelector: <IsMulti extends boolean = false>(props: ColumnSelectorProps<IsMulti>) => JSX.Element;