@adaptabletools/adaptable 13.0.0-canary.2 → 13.0.0-canary.21

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -1,13 +1,88 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableDateEditor = void 0;
+exports.AdaptableDateEditor = exports.ReactAdaptableDateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableDateEditor_1 = require("./InternalAdaptableDateEditor");
 const core_1 = require("@ag-grid-community/core");
 const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
+const react_1 = require("react");
+function shouldClearExistingValue(params) {
+    return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+}
+function getStartValue(params) {
+    return shouldClearExistingValue(params) ? '' : params.value;
+}
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+const defaultDateValueParser = ({ newValue, oldValue, defaultParser }) => {
+    if ((typeof oldValue === 'string' || oldValue == null) && defaultParser) {
+        return defaultParser(newValue);
+    }
+    return newValue;
+};
+exports.ReactAdaptableDateEditor = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
+    const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
+    const valueRef = (0, react_1.useRef)(initialValue);
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultDateValueParser;
+    const adaptable = props.api.__adaptable;
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return valueRef.current;
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: initialValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
+            const invalid = isNaN(+value);
+            if (valueParser) {
+                const params = Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value, defaultParser: (value) => {
+                        var _a, _b;
+                        const Pattern = (_b = (_a = adaptable.adaptableOptions.userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.dateInputOptions) === null || _b === void 0 ? void 0 : _b.dateFormat;
+                        if (!Pattern) {
+                            return value;
+                        }
+                        return (0, FormatHelper_1.DateFormatter)(value, {
+                            Pattern,
+                        });
+                    } });
+                valueRef.current = valueParser(params);
+            }
+            else {
+                valueRef.current = invalid ? null : value;
+            }
+            if (!invalid) {
+                requestAnimationFrame(() => {
+                    props.stopEditing();
+                });
+            }
+        }, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, onStopEdit: (keyboardEventKey) => {
+            if (keyboardEventKey === 'Escape') {
+                props.api.stopEditing(true);
+            }
+            else {
+                props.stopEditing();
+            }
+        }, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    return React.createElement("div", { style: style }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable));
+});
 /**
  * Used by default for all `abColDefDate` columns.
  *
@@ -33,26 +108,20 @@ const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
  */
 class AdaptableDateEditor {
     constructor() {
-        this.valueParser = ({ newValue, oldValue, defaultParser }) => {
-            if ((typeof oldValue === 'string' || oldValue == null) && defaultParser) {
-                return defaultParser(newValue);
-            }
-            return newValue;
-        };
+        this.valueParser = defaultDateValueParser;
     }
     init(params) {
-        this.value = this.shouldClearExistingValue(params) ? '' : params.value;
+        this.value = getStartValue(params);
         const { valueParser } = params.column.getColDef();
         this.params = params;
         if (typeof valueParser === 'function') {
             this.valueParser = valueParser;
         }
         this.el = document.createElement('div');
-        this.el.style.position = 'absolute';
-        this.el.style.top = '0px';
-        this.el.style.left = '0px';
-        this.el.style.right = '0px';
-        this.el.style.bottom = '0px';
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
     }
     /* Component Editor Lifecycle methods */
     // gets called once when grid ready to insert the element
@@ -76,7 +145,7 @@ class AdaptableDateEditor {
     afterGuiAttached() {
         var _a;
         const adaptable = this.getAdaptableInstance(this.params);
-        const defaultValue = this.shouldClearExistingValue(this.params) ? '' : this.params.value;
+        const defaultValue = shouldClearExistingValue(this.params) ? '' : this.params.value;
         const editorElement = (React.createElement(InternalAdaptableDateEditor_1.InternalAdaptableDateEditor, { defaultValue: defaultValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
                 const invalid = isNaN(+value);
                 if (this.valueParser) {
@@ -111,13 +180,11 @@ class AdaptableDateEditor {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
-        (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
     }
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.el);
-    }
-    shouldClearExistingValue(params) {
-        return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
 exports.AdaptableDateEditor = AdaptableDateEditor;

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -22,7 +22,7 @@ const inputStyle = {
     width: '100%',
     border: 'none',
 };
-exports.InternalAdaptableNumberEditor = React.forwardRef((props, ref) => {
+exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdaptableNumberEditorFn(props, ref) {
     var _a;
     const inputRef = React.useRef(null);
     const focus = () => {

package/src/agGrid/editors/AdaptableNumberEditor/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ICellEditorComp, ICellEditorParams } from '@ag-grid-community/core';
 /**
  * Adaptable number editor parameters extending the AG Grid {@link ICellEditorParams}.
@@ -14,6 +15,7 @@ interface AdaptableNumberCellEditorParams extends ICellEditorParams {
      */
     emptyValue: string;
 }
+export declare const ReactAdaptableNumberEditor: React.ForwardRefExoticComponent<AdaptableNumberCellEditorParams & React.RefAttributes<unknown>>;
 /**
  * Used by default for all `abColDefNumber` columns.
  *
@@ -42,6 +44,7 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     private params;
     private editor;
     private valueParser;
+    private unmountReactRoot?;
     init(params: AdaptableNumberCellEditorParams): void;
     getGui(): HTMLDivElement;
     getValue(): any;
@@ -50,8 +53,5 @@ export declare class AdaptableNumberEditor implements ICellEditorComp {
     afterGuiAttached(): void;
     destroy(): void;
     private onValueChange;
-    private getStartValue;
-    private shouldClearExistingValue;
-    private isValidChar;
 }
 export {};

package/src/agGrid/editors/AdaptableNumberEditor/index.js

@@ -1,12 +1,82 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableNumberEditor = void 0;
+exports.AdaptableNumberEditor = exports.ReactAdaptableNumberEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const renderWithAdaptableContext_1 = require("../../../View/renderWithAdaptableContext");
 const InternalAdaptableNumberEditor_1 = require("./InternalAdaptableNumberEditor");
 const core_1 = require("@ag-grid-community/core");
+const react_1 = require("react");
+function shouldClearExistingValue(params) {
+    return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
+}
+function isValidChar(char) {
+    // allow only digits
+    return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char);
+    // we do NOT allow key shortcuts for starting non-digits (minus sign, decimal separators) as the input[number] handling is very buggy and we would open a can of worms
+}
+function getStartValue(params) {
+    if (shouldClearExistingValue(params)) {
+        return '';
+    }
+    if (params.charPress && isValidChar(params.charPress)) {
+        return params.charPress;
+    }
+    return params.value;
+}
+const defaultValueParser = ({ newValue, oldValue: _ }) => {
+    return newValue;
+};
+const style = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    right: '0px',
+    bottom: '0px',
+};
+exports.ReactAdaptableNumberEditor = (0, react_1.forwardRef)((props, ref) => {
+    var _a, _b;
+    const [initialValue] = (0, react_1.useState)(() => getStartValue(props));
+    const valueRef = (0, react_1.useRef)(initialValue);
+    const columnId = props.column.getColId();
+    const adaptable = props.api.__adaptable;
+    const colValueParser = props.column.getColDef().valueParser;
+    const valueParser = typeof colValueParser === 'function' ? colValueParser : defaultValueParser;
+    function onValueChange(value) {
+        value = valueParser
+            ? valueParser(Object.assign(Object.assign({}, props), { oldValue: props.value, newValue: value }))
+            : value;
+        valueRef.current = value;
+    }
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            focusIn() {
+                var _a;
+                (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            // the final value to send to the grid, on completion of editing
+            getValue() {
+                return valueRef.current;
+            },
+        };
+    });
+    const editorElement = (React.createElement(InternalAdaptableNumberEditor_1.InternalAdaptableNumberEditor, { defaultValue: initialValue, showClearButton: (_a = props.showClearButton) !== null && _a !== void 0 ? _a : true, emptyValue: (_b = props.emptyValue) !== null && _b !== void 0 ? _b : '', onValueChange: onValueChange, ref: (editor) => {
+            editorRef.current = editor;
+            editor === null || editor === void 0 ? void 0 : editor.focus();
+        } }));
+    function onKeyDown(keyDownEvent) {
+        adaptable._emit('CellEditorKeyDown', {
+            keyDownEvent,
+            cellValue: valueRef.current,
+            columnId,
+            updateValueCallback: (updatedValue) => {
+                editorRef.current.setValue(updatedValue);
+            },
+        });
+    }
+    return (React.createElement("div", { style: style, onKeyDown: onKeyDown }, (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable)));
+});
 /**
  * Used by default for all `abColDefNumber` columns.
  *
@@ -30,9 +100,7 @@ const core_1 = require("@ag-grid-community/core");
  */
 class AdaptableNumberEditor {
     constructor() {
-        this.valueParser = ({ newValue, oldValue: _ }) => {
-            return newValue;
-        };
+        this.valueParser = defaultValueParser;
         this.onValueChange = (value) => {
             this.value = this.valueParser
                 ? this.valueParser(Object.assign(Object.assign({}, this.params), { oldValue: this.params.value, newValue: value }))
@@ -40,7 +108,7 @@ class AdaptableNumberEditor {
         };
     }
     init(params) {
-        this.value = this.getStartValue(params);
+        this.value = getStartValue(params);
         this.params = params;
         this.columnId = params.column.getColId();
         const { valueParser } = params.column.getColDef();
@@ -48,11 +116,10 @@ class AdaptableNumberEditor {
             this.valueParser = valueParser;
         }
         this.el = document.createElement('div');
-        this.el.style.position = 'absolute';
-        this.el.style.top = '0px';
-        this.el.style.left = '0px';
-        this.el.style.right = '0px';
-        this.el.style.bottom = '0px';
+        Object.keys(style).forEach((key) => {
+            //@ts-ignore
+            this.el.style[key] = style[key];
+        });
     }
     /* Component Editor Lifecycle methods */
     // gets called once when grid ready to insert the element
@@ -77,7 +144,7 @@ class AdaptableNumberEditor {
                 this.editor = editor;
                 editor === null || editor === void 0 ? void 0 : editor.focus();
             } }));
-        (0, react_dom_1.render)((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
+        this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(editorElement, adaptable), this.el);
         this.getGui().addEventListener('keydown', (keyDownEvent) => {
             adaptable._emit('CellEditorKeyDown', {
                 keyDownEvent,
@@ -90,24 +157,8 @@ class AdaptableNumberEditor {
         });
     }
     destroy() {
-        (0, react_dom_1.unmountComponentAtNode)(this.el);
-    }
-    getStartValue(params) {
-        if (this.shouldClearExistingValue(params)) {
-            return '';
-        }
-        if (params.charPress && this.isValidChar(params.charPress)) {
-            return params.charPress;
-        }
-        return params.value;
-    }
-    shouldClearExistingValue(params) {
-        return params.eventKey === core_1.KeyCode.BACKSPACE || params.eventKey === core_1.KeyCode.DELETE;
-    }
-    isValidChar(char) {
-        // allow only digits
-        return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char);
-        // we do NOT allow key shortcuts for starting non-digits (minus sign, decimal separators) as the input[number] handling is very buggy and we would open a can of worms
+        var _a;
+        (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
 exports.AdaptableNumberEditor = AdaptableNumberEditor;

package/src/agGrid/weightedAverage.js

@@ -79,22 +79,30 @@ const cellSummaryWeightedAverage = ({ numericColumns, selectedCellInfo, adaptabl
                 sumPrimaryValues += weightedGridCell.rawValue * gridCell.normalisedValue;
             }
         });
-        if (isValid) {
-            const formatColumn = adaptableApi.formatColumnApi.getFormatColumnForColumnId(columnId);
-            if (formatColumn && formatColumn.DisplayFormat) {
-                const options = formatColumn.DisplayFormat
-                    .Options;
-                if (options) {
-                    return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
-                }
+        if (!isValid) {
+            return '';
+        }
+        const abColumn = adaptableApi.columnApi.getColumnFromId(columnId);
+        if (!abColumn) {
+            return '';
+        }
+        const activeFormatColumnsWithDisplayFormat = adaptableApi.formatColumnApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+        if (activeFormatColumnsWithDisplayFormat.length === 1 &&
+            activeFormatColumnsWithDisplayFormat[0].DisplayFormat.Formatter === 'NumberFormatter') {
+            // there only one FormatColumn on this column, so we will use it to format the aggregated value
+            const [singleActiveFormatColumnsWithDisplayFormat] = activeFormatColumnsWithDisplayFormat;
+            const options = singleActiveFormatColumnsWithDisplayFormat
+                .DisplayFormat.Options;
+            if (options) {
+                return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, options);
             }
+        }
+        else {
+            // there are multiple (possibly conflicting) FormatColumns for this column, we cannot know which to use
             return FormatHelper_1.default.NumberFormatter(sumPrimaryValues / sumWeightedValue, {
                 FractionDigits: 2,
             });
         }
-        else {
-            return '';
-        }
     }
 };
 exports.cellSummaryWeightedAverage = cellSummaryWeightedAverage;

package/src/components/CheckBox/index.js

@@ -31,7 +31,12 @@ const CheckBox = (_a) => {
             ? 'unchecked'
             : 'indeterminate';
     const gap = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
-    children = children ? React.createElement("div", { style: { display: 'inline-block' } }, children) : null;
+    children = children ? (React.createElement("div", { style: {
+            display: 'inline-block',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        } }, children)) : null;
     const before = childrenPosition === 'start' ? children : null;
     const beforeGap = childrenPosition === 'start' && children ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
@@ -46,7 +51,7 @@ const CheckBox = (_a) => {
             opacity: 0,
             cursor: 'pointer',
         }, onChange: onInputChange }));
-    return (React.createElement(rebass_1.Box, Object.assign({ my: 2 }, props, { className: (0, join_1.default)('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: Object.assign({ display: 'inline-flex', flexFlow: 'row', alignItems: 'center', cursor: 'pointer', position: 'relative' }, props.style), as: as }),
+    return (React.createElement(rebass_1.Box, Object.assign({ my: 2 }, props, { className: (0, join_1.default)('ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as }),
         before,
         beforeGap,
         input,

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

@@ -15,4 +15,4 @@ export declare type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'def
     showWeekNumber?: boolean;
     showOutsideDays?: boolean;
 };
-export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "showClearButton" | "onHide" | "showOutsideDays" | "showWeekNumber" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "showOutsideDays" | "showWeekNumber" | "onHide" | "showClearButton" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -7,7 +7,7 @@ interface BaseEditorInputProps {
     onChange: (value: string) => void;
     disabled?: boolean;
     onSelectedFunctionChange: (expressionFunction: ExpressionFunction | null) => void;
-    expressionFunctions: ExpressionFunctionMap;
+    expressionFunctions: ExpressionFunctionMap<string>;
     editorButtons: OperatorEditorButton[];
     testData: any;
     placeholder?: string;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -19,6 +19,7 @@ const DocumentationLinkConstants_1 = require("../../Utilities/Constants/Document
 const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const icons_1 = require("../icons");
 const AdaptableContext_1 = require("../../View/AdaptableContext");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const VarEditorButton = () => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -39,6 +40,7 @@ function BaseEditorInput(props) {
     let evaluationError;
     let expressionError;
     let selectedFunctionName;
+    const baseClassName = 'ab-ExpressionEditorInput';
     const buildParserExceptionMessage = (e) => {
         const parserExceptionSummary = 'Invalid expression is not parsable';
         if (!e.message) {
@@ -101,55 +103,34 @@ function BaseEditorInput(props) {
             props.onSelectedFunctionChange(selectedFunctionName ? expressionFunctions[selectedFunctionName] : null);
         }
     }, [selectedFunctionName]);
-    const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { "data-name": "expression-dropdown-list", flexDirection: "column", p: 2, style: {
-                fontSize: 'var(--ab-font-size-2)',
-                border: '1px solid var(--ab-color-primarydark)',
-                borderRadius: 'var(--ab__border-radius)',
-                background: 'var(--ab-color-primarylight)',
-                zIndex: 1000,
-                maxHeight: 300,
-                overflow: 'auto',
-            } }, Object.keys(expressionFunctions)
+    const functionsDropdown = (React.createElement(OverlayTrigger_1.default, { render: () => (React.createElement(rebass_1.Flex, { className: `${baseClassName}__dropdown-functions-list`, "data-name": "expression-dropdown-fuctions-list", flexDirection: "column", p: 2 }, Object.keys(expressionFunctions)
             .filter((functionName) => !expressionFunctions[functionName].isHiddenFromMenu)
             .map((functionName) => functionName === 'VAR' ? (React.createElement(VarEditorButton, { key: functionName })) : (React.createElement(EditorButton_1.default, { data: `${functionName}()`, key: functionName, mr: 1 }, functionName))))), showEvent: "focus", hideEvent: "blur" },
         React.createElement(SimpleButton_1.default, { "data-name": "expression-dropdown", icon: "arrow-down", iconPosition: 'end', mr: 1 },
-            React.createElement(rebass_1.Flex, { marginRight: 1, style: { fontSize: 'var(--ab-font-size-2)' } },
-                React.createElement(icons_1.Icon, { name: 'equation', style: { marginTop: 0 } })))));
+            React.createElement(rebass_1.Flex, { marginRight: 1, fontSize: 2 },
+                React.createElement(icons_1.Icon, { name: "equation" })))));
     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))));
     const showDocumentationLink = props.api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { "data-name": "expression-toolbar", py: 2, mb: 2, flexWrap: "wrap", style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-                '--ab-overlay-horizontal-align': 'left',
-                width: '100%',
-                marginTop: 5,
-            } },
+        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" },
                 functionsDropdown,
                 operatorButtons),
             showDocumentationLink && (React.createElement(rebass_1.Flex, { alignItems: "flex-start" },
-                React.createElement(ButtonInfo_1.ButtonInfo, { style: {
-                        color: 'var(--ab-color-text-on-add)',
-                        fill: 'var(--ab-color-text-on-add)',
-                        background: 'var(--ab-color-action-add)',
-                        marginRight: 5,
-                    }, 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: "ab-ExpressionEditor__textarea", autoFocus: true, spellCheck: "false", onChange: (event) => {
+                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: Object.assign({ width: '100%', minHeight: 100, fontFamily: 'monospace', resize: 'vertical', fontSize: '1rem', padding: 'var(--ab-space-2)' }, style) }),
-        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
+            }, style: style }),
+        props.isFullExpression !== true && (React.createElement(HelpBlock_1.default, { mt: 2, mb: 2, p: 2, fontSize: 3 },
             "This Query must resolve to a ",
             React.createElement("b", null, "boolean "),
             "(i.e. true / false) value")),
-        expressionError && (React.createElement(ErrorBox_1.default, { style: { whiteSpace: 'pre-wrap' }, mt: 2 }, expressionError)),
+        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, { "data-name": "expression-editor-feedback", mt: 2, p: 2, style: {
-                background: 'var(--ab-color-primarylight)',
-                borderRadius: 'var(--ab__border-radius)',
-            } },
+        !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)))))));

package/src/components/ExpressionEditor/EditorInput.js

@@ -13,7 +13,7 @@ const editorButtonsCumulativeAggregatedScalar_1 = require("./editorButtonsCumula
 function EditorInput(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
-        .getModuleExpressionFunctions(props.module);
+        .getModuleExpressionFunctionsMap(props.module);
     const getFilteredAggregatedExpressionFunctions = (availableAggregatedExpressionFunctions, type) => {
         const sourceExpressionFunctions = type === 'aggregatedScalar'
             ? aggregatedScalarExpressionFunctions_1.aggregatedExpressionFunctions

package/src/components/ExpressionEditor/EditorInputWithWhereClause.js

@@ -15,7 +15,7 @@ const editorButtonsAggregatedBoolean_1 = require("./editorButtonsAggregatedBoole
 function EditorInputWithWhereClause(props) {
     const moduleExpressionFunctions = props.api.internalApi
         .getQueryLanguageService()
-        .getModuleExpressionFunctions(props.module);
+        .getModuleExpressionFunctionsMap(props.module);
     const reactiveExpressionFns = props.type === 'observable'
         ? moduleExpressionFunctions.observableFunctions
         : moduleExpressionFunctions.aggregatedBooleanFunctions;