@adaptabletools/adaptable 17.0.0-canary.4 → 17.0.0-canary.5

package/src/components/DropdownButton/index.js

@@ -1,12 +1,15 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { cloneElement, useRef } from 'react';
-import join from '../utils/join';
-import SimpleButton from '../SimpleButton';
-import useExpanded from './useExpanded';
-import renderItem from './renderItem';
-import OverlayTrigger from '../OverlayTrigger';
-export const DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DROPDOWN_ICON = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const useExpanded_1 = tslib_1.__importDefault(require("./useExpanded"));
+const renderItem_1 = tslib_1.__importDefault(require("./renderItem"));
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
+exports.DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
     React.createElement("path", { d: "M7 10l5 5 5-5H7z" })));
 const spacer = React.createElement("div", { style: { flex: 1 } });
 const baseClassName = 'ab-DropdownButton';
@@ -14,7 +17,7 @@ const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
 };
 const DropdownButton = React.forwardRef((props, theRef) => {
-    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse, showToggleIcon = true } = props, domProps = __rest(props, ["columns", "overlayProps", "listOffset", "collapseOnItemClick", "focusOnClear", "idProperty", "isItemDisabled", "items", "children", "listMinWidth", "listStyle", "listItemStyle", "listItemClassName", "constrainTo", "showClearButton", "onClear", "clearButtonProps", "onExpand", "onCollapse", "showToggleIcon"]);
+    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse, showToggleIcon = true } = props, domProps = tslib_1.__rest(props, ["columns", "overlayProps", "listOffset", "collapseOnItemClick", "focusOnClear", "idProperty", "isItemDisabled", "items", "children", "listMinWidth", "listStyle", "listItemStyle", "listItemClassName", "constrainTo", "showClearButton", "onClear", "clearButtonProps", "onExpand", "onCollapse", "showToggleIcon"]);
     isItemDisabled = isItemDisabled || ((item) => item.disabled);
     if (!columns) {
         columns = ['icon', 'label'];
@@ -31,7 +34,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             }
             const disabled = isItemDisabled(item);
             const itemStyle = Object.assign(Object.assign({}, defaultListItemStyle), listItemStyle);
-            const itemClassName = join(`${baseClassName}__list-item`, item.clickable === false || disabled
+            const itemClassName = (0, join_1.default)(`${baseClassName}__list-item`, item.clickable === false || disabled
                 ? `${baseClassName}__list-item--not-clickable`
                 : `${baseClassName}__list-item--clickable`, disabled ? `${baseClassName}__list-item--disabled` : '', listItemClassName);
             const getItemHandler = (eventName) => {
@@ -60,7 +63,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             if (item['label']) {
                 domProps['data-name'] = item['label'];
             }
-            return renderItem({
+            return (0, renderItem_1.default)({
                 index,
                 idProperty,
                 onItemClick: getItemHandler('onClick'),
@@ -75,18 +78,18 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             React.createElement("tbody", null, content)));
     }
     const dropdownButtonClassName = props.className;
-    const className = join(props.className, baseClassName);
-    const positionerRef = useRef(null);
-    const { expanded, toggle, setExpanded, positionInfo } = useExpanded(props, positionerRef);
+    const className = (0, join_1.default)(props.className, baseClassName);
+    const positionerRef = (0, react_1.useRef)(null);
+    const { expanded, toggle, setExpanded, positionInfo } = (0, useExpanded_1.default)(props, positionerRef);
     const { maxHeight: maxListHeight, maxWidth: maxListWidth } = positionInfo;
     listStyle = Object.assign({ minWidth: typeof maxListWidth === 'number' ? Math.min(listMinWidth, maxListWidth) : listMinWidth, maxHeight: maxListHeight, maxWidth: maxListWidth }, listStyle);
     let icon = expanded
-        ? cloneElement(DROPDOWN_ICON, {
-            style: Object.assign(Object.assign({}, DROPDOWN_ICON.props.style), { transform: 'rotate(180deg) translate3d(0px, -2px, 0px)' }),
+        ? (0, react_1.cloneElement)(exports.DROPDOWN_ICON, {
+            style: Object.assign(Object.assign({}, exports.DROPDOWN_ICON.props.style), { transform: 'rotate(180deg) translate3d(0px, -2px, 0px)' }),
         })
-        : DROPDOWN_ICON;
+        : exports.DROPDOWN_ICON;
     const hasClearButton = onClear || showClearButton;
-    const clearButton = hasClearButton ? (React.createElement(SimpleButton, Object.assign({ disabled: domProps.disabled, as: "div", onClick: (event) => {
+    const clearButton = hasClearButton ? (React.createElement(SimpleButton_1.default, Object.assign({ disabled: domProps.disabled, as: "div", onClick: (event) => {
             var _a;
             event.stopPropagation();
             if (onClear) {
@@ -98,11 +101,11 @@ const DropdownButton = React.forwardRef((props, theRef) => {
         spacer,
         hasClearButton ? clearButton : null,
         icon));
-    const buttonRef = useRef(null);
-    return (React.createElement(OverlayTrigger, Object.assign({ visible: expanded, targetOffset: listOffset, render: () => {
+    const buttonRef = (0, react_1.useRef)(null);
+    return (React.createElement(OverlayTrigger_1.default, Object.assign({ visible: expanded, targetOffset: listOffset, render: () => {
             return (React.createElement("div", { "data-name": `${dropdownButtonClassName}`, style: listStyle, className: `${baseClassName}__list` }, content));
         } }, overlayProps),
-        React.createElement(SimpleButton, Object.assign({ iconPosition: "end" }, (showToggleIcon && { icon, paddingRight: 0 }), domProps, { ref: (btn) => {
+        React.createElement(SimpleButton_1.default, Object.assign({ iconPosition: "end" }, (showToggleIcon && { icon, paddingRight: 0 }), domProps, { ref: (btn) => {
                 buttonRef.current = btn;
                 if (!theRef) {
                     return;
@@ -146,4 +149,4 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 } }),
             children)));
 });
-export default DropdownButton;
+exports.default = DropdownButton;

package/src/components/DropdownButton/renderItem.js

@@ -1,8 +1,11 @@
-import * as React from 'react';
-import isPlainObject from 'lodash/isPlainObject';
-export default ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const isPlainObject_1 = tslib_1.__importDefault(require("lodash/isPlainObject"));
+exports.default = ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
     const key = item[idProperty] || index;
-    if (!isPlainObject(item)) {
+    if (!(0, isPlainObject_1.default)(item)) {
         return (React.createElement("tr", Object.assign({ onClick: onItemClick, key: key, className: className }, domProps),
             React.createElement("td", { colSpan: columns.length, style: style }, item)));
     }

package/src/components/DropdownButton/useExpanded.js

@@ -1,9 +1,12 @@
-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({
+"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)({
         maxHeight: '50vh',
         maxWidth: '50vw',
         verticalPosition: 'bottom',
@@ -11,13 +14,13 @@ export default (props, positionerRef) => {
     });
     const updatePosition = () => {
         const positionRect = positionerRef.current.getBoundingClientRect();
-        positionInfoRef.current = getAvailableSizeInfo({
-            constrainRect: getConstrainRect(positionerRef.current, props.constrainTo),
+        positionInfoRef.current = (0, getAvailableSizeInfo_1.default)({
+            constrainRect: (0, OverlayTrigger_1.getConstrainRect)(positionerRef.current, props.constrainTo),
             targetRect: positionRect,
             maxSizeOffset: 30,
         });
     };
-    const [expanded, doSetExpanded] = useProperty(props, 'expanded', false, {
+    const [expanded, doSetExpanded] = (0, useProperty_1.default)(props, 'expanded', false, {
         onChange: (expanded) => {
             if (expanded) {
                 if (props.onExpand) {

package/src/components/EllipsisContainer/index.js

@@ -1,12 +1,15 @@
-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';
+"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"));
 const Container = ({ children, index, hidden, observerRef, }) => {
     var _a;
-    const [mounted, setMounted] = useState(false);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
     React.useEffect(() => {
         const timeoutId = setTimeout(() => {
             // we wait for a bit, so intersection observer
@@ -16,7 +19,7 @@ const Container = ({ children, index, hidden, observerRef, }) => {
         }, 50);
         return () => clearTimeout(timeoutId);
     }, []);
-    const domRef = useRef(null);
+    const domRef = (0, react_1.useRef)(null);
     const onMount = (node) => {
         var _a, _b;
         if (node) {
@@ -41,14 +44,14 @@ const Container = ({ children, index, hidden, observerRef, }) => {
     child = React.cloneElement(child, cloneProps);
     return React.createElement(React.Fragment, null, child);
 };
-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 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);
     const [minNotVisibleIndex, setMinNotVisibleIndex] = React.useState(props.count);
-    const [visibleSet] = useState(() => new Set());
-    const [invisibleSet] = useState(() => new Set());
-    const getCount = useLatest(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);
     React.useEffect(() => {
         const callback = (entries) => {
             const count = getCount();
@@ -81,7 +84,7 @@ export const EllipsisContainer = (props) => {
             observer.disconnect();
         };
     }, []);
-    const prevCount = usePrevious(count, count);
+    const prevCount = (0, usePrevious_1.default)(count, count);
     React.useLayoutEffect(() => {
         if (allowWrap) {
             return;
@@ -100,5 +103,6 @@ export const EllipsisContainer = (props) => {
                 ? (_a = renderEllipsis === null || renderEllipsis === void 0 ? void 0 : renderEllipsis({ remaining })) !== null && _a !== void 0 ? _a : '...'
                 : null));
     });
-    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));
+    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));
 };
+exports.EllipsisContainer = EllipsisContainer;

package/src/components/EmptyContent/index.js

@@ -1,14 +1,16 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import join from '../utils/join';
+"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"));
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = (_a) => {
-    var { children, className, style } = _a, flexProps = __rest(_a, ["children", "className", "style"]);
+    var { children, className, style } = _a, flexProps = tslib_1.__rest(_a, ["children", "className", "style"]);
     if (typeof children === 'string') {
         children = React.createElement("p", null, 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)));
+    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)));
 };
-export default EmptyContent;
+exports.default = EmptyContent;

package/src/components/ErrorBox/index.js

@@ -1,8 +1,12 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../utils/join';
-export const baseClassName = 'ab-ErrorBox';
+"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';
 const ErrorBox = (props) => {
-    return React.createElement(Box, Object.assign({}, props, { className: join(props.className, baseClassName) }));
+    return React.createElement(rebass_1.Box, Object.assign({}, props, { className: (0, join_1.default)(props.className, exports.baseClassName) }));
 };
-export default ErrorBox;
+exports.default = ErrorBox;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -1,24 +1,28 @@
-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';
+"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"));
 const filterableCategories = [
     'dates',
     'logical',
@@ -43,14 +47,14 @@ const getCategoryOrder = (category) => {
 };
 const VarEditorButton = () => {
     var _a;
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.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, { data: varString, key: varOption }, varString));
+        return (React.createElement(EditorButton_1.default, { data: varString, key: varOption }, varString));
     })));
 };
 const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
@@ -94,7 +98,7 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
             .filter((category) => filterableCategories.includes(category))
             .sort((first, second) => getCategoryOrder(first) - getCategoryOrder(second))
             .map((category) => ({
-            label: StringExtensions.Humanize(category),
+            label: StringExtensions_1.default.Humanize(category),
             value: category,
         }));
         return [{ label: 'All', value: 'all' }, ...categoryOptions];
@@ -108,15 +112,15 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
      * - mouse leaves
      * - a function is inserted
      */
-    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) => {
+    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) => {
                         event.preventDefault();
                         event.stopPropagation();
                     }, onClick: handleFunctionCategoryChange(option.value), checked: currentFunctionCategory === option.value }, option.label));
             })),
-            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
+            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
                     .filter((groupName) => !!groupedFunctions[groupName])
                     .map((groupName) => {
                     const functionsInGroup = Object.keys(groupedFunctions[groupName]);
@@ -136,26 +140,26 @@ const FunctionsDropdown = ({ expressionFunctions, baseClassName }) => {
                         }
                         return `${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)))))));
+                    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)))))));
                 })),
-                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(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("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, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(Flex, { marginRight: 1, fontSize: 2 },
-                React.createElement(Icon, { name: "equation" })))));
+        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" })))));
 };
-export function BaseEditorInput(props) {
+function BaseEditorInput(props) {
     const { expressionFunctions, testData, style, type } = props;
-    const { ref: textAreaRefCallback, selectionStart, selectionEnd } = useSelectionRange();
+    const { ref: textAreaRefCallback, selectionStart, selectionEnd } = (0, useSelectionRange_1.useSelectionRange)();
     const cursor = selectionStart === selectionEnd ? selectionStart : null;
     let result;
     let evaluationError;
@@ -169,12 +173,12 @@ export function BaseEditorInput(props) {
         }
         const parserExceptionDetails = e.message;
         return (React.createElement("details", null,
-            React.createElement(Flex, { marginBottom: 1, as: "summary" },
+            React.createElement(rebass_1.Flex, { marginBottom: 1, as: "summary" },
                 parserExceptionSummary,
                 React.createElement("i", null, " (click for more details)")),
-            React.createElement(Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
+            React.createElement(rebass_1.Text, { marginLeft: 3, style: { fontStyle: 'italic' } }, parserExceptionDetails)));
     };
-    const testRowNode = useMemo(() => {
+    const testRowNode = (0, react_1.useMemo)(() => {
         const firstRowNode = props.api.gridApi.getFirstRowNode();
         if (!firstRowNode || !firstRowNode.data) {
             return {};
@@ -198,7 +202,7 @@ export function BaseEditorInput(props) {
             });
         }
         catch (err) {
-            if (err instanceof ExpressionEvaluationError) {
+            if (err instanceof ExpressionEvaluationError_1.ExpressionEvaluationError) {
                 evaluationError = err;
             }
             else {
@@ -220,7 +224,7 @@ export function BaseEditorInput(props) {
       ${e}`);
         }
     }
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         // update selected function only for focused textareas (where cursor is present)
         if (cursor != undefined) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
@@ -228,27 +232,28 @@ export function BaseEditorInput(props) {
     }, [selectedFunctionName]);
     const operatorButtons = props.editorButtons
         .filter((editorButtonDef) => !!expressionFunctions[editorButtonDef.functionName])
-        .map((editorButtonDef) => (React.createElement(EditorButton, { key: `${editorButtonDef.functionName}-operator`, data: editorButtonDef.data, icon: editorButtonDef.icon }, !editorButtonDef.icon && (editorButtonDef.text || 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))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        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(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(FunctionsDropdown, { expressionFunctions: expressionFunctions, baseClassName: baseClassName }),
                 operatorButtons),
-            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
+            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
             `${baseClassName}__textarea`), autoFocus: true, spellCheck: "false", onChange: (event) => {
                 props.onChange(event.target.value);
             }, style: style }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock, { mt: 2, mb: 2, p: 2, fontSize: 3 },
+        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { 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, { 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 },
+        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 },
             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,13 +1,15 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import SimpleButton from '../SimpleButton';
-import { useExpressionEditor } from './EditorContext';
+"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");
 let dragImage;
 const DRAG_IMAGE_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
 function EditorButton(props) {
-    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) => {
+    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) => {
             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);
@@ -38,4 +40,4 @@ function EditorButton(props) {
             cursor: 'grab',
         } }, buttonProps)));
 }
-export default EditorButton;
+exports.default = EditorButton;

package/src/components/ExpressionEditor/EditorContext.js

@@ -1,9 +1,13 @@
-import { createContext, useContext } from 'react';
-export const ExpressionEditorContext = createContext({
+"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)({
     textAreaRef: { current: null },
     selectedFunction: null,
     setSelectedFunction: (_fn) => { },
 });
-export const useExpressionEditor = () => {
-    return useContext(ExpressionEditorContext);
+const useExpressionEditor = () => {
+    return (0, react_1.useContext)(exports.ExpressionEditorContext);
 };
+exports.useExpressionEditor = useExpressionEditor;

package/src/components/ExpressionEditor/EditorInput.js

@@ -1,23 +1,26 @@
-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';
+"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");
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
         .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
         const sourceExpressionFunctions = type === 'cumulativeAggregatedScalar'
-            ? cumulativeAggregatedExpressionFunctions
+            ? aggregatedScalarExpressionFunctions_1.cumulativeAggregatedExpressionFunctions
             : type === 'quantileAggregatedScalar'
-                ? quantileAggregatedExpressionFunctions
-                : aggregatedExpressionFunctions;
+                ? aggregatedScalarExpressionFunctions_1.quantileAggregatedExpressionFunctions
+                : aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions;
         return Object.keys(availableAggregatedExpressionFunctions)
             .filter((key) => sourceExpressionFunctions.includes(key))
             .reduce((obj, key) => {
@@ -25,23 +28,23 @@ function EditorInput(props) {
             return obj;
         }, {});
     };
-    const expressionFunctions = useMemo(() => {
+    const expressionFunctions = (0, react_1.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 } = 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
+    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
             : props.type === 'cumulativeAggregatedScalar'
-                ? editorButtonsCumulativeAggregatedScalar
+                ? editorButtonsCumulativeAggregatedScalar_1.editorButtonsCumulativeAggregatedScalar
                 : props.type === 'quantileAggregatedScalar'
-                    ? editorButtonsQuantileAggregatedScalar
-                    : editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
+                    ? editorButtonsQuantileAggregatedScalar_1.editorButtonsQuantileAggregatedScalar
+                    : editorButtonsSearch_1.editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
             props.type === 'quantileAggregatedScalar', api: props.api }));
 }
-export default EditorInput;
+exports.default = EditorInput;