@adaptabletools/adaptable-cjs 22.0.7 → 22.0.9

package/src/Redux/Store/AdaptableStore.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableStore = exports.LoadState = exports.InitState = void 0;
+exports.AdaptableStore = exports.LoadState = exports.InitState = exports.getPersistableState = void 0;
 const tslib_1 = require("tslib");
 const Redux = tslib_1.__importStar(require("redux"));
 const PluginsRedux = tslib_1.__importStar(require("../ActionsReducers/PluginsRedux"));
@@ -63,6 +63,13 @@ const NON_PERSISTENT_STORE_KEYS = [
     'Comment',
     'Plugins',
 ];
+const getPersistableState = (state) => {
+    NON_PERSISTENT_STORE_KEYS.forEach((key) => {
+        delete state[key];
+    });
+    return state;
+};
+exports.getPersistableState = getPersistableState;
 const InitState = () => ({
     type: INIT_STATE,
 });
@@ -204,10 +211,8 @@ class AdaptableStore {
                 !init &&
                 !this.loadStorageInProgress;
             if (shouldPersist) {
-                const storageState = { ...finalState };
-                NON_PERSISTENT_STORE_KEYS.forEach((key) => {
-                    delete storageState[key];
-                });
+                let storageState = { ...finalState };
+                storageState = (0, exports.getPersistableState)(storageState);
                 this.currentStorageState = storageState;
                 this.previousStorageState = { ...state };
                 NON_PERSISTENT_STORE_KEYS.forEach((key) => {
@@ -270,10 +275,10 @@ class AdaptableStore {
     getPreviousStorageState() {
         return this.previousStorageState;
     }
-    saveStateNow(adaptable) {
-        const storageState = this.getCurrentStorageState();
-        if (storageState) {
-            return this.storageEngine.saveNow(adaptable, storageState, 'API_CALL_SAVE_STATE');
+    saveStateNow(adaptable, state) {
+        const newState = state ?? this.getCurrentStorageState();
+        if (newState) {
+            return this.storageEngine.saveNow(adaptable, newState, 'API_CALL_SAVE_STATE');
         }
         return Promise.resolve(true);
     }

package/src/Redux/Store/Interface/IAdaptableStore.d.ts

@@ -14,7 +14,7 @@ export interface IAdaptableStore {
     loadStore: (config: LoadStoreConfig) => Promise<any>;
     getCurrentStorageState: () => AdaptableState | void;
     getPreviousStorageState: () => AdaptableState | void;
-    saveStateNow: (adaptable: IAdaptable) => Promise<any>;
+    saveStateNow: (adaptable: IAdaptable, state?: AdaptableState) => Promise<any>;
     on: (eventName: string, callback: (data?: any) => any) => () => void;
     onAny: (callback: (eventName: string, data?: any) => any) => () => void;
     onBeforeAny: (callback: (eventName: string, data?: any) => any) => () => void;

package/src/Strategy/CalculatedColumnModule.js

@@ -36,7 +36,7 @@ class CalculatedColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            if (cellDataChangedInfo.trigger !== 'aggChange') {
+            if (cellDataChangedInfo.trigger !== 'aggChange' && !cellDataChangedInfo.preventEdit) {
                 this.api.internalApi
                     .getCalculatedColumnExpressionService()
                     .listentoCellDataChange(cellDataChangedInfo);

package/src/Strategy/ColumnFilterModule.js

@@ -28,8 +28,10 @@ class ColumnFilterModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            const changedColumnId = cellDataChangedInfo.column.columnId;
-            this.api.filterApi.columnFilterApi.resetFilterValues(changedColumnId);
+            if (!cellDataChangedInfo.preventEdit) {
+                const changedColumnId = cellDataChangedInfo.column.columnId;
+                this.api.filterApi.columnFilterApi.resetFilterValues(changedColumnId);
+            }
         });
         // we reset the filter cache on sort change, because we might have columns
         // with "In" filters, with custom values, which use `context.orderedValues`

package/src/Strategy/DataChangeHistoryModule.js

@@ -33,7 +33,9 @@ class DataChangeHistoryModule extends AdaptableModuleBase_1.AdaptableModuleBase
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            if (this.isListeningToCellDataChanges && this.isDataChangeLoggable(cellDataChangedInfo)) {
+            if (this.isListeningToCellDataChanges &&
+                this.isDataChangeLoggable(cellDataChangedInfo) &&
+                !cellDataChangedInfo.preventEdit) {
                 this.api.dataChangeHistoryApi.addDataChangeHistoryEntry(cellDataChangedInfo);
             }
         });

package/src/Strategy/FlashingCellModule.js

@@ -39,7 +39,7 @@ class FlashingCellModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            if (cellDataChangedInfo.trigger === 'undo') {
+            if (cellDataChangedInfo.trigger === 'undo' || cellDataChangedInfo.preventEdit) {
                 // do NOT handle reverted changes
                 return;
             }

package/src/Strategy/FreeTextColumnModule.js

@@ -34,7 +34,7 @@ class FreeTextColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            if (cellDataChangedInfo.trigger !== 'aggChange') {
+            if (cellDataChangedInfo.trigger !== 'aggChange' && !cellDataChangedInfo.preventEdit) {
                 this.api.freeTextColumnApi.internalApi.handleFreeTextColumnDataChange(cellDataChangedInfo);
             }
         });

package/src/Utilities/Services/DataService.js

@@ -45,6 +45,12 @@ class DataService {
     emit = (eventName, data) => this.emitter.emit(eventName, data);
     CreateCellDataChangedEvent(cellDataChangedInfo) {
         if (cellDataChangedInfo.newValue != cellDataChangedInfo.oldValue) {
+            const validationRules = this.adaptable.api.internalApi
+                .getValidationService()
+                .getValidationRulesForDataChange(cellDataChangedInfo);
+            if (validationRules.length) {
+                cellDataChangedInfo.preventEdit = true;
+            }
             this.emitter.emitSync('CellDataChanged', cellDataChangedInfo);
             this.adaptable.api.eventApi.internalApi.fireCellChangedEvent(cellDataChangedInfo);
             const dataChangeLogEntry = this.extractDataChangeLogEntry(cellDataChangedInfo);

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

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const AlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     let disableDataTypes = true;
@@ -22,10 +23,16 @@ const AlertScopeWizardSection = (props) => {
             }, scope: data.Scope, updateScope: (Scope) => {
                 const newData = { ...data, Scope };
                 if (newData.Rule.Predicates) {
-                    // when scope is changed, reset the rule to predicate of any
-                    // if it was set to a predicate before
+                    const validPredicateIds = new Set(api.alertApi.internalApi.getAlertPredicateDefsForScope(Scope).map((def) => def.id));
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'AnyChange' }],
+                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                            if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                            }
+                            return true;
+                        }),
                     };
                 }
                 if (newData.Rule.ObservableExpression !== undefined &&

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

@@ -26,11 +26,11 @@ exports.renderCalculatedColumnDefinitionSummary = renderCalculatedColumnDefiniti
 const isValidCalculatedColumnDefinition = (data, api) => {
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
-        return 'A Column ID is required.';
+        return 'A Column Name is required';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
-    return hasAlreadyExistingId ? 'A column with this ID already exists.' : true;
+    return hasAlreadyExistingId ? 'A column with this Name already exists' : true;
 };
 exports.isValidCalculatedColumnDefinition = isValidCalculatedColumnDefinition;
 const CalculatedColumnDefinitionWizardSection = (props) => {
@@ -71,16 +71,16 @@ const CalculatedColumnDefinitionWizardSection = (props) => {
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(Flex_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, null,
-                        React.createElement(FormLayout_1.FormRow, { label: "Column Id" },
-                            React.createElement(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', width: 300, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter an Id for the column", onChange: handleColumnIdChange })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
+                        React.createElement(FormLayout_1.FormRow, { label: "Column Name" },
+                            React.createElement(Input_1.default, { "data-name": "column-id", value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, autoFocus: !inEdit, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: handleColumnIdChange })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Column Header" },
                             React.createElement(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
                                     setColumnNameFocused(true);
                                 }, onBlur: () => {
                                     setColumnNameFocused(false);
-                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', width: 300, type: "text", placeholder: "Enter column name", onChange: handleColumnNameChange })),
-                        React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
-                            React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", width: 300, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
+                                }, value: ColumnNameFocused ? ColumnName || '' : ColumnName || ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: handleColumnNameChange })),
+                        React.createElement(FormLayout_1.FormRow, { label: "Column Header Tooltip" },
+                            React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: HeaderToolTip, onChange: (e) => handleSpecialColumnSettingsChange({
                                     HeaderToolTip: e.target.value,
                                 }) })),
                         React.createElement(FormLayout_1.FormRow, { label: "" },

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

@@ -8,7 +8,7 @@ const TypeRadio_1 = require("../../Wizard/TypeRadio");
 const Flex_1 = require("../../../components/Flex");
 const CalculatedColumnTypeWizardSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, null,
-        React.createElement(Tabs_1.Tabs.Tab, null, "Calculated Column Expression Type"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Calculated Column Type"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(Flex_1.Flex, { flexDirection: "column" },
                 React.createElement(TypeRadio_1.TypeRadio, { text: 'Standard', description: "The calculated value is derived from other cells in the row", checked: props.type === 'ScalarExpression', onClick: () => props.onTypeChange('ScalarExpression') }),

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

@@ -71,6 +71,7 @@ const CalculatedColumnWizard = (props) => {
     return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: calculatedColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
             {
                 title: 'Type',
+                details: 'Select Type of Calculated Column',
                 renderSummary: () => {
                     return (React.createElement(Flex_1.Box, { className: "twa:text-2" },
                         "Expression Type: ",
@@ -83,7 +84,7 @@ const CalculatedColumnWizard = (props) => {
             },
             {
                 title: 'Details',
-                details: 'Specify Calculated Column details',
+                details: 'Provide Calculated Column Details',
                 isValid: CalculatedColumnDefinitionWizardSection_1.isValidCalculatedColumnDefinition,
                 renderSummary: CalculatedColumnDefinitionWizardSection_1.renderCalculatedColumnDefinitionSummary,
                 render: () => {
@@ -103,7 +104,7 @@ const CalculatedColumnWizard = (props) => {
             },
             {
                 title: 'Settings',
-                details: 'Specify Column properties',
+                details: 'Specify Calculated Column Properties',
                 isValid: CalculatedColumnSettingsWizardSection_1.isValidCalculatedColumnSettings,
                 renderSummary: CalculatedColumnSettingsWizardSection_1.renderCalculatedColumnSettingsSummary,
                 render: () => {
@@ -121,6 +122,7 @@ const CalculatedColumnWizard = (props) => {
             },
             '-',
             {
+                details: 'Review the Calculated Column',
                 render: () => {
                     return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -201,6 +201,7 @@ const FloatingFilterValues = (props) => {
                         height: '100%',
                         borderRadius: 'none',
                         border: 'none',
+                        fontSize: 'inherit',
                         // @ts-ignore ignore
                         '&:hover': {
                             border: 'none',

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AdaptableColumn } from '../../../types';
+export declare const ColumnGroupTag: React.FC<{
+    column: AdaptableColumn;
+}>;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnGroupTag = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Flex_1 = require("../../../components/Flex");
+const ColumnGroupTag = ({ column }) => {
+    if (!column.columnGroup || column.columnGroup.groupCount <= 1)
+        return null;
+    return (React.createElement(Flex_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1 twa:flex twa:items-center" },
+        "Column Group: ",
+        column.columnGroup.friendlyName));
+};
+exports.ColumnGroupTag = ColumnGroupTag;

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const ValueSelector_1 = require("../ValueSelector");
+const ColumnGroupTag_1 = require("../ColumnGroupTag");
 const NewColumnSelector = ({ allowReorder = true, ...props }) => {
     const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
     const filterFn = (0, react_1.useMemo)(() => {
@@ -19,6 +20,8 @@ const NewColumnSelector = ({ allowReorder = true, ...props }) => {
             else {
                 onChange(colIds);
             }
-        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName }));
+        }, toIdentifier: (c) => c.columnId, toLabel: (c) => c.friendlyName, toListLabel: (c) => (React.createElement("div", { className: "twa:flex twa:flex-row twa:items-center" },
+            c.friendlyName,
+            React.createElement(ColumnGroupTag_1.ColumnGroupTag, { column: c }))) }));
 };
 exports.NewColumnSelector = NewColumnSelector;

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

@@ -97,13 +97,20 @@ const ColumnValuesSelect = (props) => {
             minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 160px))`,
         };
     }, [column.columnId]);
+    const treeDropdownToDisplayValue = React.useMemo(() => {
+        if (column.dataType === 'date') {
+            return toDateDisplayValue;
+        }
+        return (paths) => (0, TreeDropdown_1.toDisplayValueFromOptionTree)(paths, optionsFromProps);
+    }, [column.dataType, optionsFromProps]);
     const component = column.dataType === 'date' || column.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN ? (React.createElement(TreeDropdown_1.TreeDropdown, { style: {
             width: '100%',
             height: '100%',
             ...props.selectProps?.styles?.container,
-        }, toDisplayValue: column.dataType === 'date' ? toDateDisplayValue : undefined, fieldStyle: {
+        }, toDisplayValue: treeDropdownToDisplayValue, fieldStyle: {
             boxShadow: 'none',
             ...props.selectProps?.styles?.control,
+            ...props.selectProps?.styles?.valueContainer,
         }, resizable: true, onChange: column.dataType === 'date'
             ? (value) => props.onChange(dateOnChangeParser(value))
             : props.onChange, options: options, 

package/src/View/Components/NewScopeComponent.js

@@ -77,47 +77,30 @@ const NewScopeComponent = (props) => {
         }
         return allColumns;
     }, []);
-    const getScopeChoice = (scope) => {
+    const getTabFromScope = (scope) => {
         if (!scope) {
             return undefined;
         }
         if (scopeApi.scopeIsAll(scope)) {
-            return 'All';
+            return 'Row';
         }
-        if (scopeApi.scopeHasColumns(props.scope)) {
+        if (scopeApi.scopeHasColumns(scope)) {
             return 'Column';
         }
-        if (scopeApi.scopeHasDataType(props.scope)) {
+        if (scopeApi.scopeHasDataType(scope)) {
             return 'DataType';
         }
-        if (scopeApi.scopeHasColumnType(props.scope)) {
+        if (scopeApi.scopeHasColumnType(scope)) {
             return 'ColumnType';
         }
         return undefined;
     };
-    const onScopeSelectChanged = (value) => {
-        let newScope;
-        if (value == 'Column') {
-            newScope = {
-                ColumnIds: [],
-            };
+    const [activeTab, setActiveTab] = (0, react_1.useState)(() => getTabFromScope(props.scope));
+    const onTabChanged = (value) => {
+        setActiveTab(value);
+        if (value === 'Row') {
+            props.updateScope({ All: true });
         }
-        else if (value == 'DataType') {
-            newScope = {
-                DataTypes: [],
-            };
-        }
-        else if (value == 'ColumnType') {
-            newScope = {
-                ColumnTypes: [],
-            };
-        }
-        else {
-            newScope = {
-                All: true,
-            };
-        }
-        props.updateScope(newScope);
     };
     const onColumnsSelectedChanged = (cols) => {
         const newScope = {
@@ -126,7 +109,7 @@ const NewScopeComponent = (props) => {
         props.updateScope(newScope);
     };
     const onCheckBoxDataTypeChecked = (checked, item) => {
-        let dataTypes = [].concat(scopeApi.getDataTypesInScope(props.scope));
+        let dataTypes = [].concat(scopeApi.getDataTypesInScope(props.scope) ?? []);
         if (checked) {
             dataTypes.push(item);
         }
@@ -141,7 +124,6 @@ const NewScopeComponent = (props) => {
         };
         props.updateScope(newScope);
     };
-    const scopeChoice = getScopeChoice(props.scope);
     const dataTypesInScope = props.scope && 'DataTypes' in props.scope ? scopeApi.getDataTypesInScope(props.scope) : null;
     let dataTypeOptions = DATA_TYPES_OPTIONS;
     if (Array.isArray(props.availableDataTypes)) {
@@ -150,15 +132,15 @@ const NewScopeComponent = (props) => {
     const hasColumnTypes = React.useMemo(() => {
         return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: scopeChoice, style: { height: '100%', ...props.style }, onValueChange: onScopeSelectChanged },
+    return (React.createElement(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged },
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Tab, { value: "Row" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", checked: scopeChoice == 'All', tabIndex: -1 }, "All Columns"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1 }, "All Columns"))),
         !props.disableColumns && (React.createElement(Tabs_1.Tabs.Tab, { value: "Column" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", value: "Column", checked: scopeChoice == 'Column', tabIndex: -1 }, "Selected Columns"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1 }, "Selected Columns"))),
         !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "DataType" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: scopeChoice == 'DataType', tabIndex: -1 }, "Data Types"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1 }, "Data Types"))),
         hasColumnTypes && (React.createElement(Tabs_1.Tabs.Tab, { value: "ColumnType" },
-            React.createElement(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: scopeChoice == 'ColumnType', tabIndex: -1 }, "Column Types"))),
+            React.createElement(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1 }, "Column Types"))),
         props.hideWholeRow ? null : (React.createElement(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope" },
             React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, props.descriptions.rowScope))),
         !props.disableColumns && (React.createElement(Tabs_1.Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto" },
@@ -167,15 +149,15 @@ const NewScopeComponent = (props) => {
                 React.createElement(Flex_1.Box, { className: "twa:flex-3" }),
                 React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
             React.createElement(Flex_1.Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1" },
-                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope), onChange: onColumnsSelectedChanged })))),
+                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged })))),
         !props.disableDataTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope" },
             React.createElement(Flex_1.Box, null,
                 props.descriptions.dataTypeScope && (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2" }, props.descriptions.dataTypeScope)),
-                React.createElement(Flex_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
+                React.createElement(Flex_1.Flex, { flexDirection: "column" }, dataTypeOptions.map((dataTypeOption) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, key: dataTypeOption.value, checked: !!dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value) }, dataTypeOption.label))))))),
         hasColumnTypes && (React.createElement(Tabs_1.Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope" },
             React.createElement(Flex_1.Box, null,
                 React.createElement(Flex_1.Flex, { flexDirection: "column" }, api.columnApi.getColumnTypes()?.map?.((columnType) => (React.createElement(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, key: columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
-                        let columnTypes = [].concat(props.scope.ColumnTypes);
+                        let columnTypes = [].concat('ColumnTypes' in props.scope ? props.scope.ColumnTypes : []);
                         if (checked) {
                             columnTypes.push(columnType);
                         }

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

@@ -10,5 +10,6 @@ export type ReorderDraggableProps<OPTION_TYPE, ID_TYPE extends number | string>
     onOptionClick?: (option: OPTION_TYPE, event: React.MouseEvent<HTMLDivElement>) => void;
     disabled?: boolean;
     style?: React.CSSProperties;
+    className?: string;
 };
 export declare function ReorderDraggable<OPTION_TYPE, ID_TYPE extends number | string>(props: ReorderDraggableProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;

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

@@ -8,6 +8,7 @@ const icons_1 = require("../../../components/icons");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twMerge_1 = require("../../../twMerge");
 function ReorderDraggable(props) {
     const { onChange, order, toIdentifier, isOptionDraggable, disabled, } = props;
     const baseClassName = 'ab-ReorderDraggable';
@@ -31,7 +32,7 @@ function ReorderDraggable(props) {
             }, draggableProvided.dragHandleProps);
         }));
     };
-    return (React.createElement(Flex_1.Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
+    return (React.createElement(Flex_1.Flex, { style: props.style, className: (0, twMerge_1.twMerge)(`${baseClassName} twa:flex-1`, props.className), flexDirection: "column" },
         React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
                 const { source, destination } = result;
                 const newOrder = ArrayExtensions_1.default.reorderArray(props.order, source.index, destination.index);

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -10,6 +10,7 @@ const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const AdaptableFormControlTextClear_1 = require("../../Components/Forms/AdaptableFormControlTextClear");
 const renderCustomSortColumn = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (React.createElement(Flex_1.Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
@@ -60,6 +61,7 @@ const CustomSortColumnWizardSection = (props) => {
             });
         });
     }, []);
+    const [columnsSearchText, setColumnsSearchText] = React.useState('');
     const onNameChange = (event) => {
         props.onChange({
             ...data,
@@ -77,7 +79,11 @@ const CustomSortColumnWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs, { style: { flex: 1, minHeight: 0 } },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
+                    React.createElement(Flex_1.Box, { className: "twa:text-2" }, "Columns"),
+                    React.createElement(Flex_1.Box, { className: "twa:flex-3" }),
+                    React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
+                React.createElement(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
                         props.onChange({
                             ...data,
                             SortedValues: [],

package/src/View/CustomSort/Wizard/CustomSortWizard.js

@@ -43,7 +43,7 @@ const CustomSortWizard = (props) => {
             {
                 isValid: (data) => (0, CustomSortColumnWizardSection_1.isValidCustomSortColumn)(data, allCustomSorts),
                 renderSummary: CustomSortColumnWizardSection_1.renderCustomSortColumn,
-                details: 'Enter Name and select a Column for Custom Sort',
+                details: 'Enter Name and select a Column to Sort',
                 render: () => {
                     return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(CustomSortColumnWizardSection_1.CustomSortColumnWizardSection, { isNew: props.isNew, onChange: setCustomSort, allCustomSorts: allCustomSorts })));

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -6,6 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
+const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
@@ -16,10 +17,16 @@ const FlashingAlertScopeWizardSection = (props) => {
             }, scopeColumns: availableColumns, scope: data.Scope, updateScope: (Scope) => {
                 const newData = { ...data, Scope };
                 if (newData.Rule.Predicates) {
-                    // when scope is changed, reset the rule to predicate of AnyChange
-                    // if it was set to a predicate before
+                    const validPredicateIds = new Set(api.flashingCellApi.getFlashingCellPredicateDefsForScope(Scope).map((def) => def.id));
                     newData.Rule = {
-                        Predicates: [{ PredicateId: 'AnyChange' }],
+                        Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                            // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                            // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                            if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                            }
+                            return true;
+                        }),
                     };
                 }
                 props.onChange(newData);

package/src/View/FormatColumn/Wizard/FormatColumnColumnScopeWizardSection.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const NewScopeComponent_1 = require("../../Components/NewScopeComponent");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const constants_1 = require("./constants");
+const ColumnScope_1 = require("../../../AdaptableState/Common/ColumnScope");
 const renderFormatColumnScopeSummary = (data) => {
     return (0, NewScopeComponent_1.renderScopeSummary)(data.Scope, {
         scopeWholeRow: 'Matching rows will be formatted',
@@ -31,12 +31,19 @@ const FormatColumnScopeWizardSection = (props) => {
                         newData.Rule.BooleanExpression = '';
                     }
                     else {
-                        // if scope is not whole row, if you have a predicate, reset it
-                        newData.Rule.Predicates = [
-                            {
-                                PredicateId: constants_1.DEFAULT_PREDICATE_ID_FOR_FORMAT_COLUMN,
-                            },
-                        ];
+                        const validPredicateIds = new Set(api.formatColumnApi.internalApi
+                            .getFormatColumnDefsForScope(Scope)
+                            .map((def) => def.id));
+                        newData.Rule = {
+                            Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
+                                // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
+                                // TODO: this should NOT be required, but the ColumnValueSelector does NOT support creatable values right now
+                                if ((0, ColumnScope_1.isScopeColumnIds)(Scope) && Scope.ColumnIds.length > 1) {
+                                    return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
+                                }
+                                return true;
+                            }),
+                        };
                     }
                 }
                 props.onChange(newData);

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -11,9 +11,7 @@ function FormatColumnRuleWizardSection(props) {
     if (data.Target && data.Target === 'columnHeader') {
         return (React.createElement(HelpBlock_1.default, { className: "twa:mt-3" }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
     }
-    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
-        // TODO see what is this
-        predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
+    return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, predicateDefs: api.formatColumnApi.internalApi.getFormatColumnDefsForScope(data.Scope), getPredicateDefsForColId: (colId) => api.formatColumnApi.internalApi.getFormatColumnDefsForScope({ ColumnIds: [colId] }), showNoRule: true, showBoolean: true, showAggregation: false, showObservable: false, showQueryBuilder: true, showPredicate: !api.columnScopeApi.scopeIsAll(data.Scope), data: data, onChange: (formatColumn) => props.onChange(formatColumn), descriptions: {
             selectPredicate: 'Create a Format Column Rule - to be applied when data changes',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FreeTextColumn } from '../../../AdaptableState/FreeTextColumnState';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 export declare const renderFreeTextColumnSummary: (data: FreeTextColumn) => React.JSX.Element;
-export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "A Column ID is required." | "A column with this ID already exists." | "A data type is required for the column.";
+export declare const isValidFreeTextColumn: (data: FreeTextColumn, api: AdaptableApi) => true | "A Column Name is required" | "A column with this Name already exists" | "A data type is required for the column";
 export type FreeTextColumnSettingsWizardSectionProps = {
     onChange: (data: FreeTextColumn) => void;
     isEdit: boolean;