@adaptabletools/adaptable 19.2.4 → 20.0.0-canary.0

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Flex, Text } from 'rebass';
 import { getQlPredicateSymbol } from '../../../parser/src/predicate/mapQlPredicateToExpression';
+import { mapExpressionFunctionTypeToColumnDataType } from '../../../Utilities/adaptableQlUtils';
 import { useAdaptable } from '../../../View/AdaptableContext';
 import AdaptableInput from '../../../View/Components/AdaptableInput';
 import { ColumnSelector } from '../../../View/Components/Selectors/ColumnSelector';
@@ -12,7 +13,7 @@ import { Icon } from '../../icons';
 import { InputGroup } from '../../InputGroup';
 import { Select } from '../../Select';
 import { useQueryBuilderContext } from './QueryBuilder';
-import { isFieldValue, mapColumnExpressionToColumnId, mapExpressionFunctionTypeToColumnDataType, mapExpressionToFieldValue, mapFieldValueToExpression, } from './utils';
+import { isFieldValue, mapColumnExpressionToColumnId, mapExpressionToFieldValue, mapFieldValueToExpression, } from './utils';
 export const PrimitiveColumnOrFieldSelector = (props) => {
     const adaptable = useAdaptable();
     const [type, setType] = React.useState(() => {
@@ -22,8 +23,7 @@ export const PrimitiveColumnOrFieldSelector = (props) => {
         );
     });
     const hasFields = React.useMemo(() => {
-        var _a;
-        return ((_a = adaptable.api.expressionApi.internalApi.getAvailableFields()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
     }, []);
     const hasFieldsOrValueIsField = hasFields || isFieldValue(props.fieldOrColumn);
     let input = null;
@@ -66,16 +66,14 @@ export const PrimitiveColumnOrFieldSelector = (props) => {
 export const PrimiteValueInput = (props) => {
     const adaptable = useAdaptable();
     const hasFields = React.useMemo(() => {
-        var _a;
-        return ((_a = adaptable.api.expressionApi.internalApi.getAvailableFields()) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        return adaptable.api.expressionApi.internalApi.getAvailableFields()?.length > 0;
     }, []);
     const hasFieldsOrValueIsField = hasFields || isFieldValue(props.value);
     const [type, setType] = React.useState(() => {
-        var _a, _b;
-        if (typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.includes('['))) {
+        if (typeof props?.value === 'string' && props?.value?.includes('[')) {
             return 'column-name';
         }
-        if (typeof (props === null || props === void 0 ? void 0 : props.value) === 'string' && ((_b = props === null || props === void 0 ? void 0 : props.value) === null || _b === void 0 ? void 0 : _b.includes('FIELD'))) {
+        if (typeof props?.value === 'string' && props?.value?.includes('FIELD')) {
             return 'field';
         }
         return 'input-value';
@@ -88,15 +86,14 @@ export const PrimiteValueInput = (props) => {
         }
     };
     const getEditor = () => {
-        var _a, _b;
         const common = {
             'data-id': 'query-input',
         };
         switch (props.inputType) {
             case 'boolean':
-                return (React.createElement(CheckBox, Object.assign({}, common, { checked: props.value, onChange: () => props.onChange(!props.value) })));
+                return (React.createElement(CheckBox, { ...common, checked: props.value, onChange: () => props.onChange(!props.value) }));
             case 'number':
-                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "number", value: (_a = props.value) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
+                return (React.createElement(AdaptableInput, { ...common, type: "number", value: props.value ?? '', onChange: (event) => {
                         const value = event.target.value;
                         if (value === '') {
                             props.onChange(undefined);
@@ -104,18 +101,18 @@ export const PrimiteValueInput = (props) => {
                         else {
                             props.onChange(parseFloat(value));
                         }
-                    } })));
+                    } }));
             case 'text':
-                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "text", value: (_b = props.value) !== null && _b !== void 0 ? _b : '', onChange: (event) => {
+                return (React.createElement(AdaptableInput, { ...common, type: "text", value: props.value ?? '', onChange: (event) => {
                         props.onChange(event.target.value);
-                    } })));
+                    } }));
             case 'date':
                 // date format = 'DATE(2020-01-01)'
                 const dateStr = typeof props.value === 'string' ? props.value.replace('DATE(', '').replace(')', '') : '';
-                return (React.createElement(AdaptableInput, Object.assign({}, common, { type: "date", value: dateStr !== null && dateStr !== void 0 ? dateStr : '', onChange: (event) => {
+                return (React.createElement(AdaptableInput, { ...common, type: "date", value: dateStr ?? '', onChange: (event) => {
                         const stringified = `DATE("${event.target.value}")`;
                         props.onChange(stringified);
-                    } })));
+                    } }));
             default:
                 return React.createElement(React.Fragment, null);
         }
@@ -196,7 +193,6 @@ const SymbolToIcon = (props) => {
     }
 };
 export const ExpressionSelector = (props) => {
-    var _a;
     const { getExpressions } = useQueryBuilderContext();
     const expressions = props.dataType ? getExpressions(props.dataType) : [];
     return (React.createElement(DropdownButton, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", tone: 'accent', columns: ['label'], items: expressions.map((expression) => ({
@@ -207,7 +203,7 @@ export const ExpressionSelector = (props) => {
                 }
             },
         })) },
-        React.createElement(SymbolToIcon, { symbol: (_a = getQlPredicateSymbol(props.value)) !== null && _a !== void 0 ? _a : 'Select Operator' })));
+        React.createElement(SymbolToIcon, { symbol: getQlPredicateSymbol(props.value) ?? 'Select Operator' })));
 };
 export const CombinatorSelector = (props) => {
     return (React.createElement(DropdownButton, { "data-id": "combinator-selector", "data-value": props.value, columns: ['label'], variant: "raised", tone: "accent", items: [

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { Draggable, Droppable } from '../../dnd';
 import { Box, Flex } from 'rebass';
 import { isArgumentColumnOrField, isQlLogicalOperator, } from '../../../parser/src/predicate';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
@@ -13,7 +13,7 @@ import { CombinatorSelector, ExpressionSelector, PrimiteValueInput, PrimitiveCol
 import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapExpressionToFieldValue, } from './utils';
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
-const Handle = (props) => (React.createElement(Flex, Object.assign({ className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1 }, props),
+const Handle = (props) => (React.createElement(Flex, { className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1, ...props },
     React.createElement(Icon, { name: "drag" })));
 const QueryPredicateButtons = (props) => {
     return (React.createElement(React.Fragment, null,
@@ -36,15 +36,18 @@ const LogicalFunctionEditor = (props) => {
     ${props.isRoot ? `${BASE_CLASS_NAME}--root` : `${BASE_CLASS_NAME}--child`}
   `;
     const getCombinatorEl = (handleProps, className) => (React.createElement(Droppable, { droppableId: props.id, type: props.id }, (provided, snapshot) => {
-        return (React.createElement("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef, className: className }),
+        return (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, className: className },
             React.createElement(Flex, null,
-                props.isRoot ? null : React.createElement(Handle, Object.assign({}, handleProps)),
+                props.isRoot ? null : React.createElement(Handle, { ...handleProps }),
                 React.createElement(Flex, { flex: 1, alignItems: "center", height: ITEM_HEIGHT },
                     React.createElement(CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
-                            props.onChange(Object.assign(Object.assign({}, props.predicate), { operator: combinator }));
+                            props.onChange({
+                                ...props.predicate,
+                                operator: combinator,
+                            });
                         } }),
                     React.createElement(Box, { flex: 1 }),
-                    React.createElement(QueryPredicateButtons, Object.assign({ hideDelete: props.isRoot, hideAdd: true }, props)))),
+                    React.createElement(QueryPredicateButtons, { hideDelete: props.isRoot, hideAdd: true, ...props }))),
             React.createElement(Box, { className: `${BASE_CLASS_NAME}__children-wrapper` },
                 props.predicate.args.map((arg, index) => {
                     const id = `${props.id}/${index}`;
@@ -57,16 +60,25 @@ const LogicalFunctionEditor = (props) => {
                                 'operator' in arg &&
                                 isQlLogicalOperator(arg.operator)) {
                                 // add as a child
-                                const newArg = Object.assign(Object.assign({}, arg), { args: [...arg.args, newPredicate] });
+                                const newArg = {
+                                    ...arg,
+                                    args: [...arg.args, newPredicate],
+                                };
                                 const args = [...props.predicate.args];
                                 args[index] = newArg;
-                                props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
+                                props.onChange({
+                                    ...props.predicate,
+                                    args,
+                                });
                             }
                             else {
                                 // add as a sibling
                                 const prevArgs = [...props.predicate.args];
                                 prevArgs.splice(index + 1, 0, newPredicate);
-                                props.onChange(Object.assign(Object.assign({}, props.predicate), { args: prevArgs }));
+                                props.onChange({
+                                    ...props.predicate,
+                                    args: prevArgs,
+                                });
                             }
                         }, onChange: (predicate) => {
                             const args = [...props.predicate.args];
@@ -76,24 +88,26 @@ const LogicalFunctionEditor = (props) => {
                             else {
                                 args.splice(index, 1);
                             }
-                            props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
+                            props.onChange({
+                                ...props.predicate,
+                                args,
+                            });
                         } }));
                 }),
                 provided.placeholder,
                 React.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
-                    React.createElement(QueryPredicateButtons, Object.assign({}, props, { hideDelete: true }))))));
+                    React.createElement(QueryPredicateButtons, { ...props, hideDelete: true })))));
     }));
     if (props.isRoot) {
         return getCombinatorEl({ className: className });
     }
     else {
         return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided, snapshot) => {
-            return (React.createElement("div", Object.assign({}, provided.draggableProps, { ref: provided.innerRef, className: className }), getCombinatorEl(provided.dragHandleProps)));
+            return (React.createElement("div", { ...provided.draggableProps, ref: provided.innerRef, className: className }, getCombinatorEl(provided.dragHandleProps)));
         }));
     }
 };
 const PrimitiveFunctionEditor = (props) => {
-    var _a;
     // [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
     const adaptable = useAdaptable();
     const [columnOrFieldExpression, ...restOfArgs] = props.predicate.args;
@@ -121,56 +135,68 @@ const PrimitiveFunctionEditor = (props) => {
             columnOrFieldDataType = adaptable.api.columnApi.getColumnDataTypeForColumnId(columnId);
         }
         columnInputDataType = mapColumnDataTypeToExpressionFunctionType(columnOrFieldDataType);
-        functionInputInputDataTypes = (_a = booleanExpressionFunctions[props.predicate.operator]) === null || _a === void 0 ? void 0 : _a.inputs;
+        functionInputInputDataTypes = booleanExpressionFunctions[props.predicate.operator]?.inputs;
         restOfFunctionInputDataTypes = functionInputInputDataTypes
             ? getFunctionMatchingInputTypes(columnInputDataType, functionInputInputDataTypes)
             : [];
     }
     const level = props.id.split('/').length - 1;
     return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
-        return (React.createElement(Flex, Object.assign({ className: `
-              ${BASE_CLASS_NAME} 
+        return (React.createElement(Flex, { className: `
+              ${BASE_CLASS_NAME}
               ${BASE_CLASS_NAME}-level-${level}
               ${BASE_CLASS_NAME}-primitive
               ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
-            `, pb: 2, ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { minHeight: ITEM_HEIGHT }) }),
-            React.createElement(Handle, Object.assign({}, provided.dragHandleProps)),
+            `, pb: 2, ref: provided.innerRef, ...provided.draggableProps, style: { ...provided.draggableProps.style, minHeight: ITEM_HEIGHT } },
+            React.createElement(Handle, { ...provided.dragHandleProps }),
             React.createElement(Flex, { alignItems: "center", height: ITEM_HEIGHT },
                 React.createElement(Box, { mr: 2 },
                     React.createElement(PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
-                            props.onChange(Object.assign(Object.assign({}, props.predicate), { args: [colOrField], operator: null }));
+                            props.onChange({
+                                ...props.predicate,
+                                args: [colOrField],
+                                operator: null,
+                            });
                         }, fieldOrColumn: columnOrFieldId })),
                 columnOrFieldId && columnOrFieldDataType && (React.createElement(ExpressionSelector, { dataType: columnOrFieldDataType, onExpressionChange: (operator) => {
                         let args = [props.predicate.args[0]];
-                        if (columnOrFieldDataType === 'Boolean' && operator !== 'NOT') {
+                        if (columnOrFieldDataType === 'boolean' && operator !== 'NOT') {
                             args = [props.predicate.args[0], 'TRUE'];
                         }
-                        props.onChange(Object.assign(Object.assign({}, props.predicate), { operator,
+                        props.onChange({
+                            ...props.predicate,
+                            operator,
                             // discard arguments
-                            args }));
+                            args,
+                        });
                     }, value: props.predicate.operator })),
                 React.createElement(Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
-                    var _a;
                     const key = type + index;
                     const commonProps = {
                         lefthandColumnIdParam: columnOrFieldId,
                         inputType: type,
                     };
                     if (type.includes('[]')) {
-                        return (React.createElement(PrimitiveMultiValueInput, Object.assign({}, commonProps, { key: key, value: restOfArgs, onChange: (values) => {
+                        return (React.createElement(PrimitiveMultiValueInput, { ...commonProps, key: key, value: restOfArgs, onChange: (values) => {
                                 const args = [...props.predicate.args.slice(0, 1), ...values];
-                                props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
-                            } })));
+                                props.onChange({
+                                    ...props.predicate,
+                                    args,
+                                });
+                            } }));
                     }
-                    return (React.createElement(PrimiteValueInput, Object.assign({}, commonProps, { key: key, value: (_a = restOfArgs[index]) !== null && _a !== void 0 ? _a : null, onChange: (value) => {
+                    return (React.createElement(PrimiteValueInput, { ...commonProps, key: key, value: restOfArgs[index] ?? null, onChange: (value) => {
                             const args = [...props.predicate.args];
                             // +1 because col is the first argument
                             args[index + 1] = value;
-                            props.onChange(Object.assign(Object.assign({}, props.predicate), { args }));
-                        } })));
+                            props.onChange({
+                                ...props.predicate,
+                                args,
+                            });
+                        } }));
                 }))),
             React.createElement(Box, { flex: 1 }),
-            React.createElement(QueryPredicateButtons, Object.assign({}, props))));
+            React.createElement(QueryPredicateButtons, { ...props })));
     }));
 };
 /**
@@ -185,9 +211,9 @@ const PrimitiveFunctionEditor = (props) => {
  */
 export const QueryPredicateBuilder = (props) => {
     if (isQlLogicalOperator(props.predicate.operator)) {
-        return React.createElement(LogicalFunctionEditor, Object.assign({}, props));
+        return React.createElement(LogicalFunctionEditor, { ...props });
     }
     else {
-        return React.createElement(PrimitiveFunctionEditor, Object.assign({}, props));
+        return React.createElement(PrimitiveFunctionEditor, { ...props });
     }
 };

package/src/components/ExpressionEditor/QueryBuilder/utils.d.ts

@@ -2,8 +2,7 @@ import { QlPredicate, QlPredicateError } from '../../../parser/src/predicate';
 import { ExpressionFunctionInputType } from '../../../parser/src/types';
 import { AdaptableColumnDataType, BooleanFunctionName } from '../../../types';
 export declare const reorder: (predicate: QlPredicate, from: string, to: string) => any;
-export declare const mapExpressionFunctionTypeToColumnDataType: (type: ExpressionFunctionInputType) => AdaptableColumnDataType;
-export declare const getOperatorMatchingInputs: (columnType: ExpressionFunctionInputType, inputs: ExpressionFunctionInputType[] | Array<ExpressionFunctionInputType>[]) => ExpressionFunctionInputType[];
+export declare const getOperatorMatchingInputs: (columnType: ExpressionFunctionInputType, inputs: ExpressionFunctionInputType[] | Array<ExpressionFunctionInputType>[], includeAllInputs?: boolean) => ExpressionFunctionInputType[];
 export declare const getFunctionsForColumnType: (dataType: AdaptableColumnDataType, availableBooleanFunctions: BooleanFunctionName[]) => BooleanFunctionName[];
 export declare const getUnsuportedExpressionFromQlPredicate: (predicate: QlPredicate | QlPredicateError, context: {
     supportedFields: {

package/src/components/ExpressionEditor/QueryBuilder/utils.js

@@ -27,29 +27,16 @@ export const reorder = (predicate, from, to) => {
     parent.args.splice(parseInt(toPath[toPath.length - 1]), 0, itemToMove);
     return predicateCopy;
 };
-export const mapExpressionFunctionTypeToColumnDataType = (type) => {
-    if (type === 'number') {
-        return 'Number';
-    }
-    if (type === 'boolean') {
-        return 'Boolean';
-    }
-    if (type === 'text') {
-        return 'String';
-    }
-    if (type === 'date') {
-        return 'Date';
-    }
-    return undefined;
-};
-export const getOperatorMatchingInputs = (columnType, inputs) => {
+export const getOperatorMatchingInputs = (columnType, inputs, includeAllInputs = false) => {
     if (Array.isArray(inputs[0])) {
         const matchingInput = inputs.find((input) => input[0] === columnType);
-        const [_, ...restOfArgs] = matchingInput !== null && matchingInput !== void 0 ? matchingInput : [];
+        const [_, ...restOfArgs] = matchingInput ?? [];
         return restOfArgs;
     }
     const [_, ...restOfArgs] = inputs;
-    return restOfArgs;
+    return includeAllInputs
+        ? inputs
+        : restOfArgs;
 };
 export const getFunctionsForColumnType = (dataType, availableBooleanFunctions) => {
     const columnType = mapColumnDataTypeToExpressionFunctionType(dataType);
@@ -66,17 +53,16 @@ export const getFunctionsForColumnType = (dataType, availableBooleanFunctions) =
         else {
             matchingInputTypes = inputs;
         }
-        return (matchingInputTypes === null || matchingInputTypes === void 0 ? void 0 : matchingInputTypes[0]) === columnType;
+        return matchingInputTypes?.[0] === columnType;
     });
 };
 export const getUnsuportedExpressionFromQlPredicate = (predicate, context) => {
-    var _a;
     if (!predicate) {
         return null;
     }
     if (typeof predicate === 'string' && isFieldValue(predicate)) {
         const field = mapExpressionToFieldValue(predicate);
-        if (!((_a = context.supportedFields) === null || _a === void 0 ? void 0 : _a.some((field) => (field === null || field === void 0 ? void 0 : field.value) === mapExpressionToFieldValue(predicate)))) {
+        if (!context.supportedFields?.some((field) => field?.value === mapExpressionToFieldValue(predicate))) {
             return `Expression uses an unregistered field: "${field}"`;
         }
         else {
@@ -110,24 +96,22 @@ export const getUnsuportedExpressionFromQlPredicate = (predicate, context) => {
 };
 export const mapFieldValueToExpression = (field) => `FIELD('${field}')`;
 export const mapExpressionToFieldValue = (expression) => {
-    var _a;
     if (!expression) {
         return '';
     }
     try {
-        return (_a = expression.match(/FIELD\(['"](.+)['"]\)/)) === null || _a === void 0 ? void 0 : _a[1];
+        return expression.match(/FIELD\(['"](.+)['"]\)/)?.[1];
     }
     catch (e) {
         return '';
     }
 };
 export const mapColumnExpressionToColumnId = (expression) => {
-    var _a;
     if (!expression) {
         return null;
     }
     try {
-        return (_a = expression.match(/\[(.+)\]/)) === null || _a === void 0 ? void 0 : _a[1];
+        return expression.match(/\[(.+)\]/)?.[1];
     }
     catch (e) {
         return expression;

package/src/components/ExpressionEditor/index.d.ts

@@ -20,5 +20,5 @@ interface ExpressionEditorProps {
     showExpressionEditor?: boolean;
 }
 export declare const baseClassName = "ab-ExpressionEditor";
-export declare function ExpressionEditor(props: ExpressionEditorProps): JSX.Element;
+export declare function ExpressionEditor(props: ExpressionEditorProps): React.JSX.Element;
 export {};

package/src/components/ExpressionEditor/index.js

@@ -22,13 +22,12 @@ import { NamedQueryEditor } from './NamedQueryEditor';
 import { QueryBuilder } from './QueryBuilder';
 export const baseClassName = `ab-ExpressionEditor`;
 export function ExpressionEditor(props) {
-    var _a, _b, _c;
     const { type, module } = props;
     const [selectedFunction, setSelectedFunction] = useState(null);
     const [expressionText, setExpressionText] = useState(props.value);
     const { namedQuery, setNamedQuery } = useNamedQueryContext();
     const textAreaRef = useRef(null);
-    const allowSaveNamedQuery = (_a = props.allowSaveNamedQuery) !== null && _a !== void 0 ? _a : type === 'boolean';
+    const allowSaveNamedQuery = props.allowSaveNamedQuery ?? type === 'boolean';
     const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputWithWhereClause, { type: type, module: module, value: props.value, onChange: (value) => {
             setExpressionText(value);
             props.onChange(value);
@@ -45,7 +44,7 @@ export function ExpressionEditor(props) {
     // currently only boolean and scalar expressions support nested calculated columns (calc cols which reference other calc cols)
     const queryableColumns = type === 'scalar' || type === 'boolean' || type === 'aggregatedScalar'
         ? props.columns
-        : props.columns.filter((c) => !props.api.columnApi.isCalculatedColumn(c.columnId));
+        : props.columns.filter((c) => !c.isCalculatedColumn);
     const showDocumentationLinks = props.api.internalApi.isDocumentationLinksDisplayed();
     // @Bogdan i did this to be sure but i think we can get rid of this as the button does the same (and better IMO)
     const showNamedQueryStuff = false;
@@ -82,9 +81,9 @@ export function ExpressionEditor(props) {
             React.createElement(Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
                 React.createElement(Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
                     editorInput,
-                    StringExtensions.IsNotNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && (React.createElement(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
+                    StringExtensions.IsNotNullOrEmpty(expressionText?.trim()) && (React.createElement(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
                     /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                    StringExtensions.IsNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && renderQueryHints(type),
+                    StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type),
                     showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
                         React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
                         "See documentation for more details and examples")),
@@ -106,7 +105,7 @@ export function ExpressionEditor(props) {
                             React.createElement(Tabs.Content, null, adaptableFields && adaptableFields.length > 0 ? (React.createElement(DataTableEditor, { type: "field", labels: {
                                     showIds: 'Show Field path',
                                     filterPlaceholder: 'Filter fields...',
-                                }, dataFormatter: (value) => `FIELD("${value}")`, data: props.initialData, fields: adaptableFields === null || adaptableFields === void 0 ? void 0 : adaptableFields.map((field) => ({
+                                }, dataFormatter: (value) => `FIELD("${value}")`, data: props.initialData, fields: adaptableFields?.map((field) => ({
                                     label: field.label,
                                     value: field.name,
                                     dataType: field.dataType,
@@ -126,10 +125,10 @@ export function ExpressionEditor(props) {
             return props.fields
                 .filter((field) => {
                 if (!type) {
-                    return (field.dataType === 'String' ||
-                        field.dataType === 'Number' ||
-                        field.dataType === 'Boolean' ||
-                        field.dataType === 'Date');
+                    return (field.dataType === 'text' ||
+                        field.dataType === 'number' ||
+                        field.dataType === 'boolean' ||
+                        field.dataType === 'date');
                 }
                 else {
                     return field.dataType === type;
@@ -144,26 +143,23 @@ export function ExpressionEditor(props) {
             return props.columns
                 .filter((column) => {
                 if (!type) {
-                    return (column.dataType === 'String' ||
-                        column.dataType === 'Number' ||
-                        column.dataType === 'Boolean' ||
-                        column.dataType === 'Date');
+                    return (column.dataType === 'text' ||
+                        column.dataType === 'number' ||
+                        column.dataType === 'boolean' ||
+                        column.dataType === 'date');
                 }
                 else {
                     return column.dataType === type;
                 }
             })
-                .map((col) => {
-                var _a;
-                return ({
-                    value: col.columnId,
-                    label: (_a = col.friendlyName) !== null && _a !== void 0 ? _a : col.columnId,
-                    type: col.dataType,
-                });
-            });
+                .map((col) => ({
+                value: col.columnId,
+                label: col.friendlyName ?? col.columnId,
+                type: col.dataType,
+            }));
         } }));
-    const showQueryBuilder = (_b = props.showQueryBuilder) !== null && _b !== void 0 ? _b : false;
-    const showExpressionEditor = (_c = props.showExpressionEditor) !== null && _c !== void 0 ? _c : true;
+    const showQueryBuilder = props.showQueryBuilder ?? false;
+    const showExpressionEditor = props.showExpressionEditor ?? true;
     return (React.createElement(ExpressionEditorContext.Provider, { value: {
             selectedFunction,
             setSelectedFunction,

package/src/components/FieldWrap/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { FlexProps } from 'rebass';
-declare const FieldWrap: (props: FlexProps) => JSX.Element;
+declare const FieldWrap: (props: FlexProps) => React.JSX.Element;
 export default FieldWrap;

package/src/components/FieldWrap/index.js

@@ -6,7 +6,7 @@ const defaulProps = {
     alignItems: 'center',
 };
 const FieldWrap = (props) => {
-    const flexProps = Object.assign(Object.assign({}, defaulProps), props);
-    return React.createElement(Flex, Object.assign({}, flexProps, { className: join(props.className, 'ab-FieldWrap') }));
+    const flexProps = { ...defaulProps, ...props };
+    return React.createElement(Flex, { ...flexProps, className: join(props.className, 'ab-FieldWrap') });
 };
 export default FieldWrap;

package/src/components/FileDroppable/index.d.ts

@@ -15,5 +15,5 @@ interface FileDroppableProps extends FlexProps {
     file?: File;
 }
 export declare const readJSONFile: (file: File, toJSON?: (str: string) => Promise<any> | any) => Promise<Record<string, unknown>[]>;
-declare const FileDroppable: (props?: FileDroppableProps) => JSX.Element;
+declare const FileDroppable: (props?: FileDroppableProps) => React.JSX.Element;
 export default FileDroppable;

package/src/components/FileDroppable/index.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import * as React from 'react';
 import { Flex, Box } from 'rebass';
 import { useReducer, useRef } from 'react';
@@ -36,8 +35,7 @@ export const readJSONFile = async (file, toJSON) => {
     });
 };
 const FileDroppable = (props = {}) => {
-    var _a;
-    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(Icon, { name: "paperclip", size: 48 }), value } = props, domProps = __rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon", "value"]);
+    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(Icon, { name: "paperclip", size: 48 }), value, ...domProps } = props;
     const [state, dispatch] = useReducer(reducer, initialState);
     const onDragEnter = (e) => {
         dispatch({
@@ -94,11 +92,11 @@ const FileDroppable = (props = {}) => {
             }
         }
     };
-    const domRef = useRef();
+    const domRef = useRef(null);
     let form = (React.createElement("form", { onSubmit: preventEventPropagation },
         React.createElement(SimpleButton, { style: { cursor: 'pointer' }, variant: "outlined" },
             React.createElement("div", null, state.dragOver ? dragOverText : defaultText),
-            React.createElement("input", { type: "file", onChange: onDrop, accept: fileAccept, value: (_a = props === null || props === void 0 ? void 0 : props.file) === null || _a === void 0 ? void 0 : _a.name, style: {
+            React.createElement("input", { type: "file", onChange: onDrop, accept: fileAccept, value: props?.file?.name, style: {
                     opacity: 0,
                     position: 'absolute',
                     cursor: 'pointer',
@@ -111,7 +109,7 @@ const FileDroppable = (props = {}) => {
                     zIndex: 1,
                 } }))));
     const msg = message || state.message;
-    return (React.createElement(Flex, Object.assign({}, domProps, { flexDirection: "column", className: join(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef }),
+    return (React.createElement(Flex, { ...domProps, flexDirection: "column", className: join(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef },
         props.children,
         helpText || icon ? (React.createElement(Flex, { flexDirection: "column" },
             helpText ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 },

package/src/components/FileDroppable/reducer.js

@@ -7,16 +7,29 @@ export var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 const reducer = (state, action) => {
     if (action.type === ActionTypes.DRAG_OVER) {
-        return Object.assign(Object.assign({}, state), { dragOver: true });
+        return {
+            ...state,
+            dragOver: true,
+        };
     }
     if (action.type === ActionTypes.DRAG_OUT) {
-        return Object.assign(Object.assign({}, state), { dragOver: false });
+        return {
+            ...state,
+            dragOver: false,
+        };
     }
     if (action.type === ActionTypes.SET_INVALID_FILE) {
-        return Object.assign(Object.assign({}, state), { message: action.payload.message });
+        return {
+            ...state,
+            message: action.payload.message,
+        };
     }
     if (action.type === ActionTypes.DROP_SUCCES) {
-        return Object.assign(Object.assign({}, state), { dragOver: false, message: action.payload.message });
+        return {
+            ...state,
+            dragOver: false,
+            message: action.payload.message,
+        };
     }
     return state;
 };

package/src/components/Flex.d.ts

@@ -0,0 +1 @@
+export { Flex } from 'rebass';

package/src/components/Flex.js

@@ -0,0 +1 @@
+export { Flex } from 'rebass';

package/src/components/FlexWithFooter.d.ts

@@ -4,5 +4,5 @@ interface TypeProps extends FlexProps {
     footer: React.ReactNode;
     footerProps?: FlexProps;
 }
-declare const FlexWithFooter: (props: TypeProps & React.HTMLProps<HTMLDivElement>) => JSX.Element;
+declare const FlexWithFooter: (props: TypeProps & React.HTMLProps<HTMLDivElement>) => React.JSX.Element;
 export default FlexWithFooter;