@adaptabletools/adaptable-cjs 19.2.4 → 20.0.0-canary.0

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

@@ -8,56 +8,73 @@ const Icon_1 = require("../../../components/Icon");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Tag_1 = require("../../../components/Tag");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
-const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 const Select_1 = require("../../../components/Select");
-const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
+const ListBoxFilterForm_1 = require("../FilterForm/ListBoxFilterForm");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const FloatingFilterValues_1 = require("../ColumnFilter/components/FloatingFilterValues");
+const react_1 = require("react");
+const isValuesPredicateDef = (colDef) => colDef && ['In', 'NotIn'].includes(colDef.id);
 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 ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+        if ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef?.icon)) {
             icon = React.createElement(AdaptableIconComponent_1.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 = (0, AdaptableContext_1.useAdaptable)();
+    const columnId = props.columnId;
+    const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+    const { quickFilterValues, isDistinctColumnValuesLoading, triggerValuesLoad } = (0, FloatingFilterValues_1.useDistinctFilterColumnValues)({
+        columnId,
+    });
+    (0, react_1.useEffect)(triggerValuesLoad, []);
+    const onMenuOpen = () => {
+        triggerValuesLoad();
+    };
     return (React.createElement(rebass_1.Box, { className: baseClassName },
         React.createElement(rebass_1.Flex, { justifyContent: "stretch", alignItems: "center" },
             icon && React.createElement(Tag_1.Tag, { mr: 2 }, icon),
-            React.createElement(Select_1.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_1.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(rebass_1.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_1.default, { margin: 2 }, "AND"),
-                React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
-                    React.createElement(AdaptableInput_1.default, { "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(PermittedValuesSelector_1.PermitedValuesSelector, { onPredicateValuesChange: handlePredicateValuesChange, predicate: props.predicate, columnId: props.columnId }))));
+        React.createElement(rebass_1.Flex, null, currentPredicateDef?.inputs?.map((predicateDefInput, index) => (React.createElement(React.Fragment, null,
+            index > 0 && React.createElement(HelpBlock_1.default, { margin: 2 }, "AND"),
+            React.createElement(rebass_1.Flex, { key: index, flex: 1, flexDirection: "column" },
+                React.createElement(AdaptableInput_1.default, { "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(rebass_1.Box, { mt: 2 },
+            React.createElement(ListBoxFilterForm_1.ColumnValuesSelect, { isLoading: isDistinctColumnValuesLoading, column: column, options: quickFilterValues.values, selectProps: {
+                    onMenuOpen,
+                }, dataType: column.dataType, value: props.predicate.Inputs, onChange: handlePredicateValuesChange })))));
 };
 exports.PredicateEditor = PredicateEditor;

package/src/View/Components/PreviewResultsPanel.js

@@ -8,38 +8,29 @@ const InfiniteTable_1 = require("../../components/InfiniteTable");
 const check_1 = tslib_1.__importDefault(require("../../components/icons/check"));
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const Panel_1 = tslib_1.__importDefault(require("../../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

@@ -22,7 +22,6 @@ 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))
@@ -46,7 +45,7 @@ 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(rebass_1.Flex, { flexDirection: "row" },
                 React.createElement(CheckBox_1.CheckBox, { marginTop: 3, checked: this.state.rangesType == 'ColumnComparison', onChange: (checked) => this.onRangesTypeChanged(checked) }, "Use a Column Comparison")),
@@ -56,8 +55,8 @@ class RangesComponent extends React.Component {
                     React.createElement(rebass_1.Flex, { alignItems: "center", mb: 2 },
                         React.createElement(rebass_1.Text, { mr: 3 }, "Range Type"),
                         React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Number'), checked: isRangeValueTypeNumber, mr: 2 }, "Number"),
-                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")), (_b = this.props.ranges) === null || _b === void 0 ? void 0 :
-                    _b.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
+                        React.createElement(Radio_1.default, { onChange: () => this.handleRangeValueTypeChange('Percentage'), checked: !isRangeValueTypeNumber }, "Percentage")),
+                    this.props.ranges?.map((range, index, list) => (React.createElement(rebass_1.Flex, { key: index, alignItems: "end", mb: 2, "data-name": "percent-bar-range" },
                         React.createElement(rebass_1.Flex, { flexDirection: "column" },
                             isRangeValueTypeNumber && index === 0 && (React.createElement(CheckBox_1.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_1.NumberInput, { disabled: this.props.disabled ||
@@ -93,14 +92,14 @@ class RangesComponent extends React.Component {
                             React.createElement(FormLayout_1.FormRow, { label: "Min Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMinValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMinValue(value);
                                     } }), or: "OR", second: React.createElement(rebass_1.Box, { maxWidth: '15rem' },
-                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "Number", onChange: (columnId) => {
+                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMinValueColumnId, type: "number", onChange: (columnId) => {
                                             this.onMinColumnSelectedChanged(columnId);
                                         } })) }),
                             ' ',
                             React.createElement(FormLayout_1.FormRow, { label: "Max Value:", first: React.createElement(NumberInput_1.NumberInput, { disabled: this.props.disabled, type: "number", value: comparisonMaxValueNumber, onChange: (value) => {
                                         this.changeColumnComparisonMaxValue(value);
                                     } }), or: "OR", second: React.createElement(rebass_1.Box, { maxWidth: '15rem' },
-                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "Number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
+                                    React.createElement(ColumnSelector_1.ColumnSelector, { menuPosition: "fixed", disabled: this.props.disabled, value: comparisonMaxValueColumnId, type: "number", onChange: (columnId) => this.onMaxColumnSelectedChanged(columnId) })) }),
                             React.createElement(FormLayout_1.FormRow, { label: `Bar ${this.props.api.internalApi.getCorrectEnglishVariant('Colour')}`, first: React.createElement(ColorPicker_1.ColorPicker, { disabled: this.props.disabled, api: this.props.api, value: comparisonColor, onChange: (color) => {
                                         this.changeColumnComparisonColor(color);
                                     } }) }))))))));
@@ -167,7 +166,10 @@ 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);
     }
@@ -175,7 +177,10 @@ 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;
         });
@@ -185,7 +190,10 @@ 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;
         });
@@ -197,7 +205,10 @@ 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,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReorderDraggable = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const dnd_1 = require("../../../components/dnd");
+const icons_1 = require("../../../components/icons");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+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(rebass_1.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(rebass_1.Flex, { flex: 1, flexDirection: "row", alignItems: "center" },
+                    reorderable ? (React.createElement(rebass_1.Box, { mr: 3, ...dragHandleProps },
+                        React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
+                    props.renderOption(option, index))));
+        };
+        const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
+        return (React.createElement(dnd_1.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(rebass_1.Flex, { style: props.style, className: baseClassName, flexDirection: "column", flex: 1 },
+        React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
+                const { source, destination } = result;
+                const newOrder = ArrayExtensions_1.default.reorderArray(props.order, source.index, destination.index);
+                onChange(newOrder);
+            } },
+            React.createElement(rebass_1.Flex, { className: `${baseClassName}__body`, flexDirection: "column", flex: 1, style: { overflow: 'auto' } },
+                React.createElement(dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
+                    return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
+                        order.map(renderOption),
+                        droppableProvided.placeholder));
+                })))));
+}
+exports.ReorderDraggable = ReorderDraggable;

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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnValueSelector = void 0;
+exports.BulkUpdateValueSelector = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
@@ -9,24 +9,38 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const rebass_1 = require("rebass");
 const PermittedValuesSelector_1 = require("./PermittedValuesSelector");
 const Select_1 = require("../../../components/Select");
-const ColumnValueSelector = (props) => {
-    var _a, _b;
+const AdaptableContext_1 = require("../../AdaptableContext");
+const react_1 = require("react");
+const BulkUpdateValueSelector = (props) => {
     const [valueType, setValueType] = React.useState('existing');
-    const columnType = (_a = props.selectedColumn) === null || _a === void 0 ? void 0 : _a.dataType;
-    const isDateType = props.selectedColumn && columnType === 'Date';
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const columnDataType = props.selectedColumn?.dataType;
+    const isDateType = props.selectedColumn && columnDataType === 'date';
+    const columnId = props.selectedColumn?.columnId;
+    // TODO = this seems to be called whenever we edit a cell
+    // which is then triggering a get all values
+    // not sure that we need to
     const permittedValueSelector = (React.createElement(rebass_1.Box, null,
-        React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: (_b = props.selectedColumn) === null || _b === void 0 ? void 0 : _b.columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', onChange: (value) => {
-                if (!value) {
-                    props.onColumnValueChange(null);
-                }
-                else {
-                    props.onColumnValueChange(value);
+        React.createElement(PermittedValuesSelector_1.PermittedValuesSelector, { allowNewValues: true, disabled: props.disabled || !props.selectedColumn, value: props.selectedColumnValue === '' ? null : props.selectedColumnValue, columnId: columnId, placeholder: isDateType ? 'Select' : 'Select or type new value', loadValues: (0, react_1.useCallback)(({ currentSearchValue }) => {
+                if (!columnId) {
+                    return Promise.resolve([]);
                 }
+                return adaptable.api.gridApi.internalApi.getDistinctEditDisplayValuesForColumn({
+                    columnId,
+                    gridCell: props.selectedGridCells[0],
+                    currentSearchValue,
+                });
+            }, [
+                columnId,
+                props.selectedGridCells[0]?.column.columnId,
+                props.selectedGridCells[0]?.primaryKeyValue,
+            ]), onChange: (value) => {
+                props.onColumnValueChange(value || null);
             } })));
     const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
             ? UIHelper_1.default.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
-            ? UIHelper_1.default.getPlaceHolderforDataType(props.selectedColumn.dataType)
+            ? UIHelper_1.default.getPlaceholderForDataType(props.selectedColumn.dataType)
             : 'Enter Value', autoFocus: true, disabled: props.disabled, style: { width: '100%' }, value: props.selectedColumnValue, onChange: (e) => {
             props.onColumnValueChange(e.target.value);
         } }));
@@ -39,8 +53,12 @@ const ColumnValueSelector = (props) => {
                 setValueType(value);
             } }));
     }
-    return (React.createElement(FieldWrap_1.default, { className: props.className, style: Object.assign(Object.assign({}, props.style), { overflow: 'visible', maxWidth: '100%' }) }, isDateType ? (React.createElement(React.Fragment, null,
+    return (React.createElement(FieldWrap_1.default, { className: props.className, style: {
+            ...props.style,
+            overflow: 'visible',
+            maxWidth: '100%',
+        } }, isDateType ? (React.createElement(React.Fragment, null,
         valueType === 'new' ? input : permittedValueSelector,
         valueTypeSelector)) : (permittedValueSelector)));
 };
-exports.ColumnValueSelector = ColumnValueSelector;
+exports.BulkUpdateValueSelector = BulkUpdateValueSelector;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SelectProps } from '../../../components/Select';
 import { AdaptableColumn } from '../../../types';
 export type ColumnSelectorProps<IsMulti extends boolean = false> = {
@@ -10,5 +10,6 @@ export type ColumnSelectorProps<IsMulti extends boolean = false> = {
     value?: IsMulti extends true ? string[] : string;
     onChange: (column: IsMulti extends true ? string[] : string) => void;
     placeholder?: string;
+    renderOption?: (column: AdaptableColumn) => React.ReactNode;
 };
-export declare const ColumnSelector: <IsMulti extends boolean = false>(props: ColumnSelectorProps<IsMulti>) => JSX.Element;
+export declare const ColumnSelector: <IsMulti extends boolean = false>(props: ColumnSelectorProps<IsMulti>) => React.JSX.Element;

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

@@ -6,19 +6,21 @@ const React = tslib_1.__importStar(require("react"));
 const Select_1 = require("../../../components/Select");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const ColumnSelector = function (props) {
-    var _a;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columns = React.useMemo(() => {
-        return api.columnApi.getColumnsOfType(props.type);
+        return api.columnApi.getColumnsWithDataType(props.type);
     }, []);
     const getColumn = (columnId) => columns.find((c) => c.columnId === columnId);
     const options = columns
         .map((column) => {
-        var _a;
-        return ({
-            label: (_a = column.friendlyName) !== null && _a !== void 0 ? _a : column.columnId,
+        let label = React.createElement(React.Fragment, null, column.friendlyName ?? column.columnId);
+        if (props.renderOption) {
+            label = props.renderOption(column);
+        }
+        return {
+            label,
             value: column.columnId,
-        });
+        };
     })
         .filter((option) => {
         if (props.filterColumn) {
@@ -26,7 +28,7 @@ const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Column', onChange: (colId) => {
+    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: props.placeholder ?? 'Select Column', onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };

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

@@ -12,7 +12,7 @@ export interface ColumnSelectorProps extends React.HTMLProps<ColumnSelector> {
     disabled?: boolean;
 }
 export declare class ColumnSelector extends React.Component<ColumnSelectorProps, {}> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     onClearButton(): void;
     onColumnChange(selected: AdaptableColumn[], isEmptySelection: boolean): void;
 }

package/src/View/Components/Selectors/ColumnSelectorOld.js

@@ -10,7 +10,6 @@ const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayou
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 class ColumnSelector extends React.Component {
     render() {
-        var _a;
         const sortedColumns = ArrayExtensions_1.ArrayExtensions.sortArrayWithProperty(Enums_1.SortOrder.Asc, this.props.ColumnList, 'friendlyName');
         const selectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x));
         const isEmptySelectedColumnIds = this.props.SelectedColumnIds.filter((x) => StringExtensions_1.StringExtensions.IsNotNullOrEmpty(x)).length == 0;
@@ -31,7 +30,7 @@ class ColumnSelector extends React.Component {
             };
         });
         let currentColumnName = selectedColumnIds.length > 0
-            ? (_a = this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])) === null || _a === void 0 ? void 0 : _a.friendlyName
+            ? this.props.ColumnList.find((c) => c.columnId == selectedColumnIds[0])?.friendlyName
             : 'Select a column';
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },

package/src/View/Components/Selectors/FieldSelector.js

@@ -6,20 +6,16 @@ const React = tslib_1.__importStar(require("react"));
 const Select_1 = require("../../../components/Select");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const FieldSelector = (props) => {
-    var _a;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const fields = React.useMemo(() => {
         return api.expressionApi.internalApi.getFieldsOfType(props.type);
     }, []);
-    const options = fields.map((field) => {
-        var _a;
-        return ({
-            label: (_a = field.label) !== null && _a !== void 0 ? _a : field.name,
-            value: field.name,
-        });
-    });
+    const options = fields.map((field) => ({
+        label: field.label ?? field.name,
+        value: field.name,
+    }));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'Select Field', onChange: (fieldValue) => {
+        React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: false, menuPosition: props.menuPosition, value: props.value || undefined, placeholder: props.placeholder ?? 'Select Field', onChange: (fieldValue) => {
                 props.onChange(fieldValue);
             }, options: options })));
 };

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

@@ -1,14 +1,25 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { SelectProps } from '../../../components/Select';
 export type ValueType = number | string | Date;
 interface PermittedValuesSelectorProps<Value extends ValueType, IsMulti extends boolean> {
     isMulti?: IsMulti;
     columnId: string;
     value: IsMulti extends true ? Value[] : Value;
     onChange: (value: IsMulti extends true ? Value[] : Value) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
     allowNewValues?: boolean;
     className?: string;
     disabled?: boolean;
     placeholder?: string;
+    size?: SelectProps<Value, IsMulti>['size'];
+    menuPortalTarget?: HTMLElement;
+    loadValues?: (options: {
+        currentSearchValue: string;
+    }) => Promise<{
+        value: any;
+        label: string;
+    }[]>;
 }
-export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => JSX.Element;
+export declare const PermittedValuesSelector: <Value extends ValueType, IsMulti extends boolean = false>(props: PermittedValuesSelectorProps<Value, IsMulti>) => React.JSX.Element;
 export {};