@adaptabletools/adaptable 13.0.0-canary.9 → 13.0.1

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.
  *
@@ -51,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,11 +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 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.
  *
@@ -29,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 }))
@@ -39,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();
@@ -47,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
@@ -92,22 +160,5 @@ class AdaptableNumberEditor {
         var _a;
         (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
     }
-    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
-    }
 }
 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/DragAndDropContext/TabList.js

@@ -42,7 +42,7 @@ function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     let currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", backgroundColor: snapshot.isDragging
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", mb: 1, pl: 1, backgroundColor: snapshot.isDragging
             ? 'var(--ab-dashboard-toolbar-drag__background)'
             : 'var(--ab-color-primarylight)', ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
         React.createElement("div", { style: { flex: 1 } }, title),

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -4,10 +4,11 @@ exports.UnusedPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const rebass_1 = require("rebass");
 const DragAndDropContext_1 = require("./DragAndDropContext");
 function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement("div", { className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
-        React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
+    return (React.createElement(rebass_1.Box, { pb: 1, mb: 2, className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
+        React.createElement(rebass_1.Box, { p: 2 },
             React.createElement("b", null, title),
             " (",
             dragItemText,

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/index.js

@@ -31,6 +31,7 @@ function ExpressionEditor(props) {
     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] = (0, react_1.useState)(null);
     const [expressionText, setExpressionText] = (0, react_1.useState)('');
     const { namedQuery, setNamedQuery } = (0, NamedQueryContext_1.useNamedQueryContext)();
@@ -102,7 +103,7 @@ function ExpressionEditor(props) {
     };
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const dataTableEditor = (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "start", style: { marginTop: 2 } },
+        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,
@@ -157,28 +158,24 @@ function ExpressionEditor(props) {
             setSelectedFunction,
             textAreaRef,
         } },
-        React.createElement("div", { "data-name": "expression-editor", style: Object.assign({ flex: 1, overflow: 'auto', display: 'flex', paddingLeft: 'var(--ab-space-2)' }, props.style) },
+        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(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", style: { fontSize: 'var(--ab-font-size-2)', minHeight: 0, flex: 1 } },
+                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_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_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, style: { fontSize: 'var(--ab-font-size-3)' } },
-                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, style: {
-                                    color: 'var(--ab-color-text-on-add)',
-                                    fill: 'var(--ab-color-text-on-add)',
-                                    background: 'var(--ab-color-action-add)',
-                                }, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                        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_1.default.CapitaliseFirstLetter(type),
                             " Query documentation for more details and examples")),
-                        React.createElement("div", { style: { flex: 1 } }),
+                        React.createElement(rebass_1.Box, { flex: 1 }),
                         allowSaveNamedQuery &&
                             props.api.internalApi
                                 .getModuleService()
@@ -202,13 +199,8 @@ function ExpressionEditor(props) {
                                         BooleanExpression: expressionText,
                                     });
                                 } })) : null))),
-                    React.createElement(rebass_1.Box, { "data-name": "expression-column-picker", pb: 2, paddingLeft: 2, style: {
-                            overflow: 'auto',
-                            minWidth: 220,
-                            height: '100%',
-                            paddingRight: 'var(--ab-space-2)',
-                        } },
-                        ArrayExtensions_1.default.IsNotNullOrEmpty(props.namedQueries) && (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "start", style: { padding: 3, marginTop: 5 }, backgroundColor: "primarylight" },
+                    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)))))));

package/src/components/FormLayout/index.js

@@ -73,7 +73,7 @@ const FormRow = (props) => {
         }
         if (props.as != null || column.component != null) {
             const Cmp = column.component;
-            value = (React.createElement(Cmp, { style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
+            value = (React.createElement(Cmp, { "data-name": props.dataName, style: Object.assign(Object.assign({}, column.style), { gridColumn: columnIndex + 1, gridRow: rowIndex + 1 }), className: column.className }, value));
         }
         return typeof value === 'string' ? value : React.cloneElement(value, { key: columnName });
     });

package/src/components/StylePreview.js

@@ -5,8 +5,9 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const join_1 = tslib_1.__importDefault(require("./utils/join"));
 const StylePreview = (props) => {
     var _a, _b, _c;
-    return (React.createElement(rebass_1.Box, Object.assign({}, props, { padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, (0, StyleHelper_1.toStyle)(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
+    return (React.createElement(rebass_1.Box, Object.assign({}, props, { className: (0, join_1.default)('ab-StylePreview', props.className), padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, (0, StyleHelper_1.toStyle)(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
 };
 exports.StylePreview = StylePreview;

package/src/components/icons/brush.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/brush.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
+exports.default = (props) => (React.createElement(DefaultIcon_1.default, Object.assign({}, props),
+    React.createElement("path", { d: "M6 21q-1.125 0-2.225-.55T2 19q.65 0 1.325-.512Q4 17.975 4 17q0-1.25.875-2.125T7 14q1.25 0 2.125.875T10 17q0 1.65-1.175 2.825Q7.65 21 6 21Zm0-2q.825 0 1.412-.587Q8 17.825 8 17q0-.425-.287-.712Q7.425 16 7 16t-.713.288Q6 16.575 6 17q0 .575-.137 1.05-.138.475-.363.9.125.05.25.05H6Zm5.75-4L9 12.25l8.95-8.95q.275-.275.688-.288.412-.012.712.288l1.35 1.35q.3.3.3.7 0 .4-.3.7ZM7 17Z" })));

package/src/components/icons/index.js

@@ -132,6 +132,7 @@ const track_changes_1 = tslib_1.__importDefault(require("./track-changes"));
 const menu_1 = tslib_1.__importDefault(require("./menu"));
 const statusbar_1 = tslib_1.__importDefault(require("./statusbar"));
 const add_row_1 = tslib_1.__importDefault(require("./add-row"));
+const brush_1 = tslib_1.__importDefault(require("./brush"));
 const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const quote_1 = tslib_1.__importDefault(require("./quote"));
 const news_1 = tslib_1.__importDefault(require("./news"));
@@ -154,6 +155,7 @@ const allIcons = {
     call: call_1.default,
     instrument: instrument_1.default,
     news: news_1.default,
+    brush: brush_1.default,
     'data-set': data_set_1.default,
     export: export_1.default,
     campaign: campaign_1.default,