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

package/src/Utilities/license/hashing.js

@@ -1 +1,43 @@
-const r=3988292384;function n(n=r){var t,o,u,e=new Array;for(t=0;t<256;t++){for(u=t,o=8;o>0;o--)1==(1&u)?u=u>>>1^n:u>>>=1;e[t]=u}return e}function t(){return 4294967295}function o(r,n,t){return n=n>>>8^r[t^255&n]}function u(r){return r=(r=~r)<0?4294967295+r+1:r}export function compute_string(e,c=r){var f,i=n(c),a=0;for(a=t(),f=0;f<e.length;f++)a=o(i,a,e.charCodeAt(f));return`${a=u(a)}`}
+const DEFAULT_ReversedPolynomial = 0xedb88320;
+/*
+ * CRC-32 implementation
+ */
+function generate(reversedPolynomial = DEFAULT_ReversedPolynomial) {
+    var table = new Array();
+    var i, j, n;
+    for (i = 0; i < 256; i++) {
+        n = i;
+        for (j = 8; j > 0; j--) {
+            if ((n & 1) == 1) {
+                n = (n >>> 1) ^ reversedPolynomial;
+            }
+            else {
+                n = n >>> 1;
+            }
+        }
+        table[i] = n;
+    }
+    return table;
+}
+function crc32_initial() {
+    return 0xffffffff;
+}
+function crc32_add_byte(table, crc, byte) {
+    crc = (crc >>> 8) ^ table[byte ^ (crc & 0x000000ff)];
+    return crc;
+}
+function crc32_final(crc) {
+    crc = ~crc;
+    crc = crc < 0 ? 0xffffffff + crc + 1 : crc;
+    return crc;
+}
+export function compute_string(str, reversedPolynomial = DEFAULT_ReversedPolynomial) {
+    var table = generate(reversedPolynomial);
+    var crc = 0;
+    var i;
+    crc = crc32_initial();
+    for (i = 0; i < str.length; i++)
+        crc = crc32_add_byte(table, crc, str.charCodeAt(i));
+    crc = crc32_final(crc);
+    return `${crc}`;
+}

package/src/Utilities/logDeprecation.d.ts

@@ -1,4 +1,6 @@
 import { AdaptableLogger } from '../agGrid/AdaptableLogger';
-export declare const logDeprecation: <T>(logger: AdaptableLogger, typeName: string, oldProp: keyof T, newProp?: keyof T, message?: string) => void;
-export declare const logDeprecationExternal: <OLD_TYPE, NEW_TYPE>(logger: AdaptableLogger, oldTypeName: string, oldProp: keyof OLD_TYPE, newTypeName: string, newProp: keyof NEW_TYPE, message?: string) => void;
-export declare const logDeprecationInternal: <T>(logger: AdaptableLogger, typeName: string, oldProp: keyof T) => void;
+type StringKey<T> = Extract<keyof T, string>;
+export declare const logDeprecation: <T>(logger: AdaptableLogger, typeName: string, oldProp: Extract<keyof T, string>, newProp?: Extract<keyof T, string>, message?: string) => void;
+export declare const logDeprecationExternal: <OLD_TYPE, NEW_TYPE>(logger: AdaptableLogger, oldTypeName: string, oldProp: Extract<keyof OLD_TYPE, string>, newTypeName: string, newProp: Extract<keyof NEW_TYPE, string>, message?: string) => void;
+export declare const logDeprecationInternal: <T>(logger: AdaptableLogger, typeName: string, oldProp: Extract<keyof T, string>) => void;
+export {};

package/src/View/AdaptablePopover/index.d.ts

@@ -16,6 +16,7 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<React.Props
     popoverMaxWidth?: number;
     popupPadding?: number;
     alignPosition?: OverlayShowParams['alignPosition'];
+    visible?: boolean;
 }
 export declare class AdaptablePopover extends React.Component<React.PropsWithChildren<AdaptablePopoverProps>, {}> {
     render(): JSX.Element;

package/src/View/AdaptablePopover/index.js

@@ -34,7 +34,7 @@ export class AdaptablePopover extends React.Component {
             // showTriangle
             , { 
                 // showTriangle
-                render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
+                visible: this.props.visible, render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
                     overflow: 'visible',
                 }, defaultZIndex: 100000, alignPosition: this.props.alignPosition }, useButton ? (React.createElement(ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
                 this.props.children,

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -14,7 +14,7 @@ const GridOptionsForm = (props) => {
                         gridOptions = Object.assign(Object.assign({}, gridOptions), { enableRangeSelection: enableRangeSelection });
                         props.onChangedGridOptions(gridOptions);
                     } })),
-            React.createElement(FormRow, { label: "Show Quick Filter" },
+            React.createElement(FormRow, { label: "Show Filter Bar" },
                 React.createElement(CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
                         gridOptions = Object.assign(Object.assign({}, gridOptions), { defaultColDef: {
                                 floatingFilter,

package/src/View/Alert/AlertEmptyView.js

@@ -7,6 +7,6 @@ export const AlertEmptyView = (props) => {
         .getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
     const text = accessLevel == 'ReadOnly'
         ? 'You have no Alert Definitions.'
-        : "Click 'New' to start creating Alert Definitions. An Alert is triggered whenever an edit - or external data change - matches the Rule in the Alert Definition.";
+        : "Click 'New' to create a new Alert Definition. The Definition will include the Rule which triggers the Alert, and the behaviour of the Alert.";
     return React.createElement(React.Fragment, null, text);
 };

package/src/View/Alert/Utilities/getAvailablePredicates.js

@@ -4,7 +4,7 @@ export const getAvailablePredicateDefinitions = (api, scope, alertType) => {
         predicateDefs = api.alertApi.internalApi
             .getAlertPredicateDefsForScope(scope)
             .filter((predicateDef) => !['AddedRow', 'RemovedRow'].includes(predicateDef.id));
-        predicateDefs = [...predicateDefs].sort((a, b) => a.id === 'Any' ? -1 : b.id === 'Any' ? 1 : 0);
+        predicateDefs = [...predicateDefs].sort((a, b) => a.id === 'AnyChange' ? -1 : b.id === 'AnyChange' ? 1 : 0);
     }
     else if (alertType === 'RowChange') {
         predicateDefs = api.alertApi.internalApi

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.d.ts

@@ -4,7 +4,7 @@ import { AdaptableApi } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
 export declare const renderAlertBehaviourWizardSummary: (alertDefinition: AlertDefinition) => JSX.Element;
 export declare const renderAlertBehaviourSummary: (alert: AlertDefinition, api: AdaptableApi, allowWrap?: boolean) => JSX.Element;
-declare type AlertBehaviourWizardSectionProps = {
+type AlertBehaviourWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -6,11 +6,11 @@ import { CodeBlock } from '../../../components/CodeBlock';
 import { Box, Flex, Text } from 'rebass';
 import { ValueOptionsTags } from '../../Components/ValueSelector';
 import { StyleComponent } from '../../Components/StyleComponent';
-import DropdownButton from '../../../components/DropdownButton';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useAdaptable } from '../../AdaptableContext';
 import { StylePreview } from '../../../components/StylePreview';
 import Panel from '../../../components/Panel';
+import { Select } from '../../../components/Select';
 const HighlightStyle = (props) => {
     const adaptable = useAdaptable();
     const options = [
@@ -28,14 +28,30 @@ const HighlightStyle = (props) => {
             },
         },
     ];
+    const options2 = [
+        {
+            label: 'Use Message Type',
+            value: 'system',
+        },
+        {
+            label: 'Custom Style',
+            value: 'custom',
+        },
+    ];
     return (React.createElement(Box, { "data-name": props.dataName },
         React.createElement(Flex, null,
             React.createElement(CheckBox, { mr: 2, style: { alignItems: 'flex-start' }, checked: Boolean(props.highlight), onChange: (checked) => {
                     props.onChange(checked);
                 } }, props.label),
-            Boolean(props.highlight) && (React.createElement(DropdownButton, { items: options, columns: ['label'] }, typeof props.highlight === 'boolean' ? (React.createElement(Text, { fontSize: 2, mt: 1 },
-                "Use Message Type's ",
-                adaptable.api.internalApi.getCorrectEnglishVariant('Colour'))) : (React.createElement(Text, { fontSize: 2, mt: 1 }, "Create a Custom Style"))))),
+            Boolean(props.highlight) && (React.createElement(Select, { options: options2, value: typeof props.highlight === 'boolean' ? 'system' : 'custom', onChange: (value) => {
+                    if (value === 'system') {
+                        props.onChange(true);
+                    }
+                    else {
+                        const initialStyle = ObjectFactory.CreateEmptyStyle();
+                        props.onChange(initialStyle);
+                    }
+                } }))),
         typeof props.highlight === 'object' && (React.createElement(Panel, { margin: 2 },
             React.createElement(Box, { paddingLeft: 3 },
                 React.createElement(StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {

package/src/View/Alert/Wizard/AlertButtonsEditor.d.ts

@@ -4,7 +4,7 @@ import { AdaptableAlert } from '../../../PredefinedConfig/Common/AdaptableAlert'
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { AlertFormContext } from '../../../types';
 import { AlertType } from '../Utilities/getAlertType';
-declare type AlertButtonsEditorProps = {
+type AlertButtonsEditorProps = {
     AlertButtons: AlertButton<AlertFormContext>[];
     onChange: (buttons: AlertButton<AlertFormContext>[]) => void;
     api: AdaptableApi;

package/src/View/Alert/Wizard/AlertButtonsEditor.js

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { sentenceCase } from 'sentence-case';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
-import DropdownButton from '../../../components/DropdownButton';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
 import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
+import { Select } from '../../../components/Select';
 export const AlertButtonsEditor = (props) => {
     const { api, adaptableAlert } = props;
     const onChange = (newButtons) => {
@@ -51,7 +51,7 @@ export const AlertButtonsEditor = (props) => {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-            React.createElement(Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert, and Actions to perform when button is clicked"),
+            React.createElement(Text, { fontSize: 2, mt: 3, mb: 2 }, "Add buttons to Alert Notification, and set Actions to perform when button is clicked"),
             React.createElement(SimpleButton, { icon: "plus", onClick: () => {
                     onChange([
                         ...(AlertButtons || []),
@@ -64,7 +64,7 @@ export const AlertButtonsEditor = (props) => {
                     ]);
                 } }, "Add")),
         AlertButtons.map((button, index) => {
-            var _a, _b, _c;
+            var _a, _b;
             let buttonStyle = button.ButtonStyle;
             let buttonLabel = button.Label;
             let btnActions = [];
@@ -136,7 +136,7 @@ export const AlertButtonsEditor = (props) => {
                 React.createElement(FormLayout, { marginBottom: 2, paddingTop: 2 },
                     React.createElement(FormRow, { label: React.createElement(Text, { fontSize: 2, style: { whiteSpace: 'nowrap' } }, "Button Text") },
                         React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Input, { value: buttonLabel, style: { width: 80 }, onChange: (e) => {
+                            React.createElement(Input, { value: buttonLabel, mr: 2, style: { width: 80 }, onChange: (e) => {
                                     onChange(AlertButtons.map((btn, i) => {
                                         if (i === index) {
                                             return Object.assign(Object.assign({}, btn), { Label: e.target.value });
@@ -144,35 +144,32 @@ export const AlertButtonsEditor = (props) => {
                                         return btn;
                                     }));
                                 } }),
-                            React.createElement(DropdownButton, { marginLeft: 2, columns: ['label'], style: { minWidth: 110 }, items: ['text', 'outlined', 'raised'].map((variant) => {
-                                    return {
-                                        label: StringExtensions.CapitaliseFirstLetter(variant),
-                                        value: variant,
-                                        onClick: () => setVariant(variant),
-                                    };
-                                }) },
-                                React.createElement(Text, { fontSize: 2 },
-                                    "Variant:",
-                                    ' ',
-                                    StringExtensions.CapitaliseFirstLetter((_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _b !== void 0 ? _b : 'raised'))),
-                            React.createElement(DropdownButton, { columns: ['label'], marginLeft: 2, style: { minWidth: 120 }, items: [
+                            React.createElement(Box, { mr: 2 },
+                                React.createElement(Select, { options: ['text', 'outlined', 'raised'].map((variant) => {
+                                        return {
+                                            label: StringExtensions.CapitaliseFirstLetter(variant),
+                                            value: variant,
+                                        };
+                                    }), rederSingleValue: (option) => `Variant: ${option.label}`, value: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant, onChange: (value) => {
+                                        setVariant(value);
+                                    } })),
+                            React.createElement(Select, { options: [
                                     {
-                                        label: 'Use Alert Tone',
+                                        label: 'Tone: Use Alert Tone',
                                         value: 'text',
-                                        onClick: () => setTone(null),
                                     },
                                     ...['success', 'info', 'error', 'warning', 'accent', 'neutral'].map((tone) => {
                                         return {
                                             label: StringExtensions.CapitaliseFirstLetter(tone),
                                             value: tone,
-                                            onClick: () => setTone(tone),
                                         };
                                     }),
-                                ] },
-                                React.createElement(Text, { fontSize: 2 },
-                                    "Tone:",
-                                    ' ',
-                                    StringExtensions.CapitaliseFirstLetter((_c = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _c !== void 0 ? _c : 'Use alert tone'))),
+                                ], rederSingleValue: (option) => `Tone: ${option.label}`, onChange: (value) => {
+                                    if (value === 'text') {
+                                        setTone(null);
+                                    }
+                                    setTone(value);
+                                }, value: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'text' }),
                             React.createElement(SimpleButton, { icon: "close", tone: "error", disabled: AlertButtons.length <= 1, marginLeft: 1, variant: "text", tooltip: AlertButtons.length <= 1 ? 'Cannot remove last button' : 'Remove button', onClick: () => {
                                     onChange(AlertButtons.filter((btn) => btn !== button));
                                 } }))),

package/src/View/Alert/Wizard/AlertMessageWizardSection.d.ts

@@ -2,7 +2,7 @@
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
 export declare const renderAlertMessageSummary: () => JSX.Element;
-declare type AlertDisplayWizardSectionProps = {
+type AlertDisplayWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };

package/src/View/Alert/Wizard/AlertNotificationWizardSection.d.ts

@@ -10,7 +10,7 @@ interface AlertPreviewProps extends BoxProps {
     focusFirstButton?: boolean;
 }
 export declare const AlertPreview: React.FunctionComponent<AlertPreviewProps>;
-declare type AlertNotificationWizardSectionProps = {
+type AlertNotificationWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };

package/src/View/Alert/Wizard/AlertNotificationWizardSection.js

@@ -66,7 +66,7 @@ export const AlertNotificationWizardSection = (props) => {
                                 api.alertApi.internalApi.getDefaultAlertNotificationForm();
                         }
                         props.onChange(newAlertDefinition);
-                    } }, "Show a Notification when Alert is triggered (with action buttons)"),
+                    } }, "Display a Notification when Alert is triggered (with action buttons)"),
                 ((_b = data.AlertProperties) === null || _b === void 0 ? void 0 : _b.DisplayNotification) ? (typeof data.AlertForm === 'string' ? (React.createElement(Text, { fontSize: 2 }, "Alert buttons cannot be customized because form is dynamically driven")) : (React.createElement(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: (_c = data.AlertForm) === null || _c === void 0 ? void 0 : _c.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
                         props.onChange(Object.assign(Object.assign({}, data), { AlertForm: Object.assign(Object.assign({}, data.AlertForm), { Buttons: buttons }) }));
                     } }))) : null)),

package/src/View/Alert/Wizard/AlertRulesWizardSection.js

@@ -59,7 +59,7 @@ export const AlertRulesWizardSection = (props) => {
     if (props.alertType === 'RowChange') {
         return React.createElement(RowChangeEditor, { alert: data, onChange: props.onChange });
     }
-    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "Any", data: data, predicateDefs: predicateDefs, enablePredicateColumnId: enablePredicateColumnId, getPredicateDefsForColId: (colId) => getAvailablePredicateDefinitions(api, { ColumnIds: [colId] }, props.alertType), onChange: props.onChange, showAggregation: showAggregation, showObservable: showObservable, showBoolean: showBoolean, showPredicate: showPredicate, descriptions: {
+    return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, enablePredicateColumnId: enablePredicateColumnId, getPredicateDefsForColId: (colId) => getAvailablePredicateDefinitions(api, { ColumnIds: [colId] }, props.alertType), onChange: props.onChange, showAggregation: showAggregation, showObservable: showObservable, showBoolean: showBoolean, showPredicate: showPredicate, descriptions: {
             selectPredicate: 'Create an Alert Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

package/src/View/Alert/Wizard/AlertScopeWizardSection.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AlertDefinition } from '../../../PredefinedConfig/AlertState';
 import { AlertType } from '../Utilities/getAlertType';
-declare type AlertScopeWizardSectionProps = {
+type AlertScopeWizardSectionProps = {
     onChange: (data: AlertDefinition) => void;
     alertType: AlertType;
 };

package/src/View/Alert/Wizard/AlertScopeWizardSection.js

@@ -21,7 +21,7 @@ export const AlertScopeWizardSection = (props) => {
                     // when scope is changed, reset the rule to predicate of any
                     // if it was set to a predicate before
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'Any' }],
+                        Predicates: [{ PredicateId: 'AnyChange' }],
                     };
                 }
                 if (newData.Rule.ObservableExpression !== undefined && !api.scopeApi.scopeIsAll(Scope)) {

package/src/View/Alert/Wizard/AlertTypeWizardSection.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AlertType } from '../Utilities/getAlertType';
 export declare const renderAlertTypeSummary: (alertType: AlertType) => JSX.Element;
-declare type AlertBehaviourWizardSectionProps = {
+type AlertBehaviourWizardSectionProps = {
     onAlertTypeChange: (alertType: AlertType) => void;
     alertType: AlertType | null;
 };

package/src/View/Alert/Wizard/AlertWizard.js

@@ -113,7 +113,7 @@ export const AlertWizard = (props) => {
             },
             {
                 title: behaviourSpelling,
-                details: 'Configure ' + behaviourSpelling + ' for the Alert',
+                details: 'Configure ' + behaviourSpelling + 's for the Alert',
                 render: () => (React.createElement(Box, { padding: 2 },
                     React.createElement(AlertBehaviourWizardSection, { alertType: alertType, onChange: setAlertDefinition }))),
                 renderSummary: renderAlertBehaviourWizardSummary,

package/src/View/Alert/Wizard/isValidAlertRules.js

@@ -13,7 +13,7 @@ export const isValidAlertRules = (alert, api, context) => {
     }
     // boolean expressions may also be saved as named queries
     if (context.namedQuery != false) {
-        const isValidName = api.namedQueryApi.isValidNamedQueryName(context.namedQuery);
+        const isValidName = api.namedQueryApi.isValidNamedQuery(context.namedQuery);
         if (!isValidName.valid) {
             return isValidName.message;
         }

package/src/View/BulkUpdate/BulkUpdatePopup.js

@@ -5,15 +5,12 @@ import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import { PanelWithImage } from '../Components/Panels/PanelWithImage';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
-import { UIHelper } from '../UIHelper';
 import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
 import { ColumnValueSelector } from '../Components/Selectors/ColumnValueSelector';
-import { CheckBox } from '../../components/CheckBox';
-import { Box, Flex } from 'rebass';
+import { Flex } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import HelpBlock from '../../components/HelpBlock';
-import AdaptableInput from '../Components/AdaptableInput';
 class BulkUpdatePopupComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -47,12 +44,9 @@ class BulkUpdatePopupComponent extends React.Component {
         return (React.createElement(PanelWithImage, { bodyProps: { padding: 2 }, flex: 1, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), variant: "primary" },
             col.dataType == 'Date' ? (React.createElement(React.Fragment, null,
                 React.createElement(HelpBlock, { marginTop: 2, marginBottom: 2 }, "Enter a date value. Alternatively, tick the checkbox and select from an existing column value."),
-                React.createElement(Box, null,
-                    React.createElement(CheckBox, { marginLeft: 2, onChange: (checked) => this.onUseColumnValuesSelectorChanged(checked), checked: this.state.useSelector },
-                        ' ',
-                        "Select from existing column values")),
                 React.createElement(Flex, { padding: 2, flexDirection: "row", alignItems: "center" },
-                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 }, this.state.useSelector ? (React.createElement(ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })) : (React.createElement(AdaptableInput, { "data-name": "bulk-update", style: { width: '100%' }, value: String(this.props.BulkUpdateValue), type: UIHelper.getDescriptionForDataType(col.dataType), placeholder: UIHelper.getPlaceHolderforDataType(col.dataType), onChange: (e) => this.onBulkUpdateValueChange(e) }))),
+                    React.createElement(Flex, { alignItems: "center", flexDirection: "row", flex: 1, marginRight: 2 },
+                        React.createElement(ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: col, api: this.props.api, onColumnValueChange: (values) => this.onColumnValueSelectedChanged(values), allowNew: false, style: { width: '100%', maxWidth: 'inherit' } })),
                     React.createElement(SimpleButton, { disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All', onClick: () => {
                             this.onApplyClick();

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -46,7 +46,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
             fill: 'currentColor',
         };
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: join(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        return (React.createElement(Flex, { minWidth: 150, flexDirection: "row", className: join(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, null,
                 React.createElement(ColumnValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
                         listMinWidth: 160,
@@ -82,7 +82,7 @@ class BulkUpdateViewPanelComponent extends React.Component {
     }
     onApplyBulkUpdate() {
         this.props.onRunBulkUpdate();
-        this.props.onBulkUpdateValueChange('');
+        this.props.onBulkUpdateValueChange(undefined);
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/CalculatedColumn/Wizard/CalculatedColumnDefinitionWizardSection.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
-export declare type CalculatedColumnDefinitionWizardSectionProps = {
+export type CalculatedColumnDefinitionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.d.ts

@@ -2,7 +2,7 @@
 import { CalculatedColumn } from '../../../types';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { ExpressionType } from './CalculatedColumnWizard';
-export declare type CalculatedColumnExpressionWizardSectionProps = {
+export type CalculatedColumnExpressionWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     expressionType: ExpressionType;
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnSettingsWizardSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { CalculatedColumn } from '../../../PredefinedConfig/CalculatedColumnState';
-export declare type CalculatedColumnSettingsWizardSectionProps = {
+export type CalculatedColumnSettingsWizardSectionProps = {
     onChange: (data: CalculatedColumn) => void;
     isEdit: boolean;
 };

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

@@ -4,12 +4,12 @@ import { Box, Flex } from 'rebass';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import Input from '../../../components/Input';
-import DropdownButton from '../../../components/DropdownButton';
 import ErrorBox from '../../../components/ErrorBox';
 import { Tabs } from '../../../components/Tabs';
 import { ValueOptionsTags } from '../../Components/ValueSelector';
 import { SpecialColumnSettingsWizardStep } from '../../SpecialColumnSettingsWizardStep';
 import { getCalculatedColumnSettingsTags } from '../Utilities/getCalculatedColumnSettingsTags';
+import { Select } from '../../../components/Select';
 export const renderCalculatedColumnSettingsSummary = (data) => {
     const options = getCalculatedColumnSettingsTags(data.CalculatedColumnSettings);
     return (React.createElement(Box, { fontSize: 2 },
@@ -33,13 +33,7 @@ export const CalculatedColumnSettingsWizardSection = (props) => {
     };
     const validCheck = isValidCalculatedColumnSettings(data);
     const ErrorMessage = validCheck === true ? null : validCheck;
-    let options = [
-        { value: 'Number', label: 'Number' },
-        { value: 'String', label: 'String' },
-        { value: 'Date', label: 'Date' },
-        { value: 'Boolean', label: 'Boolean' },
-    ];
-    let { DataType: dataType } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
+    const { DataType: dataType } = (_a = data.CalculatedColumnSettings) !== null && _a !== void 0 ? _a : {};
     const { Width } = (_b = data.CalculatedColumnSettings) !== null && _b !== void 0 ? _b : {};
     const handleSpecialColumnSettingsChange = (settings) => {
         props.onChange(Object.assign(Object.assign({}, data), { CalculatedColumnSettings: Object.assign(Object.assign({}, data.CalculatedColumnSettings), settings) }));
@@ -50,6 +44,12 @@ export const CalculatedColumnSettingsWizardSection = (props) => {
             handleSpecialColumnSettingsChange(Object.assign(Object.assign({}, data === null || data === void 0 ? void 0 : data.CalculatedColumnSettings), { DataType: computedDataType }));
         }
     }, []);
+    const options = [
+        { value: 'Number', label: 'Number' },
+        { value: 'String', label: 'String' },
+        { value: 'Date', label: 'Date' },
+        { value: 'Boolean', label: 'Boolean' },
+    ];
     return (React.createElement(Box, { "data-name": 'calculated-column-settings' },
         React.createElement(Tabs, { autoFocus: false },
             React.createElement(Tabs.Tab, null, "Column Settings"),
@@ -57,16 +57,7 @@ export const CalculatedColumnSettingsWizardSection = (props) => {
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, null,
                         React.createElement(FormRow, { label: "Data Type" },
-                            React.createElement(DropdownButton, { "data-name": "column-type", style: {
-                                    width: '300px',
-                                    whiteSpace: 'normal',
-                                    overflow: 'hidden',
-                                    maxWidth: 'inherit',
-                                }, placeholder: "Select Data Type", showClearButton: true, onClear: () => handleDataTypeChange(null), columns: ['label'], items: options.map((item) => ({
-                                    value: item.value,
-                                    label: item.label,
-                                    onClick: () => handleDataTypeChange(item.value),
-                                })) }, dataType ? dataType : 'Select Data Type')),
+                            React.createElement(Select, { "data-name": "column-type", placeholder: "Select Data Type", options: options, value: dataType, onChange: (value) => handleDataTypeChange(value) })),
                         React.createElement(FormRow, { label: "Width" },
                             React.createElement(Input, { "data-name": "column-width", type: "number", width: 300, value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
                                     Width: Number(e.target.value),

package/src/View/CalculatedColumn/Wizard/CalculatedColumnTypeSection.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ExpressionType } from './CalculatedColumnWizard';
-declare type CalculatedColumnTypeWizardSectionProps = {
+type CalculatedColumnTypeWizardSectionProps = {
     onTypeChange: (type: ExpressionType) => void;
     type: ExpressionType;
 };

package/src/View/CalculatedColumn/Wizard/CalculatedColumnWizard.d.ts

@@ -2,7 +2,7 @@
 import { CalculatedColumn } from '../../../types';
 import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
 export declare const calculatedColumnTypes: readonly ["ScalarExpression", "AggregatedScalarExpression", "CumulativeAggregatedExpression", "QuantileAggregatedExpression"];
-export declare type ExpressionType = typeof calculatedColumnTypes[number];
+export type ExpressionType = typeof calculatedColumnTypes[number];
 export interface CalculatedColumnWizardProps extends AdaptableOnePageWizardProps<CalculatedColumn> {
 }
 export declare const CalculatedColumnWizard: (props: CalculatedColumnWizardProps) => JSX.Element;

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

@@ -81,8 +81,8 @@ export const CalculatedColumnWizard = (props) => {
                 },
             },
             {
-                title: 'Definition',
-                details: 'Specify Column details',
+                title: 'Details',
+                details: 'Specify Calculated Column details',
                 isValid: isValidCalculatedColumnDefinition,
                 renderSummary: renderCalculatedColumnDefinitionSummary,
                 render: () => {

package/src/View/CellSummary/CellSummaryStatusBarSubPanelPopover.js

@@ -7,5 +7,9 @@ export const CellSummaryStatusBarSubPanelPopover = () => {
     return cellSummary && cellSummary.Count ? (summary) : (
     // the extra wrapper is added because the empty text is rendered
     // inside a  EmptyContent, hat has position absolute
-    React.createElement("div", { style: { position: 'relative', width: '100%', height: 80 } }, summary));
+    (React.createElement(
+        "div",
+        { style: { position: 'relative', width: '100%', height: 80 } },
+        summary
+    )));
 };

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -5,11 +5,11 @@ import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { CellSummaryPopover } from './CellSummaryPopover';
 import { Flex } from 'rebass';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import DropdownButton from '../../components/DropdownButton';
 import { AdaptablePopover } from '../AdaptablePopover';
 import * as SystemRedux from '../../Redux/ActionsReducers/SystemRedux';
 import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
 import { connect } from 'react-redux';
+import { Select } from '../../components/Select';
 class CellSummaryViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -31,7 +31,7 @@ class CellSummaryViewPanelComponent extends React.Component {
         let operationMenuItems = EnumExtensions.getNames(SummaryOperation).map((summaryOperation, index) => {
             return {
                 label: summaryOperation,
-                onClick: () => this.props.onCellSummaryOperationChange(summaryOperation),
+                value: summaryOperation,
             };
         });
         const cellSummaryOperationDefinitions = this.props.api.cellSummaryApi.getCellSummaryOperationDefinitions();
@@ -39,7 +39,7 @@ class CellSummaryViewPanelComponent extends React.Component {
             ? []
             : cellSummaryOperationDefinitions.map((operationDefinition) => {
                 return {
-                    onClick: () => this.props.onCellSummaryOperationChange(operationDefinition.operationName),
+                    value: operationDefinition.operationName,
                     label: operationDefinition.operationName,
                 };
             });
@@ -60,8 +60,8 @@ class CellSummaryViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, { flex: 1 },
-                React.createElement(DropdownButton, { style: { fontSize: 'small', width: '100%' }, marginRight: 2, columns: ['label'], className: `ab-${elementType}__CellSummary__select`, items: [...operationMenuItems, ...operationDefinitions], disabled: shouldDisable, variant: "outlined", tone: 'neutral' }, this.props.CellSummaryOperation)),
-            React.createElement(Flex, { alignItems: "center" }, React.createElement(React.Fragment, null,
+                React.createElement(Select, { style: { width: '100%' }, className: `ab-${elementType}__CellSummary__select`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
+            React.createElement(Flex, { alignItems: "center", ml: 2 }, React.createElement(React.Fragment, null,
                 renderOperationValue(),
                 this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur" }))))));
     }