@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

package/src/components/DropdownButton/useExpanded.d.ts

@@ -6,7 +6,7 @@ export interface PositionInfo {
     maxHeight: number | string;
     maxWidth: number | string;
 }
-export declare type ExpandedProps = {
+export type ExpandedProps = {
     expanded?: boolean;
     constrainTo?: ConstrainToType;
     defaultExpanded?: boolean;

package/src/components/DropdownButton/useExpanded.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-const getAvailableSizeInfo_1 = tslib_1.__importDefault(require("../utils/getAvailableSizeInfo"));
-const OverlayTrigger_1 = require("../OverlayTrigger");
-exports.default = (props, positionerRef) => {
-    const positionInfoRef = (0, react_1.useRef)({
+import { useRef } from 'react';
+import useProperty from '../utils/useProperty';
+import getAvailableSizeInfo from '../utils/getAvailableSizeInfo';
+import { getConstrainRect } from '../OverlayTrigger';
+export default (props, positionerRef) => {
+    const positionInfoRef = useRef({
         maxHeight: '50vh',
         maxWidth: '50vw',
         verticalPosition: 'bottom',
@@ -14,13 +11,13 @@ exports.default = (props, positionerRef) => {
     });
     const updatePosition = () => {
         const positionRect = positionerRef.current.getBoundingClientRect();
-        positionInfoRef.current = (0, getAvailableSizeInfo_1.default)({
-            constrainRect: (0, OverlayTrigger_1.getConstrainRect)(positionerRef.current, props.constrainTo),
+        positionInfoRef.current = getAvailableSizeInfo({
+            constrainRect: getConstrainRect(positionerRef.current, props.constrainTo),
             targetRect: positionRect,
             maxSizeOffset: 30,
         });
     };
-    const [expanded, doSetExpanded] = (0, useProperty_1.default)(props, 'expanded', false, {
+    const [expanded, doSetExpanded] = useProperty(props, 'expanded', false, {
         onChange: (expanded) => {
             if (expanded) {
                 if (props.onExpand) {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FlexProps } from 'rebass';
-declare type EllipsisContainerProps = {
+type EllipsisContainerProps = {
     direction: 'horizontal' | 'vertical';
     count: number;
     allowWrap?: boolean;

package/src/components/EllipsisContainer/index.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EllipsisContainer = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const useLatest_1 = require("../utils/useLatest");
-const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { Flex } from 'rebass';
+import { useLatest } from '../utils/useLatest';
+import usePrevious from '../utils/usePrevious';
 const Container = ({ children, index, hidden, observerRef, }) => {
     var _a;
-    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [mounted, setMounted] = useState(false);
     React.useEffect(() => {
         const timeoutId = setTimeout(() => {
             // we wait for a bit, so intersection observer
@@ -19,7 +16,7 @@ const Container = ({ children, index, hidden, observerRef, }) => {
         }, 50);
         return () => clearTimeout(timeoutId);
     }, []);
-    const domRef = (0, react_1.useRef)(null);
+    const domRef = useRef(null);
     const onMount = (node) => {
         var _a, _b;
         if (node) {
@@ -44,14 +41,14 @@ const Container = ({ children, index, hidden, observerRef, }) => {
     child = React.cloneElement(child, cloneProps);
     return React.createElement(React.Fragment, null, child);
 };
-const EllipsisContainer = (props) => {
-    const { allowWrap, count, direction, renderItem, renderEllipsis } = props, boxProps = tslib_1.__rest(props, ["allowWrap", "count", "direction", "renderItem", "renderEllipsis"]);
-    const domRef = (0, react_1.useRef)(null);
-    const observerRef = (0, react_1.useRef)(null);
+export const EllipsisContainer = (props) => {
+    const { allowWrap, count, direction, renderItem, renderEllipsis } = props, boxProps = __rest(props, ["allowWrap", "count", "direction", "renderItem", "renderEllipsis"]);
+    const domRef = useRef(null);
+    const observerRef = useRef(null);
     const [minNotVisibleIndex, setMinNotVisibleIndex] = React.useState(props.count);
-    const [visibleSet] = (0, react_1.useState)(() => new Set());
-    const [invisibleSet] = (0, react_1.useState)(() => new Set());
-    const getCount = (0, useLatest_1.useLatest)(props.count);
+    const [visibleSet] = useState(() => new Set());
+    const [invisibleSet] = useState(() => new Set());
+    const getCount = useLatest(props.count);
     React.useEffect(() => {
         const callback = (entries) => {
             const count = getCount();
@@ -84,7 +81,7 @@ const EllipsisContainer = (props) => {
             observer.disconnect();
         };
     }, []);
-    const prevCount = (0, usePrevious_1.default)(count, count);
+    const prevCount = usePrevious(count, count);
     React.useLayoutEffect(() => {
         if (allowWrap) {
             return;
@@ -103,6 +100,5 @@ const EllipsisContainer = (props) => {
                 ? (_a = renderEllipsis === null || renderEllipsis === void 0 ? void 0 : renderEllipsis({ remaining })) !== null && _a !== void 0 ? _a : '...'
                 : null));
     });
-    return (React.createElement(rebass_1.Flex, Object.assign({ ref: domRef, flexWrap: allowWrap ? 'wrap' : 'nowrap', alignItems: "center", "data-name": "options-container" }, boxProps, { flexDirection: direction === 'horizontal' ? 'row' : 'column' }), children));
+    return (React.createElement(Flex, Object.assign({ ref: domRef, flexWrap: allowWrap ? 'wrap' : 'nowrap', alignItems: "center", "data-name": "options-container" }, boxProps, { flexDirection: direction === 'horizontal' ? 'row' : 'column' }), children));
 };
-exports.EllipsisContainer = EllipsisContainer;

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

@@ -1,5 +1,5 @@
 import { HTMLProps } from 'react';
 import { FlexProps } from 'rebass';
-declare type EmptyContentProps = HTMLProps<HTMLElement> & FlexProps & {};
+type EmptyContentProps = HTMLProps<HTMLElement> & FlexProps & {};
 declare const EmptyContent: ({ children, className, style, ...flexProps }: EmptyContentProps) => JSX.Element;
 export default EmptyContent;

package/src/components/EmptyContent/index.js

@@ -1,16 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import join from '../utils/join';
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = (_a) => {
-    var { children, className, style } = _a, flexProps = tslib_1.__rest(_a, ["children", "className", "style"]);
+    var { children, className, style } = _a, flexProps = __rest(_a, ["children", "className", "style"]);
     if (typeof children === 'string') {
         children = React.createElement("p", null, children);
     }
-    return (React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__wrapper` },
-        React.createElement(rebass_1.Flex, Object.assign({ alignItems: "center", justifyContent: "center", flexDirection: "column" }, flexProps, { className: (0, join_1.default)(baseClassName, className), style: style }), children)));
+    return (React.createElement(Box, { flex: 1, className: `${baseClassName}__wrapper` },
+        React.createElement(Flex, Object.assign({ alignItems: "center", justifyContent: "center", flexDirection: "column" }, flexProps, { className: join(baseClassName, className), style: style }), children)));
 };
-exports.default = EmptyContent;
+export default EmptyContent;

package/src/components/ErrorBox/index.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseClassName = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-exports.baseClassName = 'ab-ErrorBox';
+import * as React from 'react';
+import { Box } from 'rebass';
+import join from '../utils/join';
+export const baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    return React.createElement(rebass_1.Box, Object.assign({}, props, { className: (0, join_1.default)(props.className, exports.baseClassName) }));
+    return React.createElement(Box, Object.assign({}, props, { className: join(props.className, baseClassName) }));
 };
-exports.default = ErrorBox;
+export default ErrorBox;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -1,28 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseEditorInput = void 0;
-const tslib_1 = require("tslib");
-const rebass_1 = require("rebass");
-const parser = tslib_1.__importStar(require("../../parser/src"));
-const React = tslib_1.__importStar(require("react"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../ErrorBox"));
-const useSelectionRange_1 = require("../utils/useSelectionRange");
-const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
-const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const Textarea_1 = tslib_1.__importDefault(require("../Textarea"));
-const react_1 = require("react");
-const ExpressionEvaluationError_1 = require("../../parser/src/ExpressionEvaluationError");
-const ButtonInfo_1 = require("../../View/Components/Buttons/ButtonInfo");
-const DocumentationLinkConstants_1 = require("../../Utilities/Constants/DocumentationLinkConstants");
-const icons_1 = require("../icons");
-const AdaptableContext_1 = require("../../View/AdaptableContext");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumentation");
-const Tag_1 = require("../Tag");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const Radio_1 = tslib_1.__importDefault(require("../Radio"));
+import { Box, Flex, Text } from 'rebass';
+import * as parser from '../../parser/src';
+import * as React from 'react';
+import ErrorBox from '../ErrorBox';
+import { useSelectionRange } from '../utils/useSelectionRange';
+import EditorButton from './EditorButton';
+import HelpBlock from '../HelpBlock';
+import OverlayTrigger from '../OverlayTrigger';
+import SimpleButton from '../SimpleButton';
+import Textarea from '../Textarea';
+import { useEffect, useMemo } from 'react';
+import { ExpressionEvaluationError } from '../../parser/src/ExpressionEvaluationError';
+import { ButtonInfo } from '../../View/Components/Buttons/ButtonInfo';
+import { ExpressionEditorDocsLink } from '../../Utilities/Constants/DocumentationLinkConstants';
+import { Icon } from '../icons';
+import { useAdaptable } from '../../View/AdaptableContext';
+import join from '../utils/join';
+import { ExpressionFunctionDocumentation } from './ExpressionFunctionDocumentation';
+import { Tag } from '../Tag';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import Radio from '../Radio';
 const filterableCategories = [
     'dates',
     'logical',
@@ -47,14 +43,14 @@ const getCategoryOrder = (category) => {
 };
 const VarEditorButton = () => {
     var _a;
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const customQueryVariables = (_a = adaptable.api.optionsApi.getExpressionOptions()) === null || _a === void 0 ? void 0 : _a.customQueryVariables;
     if (!customQueryVariables || Object.keys(customQueryVariables).length === 0) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(React.Fragment, null, Object.keys(customQueryVariables).map((varOption) => {
         const varString = `VAR('${varOption}')`;
-        return (React.createElement(EditorButton_1.default, { data: varString, key: varOption }, varString));
+        return (React.createElement(EditorButton, { data: varString, key: varOption }, varString));
     })));
 };
 const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
@@ -98,7 +94,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
             .filter((category) => filterableCategories.includes(category))
             .sort((first, second) => getCategoryOrder(first) - getCategoryOrder(second))
             .map((category) => ({
-            label: StringExtensions_1.default.Humanize(category),
+            label: StringExtensions.Humanize(category),
             value: category,
         }));
         return [{ label: 'All', value: 'all' }, ...categoryOptions];
@@ -112,15 +108,15 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    return (React.createElement(OverlayTrigger_1.default, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper`, flexDirection: "column", onMouseLeave: () => hidePopup() },
-            React.createElement(rebass_1.Flex, { pl: 2, style: { gap: 10 } }, categoryOptions.map((option, index) => {
-                return (React.createElement(Radio_1.default, { key: option.value, onFocus: (event) => {
+    return (React.createElement(OverlayTrigger, { ref: dropdownRef, showEvent: "mouseenter", hideEvent: "mouseleave", targetOffset: 5, render: () => (React.createElement(Flex, { className: `${baseClassName}__dropdown-functions-list-wrapper`, flexDirection: "column", onMouseLeave: () => hidePopup() },
+            React.createElement(Flex, { pl: 2, style: { gap: 10 } }, categoryOptions.map((option, index) => {
+                return (React.createElement(Radio, { key: option.value, onFocus: (event) => {
                         event.preventDefault();
                         event.stopPropagation();
                     }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value }, option.label));
             })),
-            React.createElement(rebass_1.Flex, null,
-                React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2, maxHeight: '50vh' }, orderedGroupNames
+            React.createElement(Flex, null,
+                React.createElement(Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2, maxHeight: '50vh' }, orderedGroupNames
                     .filter((groupName) => !!groupedFunctions[groupName])
                     .map((groupName) => {
                     const functionsInGroup = Object.keys(groupedFunctions[groupName]);
@@ -140,26 +136,26 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                         }
                         return `${functionName}()`;
                     };
-                    return (React.createElement(rebass_1.Box, { mb: 2, key: groupName },
-                        React.createElement(Tag_1.Tag, { mb: 1 }, StringExtensions_1.default.Humanize(groupName)),
-                        functionsInGroup.map((functionName) => (React.createElement(rebass_1.Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: getEditorButtonData(functionName), key: functionName, mr: 1 }, functionName)))))));
+                    return (React.createElement(Box, { mb: 2, key: groupName },
+                        React.createElement(Tag, { mb: 1 }, StringExtensions.Humanize(groupName)),
+                        functionsInGroup.map((functionName) => (React.createElement(Box, { key: functionName, onMouseEnter: () => setOverFunction(functionName), onClick: () => hidePopup() }, functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton, { data: getEditorButtonData(functionName), key: functionName, mr: 1 }, functionName)))))));
                 })),
-                React.createElement(rebass_1.Box, { className: `${baseClassName}__dropdown-functions-description`, p: 2, width: 600, maxWidth: "30vw" }, overFunction ? (React.createElement(React.Fragment, null,
-                    React.createElement(Tag_1.Tag, null, overFunction),
-                    React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Tag_1.Tag, { padding: 20 },
+                React.createElement(Box, { className: `${baseClassName}__dropdown-functions-description`, p: 2, width: 600, maxWidth: "30vw" }, overFunction ? (React.createElement(React.Fragment, null,
+                    React.createElement(Tag, null, overFunction),
+                    React.createElement(ExpressionFunctionDocumentation, { expressionFunction: expressionFunctions[overFunction] }))) : (React.createElement(Tag, { padding: 20 },
                     React.createElement("ul", null,
                         React.createElement("li", null,
                             "Hover over a Function to learn more",
                             React.createElement("br", null),
                             React.createElement("br", null)),
                         React.createElement("li", null, "Select a Function to add to the Expression in the Editor")))))))) },
-        React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
-                React.createElement(icons_1.Icon, { name: "equation" })))));
+        React.createElement(SimpleButton, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
+            React.createElement(Flex, { marginRight: 1, fontSize: 2 },
+                React.createElement(Icon, { name: "equation" })))));
 };
-function BaseEditorInput(props) {
+export function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;
-    const { ref: textAreaRefCallback, selectionStart, selectionEnd } = (0, useSelectionRange_1.useSelectionRange)();
+    const { ref: textAreaRefCallback, selectionStart, selectionEnd } = useSelectionRange();
     const cursor = selectionStart === selectionEnd ? selectionStart : null;
     let result;
     let evaluationError;
@@ -173,12 +169,12 @@ function BaseEditorInput(props) {
         }
         const parserExceptionDetails = e.message;
         return (React.createElement("details", null,
-            React.createElement(rebass_1.Flex, { marginBottom: 1, as: "summary" },
+            React.createElement(Flex, { marginBottom: 1, as: "summary" },
                 parserExceptionSummary,
                 React.createElement("i", null, " (click for more details)")),
-            React.createElement(rebass_1.Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
+            React.createElement(Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
     };
-    const testRowNode = (0, react_1.useMemo)(() => {
+    const testRowNode = useMemo(() => {
         const firstRowNode = props.api.gridApi.getFirstRowNode();
         if (!firstRowNode || !firstRowNode.data) {
             return {};
@@ -202,7 +198,7 @@ function BaseEditorInput(props) {
             });
         }
         catch (err) {
-            if (err instanceof ExpressionEvaluationError_1.ExpressionEvaluationError) {
+            if (err instanceof ExpressionEvaluationError) {
                 evaluationError = err;
             }
             else {
@@ -224,7 +220,7 @@ function BaseEditorInput(props) {
       ${e}`);
         }
     }
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         // update selected function only for focused textareas (where cursor is present)
         if (cursor != undefined) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
@@ -232,28 +228,27 @@ function BaseEditorInput(props) {
     }, [selectedFunctionName]);
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
-        .map((editorButtonDef) => (React.createElement(EditorButton_1.default, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
+        .map((editorButtonDef) => (React.createElement(EditorButton, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || editorButtonDef.functionName))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
-            React.createElement(rebass_1.Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
+        React.createElement(Flex, { className: baseClassName, "data-name": "expression-toolbar", py: 2, mb: 2, mt: 2, flexWrap: "wrap" },
+            React.createElement(Flex, { style: { flex: 1, marginLeft: 5 }, flexWrap: "wrap" },
                 React.createElement(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }),
                 operatorButtons),
-            showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(DocumentationLinkConstants_1.ExpressionEditorDocsLink, '_blank') })))),
-        React.createElement(Textarea_1.default, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: (0, join_1.default)('ab-ExpressionEditor__textarea', // left for backwards compatibility
+            showDocumentationLink && (React.createElement(Flex, { alignItems: "flex-start" },
+                React.createElement(ButtonInfo, { mr: 2, tooltip: 'Learn how to use the Expression Editor', onClick: () => window.open(ExpressionEditorDocsLink, '_blank') })))),
+        React.createElement(Textarea, { "data-name": `expression-input-${type}`, ref: textAreaRefCallback, value: props.value || '', placeholder: props.placeholder || 'Create Query', disabled: props.disabled || false, className: join('ab-ExpressionEditor__textarea', // left for backwards compatibility
             `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
             }, style: style }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
-            "This Query must resolve to a ",
+        props.isFullExpression !== true && (React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, fontSize: 3 },
+            "This Expression must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
-        evaluationError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
-        !props.hideResultPreview && result !== undefined && (React.createElement(rebass_1.Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
+        expressionError && (React.createElement(ErrorBox, { width: "100%", style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
+        evaluationError && (React.createElement(ErrorBox, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, `${evaluationError.expressionFnName} ${evaluationError.message}`)),
+        !props.hideResultPreview && result !== undefined && (React.createElement(Box, { className: `${baseClassName}__editor-feedback`, "data-name": "expression-editor-feedback", mt: 2, p: 2 },
             React.createElement("pre", { style: { whiteSpace: 'pre-wrap', margin: 0 } },
                 "Result (using Test Data): ",
                 React.createElement("b", null, JSON.stringify(result)))))));
 }
-exports.BaseEditorInput = BaseEditorInput;

package/src/components/ExpressionEditor/EditorButton.js

@@ -1,15 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const EditorContext_1 = require("./EditorContext");
+import { __rest } from "tslib";
+import * as React from 'react';
+import SimpleButton from '../SimpleButton';
+import { useExpressionEditor } from './EditorContext';
 let dragImage;
 const DRAG_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
 function EditorButton(props) {
-    const { data } = props, buttonProps = tslib_1.__rest(props, ["data"]);
-    const { textAreaRef } = (0, EditorContext_1.useExpressionEditor)();
-    return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
+    const { data } = props, buttonProps = __rest(props, ["data"]);
+    const { textAreaRef } = useExpressionEditor();
+    return (React.createElement(SimpleButton, Object.assign({ "data-name": 'operator-or-fn', variant: "text", draggable: true, onDragStart: (event) => {
             if (!dragImage) {
                 // we want to lazy init the image since otherwise it fails in SSR environments if it is declared outside the cmp - ReferenceError: Image is not defined
                 dragImage = new Image(0, 0);
@@ -40,4 +38,4 @@ function EditorButton(props) {
             cursor: 'grab',
         } }, buttonProps)));
 }
-exports.default = EditorButton;
+export default EditorButton;

package/src/components/ExpressionEditor/EditorContext.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useExpressionEditor = exports.ExpressionEditorContext = void 0;
-const react_1 = require("react");
-exports.ExpressionEditorContext = (0, react_1.createContext)({
+import { createContext, useContext } from 'react';
+export const ExpressionEditorContext = createContext({
     textAreaRef: { current: null },
     selectedFunction: null,
     setSelectedFunction: (_fn) => { },
 });
-const useExpressionEditor = () => {
-    return (0, react_1.useContext)(exports.ExpressionEditorContext);
+export const useExpressionEditor = () => {
+    return useContext(ExpressionEditorContext);
 };
-exports.useExpressionEditor = useExpressionEditor;

package/src/components/ExpressionEditor/EditorInput.js

@@ -1,26 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const BaseEditorInput_1 = require("./BaseEditorInput");
-const editorButtonsSearch_1 = require("./editorButtonsSearch");
-const EditorContext_1 = require("./EditorContext");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const editorButtonsAggregatedScalar_1 = require("./editorButtonsAggregatedScalar");
-const aggregatedScalarExpressionFunctions_1 = require("../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions");
-const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumulativeAggregatedScalar");
-const editorButtonsQuantileAggregatedScalar_1 = require("./editorButtonsQuantileAggregatedScalar");
+import * as React from 'react';
+import { useMemo } from 'react';
+import { BaseEditorInput } from './BaseEditorInput';
+import { editorButtonsSearch } from './editorButtonsSearch';
+import { useExpressionEditor } from './EditorContext';
+import StringExtensions from '../../Utilities/Extensions/StringExtensions';
+import { editorButtonsAggregatedScalar } from './editorButtonsAggregatedScalar';
+import { aggregatedExpressionFunctions, cumulativeAggregatedExpressionFunctions, quantileAggregatedExpressionFunctions, } from '../../Utilities/ExpressionFunctions/aggregatedScalarExpressionFunctions';
+import { editorButtonsCumulativeAggregatedScalar } from './editorButtonsCumulativeAggregatedScalar';
+import { editorButtonsQuantileAggregatedScalar } from './editorButtonsQuantileAggregatedScalar';
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
         .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
         const sourceExpressionFunctions = type === 'cumulativeAggregatedScalar'
-            ? aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions
+            ? cumulativeAggregatedExpressionFunctions
             : type === 'quantileAggregatedScalar'
-                ? aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions
-                : aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions;
+                ? quantileAggregatedExpressionFunctions
+                : aggregatedExpressionFunctions;
         return Object.keys(availableAggregatedExpressionFunctions)
             .filter((key) => sourceExpressionFunctions.includes(key))
             .reduce((obj, key) => {
@@ -28,23 +25,23 @@ function EditorInput(props) {
             return obj;
         }, {});
     };
-    const expressionFunctions = (0, react_1.useMemo)(() => {
+    const expressionFunctions = useMemo(() => {
         return props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
             props.type === 'quantileAggregatedScalar'
             ? getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type)
             : Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
     }, [props.type]);
-    const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
-    const queryName = `${StringExtensions_1.default.CapitaliseFirstLetter(props.type)}Query`;
-    return (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
-            ? editorButtonsAggregatedScalar_1.editorButtonsAggregatedScalar
+    const { setSelectedFunction } = useExpressionEditor();
+    const queryName = `${StringExtensions.CapitaliseFirstLetter(props.type)}Query`;
+    return (React.createElement(BaseEditorInput, { type: 'main', value: props.value, placeholder: `Create ${queryName}`, onChange: props.onChange, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: expressionFunctions, editorButtons: props.type === 'aggregatedScalar'
+            ? editorButtonsAggregatedScalar
             : props.type === 'cumulativeAggregatedScalar'
-                ? editorButtonsCumulativeAggregatedScalar_1.editorButtonsCumulativeAggregatedScalar
+                ? editorButtonsCumulativeAggregatedScalar
                 : props.type === 'quantileAggregatedScalar'
-                    ? editorButtonsQuantileAggregatedScalar_1.editorButtonsQuantileAggregatedScalar
-                    : editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
+                    ? editorButtonsQuantileAggregatedScalar
+                    : editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
             props.type === 'quantileAggregatedScalar', api: props.api }));
 }
-exports.default = EditorInput;
+export default EditorInput;

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const BaseEditorInput_1 = require("./BaseEditorInput");
-const rebass_1 = require("rebass");
-const editorButtonsSearch_1 = require("./editorButtonsSearch");
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
-const editorButtonsObservable_1 = require("./editorButtonsObservable");
-const CheckBox_1 = require("../CheckBox");
-const EditorContext_1 = require("./EditorContext");
-const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoolean");
+import * as React from 'react';
+import { useState } from 'react';
+import { BaseEditorInput } from './BaseEditorInput';
+import { Flex, Text } from 'rebass';
+import { editorButtonsSearch } from './editorButtonsSearch';
+import useProperty from '../utils/useProperty';
+import { CapitaliseFirstLetter, IsNotNullOrEmptyOrWhiteSpace, IsNullOrEmptyOrWhiteSpace, } from '../../Utilities/Extensions/StringExtensions';
+import { editorButtonsObservable } from './editorButtonsObservable';
+import { CheckBox } from '../CheckBox';
+import { useExpressionEditor } from './EditorContext';
+import { editorButtonsAggregatedBoolean } from './editorButtonsAggregatedBoolean';
 function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
@@ -20,44 +17,44 @@ function EditorInputWithWhereClause(props) {
         ? moduleExpressionFunctions.observableFunctions
         : moduleExpressionFunctions.aggregatedBooleanFunctions;
     const whereClauseExpressionsFns = Object.assign(Object.assign({}, moduleExpressionFunctions.booleanFunctions), moduleExpressionFunctions.scalarFunctions);
-    const [value, setValue] = (0, useProperty_1.default)(props, 'value', '', {
+    const [value, setValue] = useProperty(props, 'value', '', {
         onChange: props.onChange,
     });
     const [reactiveValue, whereClauseValue] = value.split(' WHERE ');
     const updateReactiveValue = (value) => {
         let fullExpressionString = value;
-        if ((0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(value) && (0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(whereClauseValue)) {
+        if (IsNotNullOrEmptyOrWhiteSpace(value) && IsNotNullOrEmptyOrWhiteSpace(whereClauseValue)) {
             fullExpressionString = `${value} WHERE ${whereClauseValue}`;
         }
-        if ((0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(value)) {
+        if (IsNullOrEmptyOrWhiteSpace(value)) {
             setShowWhereClause(false);
         }
         setValue(fullExpressionString);
     };
     const updateWhereClauseValue = (value) => {
-        if ((0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(value)) {
+        if (IsNullOrEmptyOrWhiteSpace(value)) {
             setValue(reactiveValue);
         }
         else {
             setValue(`${reactiveValue} WHERE ${value}`);
         }
     };
-    const { setSelectedFunction } = (0, EditorContext_1.useExpressionEditor)();
-    const [showWhereClause, setShowWhereClause] = (0, react_1.useState)((0, StringExtensions_1.IsNotNullOrEmptyOrWhiteSpace)(whereClauseValue));
-    const queryName = `${(0, StringExtensions_1.CapitaliseFirstLetter)(props.type)}Query`;
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" },
-        React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable_1.editorButtonsObservable : editorButtonsAggregatedBoolean_1.editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
-        React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 2, pl: 3 },
+    const { setSelectedFunction } = useExpressionEditor();
+    const [showWhereClause, setShowWhereClause] = useState(IsNotNullOrEmptyOrWhiteSpace(whereClauseValue));
+    const queryName = `${CapitaliseFirstLetter(props.type)}Query`;
+    return (React.createElement(Flex, { flexDirection: "column", alignItems: "start" },
+        React.createElement(BaseEditorInput, { type: 'main', value: reactiveValue || '', placeholder: `Create ${queryName}`, onChange: updateReactiveValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: reactiveExpressionFns, editorButtons: props.type === 'observable' ? editorButtonsObservable : editorButtonsAggregatedBoolean, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }),
+        React.createElement(Text, { fontSize: 2, marginTop: 2, pl: 3 },
             "Add a ",
             React.createElement("i", null, "WHERE"),
             " Clause to narrow the scope of the Query"),
-        React.createElement(CheckBox_1.CheckBox, { disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
+        React.createElement(CheckBox, { disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), checked: showWhereClause, style: { alignItems: 'center' }, onChange: (checked) => {
                 setShowWhereClause(checked);
                 if (!checked) {
                     // reset whereClause value if textarea is hidden
                     updateWhereClauseValue(null);
                 }
             }, pl: 3 }, "WHERE"),
-        showWhereClause && (React.createElement(BaseEditorInput_1.BaseEditorInput, { type: 'secondary', disabled: (0, StringExtensions_1.IsNullOrEmptyOrWhiteSpace)(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
+        showWhereClause && (React.createElement(BaseEditorInput, { type: 'secondary', disabled: IsNullOrEmptyOrWhiteSpace(reactiveValue), value: whereClauseValue || '', placeholder: `Create BooleanQuery which narrows down the scope of the ${queryName}`, onChange: updateWhereClauseValue, onSelectedFunctionChange: setSelectedFunction, expressionFunctions: whereClauseExpressionsFns, editorButtons: editorButtonsSearch, testData: props.testData, isFullExpression: true, hideResultPreview: true, api: props.api, style: { height: '75px' } }))));
 }
-exports.default = EditorInputWithWhereClause;
+export default EditorInputWithWhereClause;