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

package/src/components/ExpressionEditor/index.js

@@ -1,52 +1,53 @@
-import * as React from 'react';
-import { useState, useRef } from 'react';
-import { Box, Flex, Text } from 'rebass';
-import { CheckBox } from '../CheckBox';
-import FormLayout, { FormRow } from '../FormLayout';
-import HelpBlock from '../HelpBlock';
-import Input from '../Input';
-import EditorButton from './EditorButton';
-import AdaptableInput from '../../View/Components/AdaptableInput';
-import Radio from '../Radio';
-import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
-import EditorInputWithWhereClause from './EditorInputWithWhereClause';
-import EditorInput from './EditorInput';
-import { ExpressionEditorContext } from './EditorContext';
-import { ExpressionFunctionDocumentation } from './ExpressionFunctionDocumentation';
-import { AggregatedBooleanQueryDocsLink, AggregatedScalarQueryDocsLink, BooleanQueryDocsLink, CumulativeAggregatedScalarQueryDocsLink, ObservableQueryDocsLink, QuantileAggregatedScalarQueryDocsLink, ScalarQueryDocsLink, } from '../../Utilities/Constants/DocumentationLinkConstants';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import { ButtonInfo } from '../../View/Components/Buttons/ButtonInfo';
-import { CodeBlock } from '../CodeBlock';
-import { useNamedQueryContext } from './NamedQueryContext';
-import { NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
-import { isValueValidDate } from '../../Utilities/Helpers/DateHelper';
-import { AdaptableFormControlTextClear } from '../../View/Components/Forms/AdaptableFormControlTextClear';
-import { Tabs } from '../Tabs';
-import { QueryBuilder } from './QueryBuilder';
-export function ExpressionEditor(props) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpressionEditor = 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 CheckBox_1 = require("../CheckBox");
+const FormLayout_1 = tslib_1.__importStar(require("../FormLayout"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
+const Input_1 = tslib_1.__importDefault(require("../Input"));
+const EditorButton_1 = tslib_1.__importDefault(require("./EditorButton"));
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
+const Radio_1 = tslib_1.__importDefault(require("../Radio"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
+const EditorInputWithWhereClause_1 = tslib_1.__importDefault(require("./EditorInputWithWhereClause"));
+const EditorInput_1 = tslib_1.__importDefault(require("./EditorInput"));
+const EditorContext_1 = require("./EditorContext");
+const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumentation");
+const DocumentationLinkConstants_1 = require("../../Utilities/Constants/DocumentationLinkConstants");
+const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
+const ButtonInfo_1 = require("../../View/Components/Buttons/ButtonInfo");
+const CodeBlock_1 = require("../CodeBlock");
+const NamedQueryContext_1 = require("./NamedQueryContext");
+const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
+const DateHelper_1 = require("../../Utilities/Helpers/DateHelper");
+const AdaptableFormControlTextClear_1 = require("../../View/Components/Forms/AdaptableFormControlTextClear");
+const Tabs_1 = require("../Tabs");
+const QueryBuilder_1 = require("./QueryBuilder");
+function ExpressionEditor(props) {
     var _a, _b, _c;
     const { type, module } = props;
-    const [data, setData] = useState(props.initialData);
-    const [showColumnIds, setShowColumnIds] = useState(false);
-    const [showNamedQueries, setShowNamedQueries] = useState(false);
+    const [data, setData] = (0, react_1.useState)(props.initialData);
+    const [showColumnIds, setShowColumnIds] = (0, react_1.useState)(false);
+    const [showNamedQueries, setShowNamedQueries] = (0, react_1.useState)(false);
     const baseClassName = `ab-ExpressionEditor`;
-    const [selectedFunction, setSelectedFunction] = useState(null);
-    const [expressionText, setExpressionText] = useState(props.value);
-    const { namedQuery, setNamedQuery } = useNamedQueryContext();
-    const textAreaRef = useRef(null);
+    const [selectedFunction, setSelectedFunction] = (0, react_1.useState)(null);
+    const [expressionText, setExpressionText] = (0, react_1.useState)(props.value);
+    const { namedQuery, setNamedQuery } = (0, NamedQueryContext_1.useNamedQueryContext)();
+    const textAreaRef = (0, react_1.useRef)(null);
     const allowSaveNamedQuery = (_a = props.allowSaveNamedQuery) !== null && _a !== void 0 ? _a : type === 'boolean';
-    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputWithWhereClause, { type: type, module: module, value: props.value, onChange: (value) => {
+    const editorInput = type === 'observable' || type === 'aggregatedBoolean' ? (React.createElement(EditorInputWithWhereClause_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
             setExpressionText(value);
             props.onChange(value);
         }, testData: data, api: props.api })) : (
     // 'boolean','scalar','aggregatedScalar'/'cumulativeAggregatedScalar'/'quantileAggregatedScalar'
-    (React.createElement(
-        EditorInput,
-        { type: type, module: module, value: props.value, onChange: (value) => {
-                setExpressionText(value);
-                props.onChange(value);
-            }, testData: data, isFullExpression: props.isFullExpression, api: props.api }
-    )));
+    React.createElement(EditorInput_1.default, { type: type, module: module, value: props.value, onChange: (value) => {
+            setExpressionText(value);
+            props.onChange(value);
+        }, testData: data, isFullExpression: props.isFullExpression, api: props.api }));
     // 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
@@ -62,21 +63,21 @@ export function ExpressionEditor(props) {
     };
     const getColDateValue = (column) => {
         const colValue = getColValue(column);
-        return colValue && isValueValidDate(colValue)
+        return colValue && (0, DateHelper_1.isValueValidDate)(colValue)
             ? new Date(colValue).toISOString().substr(0, 10)
             : '';
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const dataTableEditor = (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { className: `${baseClassName}__columns-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
-            React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
+        React.createElement(rebass_1.Flex, { className: `${baseClassName}__columns-list`, flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+            React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
                     float: 'right',
                     margin: 0,
                     paddingTop: 'var(--ab-space-1)',
                     paddingBottom: 'var(--ab-space-1)',
                 } }, 'Show Column IDs'),
-            React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Filter columns...", style: { flex: 1, marginBottom: 3 } })),
-        React.createElement(FormLayout, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '100px'], style: { alignItems: 'stretch' } }, queryableColumns
+            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Filter columns...", style: { flex: 1, marginBottom: 3 } })),
+        React.createElement(FormLayout_1.default, { className: "ab-ExpressionEditor__columns", gridColumnGap: "var(--ab-space-1)", gridRowGap: "var(--ab-space-1)", sizes: ['auto', '100px'], style: { alignItems: 'stretch' } }, queryableColumns
             .filter((column) => {
             if (!searchInputValue) {
                 return true;
@@ -84,34 +85,34 @@ export function ExpressionEditor(props) {
             return (column.columnId.includes(searchInputValue) ||
                 column.friendlyName.includes(searchInputValue));
         })
-            .map((column) => (React.createElement(FormRow, { key: column.columnId, label: React.createElement(EditorButton, { width: "100%", height: "100%", style: {
+            .map((column) => (React.createElement(FormLayout_1.FormRow, { key: column.columnId, label: React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
                     background: 'var(--ab-color-primary)',
                     cursor: 'grab',
                     marginRight: 'var(--ab-space-1)',
                 }, data: `[${column.columnId}]`, "data-name": "column", icon: "drag" },
-                React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, showColumnIds ? `[${column.columnId}]` : column.friendlyName)) }, column.dataType === 'Number' ? (React.createElement(Input, { type: "number", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, Number(e.target.value))), width: "100%", disabled: column.readOnly })) : column.dataType === 'String' ? (React.createElement(Input, { type: "text", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, e.target.value)), width: "100%", disabled: column.readOnly })) : column.dataType === 'Date' ? (React.createElement(AdaptableInput, { type: "date", "data-name": "column-input", "data-value": column.columnId, value: getColDateValue(column), onChange: (e) => {
+                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, showColumnIds ? `[${column.columnId}]` : column.friendlyName)) }, column.dataType === 'Number' ? (React.createElement(Input_1.default, { type: "number", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, Number(e.target.value))), width: "100%", disabled: column.readOnly })) : column.dataType === 'String' ? (React.createElement(Input_1.default, { type: "text", "data-name": "column-input", "data-value": column.columnId, value: getColValue(column), onChange: (e) => setData(updateColValue(data, column, e.target.value)), width: "100%", disabled: column.readOnly })) : column.dataType === 'Date' ? (React.createElement(AdaptableInput_1.default, { type: "date", "data-name": "column-input", "data-value": column.columnId, value: getColDateValue(column), onChange: (e) => {
                 setData(updateColValue(data, column, new Date(e.target.value)));
-            }, style: { width: '100%' }, disabled: column.readOnly })) : column.dataType === 'Boolean' ? (React.createElement(CheckBox, { "data-name": "column-input", "data-value": column.columnId, checked: getColValue(column), onChange: (checked) => setData(updateColValue(data, column, checked)), disabled: column.readOnly })) : null))))));
-    const namedQueries = (React.createElement(Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
-        React.createElement(CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
+            }, style: { width: '100%' }, disabled: column.readOnly })) : column.dataType === 'Boolean' ? (React.createElement(CheckBox_1.CheckBox, { "data-name": "column-input", "data-value": column.columnId, checked: getColValue(column), onChange: (checked) => setData(updateColValue(data, column, checked)), disabled: column.readOnly })) : null))))));
+    const namedQueries = (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        React.createElement(CheckBox_1.CheckBox, { checked: showColumnIds, onChange: (checked) => setShowColumnIds(checked), style: {
                 float: 'right',
                 margin: 0,
                 paddingTop: 'var(--ab-space-1)',
                 paddingBottom: 'var(--ab-space-1)',
             } }, 'Show Column IDs'),
-        props.namedQueries.map((namedQuery) => (React.createElement(Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
+        props.namedQueries.map((namedQuery) => (React.createElement(rebass_1.Flex, { key: namedQuery.Uuid, flexDirection: "column", alignItems: "start", style: {
                 padding: 3,
                 marginTop: 'var(--ab-space-2)',
                 marginBottom: 'var(--ab-space-2)',
                 width: '100%',
             }, backgroundColor: "primarylight" },
             ' ',
-            React.createElement(EditorButton, { width: "100%", height: "100%", style: {
+            React.createElement(EditorButton_1.default, { width: "100%", height: "100%", style: {
                     background: 'var(--ab-color-primary)',
                     cursor: 'grab',
                 }, data: `QUERY("${namedQuery.Name}")`, "data-name": "column", icon: "drag" },
-                React.createElement(Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
-            React.createElement(Flex, { alignItems: "start", style: {
+                React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start" }, namedQuery.Name)),
+            React.createElement(rebass_1.Flex, { alignItems: "start", style: {
                     padding: 5,
                 } }, showColumnIds
                 ? namedQuery.BooleanExpression
@@ -123,9 +124,9 @@ export function ExpressionEditor(props) {
     const saveAsNamedQueryElement = allowSaveNamedQuery &&
         props.api.internalApi
             .getModuleService()
-            .getModuleById(NamedQueryModuleId)
-            .isModuleEditable() && (React.createElement(Flex, { flexDirection: "row", mb: 2, fontSize: 3 },
-        React.createElement(CheckBox, { checked: !!namedQuery, onChange: (checked) => {
+            .getModuleById(ModuleConstants_1.NamedQueryModuleId)
+            .isModuleEditable() && (React.createElement(rebass_1.Flex, { flexDirection: "row", mb: 2, fontSize: 3 },
+        React.createElement(CheckBox_1.CheckBox, { checked: !!namedQuery, onChange: (checked) => {
                 if (checked) {
                     setNamedQuery({
                         Name: '',
@@ -136,38 +137,38 @@ export function ExpressionEditor(props) {
                     setNamedQuery(false);
                 }
             }, mr: 2, style: { alignItems: 'center' } }, "Save as new Named Query"),
-        namedQuery ? (React.createElement(AdaptableInput, { style: { flex: 1 }, onChange: (event) => {
+        namedQuery ? (React.createElement(AdaptableInput_1.default, { style: { flex: 1 }, onChange: (event) => {
                 const { target: { value }, } = event;
                 setNamedQuery({
                     Name: value,
                     BooleanExpression: expressionText,
                 });
             } })) : null));
-    const editorElement = (React.createElement(Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
-        React.createElement(Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
+    const editorElement = (React.createElement(rebass_1.Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
+        React.createElement(rebass_1.Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                 if (event.target.tagName === 'TEXTAREA') {
                     textAreaRef.current = event.target;
                 }
             } },
-            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" },
+            React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
+                React.createElement(rebass_1.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_1.default.IsNotNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && (React.createElement(ExpressionFunctionDocumentation_1.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),
-                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
-                        React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                    StringExtensions_1.default.IsNullOrEmpty(expressionText === null || expressionText === void 0 ? void 0 : expressionText.trim()) && renderQueryHints(type),
+                    showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
+                        React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
                         "See ",
-                        StringExtensions.CapitaliseFirstLetter(type),
+                        StringExtensions_1.default.CapitaliseFirstLetter(type),
                         " Query documentation for more details and examples")),
-                    React.createElement(Box, { flex: 1 }),
+                    React.createElement(rebass_1.Box, { flex: 1 }),
                     showNamedQueryStuff && saveAsNamedQueryElement),
-                React.createElement(Box, { className: `${baseClassName}__column-picker`, "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, pr: 2 },
-                    ArrayExtensions.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(Flex, { flexDirection: "row", alignItems: "start", p: 1, mt: 2, backgroundColor: "primarylight" },
-                        React.createElement(Radio, { checked: !showNamedQueries, onChange: (checked) => setShowNamedQueries(!checked), style: { marginRight: 10 } }, "Columns"),
-                        React.createElement(Radio, { checked: showNamedQueries, onChange: (checked) => setShowNamedQueries(checked), style: { marginLeft: 10, whiteSpace: 'nowrap' } }, "Named Queries"))),
+                React.createElement(rebass_1.Box, { className: `${baseClassName}__column-picker`, "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, pr: 2 },
+                    ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", p: 1, mt: 2, backgroundColor: "primarylight" },
+                        React.createElement(Radio_1.default, { checked: !showNamedQueries, onChange: (checked) => setShowNamedQueries(!checked), style: { marginRight: 10 } }, "Columns"),
+                        React.createElement(Radio_1.default, { checked: showNamedQueries, onChange: (checked) => setShowNamedQueries(checked), style: { marginLeft: 10, whiteSpace: 'nowrap' } }, "Named Queries"))),
                     showNamedQueries ? React.createElement("div", null, namedQueries) : React.createElement("div", null, dataTableEditor))))));
-    const queryBuilderElement = (React.createElement(QueryBuilder, { module: module, query: expressionText, onChange: (query) => {
+    const queryBuilderElement = (React.createElement(QueryBuilder_1.QueryBuilder, { module: module, query: expressionText, onChange: (query) => {
             setExpressionText(query);
             props.onChange(query);
         }, getColumns: (type) => {
@@ -194,31 +195,32 @@ export function ExpressionEditor(props) {
         } }));
     const showQueryBuilder = (_b = props.showQueryBuilder) !== null && _b !== void 0 ? _b : false;
     const showExpressionEditor = (_c = props.showExpressionEditor) !== null && _c !== void 0 ? _c : true;
-    return (React.createElement(ExpressionEditorContext.Provider, { value: {
+    return (React.createElement(EditorContext_1.ExpressionEditorContext.Provider, { value: {
             selectedFunction,
             setSelectedFunction,
             textAreaRef,
         } }, (() => {
         switch (true) {
             case showQueryBuilder && showExpressionEditor:
-                return (React.createElement(Tabs, { mb: 2, p: 2, minHeight: 0, flex: 1 },
-                    React.createElement(Tabs.Tab, { value: "editor" }, "Expression Editor"),
-                    React.createElement(Tabs.Tab, { value: "ui" }, "Query Builder"),
-                    React.createElement(Tabs.Content, null, editorElement),
-                    React.createElement(Tabs.Content, null,
-                        React.createElement(Flex, { flexDirection: "column", height: "100%" },
+                return (React.createElement(Tabs_1.Tabs, { mb: 2, p: 2, minHeight: 0, flex: 1 },
+                    React.createElement(Tabs_1.Tabs.Tab, { value: "editor" }, "Expression Editor"),
+                    React.createElement(Tabs_1.Tabs.Tab, { value: "ui" }, "Query Builder"),
+                    React.createElement(Tabs_1.Tabs.Content, null, editorElement),
+                    React.createElement(Tabs_1.Tabs.Content, null,
+                        React.createElement(rebass_1.Flex, { flexDirection: "column", height: "100%" },
                             queryBuilderElement,
-                            React.createElement(Box, { flex: 1 }),
+                            React.createElement(rebass_1.Box, { flex: 1 }),
                             showNamedQueryStuff && saveAsNamedQueryElement))));
             case showQueryBuilder:
-                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, queryBuilderElement));
+                return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" }, queryBuilderElement));
             case showExpressionEditor:
-                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, editorElement));
+                return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" }, editorElement));
             default:
                 return null;
         }
     })()));
 }
+exports.ExpressionEditor = ExpressionEditor;
 const renderQueryHints = (type) => {
     const examples = [];
     if (type === 'observable') {
@@ -259,29 +261,29 @@ const renderQueryHints = (type) => {
             description: "The cumulative sum of all 'PnL' columns in the order given by the 'TradeDate' column",
         });
     }
-    return examples.length ? (React.createElement(Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
+    return examples.length ? (React.createElement(rebass_1.Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
             background: 'var(--ab-color-primary)',
             borderRadius: 'var(--ab__border-radius)',
         } },
-        React.createElement(Box, null,
-            React.createElement(Text, { marginBottom: 2 },
+        React.createElement(rebass_1.Box, null,
+            React.createElement(rebass_1.Text, { marginBottom: 2 },
                 React.createElement("b", null, "Examples"),
                 " (click on each to see its explanation):"),
             examples.map((example, index) => (React.createElement("details", { key: index, style: { marginBottom: 'var(--ab-space-2)' } },
-                React.createElement(Flex, { style: {
+                React.createElement(rebass_1.Flex, { style: {
                         borderRadius: 'var(--ab__border-radius)',
                     }, marginRight: 2, marginBottom: 1, color: 'text-on-secondary', fontSize: 'var( --ab-font-size-2)', alignItems: "center", as: "summary" },
-                    React.createElement(CodeBlock, null,
+                    React.createElement(CodeBlock_1.CodeBlock, null,
                         " ",
                         example.code)),
-                React.createElement(Text, { fontSize: 2, marginLeft: 3, style: { fontStyle: 'italic' } }, example.description))))))) : null;
+                React.createElement(rebass_1.Text, { fontSize: 2, marginLeft: 3, style: { fontStyle: 'italic' } }, example.description))))))) : null;
 };
 const queryDocumentationLinks = {
-    boolean: BooleanQueryDocsLink,
-    scalar: ScalarQueryDocsLink,
-    observable: ObservableQueryDocsLink,
-    aggregatedBoolean: AggregatedBooleanQueryDocsLink,
-    aggregatedScalar: AggregatedScalarQueryDocsLink,
-    cumulativeAggregatedScalar: CumulativeAggregatedScalarQueryDocsLink,
-    quantileAggregatedScalar: QuantileAggregatedScalarQueryDocsLink,
+    boolean: DocumentationLinkConstants_1.BooleanQueryDocsLink,
+    scalar: DocumentationLinkConstants_1.ScalarQueryDocsLink,
+    observable: DocumentationLinkConstants_1.ObservableQueryDocsLink,
+    aggregatedBoolean: DocumentationLinkConstants_1.AggregatedBooleanQueryDocsLink,
+    aggregatedScalar: DocumentationLinkConstants_1.AggregatedScalarQueryDocsLink,
+    cumulativeAggregatedScalar: DocumentationLinkConstants_1.CumulativeAggregatedScalarQueryDocsLink,
+    quantileAggregatedScalar: DocumentationLinkConstants_1.QuantileAggregatedScalarQueryDocsLink,
 };

package/src/components/FieldWrap/index.js

@@ -1,11 +1,14 @@
-import * as React from 'react';
-import { 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 FieldWrap = (props) => {
-    return React.createElement(Flex, Object.assign({}, props, { className: join(props.className, 'ab-FieldWrap') }));
+    return React.createElement(rebass_1.Flex, Object.assign({}, props, { className: (0, join_1.default)(props.className, 'ab-FieldWrap') }));
 };
 FieldWrap.defaultProps = {
     flexDirection: 'row',
     alignItems: 'center',
 };
-export default FieldWrap;
+exports.default = FieldWrap;

package/src/components/FileDroppable/FileDroppableState.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/FileDroppable/index.js

@@ -1,13 +1,16 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Flex, Box } from 'rebass';
-import { useReducer, useRef } from 'react';
-import join from '../../components/utils/join';
-import contains from '../../components/utils/contains';
-import SimpleButton from '../SimpleButton';
-import { Icon } from '../icons';
-import HelpBlock from '../HelpBlock';
-import reducer, { ActionTypes } from './reducer';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readJSONFile = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const react_1 = require("react");
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const contains_1 = tslib_1.__importDefault(require("../../components/utils/contains"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const icons_1 = require("../icons");
+const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
+const reducer_1 = tslib_1.__importStar(require("./reducer"));
 const initialState = {
     dragOver: false,
     message: null,
@@ -16,7 +19,7 @@ const preventEventPropagation = (e) => {
     e.preventDefault();
     e.stopPropagation();
 };
-export const readJSONFile = async (file, toJSON) => {
+const readJSONFile = async (file, toJSON) => {
     const reader = new FileReader();
     return new Promise((resolve, reject) => {
         reader.onload = function (e) {
@@ -35,23 +38,24 @@ export const readJSONFile = async (file, toJSON) => {
         reader.readAsText(file);
     });
 };
+exports.readJSONFile = readJSONFile;
 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 [state, dispatch] = useReducer(reducer, initialState);
+    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(icons_1.Icon, { name: "paperclip", size: 48 }), value } = props, domProps = tslib_1.__rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon", "value"]);
+    const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, initialState);
     const onDragEnter = (e) => {
         dispatch({
-            type: ActionTypes.DRAG_OVER,
+            type: reducer_1.ActionTypes.DRAG_OVER,
         });
     };
     const onDragLeave = (event) => {
         preventEventPropagation(event);
         if (domRef.current != event.target &&
-            contains(domRef.current, event.target)) {
+            (0, contains_1.default)(domRef.current, event.target)) {
             return;
         }
         dispatch({
-            type: ActionTypes.DRAG_OUT,
+            type: reducer_1.ActionTypes.DRAG_OUT,
         });
     };
     const onDrop = async (e) => {
@@ -69,11 +73,11 @@ const FileDroppable = (props) => {
         if (file) {
             let json;
             try {
-                json = await (props.readFile || readJSONFile)(file, props.toJSON);
+                json = await (props.readFile || exports.readJSONFile)(file, props.toJSON);
                 dispatch({
-                    type: ActionTypes.DROP_SUCCES,
+                    type: reducer_1.ActionTypes.DROP_SUCCES,
                     payload: {
-                        message: (React.createElement(Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
+                        message: (React.createElement(rebass_1.Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
                     },
                 });
                 requestAnimationFrame(() => {
@@ -86,17 +90,17 @@ const FileDroppable = (props) => {
             }
             catch (err) {
                 dispatch({
-                    type: ActionTypes.SET_INVALID_FILE,
+                    type: reducer_1.ActionTypes.SET_INVALID_FILE,
                     payload: {
-                        message: React.createElement(Box, null, 'The file is not a valid JSON file! Please try again!'),
+                        message: React.createElement(rebass_1.Box, null, 'The file is not a valid JSON file! Please try again!'),
                     },
                 });
             }
         }
     };
-    const domRef = useRef();
+    const domRef = (0, react_1.useRef)();
     let form = (React.createElement("form", { onSubmit: preventEventPropagation },
-        React.createElement(SimpleButton, { style: { cursor: 'pointer' }, variant: "outlined" },
+        React.createElement(SimpleButton_1.default, { 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: {
                     opacity: 0,
@@ -111,15 +115,15 @@ 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(rebass_1.Flex, Object.assign({}, domProps, { flexDirection: "column", className: (0, join_1.default)(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 },
-                React.createElement(HelpBlock, null,
+        helpText || icon ? (React.createElement(rebass_1.Flex, { flexDirection: "column" },
+            helpText ? (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "center", margin: 2 },
+                React.createElement(HelpBlock_1.default, null,
                     React.createElement("b", null, helpText)))) : null,
-            icon ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
+            icon ? (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
         msg,
         form));
 };
 FileDroppable.defaultProps = {};
-export default FileDroppable;
+exports.default = FileDroppable;

package/src/components/FileDroppable/reducer.js

@@ -1,10 +1,13 @@
-export var ActionTypes;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionTypes = void 0;
+var ActionTypes;
 (function (ActionTypes) {
     ActionTypes["DRAG_OVER"] = "DRAG_OVER";
     ActionTypes["DRAG_OUT"] = "DRAG_OUT";
     ActionTypes["SET_INVALID_FILE"] = "SET_INVALID_FILE";
     ActionTypes["DROP_SUCCES"] = "DROP_SUCCES";
-})(ActionTypes || (ActionTypes = {}));
+})(ActionTypes = exports.ActionTypes || (exports.ActionTypes = {}));
 const reducer = (state, action) => {
     if (action.type === ActionTypes.DRAG_OVER) {
         return Object.assign(Object.assign({}, state), { dragOver: true });
@@ -20,4 +23,4 @@ const reducer = (state, action) => {
     }
     return state;
 };
-export default reducer;
+exports.default = reducer;

package/src/components/FlexWithFooter.js

@@ -1,6 +1,8 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Flex } from 'rebass';
+"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 defaultStyle = {
     height: '100%',
     maxHeight: '90vh',
@@ -8,10 +10,10 @@ const defaultStyle = {
     maxWidth: 800,
 };
 const FlexWithFooter = (props) => {
-    const { footer, footerProps, children, style } = props, domProps = __rest(props, ["footer", "footerProps", "children", "style"]);
-    return (React.createElement(Flex, Object.assign({ flexDirection: "column" }, domProps, { style: Object.assign(Object.assign({}, defaultStyle), style) }),
-        React.createElement(Flex, { flexDirection: "column", padding: 0, flex: 1 },
-            React.createElement(Flex, { flexDirection: "column", flex: 1 }, children)),
-        footer ? (React.createElement(Flex, Object.assign({ padding: 2, backgroundColor: "primary" }, footerProps), footer)) : null));
+    const { footer, footerProps, children, style } = props, domProps = tslib_1.__rest(props, ["footer", "footerProps", "children", "style"]);
+    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column" }, domProps, { style: Object.assign(Object.assign({}, defaultStyle), style) }),
+        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 0, flex: 1 },
+            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1 }, children)),
+        footer ? (React.createElement(rebass_1.Flex, Object.assign({ padding: 2, backgroundColor: "primary" }, footerProps), footer)) : null));
 };
-export default FlexWithFooter;
+exports.default = FlexWithFooter;

package/src/components/FormLayout/index.js

@@ -1,10 +1,13 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Box } from 'rebass';
-import { createContext, useContext } from 'react';
-import merge from 'lodash/merge';
-import join from '../utils/join';
-const FormLayoutContext = createContext(null);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormRow = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const react_1 = require("react");
+const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const FormLayoutContext = (0, react_1.createContext)(null);
 const defaultColumns = {
     label: {
         className: 'ab-FormLayout_column--label',
@@ -15,7 +18,7 @@ const defaultColumns = {
 };
 const PLACEHOLDER = React.createElement("div", null);
 const FormLayout = (props) => {
-    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true } = props, boxProps = __rest(props, ["placeholder", "columns", "defaultComponent", "sizes", "gridColumnGap", "gridRowGap", "style", "childrenToColumns"]);
+    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = rebass_1.Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true } = props, boxProps = tslib_1.__rest(props, ["placeholder", "columns", "defaultComponent", "sizes", "gridColumnGap", "gridRowGap", "style", "childrenToColumns"]);
     columns = columns.map((c) => {
         if (typeof c === 'string' || typeof c === 'number') {
             c = {
@@ -23,7 +26,7 @@ const FormLayout = (props) => {
             };
         }
         if (defaultColumns[c.name]) {
-            c = merge({}, defaultColumns[c.name], c);
+            c = (0, merge_1.default)({}, defaultColumns[c.name], c);
         }
         c.component = c.component === undefined ? defaultComponent : c.component;
         return c;
@@ -50,10 +53,10 @@ const FormLayout = (props) => {
             currentRow: 0,
             childrenToColumns,
         } },
-        React.createElement(Box, Object.assign({}, boxProps, { className: join(boxProps.className, 'ab-FormLayout'), style: Object.assign(Object.assign({}, style), formStyle) }))));
+        React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-FormLayout'), style: Object.assign(Object.assign({}, style), formStyle) }))));
 };
-export const FormRow = (props) => {
-    const ctx = useContext(FormLayoutContext);
+const FormRow = (props) => {
+    const ctx = (0, react_1.useContext)(FormLayoutContext);
     const { columns, placeholder, childrenToColumns } = ctx;
     const rowIndex = ctx.currentRow;
     ctx.currentRow++;
@@ -76,4 +79,5 @@ export const FormRow = (props) => {
     });
     return React.createElement(React.Fragment, null, columnValues);
 };
-export default FormLayout;
+exports.FormRow = FormRow;
+exports.default = FormLayout;