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

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingFilterInputList = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../../components/ExpressionEditor/QueryBuilder/utils");
+const adaptableQlUtils_1 = require("../../../../Utilities/adaptableQlUtils");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const hooks_1 = require("../hooks");
+const ColumnFilterInput_1 = require("./ColumnFilterInput");
+const FloatingFilterValues_1 = require("./FloatingFilterValues");
+const FloatingFilterInputList = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const columnType = React.useMemo(() => {
+        return api.columnApi.getColumnDataTypeForColumnId(props.columnId);
+    }, [props.columnId]);
+    const predicateDef = (0, hooks_1.usePredicateDef)(props.predicate?.operator, props.predicateDefs);
+    const fnTypeInput = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(columnType);
+    const matchingInputs = predicateDef
+        ? (0, utils_1.getOperatorMatchingInputs)(fnTypeInput, predicateDef?.inputs, true)
+        : [];
+    const debouncedPredicateChange = React.useCallback((0, lodash_1.debounce)((predicate) => {
+        props.onPredicateChange(predicate);
+    }, 300), [props.predicate, props.columnId]);
+    if (['date[]', 'number[]', 'text[]'].includes(matchingInputs[0])) {
+        return (React.createElement(FloatingFilterValues_1.FloatingFilterValues, { inline: true, columnId: props.columnId, disabled: props.disabled, selectProps: {
+                menuStyle: {
+                    left: -20, // the size of the "in" filter icon
+                },
+            }, onClear: () => {
+                props.onPredicateChange({ operator: props.predicate.operator, args: [] });
+            }, onChange: (inputs) => {
+                props.onPredicateChange({
+                    operator: props.predicate.operator,
+                    args: inputs,
+                });
+            }, value: props.predicate.args, 
+            // are not known ql operators for now
+            // should change when porting, it has knoladge about predicates
+            type: props.predicate.operator === 'In' ? 'In' : 'NotIn' }));
+    }
+    return (React.createElement(React.Fragment, null, (matchingInputs ?? []).map((input, index) => {
+        const value = props?.predicate?.args?.[index];
+        return (React.createElement(ColumnFilterInput_1.ColumnFilterInput, { filterType: "floating", columnId: props.columnId, usePrimitiveInputs: true, key: index, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+                const args = [...props.predicate.args];
+                args.splice(index, 1);
+                const newPredicate = {
+                    operator: props.predicate.operator,
+                    args: args,
+                };
+                debouncedPredicateChange(newPredicate);
+            }, onChange: (value) => {
+                const newPredicate = {
+                    operator: props.predicate.operator,
+                    args: [...props.predicate.args],
+                };
+                newPredicate.args[index] = value;
+                debouncedPredicateChange(newPredicate);
+            } }));
+    })));
+};
+exports.FloatingFilterInputList = FloatingFilterInputList;

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ColumnValuesSelectProps } from '../../FilterForm/ListBoxFilterForm';
+export interface FloatingFilterValuesProps {
+    columnId: string;
+    disabled: boolean;
+    onClear: () => void;
+    onChange: (inputs: unknown[]) => void;
+    value: unknown[];
+    type: 'In' | 'NotIn';
+    registerValuesDropdownApi?: (api: {
+        show: () => any;
+        hide: () => any;
+    }) => void;
+    inline?: boolean;
+    selectProps?: ColumnValuesSelectProps['selectProps'];
+}
+export declare function useDistinctFilterColumnValues(options: {
+    columnId: string;
+    searchValueRef?: React.MutableRefObject<string>;
+}): {
+    isDistinctColumnValuesLoading: boolean;
+    quickFilterValues: {
+        values: {
+            value: any;
+            label: string;
+        }[];
+        dataLoadIsComplete: boolean;
+        searchValueUsedInFilterValue: boolean;
+    };
+    setQuickFilterValues: React.Dispatch<React.SetStateAction<{
+        values: {
+            value: any;
+            label: string;
+        }[];
+        dataLoadIsComplete: boolean;
+        searchValueUsedInFilterValue: boolean;
+    }>>;
+    triggerValuesLoad: () => void;
+};
+/**
+ * This component was ported and modified to not know about colum  filter and predicates.
+ * It should be further refactored to be easily ported;
+ */
+export declare const FloatingFilterValues: (props: FloatingFilterValuesProps) => React.JSX.Element;

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

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingFilterValues = exports.useDistinctFilterColumnValues = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const ListBoxFilterForm_1 = require("../../FilterForm/ListBoxFilterForm");
+const renderSingleValue = (option) => {
+    return option.label;
+};
+const renderMultipleValues = (values, options) => {
+    const { focused, placeholder } = options;
+    const text = values.map(renderSingleValue).join(', ');
+    return values.length ? `(${values.length}) ${text}` : focused ? null : placeholder ?? 'Select...';
+};
+function useDistinctFilterColumnValues(options) {
+    const { columnId, searchValueRef } = options;
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const [valuesLoadTrigger, setValuesLoadTrigger] = React.useState(0);
+    const triggerValuesLoad = React.useCallback(() => {
+        setValuesLoadTrigger((prev) => prev + 1);
+    }, []);
+    const [quickFilterValues, setQuickFilterValues] = React.useState({ values: [], dataLoadIsComplete: false, searchValueUsedInFilterValue: false });
+    const [isDistinctColumnValuesLoading, setIsDistinctColumnValuesLoading] = React.useState(false);
+    (0, react_1.useEffect)(() => {
+        if (valuesLoadTrigger === 0) {
+            // skip the first render
+            return;
+        }
+        let ignore = false;
+        setIsDistinctColumnValuesLoading(true);
+        let searchValueUsedInFilterValue = false;
+        api.gridApi.internalApi
+            .getDistinctFilterDisplayValuesForColumn({
+            columnId,
+            get currentSearchValue() {
+                searchValueUsedInFilterValue = true;
+                return searchValueRef ? searchValueRef.current : '';
+            },
+        })
+            .then((distinctFilterDisplayValues) => {
+            if (ignore) {
+                return;
+            }
+            setQuickFilterValues({
+                values: distinctFilterDisplayValues,
+                dataLoadIsComplete: true,
+                searchValueUsedInFilterValue,
+            });
+            setIsDistinctColumnValuesLoading(false);
+        });
+        return () => {
+            ignore = true;
+        };
+    }, [valuesLoadTrigger, columnId]);
+    return {
+        isDistinctColumnValuesLoading,
+        quickFilterValues,
+        setQuickFilterValues,
+        triggerValuesLoad,
+    };
+}
+exports.useDistinctFilterColumnValues = useDistinctFilterColumnValues;
+/**
+ * This component was ported and modified to not know about colum  filter and predicates.
+ * It should be further refactored to be easily ported;
+ */
+const FloatingFilterValues = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const currentColumn = api.columnApi.getColumnWithColumnId(props.columnId);
+    const searchValueRef = React.useRef('');
+    const { isDistinctColumnValuesLoading, quickFilterValues, triggerValuesLoad } = useDistinctFilterColumnValues({
+        columnId: props.columnId,
+        searchValueRef,
+    });
+    (0, react_1.useEffect)(triggerValuesLoad, []);
+    const onMenuOpen = triggerValuesLoad;
+    const onInputChange = React.useCallback((value) => {
+        searchValueRef.current = value;
+        if (quickFilterValues.searchValueUsedInFilterValue) {
+            triggerValuesLoad();
+        }
+    }, [quickFilterValues.searchValueUsedInFilterValue]);
+    return (React.createElement(ListBoxFilterForm_1.ColumnValuesSelect, { selectProps: props.inline
+            ? {
+                ...props.selectProps,
+                'data-name': 'Select Values',
+                renderMultipleValues,
+                isClearable: false,
+                styles: {
+                    dropdownIndicator: {
+                        display: 'none',
+                    },
+                    container: {
+                        height: '100%',
+                        fontWeight: 'normal',
+                    },
+                    control: {
+                        height: '100%',
+                        borderRadius: 'none',
+                        border: 'none',
+                        // @ts-ignore ignore
+                        '&:hover': {
+                            border: 'none',
+                        },
+                    },
+                },
+                onMenuOpen,
+                onInputChange,
+            }
+            : { ...props.selectProps, onMenuOpen, onInputChange }, disabled: props.disabled, isLoading: isDistinctColumnValuesLoading, column: currentColumn, dataType: currentColumn.dataType, options: quickFilterValues.values, value: props.value, onChange: props.onChange }));
+};
+exports.FloatingFilterValues = FloatingFilterValues;

package/src/View/Components/ColumnFilter/hooks.d.ts

@@ -0,0 +1,2 @@
+import { QlPredicateDef } from '../../../parser/src/predicate';
+export declare const usePredicateDef: (operator: string, qlPredicateDefs: QlPredicateDef[]) => QlPredicateDef;

package/src/View/Components/ColumnFilter/hooks.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePredicateDef = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const usePredicateDef = (operator, qlPredicateDefs) => {
+    const predicateDef = react_1.default.useMemo(() => {
+        if (!operator) {
+            return null;
+        }
+        return qlPredicateDefs.find((predicateDef) => predicateDef.operator === operator) ?? null;
+    }, [operator]);
+    return predicateDef;
+};
+exports.usePredicateDef = usePredicateDef;

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.d.ts

@@ -0,0 +1,12 @@
+import { QlLogicalOperator, QlPredicate } from '../../../parser/src/predicate';
+import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
+import { AdaptablePredicate, ColumnFilter } from '../../../types';
+export declare const useAdaptableFilterWrapper: (columnId: string, handleOnChangeOverride?: (columnFilter: ColumnFilter) => void) => {
+    qlPredicate: QlPredicate;
+    qlPredicateDefs: import("@adaptabletools/adaptable/src/parser/src/predicate/types").QlPredicateDef[];
+    columnFilter: ColumnFilter;
+    handleClear: () => LayoutRedux.LayoutColumnFilterClearAction;
+    handlePredicateChange: (newPredicate: QlPredicate) => void;
+    handleOnChange: (adaptablePredicate: AdaptablePredicate[], logic?: QlLogicalOperator) => void;
+    column: import("../../../types").AdaptableColumn<any>;
+};

package/src/View/Components/ColumnFilter/useAdaptableFilterWrapper.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptableFilterWrapper = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const react_redux_1 = require("react-redux");
+const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
+const LayoutRedux_1 = require("../../../Redux/ActionsReducers/LayoutRedux");
+const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const utils_1 = require("./utils");
+const useAdaptableFilterWrapper = (columnId, handleOnChangeOverride) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const columnType = adaptable.api.columnApi.getColumnDataTypeForColumnId(columnId);
+    const column = adaptable.api.columnApi.getColumnWithColumnId(columnId);
+    const columnFilterOptions = adaptable.api.optionsApi.getFilterOptions().columnFilterOptions;
+    const qlPredicateDefs = React.useMemo(() => {
+        const predicateDefs = adaptable.api.filterApi.columnFilterApi.getFilterPredicateDefsForColumn(column);
+        const qlDataType = (0, adaptableQlUtils_1.mapColumnDataTypeToExpressionFunctionType)(columnType);
+        return predicateDefs.map((predDef) => (0, utils_1.mapAdaptablePredicateDefToQlPredicateDef)(predDef, qlDataType));
+    }, [columnId]);
+    const currentLayout = (0, react_redux_1.useSelector)(LayoutRedux_1.getCurrentLayoutSelector);
+    const columnFilter = (0, react_1.useMemo)(() => {
+        return currentLayout?.ColumnFilters?.find((cf) => cf.ColumnId === columnId);
+    }, [currentLayout?.ColumnFilters, columnId]);
+    const qlPredicate = column
+        ? (0, utils_1.mapColumnFilterToQlPredicate)(columnFilter, column, qlPredicateDefs, columnFilterOptions)
+        : null;
+    const handleOnChange = (adaptablePredicate, logic = 'AND') => {
+        // make sure we always have the latest columnFiler
+        const columnFilter = adaptable.api.filterApi.columnFilterApi.getColumnFilterForColumn(columnId);
+        const newFilter = {
+            ...columnFilter,
+            ColumnId: columnId,
+            Predicates: adaptablePredicate,
+            PredicatesLogic: logic,
+        };
+        if (handleOnChangeOverride) {
+            handleOnChangeOverride(newFilter);
+        }
+        else {
+            dispatch(columnFilter?.Uuid
+                ? LayoutRedux.LayoutColumnFilterEdit(newFilter)
+                : LayoutRedux.LayoutColumnFilterAdd(newFilter));
+        }
+    };
+    const handleClear = () => dispatch(LayoutRedux.LayoutColumnFilterClear(columnFilter));
+    /**
+     * Converts a QlPredicate to an AdaptablePredicate and dispatches the change.
+     */
+    const handlePredicateChange = React.useCallback((newPredicate) => {
+        const newAdaptablePredicates = newPredicate.args.map(utils_1.mapQlPredicateToAdaptablePredicate);
+        handleOnChange(newAdaptablePredicates, newPredicate.operator);
+    }, [columnId]);
+    return {
+        qlPredicate,
+        qlPredicateDefs,
+        columnFilter,
+        handleClear,
+        handlePredicateChange,
+        handleOnChange,
+        column,
+    };
+};
+exports.useAdaptableFilterWrapper = useAdaptableFilterWrapper;

package/src/View/Components/ColumnFilter/utils.d.ts

@@ -0,0 +1,8 @@
+import { QlPredicate, QlPredicateDef } from '../../../parser/src/predicate';
+import { AdaptableColumn, AdaptablePredicate, AdaptablePredicateDef, ColumnFilter, ColumnFilterOptions, ExpressionFunctionInputType } from '../../../types';
+export declare const mapAdaptablePredicateDefToQlPredicateDef: (adaptablePredicateDef: AdaptablePredicateDef, dataType: ExpressionFunctionInputType) => QlPredicateDef;
+export declare const mapAdaptablePredicateToQlPredicate: (adaptablePredicate: AdaptablePredicate) => QlPredicate;
+export declare const mapQlPredicateToAdaptablePredicate: (qlPredicate: QlPredicate) => AdaptablePredicate;
+export declare const qlPredicateToString: (qlPredicate: QlPredicate, predicateDefs: QlPredicateDef[]) => string;
+export declare const isPredicateEmpty: (predicate: QlPredicate, predicateDef: QlPredicateDef) => boolean;
+export declare const mapColumnFilterToQlPredicate: (columnFilter: ColumnFilter, abColumn: AdaptableColumn, qlPredicateDefs: QlPredicateDef[], columnFilterOptions: ColumnFilterOptions) => QlPredicate;

package/src/View/Components/ColumnFilter/utils.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapColumnFilterToQlPredicate = exports.isPredicateEmpty = exports.qlPredicateToString = exports.mapQlPredicateToAdaptablePredicate = exports.mapAdaptablePredicateToQlPredicate = exports.mapAdaptablePredicateDefToQlPredicateDef = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Icon_1 = require("../../../components/Icon");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const mapAdaptablePredicateDefToQlPredicateDef = (adaptablePredicateDef, 
+// used to determine values type
+dataType) => {
+    let icon = null;
+    if ((0, Icon_1.isAdaptableIcon)(adaptablePredicateDef.icon)) {
+        icon = react_1.default.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: adaptablePredicateDef.icon });
+    }
+    else if (adaptablePredicateDef.icon && 'text' in adaptablePredicateDef.icon) {
+        icon = react_1.default.createElement('div', { children: adaptablePredicateDef.icon.text });
+    }
+    const inputs = (adaptablePredicateDef?.inputs ?? [])?.map((input) => {
+        return input.type;
+    });
+    if ((adaptablePredicateDef.id === 'In' || adaptablePredicateDef.id === 'NotIn') &&
+        ['text', 'number', 'date'].includes(dataType)) {
+        // add array type
+        inputs.push(`${dataType}[]`);
+    }
+    const qlPredicateDef = {
+        operator: adaptablePredicateDef.id,
+        label: adaptablePredicateDef.label ?? adaptablePredicateDef.id,
+        icon,
+        inputs,
+        toString: (params) => adaptablePredicateDef.label,
+    };
+    if (adaptablePredicateDef.hasOwnProperty('toString')) {
+        qlPredicateDef.toString = adaptablePredicateDef.toString;
+    }
+    return qlPredicateDef;
+};
+exports.mapAdaptablePredicateDefToQlPredicateDef = mapAdaptablePredicateDefToQlPredicateDef;
+const mapAdaptablePredicateToQlPredicate = (adaptablePredicate) => {
+    return {
+        operator: adaptablePredicate.PredicateId, // make sure all predicates are in qal
+        args: adaptablePredicate.Inputs,
+    };
+};
+exports.mapAdaptablePredicateToQlPredicate = mapAdaptablePredicateToQlPredicate;
+const mapQlPredicateToAdaptablePredicate = (qlPredicate) => {
+    return {
+        PredicateId: qlPredicate.operator,
+        Inputs: qlPredicate.args,
+    };
+};
+exports.mapQlPredicateToAdaptablePredicate = mapQlPredicateToAdaptablePredicate;
+const qlPredicateToString = (qlPredicate, predicateDefs) => {
+    if (typeof qlPredicate === 'object' &&
+        'operator' in qlPredicate &&
+        (qlPredicate.operator === 'AND' || qlPredicate.operator === 'OR')) {
+        // save to join args because there is no extra nesting
+        return qlPredicate.args
+            .filter((str) => str)
+            .map((arg) => (0, exports.qlPredicateToString)(arg, predicateDefs))
+            .join(` ${qlPredicate.operator} `);
+    }
+    const predicateDef = predicateDefs.find((predicateDef) => predicateDef.operator === qlPredicate.operator);
+    if (!predicateDef) {
+        return qlPredicate.operator;
+    }
+    if (!predicateDef) {
+        return qlPredicate.operator;
+    }
+    if (!predicateDef.hasOwnProperty('toString')) {
+        return predicateDef.label;
+    }
+    const str = predicateDef.toString({ inputs: qlPredicate.args.filter((arg) => arg != undefined) });
+    return str;
+};
+exports.qlPredicateToString = qlPredicateToString;
+const isPredicateEmpty = (predicate, predicateDef) => {
+    if (!predicateDef.inputs || predicateDef.inputs.length === 0) {
+        return false;
+    }
+    return (!predicate ||
+        !predicate.args ||
+        predicate.args.length === 0 ||
+        predicate.args.every((arg) => arg == undefined));
+};
+exports.isPredicateEmpty = isPredicateEmpty;
+const mapColumnFilterToQlPredicate = (columnFilter, abColumn, qlPredicateDefs, columnFilterOptions) => {
+    const combinator = columnFilter?.PredicatesLogic ?? 'AND';
+    const qlPredicate = {
+        operator: combinator,
+        args: (columnFilter?.Predicates ?? []).map?.(exports.mapAdaptablePredicateToQlPredicate),
+    };
+    if (qlPredicate.args.length === 0) {
+        // used when none is defined
+        let defaultQlPredicate = null;
+        switch (abColumn.dataType) {
+            case 'number':
+                defaultQlPredicate = columnFilterOptions.defaultNumericColumnFilter
+                    ? { operator: columnFilterOptions.defaultNumericColumnFilter, args: [] }
+                    : { operator: 'Equals', args: [] };
+                break;
+            case 'text':
+                defaultQlPredicate = columnFilterOptions.defaultStringColumnFilter
+                    ? { operator: columnFilterOptions.defaultStringColumnFilter, args: [] }
+                    : { operator: 'Contains', args: [] };
+                break;
+            case 'date':
+                defaultQlPredicate = columnFilterOptions.defaultDateColumnFilter
+                    ? { operator: columnFilterOptions.defaultDateColumnFilter, args: [] }
+                    : { operator: 'On', args: [] };
+                break;
+            case 'boolean':
+                defaultQlPredicate = { operator: 'BooleanToggle', args: [] };
+                break;
+        }
+        if (defaultQlPredicate === null) {
+            // take the firstavailable one
+            if (qlPredicateDefs.length > 0) {
+                defaultQlPredicate = { operator: qlPredicateDefs[0].operator, args: [] };
+            }
+        }
+        if (defaultQlPredicate) {
+            qlPredicate.args = [defaultQlPredicate];
+        }
+    }
+    return qlPredicate;
+};
+exports.mapColumnFilterToQlPredicate = mapColumnFilterToQlPredicate;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AdaptableColumn } from '../../../types';
 type NewColumnSelectorProps = {
     availableColumns: AdaptableColumn[];
@@ -8,5 +8,5 @@ type NewColumnSelectorProps = {
     allowReorder?: boolean;
     onChange?: (colIds: string[]) => void;
 };
-export declare const NewColumnSelector: ({ allowReorder, ...props }: NewColumnSelectorProps) => JSX.Element;
+export declare const NewColumnSelector: ({ allowReorder, ...props }: NewColumnSelectorProps) => React.JSX.Element;
 export {};

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

@@ -5,8 +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 NewColumnSelector = (_a) => {
-    var { allowReorder = true } = _a, props = tslib_1.__rest(_a, ["allowReorder"]);
+const NewColumnSelector = ({ allowReorder = true, ...props }) => {
     const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
     const filterFn = (0, react_1.useMemo)(() => {
         return columnFilterText

package/src/View/Components/EntityRulesEditor/EntityRulePredicatesEditor/EntityRulePredicateEditor.js

@@ -10,7 +10,6 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/S
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const PredicateEditor_1 = require("../../PredicateEditor/PredicateEditor");
 const EntityRulePredicateEditor = (props) => {
-    var _a, _b, _c, _d, _e;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const { predicate } = props;
     const allColumns = React.useMemo(() => {
@@ -20,17 +19,18 @@ const EntityRulePredicateEditor = (props) => {
         }));
     }, []);
     const handleClear = () => {
-        var _a, _b;
-        const newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.filter((prevPredicate) => prevPredicate !== predicate);
-        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+        const newPredicates = props.data.Rule?.Predicates?.filter((prevPredicate) => prevPredicate !== predicate);
+        props.onChange({
+            ...props.data,
+            Rule: {
                 Predicates: newPredicates,
-            } }));
+            },
+        });
     };
     const handlePredicateChange = (newPredicateDef) => {
-        var _a, _b;
         let newPredicates = [];
         if (predicate) {
-            newPredicates = (_b = (_a = props.data.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.map((prevPredicate) => {
+            newPredicates = props.data.Rule?.Predicates?.map((prevPredicate) => {
                 if (prevPredicate === predicate) {
                     return newPredicateDef;
                 }
@@ -41,14 +41,16 @@ const EntityRulePredicateEditor = (props) => {
             // no previous predicate, e.g. it was cleared
             newPredicates = [newPredicateDef];
         }
-        props.onChange(Object.assign(Object.assign({}, props.data), { Rule: {
+        props.onChange({
+            ...props.data,
+            Rule: {
                 Predicates: newPredicates,
-            } }));
+            },
+        });
     };
     const predicateDefs = React.useMemo(() => {
-        var _a;
         let preparedPredicates = [];
-        if (props.getPredicateDefsForColId && ((_a = props === null || props === void 0 ? void 0 : props.predicate) === null || _a === void 0 ? void 0 : _a.ColumnId)) {
+        if (props.getPredicateDefsForColId && props?.predicate?.ColumnId) {
             preparedPredicates = props.getPredicateDefsForColId(props.predicate.ColumnId);
         }
         else {
@@ -57,7 +59,7 @@ const EntityRulePredicateEditor = (props) => {
         return preparedPredicates;
     }, [props.predicate]);
     const columnIdPredicateScopeEnabled = Boolean(props.columnPredicateEnabled);
-    const columnFriendlyName = (_a = allColumns.find((col) => col.value === (predicate === null || predicate === void 0 ? void 0 : predicate.ColumnId))) === null || _a === void 0 ? void 0 : _a.label;
+    const columnFriendlyName = allColumns.find((col) => col.value === predicate?.ColumnId)?.label;
     const columnOptions = allColumns.map((col) => ({
         label: col.label,
         onClick: () => {
@@ -66,17 +68,17 @@ const EntityRulePredicateEditor = (props) => {
     }));
     // use global scope or custom scope
     let predicateColumnId = null;
-    if ((predicate === null || predicate === void 0 ? void 0 : predicate.ColumnId) && predicate.ColumnId !== '') {
+    if (predicate?.ColumnId && predicate.ColumnId !== '') {
         predicateColumnId = predicate.ColumnId;
     }
-    else if ('ColumnIds' in props.data.Scope && ((_c = (_b = props.data.Scope) === null || _b === void 0 ? void 0 : _b.ColumnIds) === null || _c === void 0 ? void 0 : _c[0])) {
-        predicateColumnId = (_e = (_d = props.data.Scope) === null || _d === void 0 ? void 0 : _d.ColumnIds) === null || _e === void 0 ? void 0 : _e[0];
+    else if ('ColumnIds' in props.data.Scope && props.data.Scope?.ColumnIds?.[0]) {
+        predicateColumnId = props.data.Scope?.ColumnIds?.[0];
     }
     return (React.createElement(rebass_1.Flex, { className: "ab-EntityRulePredicateEditor", p: 3, mb: 3 },
         React.createElement(rebass_1.Box, { flex: 1 },
             React.createElement(FormLayout_1.default, null,
                 columnIdPredicateScopeEnabled && (React.createElement(FormLayout_1.FormRow, { label: "Column" },
-                    React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName !== null && columnFriendlyName !== void 0 ? columnFriendlyName : 'Select Column'))),
+                    React.createElement(DropdownButton_1.default, { width: "100%", columns: ['label'], items: columnOptions }, columnFriendlyName ?? 'Select Column'))),
                 React.createElement(FormLayout_1.FormRow, { label: "Predicate" },
                     React.createElement(PredicateEditor_1.PredicateEditor, { columnId: predicateColumnId, predicateDefs: predicateDefs, predicate: predicate, onChange: handlePredicateChange, onClear: handleClear })))),
         React.createElement(rebass_1.Box, null,