@adaptabletools/adaptable 19.2.3 → 20.0.0-canary.0

package/src/View/Components/Popups/AdaptablePopupTeamSharing.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { AdaptableSharedEntityConfig } from '../../../PredefinedConfig/TeamSharingState';
+import * as React from 'react';
 export interface AdaptablePopupTeamSharingProps {
     showPopup: boolean;
     header: string;
     onClose: () => void;
     onConfirm: (config: AdaptableSharedEntityConfig) => void;
 }
-export declare const AdaptablePopupTeamSharing: (props: AdaptablePopupTeamSharingProps) => JSX.Element;
+export declare const AdaptablePopupTeamSharing: (props: AdaptablePopupTeamSharingProps) => React.JSX.Element;

package/src/View/Components/Popups/AdaptablePopupTeamSharing.js

@@ -30,12 +30,12 @@ export const AdaptablePopupTeamSharing = (props) => {
                             ": a \"live\" share that is automatically updated with every local change"))),
                 React.createElement(FormLayout, { padding: 2 },
                     React.createElement(FormRow, { label: "Name: " },
-                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig(Object.assign(Object.assign({}, config), { description: e.target.value })) })),
+                        React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) })),
                     React.createElement(FormRow, { label: "Share: " },
                         React.createElement(Flex, { flexDirection: "row" },
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Snapshot' })) }, "Snapshot"),
+                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }) }, "Snapshot"),
                             ' ',
-                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig(Object.assign(Object.assign({}, config), { type: 'Active' })) }, "Active"),
+                            React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active"),
                             ' '))),
                 React.createElement(Box, { marginTop: 3 },
                     React.createElement(Flex, { padding: 2 },

package/src/View/Components/Popups/FormPopups/FormPopups.js

@@ -15,14 +15,17 @@ export const FormDialog = ({ id, formProps, form, prepareContext, }) => {
     const handleDismiss = () => {
         dispatch(PopupHideForm(id));
     };
-    const context = Object.assign({ adaptableApi: adaptable.api, formData: data }, formProps);
+    const context = {
+        adaptableApi: adaptable.api,
+        formData: data,
+        ...formProps,
+    };
     return (React.createElement(Dialog, { isOpen: true, showCloseButton: false, style: { minHeight: 'auto', minWidth: 400, maxHeight: '80vh' }, onDismiss: handleDismiss },
         React.createElement(Flex, { flexDirection: 'column', "data-name": "form-dialog", padding: 4, height: '100%' },
             React.createElement(AdaptableFormComponent, { formDef: form, data: data, context: context, onChange: setData, api: adaptable.api, displayTitle: true, onButtonClick: async (button) => {
-                    var _a;
                     handleDismiss();
                     const preparedContext = typeof prepareContext === 'function' ? await prepareContext(context) : context;
-                    (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, preparedContext);
+                    button.onClick?.(button, preparedContext);
                 } }))));
 };
 export const FormPopups = () => {

package/src/View/Components/Popups/GridCellPopup/GridCellPopup.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { Flex } from 'rebass';
 import { GetNoteSelector } from '../../../../Redux/ActionsReducers/NoteRedux';
-import { SystemCommentsAndNotesEditModeSelector, SystemCommentsAndNotesFocusedEntitySelector, SystemCommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/SystemRedux';
+import { CommentsAndNotesEditModeSelector, CommentsAndNotesFocusedEntitySelector, CommentsAndNotesSelector, } from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CommentsEditor } from '../../../Comments/CommentsEditor';
 import { NoteEditor } from '../../../Note/NoteEditor';
@@ -10,9 +10,9 @@ import { CellPopup } from '../../CellPopup';
 const ConnectedNoteEditor = ({ enableEditMode }) => {
     const { api } = useAdaptable();
     const isReadonly = api.entitlementApi.isModuleReadOnlyEntitlement('Note');
-    const editMode = useSelector((state) => SystemCommentsAndNotesEditModeSelector(state.System));
-    const cellPopupService = api.internalApi.getCellPopupService();
-    const cellAddress = useSelector((state) => SystemCommentsAndNotesSelector(state.System));
+    const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
+    const annotationsService = api.internalApi.getAnnotationsService();
+    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
     const note = useSelector((state) => {
         return cellAddress ? GetNoteSelector(state.Note, cellAddress) : null;
     });
@@ -20,30 +20,29 @@ const ConnectedNoteEditor = ({ enableEditMode }) => {
         api.noteApi.updateNoteText(value, note);
     }, [note]);
     return (React.createElement(Flex, { onClick: () => enableEditMode(), flexDirection: "column", className: "ab-NotePopup" },
-        React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note === null || note === void 0 ? void 0 : note.Uuid, onClose: () => cellPopupService.hidePopup(), note: note === null || note === void 0 ? void 0 : note.Text, onNoteChange: (value) => handleNoteChange(value) })));
+        React.createElement(NoteEditor, { isReadonly: isReadonly, editMode: editMode, key: note?.Uuid, onClose: () => annotationsService.hidePopup(), note: note?.Text, onNoteChange: (value) => handleNoteChange(value) })));
 };
 export const GridCellPopup = (props) => {
     const { api } = useAdaptable();
     const cellPopupRef = React.useRef(null);
-    const editMode = useSelector((state) => SystemCommentsAndNotesEditModeSelector(state.System));
-    const focusedEntity = useSelector((state) => SystemCommentsAndNotesFocusedEntitySelector(state.System));
-    const cellAddress = useSelector((state) => SystemCommentsAndNotesSelector(state.System));
+    const editMode = useSelector((state) => CommentsAndNotesEditModeSelector(state.Internal));
+    const focusedEntity = useSelector((state) => CommentsAndNotesFocusedEntitySelector(state.Internal));
+    const cellAddress = useSelector((state) => CommentsAndNotesSelector(state.Internal));
     const enableEditMode = (entity) => {
         if (!editMode) {
-            const cellPopupService = api.internalApi.getCellPopupService();
-            cellPopupService.showPopup(cellAddress, true);
-            cellPopupService.editFocusedEntity(entity);
+            const annotationsService = api.internalApi.getAnnotationsService();
+            annotationsService.showPopup(cellAddress, true);
+            annotationsService.editFocusedEntity(entity);
         }
     };
     React.useEffect(() => {
-        var _a, _b;
-        (_b = (_a = cellPopupRef === null || cellPopupRef === void 0 ? void 0 : cellPopupRef.current) === null || _a === void 0 ? void 0 : _a.refreshContent) === null || _b === void 0 ? void 0 : _b.call(_a);
+        cellPopupRef?.current?.refreshContent?.();
     }, [focusedEntity]);
     if (!cellAddress) {
         return React.createElement(React.Fragment, null);
     }
     const noteEditor = React.createElement(ConnectedNoteEditor, { enableEditMode: () => enableEditMode('Note') });
-    const commentEditor = (React.createElement(CommentsEditor, { onRefreshContent: () => { var _a, _b; return (_b = (_a = cellPopupRef === null || cellPopupRef === void 0 ? void 0 : cellPopupRef.current) === null || _a === void 0 ? void 0 : _a.refreshContent) === null || _b === void 0 ? void 0 : _b.call(_a); }, enableEditMode: () => enableEditMode('Comment') }));
+    const commentEditor = (React.createElement(CommentsEditor, { onRefreshContent: () => cellPopupRef?.current?.refreshContent?.(), enableEditMode: () => enableEditMode('Comment') }));
     return (React.createElement(CellPopup, { ref: cellPopupRef, key: `${cellAddress.PrimaryKeyValue}-${cellAddress.ColumnId}`, isOpen: true, primaryKeyValue: cellAddress.PrimaryKeyValue, columnId: cellAddress.ColumnId }, (() => {
         switch (focusedEntity) {
             case 'Note':

package/src/View/Components/Popups/WindowPopups/WindowPopups.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AdaptableApi } from '../../../../../types';
 export interface WindowPopupChildProps {
     onDismiss: () => void;
-    popupProps: any;
+    popupProps?: any;
     api: AdaptableApi;
 }
 export declare const CUSTOM_WINDOW_FACTORY_ID = "CUSTOM_WINDOW_FACTORY_ID";

package/src/View/Components/Popups/WindowPopups/WindowPopups.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import Dialog from '../../../../components/Dialog';
@@ -17,15 +16,18 @@ export const WindowPopups = () => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const windowItems = useSelector((state) => state.Popup.WindowPopup.PopupList);
-    return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem) => {
-        var _a, _b, _c, _d, _e, _f;
-        let Component = (_a = windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : null;
-        const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = __rest(_g, ["windowModalProps"]);
+    return (React.createElement(React.Fragment, null, windowItems?.map((windowItem) => {
+        let Component = windowFactory[windowItem.FactoryId] ?? null;
+        const { windowModalProps, ...restPopupProps } = windowItem?.PopupProps ?? {};
         const handleDismiss = () => {
             dispatch(PopupHideWindow(windowItem.Id));
         };
-        const size = (_d = (_c = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : getWindowPopupSize();
-        const position = (_f = (_e = windowModalSettings === null || windowModalSettings === void 0 ? void 0 : windowModalSettings[windowItem.Id]) === null || _e === void 0 ? void 0 : _e.position) !== null && _f !== void 0 ? _f : getMiddlePosition(size);
+        const size = windowModalSettings?.[windowItem.Id]?.size ??
+            windowItem?.PopupProps?.size ??
+            getWindowPopupSize();
+        const position = windowModalSettings?.[windowItem.Id]?.position ??
+            windowItem?.PopupProps?.position ??
+            getMiddlePosition(size);
         let componentNode = null;
         if (!Component &&
             (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
@@ -36,12 +38,21 @@ export const WindowPopups = () => {
                 style: { height: '100%' }, render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
         }
         else {
-            Component = Component !== null && Component !== void 0 ? Component : NoopComponent;
+            Component = Component ?? NoopComponent;
             componentNode = (React.createElement(Component, { api: adaptable.api, onDismiss: handleDismiss, popupProps: restPopupProps }));
         }
-        return (React.createElement(Dialog, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: Object.assign(Object.assign({}, windowModalProps), { onChange: (settings) => {
-                    setWindowModalSettings((settingsMap) => (Object.assign(Object.assign({}, settingsMap), { [windowItem.Id]: settings })));
-                }, handleSelector: '.ab-Window-Modal .ab-Panel__header', size: size, position: position }), fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
+        return (React.createElement(Dialog, { "data-name": windowItem.Id, style: { height: '100%' }, className: "ab-Window-Modal", key: windowItem.Id, windowModal: true, windowModalProps: {
+                ...windowModalProps,
+                onChange: (settings) => {
+                    setWindowModalSettings((settingsMap) => ({
+                        ...settingsMap,
+                        [windowItem.Id]: settings,
+                    }));
+                },
+                handleSelector: '.ab-Window-Modal .ab-Panel__header',
+                size: size,
+                position: position,
+            }, fixed: false, padding: 0, onDismiss: handleDismiss, isOpen: true, showCloseButton: true },
             React.createElement(PanelWithImage, { style: { height: '100%' }, bodyProps: { padding: 0, height: '100%' }, header: windowItem.Title, glyphicon: windowItem.Icon, variant: "primary" }, componentNode)));
     })));
 };

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -2,7 +2,7 @@
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
-export declare const SHOW_EXPORT_TABLE = "SHOW_EXPORT_TABLE";
 export declare const SHOW_THEME_EDITOR = "SHOW_THEME_EDITOR";
 export declare const WINDOW_SHOW_TRANSPOSED_VIEW = "WINDOW_SHOW_TRANSPOSED_VIEW";
+export declare const COLUMN_FILTER_WINDOW = "COLUMN_FILTER_WINDOW";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,17 +1,17 @@
 import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup';
 import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
-import { ExportTablePopup } from '../../../Export/ExportTablePopup';
 import { ThemeEditorWindow } from '../../../Theme/ThemeEditorWindow';
 import { TransposedPopup } from '../../../Layout/TransposedPopup';
+import { ColumnFilterWindow } from '../../ColumnFilter/ColumnFilterWindow';
 export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
 export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
-export const SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
 export const SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
 export const WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
+export const COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 export const windowFactory = {
     [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
     [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
-    [SHOW_EXPORT_TABLE]: ExportTablePopup,
     [SHOW_THEME_EDITOR]: ThemeEditorWindow,
     [WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup,
+    [COLUMN_FILTER_WINDOW]: ColumnFilterWindow,
 };

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

@@ -4,55 +4,72 @@ import { isAdaptableSystemIcon } from '../../../components/Icon';
 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);
+import { ColumnValuesSelect } from '../FilterForm/ListBoxFilterForm';
+import { useAdaptable } from '../../AdaptableContext';
+import { useDistinctFilterColumnValues } from '../ColumnFilter/components/FloatingFilterValues';
+import { useEffect } from 'react';
+const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
 export const PredicateEditor = (props) => {
-    var _a, _b;
     const baseClassName = 'ab-PredicateEditor';
-    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,
-            inputs: item.inputs,
-        }));
-    }, [props.predicateDefs, props.onChange]);
+    const predicateDefsOptions = React.useMemo(() => props?.predicateDefs?.map((item) => ({
+        value: item.id,
+        label: item.label,
+        inputs: item.inputs,
+    })), [props.predicateDefs, props.onChange]);
     const handlePredicateInputChange = (e, index) => {
-        var _a;
         const { value } = e.target;
-        const newInputs = [...((_a = props.predicate.Inputs) !== null && _a !== void 0 ? _a : [])];
+        const newInputs = [...(props.predicate.Inputs ?? [])];
         newInputs[index] = value;
-        props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: newInputs }));
+        props.onChange({
+            ...props.predicate,
+            Inputs: newInputs,
+        });
     };
     const handlePredicateValuesChange = (inputs) => {
-        props.onChange(Object.assign(Object.assign({}, props.predicate), { Inputs: inputs }));
+        props.onChange({
+            ...props.predicate,
+            Inputs: inputs,
+        });
     };
-    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); });
+    const currentPredicateDef = props?.predicateDefs?.find((item) => item.id === props.predicate?.PredicateId);
     let icon = null;
     if (currentPredicateDef) {
-        if (isAdaptableSystemIcon(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+        if (isAdaptableSystemIcon(currentPredicateDef?.icon)) {
             icon = React.createElement(AdaptableIconComponent, { icon: currentPredicateDef.icon });
         }
-        else if ((currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon) && 'text' in (currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+        else if (currentPredicateDef?.icon && 'text' in currentPredicateDef?.icon) {
             icon = React.createElement("span", null, currentPredicateDef.icon.text);
         }
     }
+    const adaptable = useAdaptable();
+    const columnId = props.columnId;
+    const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+    const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = useDistinctFilterColumnValues({
+        columnId,
+    });
+    useEffect(triggerValuesLoad, []);
+    const onMenuOpen = () => {
+        triggerValuesLoad();
+    };
     return (React.createElement(Box, { className: baseClassName },
         React.createElement(Flex, { justifyContent: "stretch", alignItems: "center" },
             icon && React.createElement(Tag, { mr: 2 }, icon),
-            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;
+            React.createElement(Select, { isClearable: true, options: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onChange: (value) => {
                     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 : ''; }) }));
+                    props.onChange({
+                        ...props.predicate,
+                        PredicateId: option?.value,
+                        Inputs: (option?.inputs ?? []).map((input) => input.defaultValue ?? ''),
+                    });
                 } })),
-        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"),
-                React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
-                    React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: (_b = (_a = props.predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => handlePredicateInputChange(e, index) }))));
-        })),
-        isValuesPredicateDef(currentPredicateDef) && (React.createElement(PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
+        React.createElement(Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
+            index > 0 && React.createElement(HelpBlock, { margin: 2 }, "AND"),
+            React.createElement(Flex, { key: index, flex: 1, flexDirection: "column" },
+                React.createElement(AdaptableInput, { "data-name": `predicate-input-${index}`, marginTop: 2, type: predicateDefInput.type, autoFocus: index === 0, value: props.predicate.Inputs?.[index] ?? '', onChange: (e) => handlePredicateInputChange(e, index) })))))),
+        isValuesPredicateDef(currentPredicateDef) && (React.createElement(Box, { mt: 2 },
+            React.createElement(ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
+                    onMenuOpen,
+                }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
 };

package/src/View/Components/PreviewResultsPanel.js

@@ -4,38 +4,29 @@ import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
 import CheckIcon from '../../components/icons/check';
 import UIHelper from '../UIHelper';
 import Panel from '../../components/Panel';
-const columnsMap = new Map([
-    [
-        'InitialValue',
-        {
-            field: 'InitialValue',
-            defaultFlex: 1,
-            header: 'Current',
-            align: 'center',
-            renderMenuIcon: false,
-        },
-    ],
-    [
-        'ComputedValue',
-        {
-            field: 'ComputedValue',
-            defaultFlex: 1,
-            header: 'New',
-            align: 'center',
-            renderMenuIcon: false,
-        },
-    ],
-    [
-        'ValidInfo',
-        {
-            field: 'ValidInfo',
-            defaultWidth: 80,
-            header: 'Valid',
-            align: 'center',
-            renderMenuIcon: false,
-        },
-    ],
-]);
+const columnsMap = {
+    InitialValue: {
+        field: 'InitialValue',
+        defaultFlex: 1,
+        header: 'Current',
+        align: 'center',
+        renderMenuIcon: false,
+    },
+    ComputedValue: {
+        field: 'ComputedValue',
+        defaultFlex: 1,
+        header: 'New',
+        align: 'center',
+        renderMenuIcon: false,
+    },
+    ValidInfo: {
+        field: 'ValidInfo',
+        defaultWidth: 80,
+        header: 'Valid',
+        align: 'center',
+        renderMenuIcon: false,
+    },
+};
 const tableDOMProps = {
     style: { flex: 1 },
 };

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

@@ -23,7 +23,7 @@ export interface RangesComponentState {
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private onRangesTypeChanged;
     private handleRangeValueTypeChange;
     changeRangeMin(index: number, value: number): void;

package/src/View/Components/RangesComponent.js

@@ -18,7 +18,6 @@ export class RangesComponent extends React.Component {
         };
     }
     render() {
-        var _a, _b;
         let comparisonMinValueNumber = this.props.columnComparison != null &&
             this.props.columnComparison.MinValue != null &&
             !isNaN(Number(this.props.columnComparison.MinValue))
@@ -42,7 +41,7 @@ export class RangesComponent extends React.Component {
         let comparisonColor = this.props.columnComparison != null && this.props.columnComparison.Color != null
             ? this.props.columnComparison.Color
             : undefined;
-        const isRangeValueTypeNumber = ((_a = this.props.rangeValueType) !== null && _a !== void 0 ? _a : 'Number') === 'Number';
+        const isRangeValueTypeNumber = (this.props.rangeValueType ?? 'Number') === 'Number';
         return (React.createElement(React.Fragment, null,
             React.createElement(Flex, { flexDirection: "row" },
                 React.createElement(CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
@@ -52,8 +51,8 @@ export class RangesComponent extends React.Component {
                     React.createElement(Flex, { alignItems: "center", mb: 2 },
                         React.createElement(Text, { mr: 3 }, "Range Type"),
                         React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
-                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")), (_b = this.props.ranges) === null || _b === void 0 ? void 0 :
-                    _b.map((range, index, list) => (React.createElement(Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                        React.createElement(Radio, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")),
+                    this.props.ranges?.map((range, index, list) => (React.createElement(Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
                         React.createElement(Flex, { flexDirection: "column" },
                             isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox, { onClick: () => this.setRangeColMin(range), checked: range.Min === 'Col-Min', mt: 0, mb: 1, fontSize: 3, disabled: this.props.disabled }, "Col Min")),
                             React.createElement(NumberInput, { disabled: this.props.disabled ||
@@ -89,14 +88,14 @@ export class RangesComponent extends React.Component {
                             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(Box, { maxWidth: '15rem' },
-                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "Number", onChange: (columnId) => {
+                                    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(Box, { maxWidth: '15rem' },
-                                    React.createElement(ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "Number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
+                                    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);
                                     } }) }))))))));
@@ -163,7 +162,10 @@ export class RangesComponent extends React.Component {
         ranges.splice(index, 1);
         // Max 100 is always disabled, this prevents from having a Max range lower than 100
         if (this.props.rangeValueType === 'Percentage' && ranges.length === 1) {
-            ranges[0] = Object.assign(Object.assign({}, ranges[0]), { Max: 100 });
+            ranges[0] = {
+                ...ranges[0],
+                Max: 100,
+            };
         }
         this.props.updateRanges(ranges);
     }
@@ -171,7 +173,10 @@ export class RangesComponent extends React.Component {
         const newRanges = this.props.ranges.map((rangeItem) => {
             if (rangeItem === range) {
                 let newMin = rangeItem.Min === 'Col-Min' ? this.props.minMaxRangeValues.min : 'Col-Min';
-                return Object.assign(Object.assign({}, rangeItem), { Min: newMin });
+                return {
+                    ...rangeItem,
+                    Min: newMin,
+                };
             }
             return rangeItem;
         });
@@ -181,7 +186,10 @@ export class RangesComponent extends React.Component {
         const newRanges = this.props.ranges.map((rangeItem) => {
             if (rangeItem === range) {
                 let newMax = rangeItem.Max === 'Col-Max' ? this.props.minMaxRangeValues.max : 'Col-Max';
-                return Object.assign(Object.assign({}, rangeItem), { Max: newMax });
+                return {
+                    ...rangeItem,
+                    Max: newMax,
+                };
             }
             return rangeItem;
         });
@@ -193,7 +201,10 @@ export class RangesComponent extends React.Component {
         let Min = null;
         if (lastRange.Max === 'Col-Max') {
             Min = this.props.minMaxRangeValues.max;
-            previousRange = Object.assign(Object.assign({}, previousRange), { Max: this.props.minMaxRangeValues.max });
+            previousRange = {
+                ...previousRange,
+                Max: this.props.minMaxRangeValues.max,
+            };
         }
         else {
             Min = lastRange.Max;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+export type ReorderDraggableProps<OPTION_TYPE, ID_TYPE extends number | string> = {
+    order: OPTION_TYPE[];
+    onChange: (newOrder: OPTION_TYPE[]) => void;
+    renderOption: (option: OPTION_TYPE, index: number) => ReactNode;
+    toIdentifier?: (v: OPTION_TYPE) => ID_TYPE;
+    isOptionDraggable?: (option: OPTION_TYPE) => boolean;
+    disabled?: boolean;
+    style?: React.CSSProperties;
+};
+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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { DragDropContext, Draggable, Droppable } from '../../../components/dnd';
+import { Icon } from '../../../components/icons';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+export function ReorderDraggable(props) {
+    const { onChange, order, toIdentifier, isOptionDraggable, disabled, } = props;
+    const baseClassName = 'ab-ReorderDraggable';
+    const renderOption = (option, index) => {
+        const identifier = toIdentifier(option);
+        const renderNode = (flexProps, dragHandleProps) => {
+            const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
+            return (React.createElement(Flex, { className: `${baseClassName}__option`, alignItems: "center", mt: index ? 1 : 0, key: identifier ?? index, backgroundColor: 'primary', padding: 2, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps },
+                React.createElement(Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
+                    reorderable ? (React.createElement(Box, { mr: 3, ...dragHandleProps },
+                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
+                    props.renderOption(option, index))));
+        };
+        const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
+        return (React.createElement(Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable || disabled }, (draggableProvided) => {
+            return renderNode({
+                ref: draggableProvided.innerRef,
+                ...draggableProvided.draggableProps,
+                style: draggableProvided.draggableProps.style,
+            }, draggableProvided.dragHandleProps);
+        }));
+    };
+    return (React.createElement(Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
+        React.createElement(DragDropContext, { onDragEnd: (result) => {
+                const { source, destination } = result;
+                const newOrder = ArrayExtensions.reorderArray(props.order, source.index, destination.index);
+                onChange(newOrder);
+            } },
+            React.createElement(Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
+                React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
+                    return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
+                        order.map(renderOption),
+                        droppableProvided.placeholder));
+                })))));
+}

package/src/View/Components/Selectors/{ColumnValueSelector.d.ts → BulkUpdateValueSelector.d.ts}

@@ -3,7 +3,7 @@ import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColum
 import { DropdownButtonProps } from '../../../components/DropdownButton';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { GridCell } from '../../../types';
-export interface ColumnValueSelectorProps {
+export interface BulkUpdateValueSelectorProps {
     selectedColumn: AdaptableColumn;
     selectedColumnValue: string;
     onColumnValueChange: (columnvalue: any) => void;
@@ -17,4 +17,4 @@ export interface ColumnValueSelectorProps {
     disabled?: boolean;
     className?: string;
 }
-export declare const ColumnValueSelector: (props: ColumnValueSelectorProps) => JSX.Element;
+export declare const BulkUpdateValueSelector: (props: BulkUpdateValueSelectorProps) => React.JSX.Element;