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

package/src/View/Components/ExternalRenderer.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalRenderer = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableContext_1 = require("../AdaptableContext");
+exports.ExternalRenderer = (_a) => {
+    var { render, frameworkComponent, componentName = 'N/A' } = _a, rest = tslib_1.__rest(_a, ["render", "frameworkComponent", "componentName"]);
+    const ref = React.useRef();
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const [contentsHTML, setContentsHTML] = React.useState('');
+    React.useLayoutEffect(() => {
+        const node = ref.current;
+        const adaptableApi = adaptable.api;
+        if (render) {
+            const html = render({ visible: true, node, adaptableApi });
+            setContentsHTML(html);
+        }
+        else if (frameworkComponent) {
+            adaptableApi.internalApi.createFrameworkComponent(node, frameworkComponent, 'toolbar');
+        }
+        return () => {
+            if (render) {
+                render({ visible: false, node, adaptableApi });
+            }
+            else if (frameworkComponent) {
+                adaptableApi.internalApi.destroyFrameworkComponent(node, frameworkComponent, componentName);
+            }
+        };
+    }, []);
+    return React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
+};

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -106,12 +106,14 @@ class QuickFilterFormComponent extends React.Component {
             hideEvent = 'blur';
         }
         let showQuickFilterDropdown = true;
-        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterDropdown;
+        let hideQuickFilterDropdownFunction = this.props.api.internalApi.getAdaptableOptions()
+            .filterOptions.hideQuickFilterDropdown;
         if (hideQuickFilterDropdownFunction) {
             showQuickFilterDropdown = !hideQuickFilterDropdownFunction(this.props.currentColumn);
         }
         let showQuickFilterInput = true;
-        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions().filterOptions.hideQuickFilterInput;
+        let hideQuickFilterInputFunction = this.props.api.internalApi.getAdaptableOptions()
+            .filterOptions.hideQuickFilterInput;
         if (hideQuickFilterInputFunction) {
             showQuickFilterInput = !hideQuickFilterInputFunction(this.props.currentColumn);
         }
@@ -178,7 +180,10 @@ class QuickFilterFormComponent extends React.Component {
         }
         return (_a = predicateDef === null || predicateDef === void 0 ? void 0 : predicateDef.inputs) === null || _a === void 0 ? void 0 : _a.map((predicateInput, index) => {
             var _a, _b;
-            return (React.createElement(AdaptableInput_1.default, { key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, autoFocus: index === 0, value: (_b = (_a = filter.Predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), onKeyDownCapture: (e) => {
+            return (React.createElement(AdaptableInput_1.default, { key: index, type: predicateInput.type === 'number' ? 'text' : predicateInput.type, 
+                // autoFocus has to be FALSE because if the input receives focus in the init phase,
+                // it may scroll the ag-grid header viewport into view and de-synchronize it (relative to the content viewport)
+                autoFocus: false, value: (_b = (_a = filter.Predicate.Inputs) === null || _a === void 0 ? void 0 : _a[index]) !== null && _b !== void 0 ? _b : '', onChange: (e) => this.changeColumnPredicateInput(e.target.value, index), onKeyDownCapture: (e) => {
                     if (e.nativeEvent.key === 'Escape') {
                         e.nativeEvent.preventDefault();
                         e.nativeEvent.stopPropagation();

package/src/View/Components/FilterForm/getDefaultColumnFilterPredicate.d.ts

@@ -1,3 +1,3 @@
 import { AdaptableColumn } from '../../../PredefinedConfig/Common/AdaptableColumn';
 import { SystemFilterPredicateId } from '../../../PredefinedConfig/FilterState';
-export declare const getDefaultColumnFilterPredicate: (column: AdaptableColumn, defaultColumnFilter: "After" | "Before" | "Blanks" | "NonBlanks" | "Equals" | "NotEquals" | "GreaterThan" | "LessThan" | "Positive" | "Negative" | "Zero" | "Between" | "NotBetween" | "Is" | "IsNot" | "Contains" | "NotContains" | "StartsWith" | "EndsWith" | "Regex" | "Today" | "Yesterday" | "Tomorrow" | "ThisWeek" | "ThisMonth" | "ThisQuarter" | "ThisYear" | "InPast" | "InFuture" | "On" | "NotOn" | "NextWorkDay" | "LastWorkDay" | "True" | "False" | "Values" | "InRange" | "BooleanToggle" | ((column: AdaptableColumn) => SystemFilterPredicateId)) => SystemFilterPredicateId;
+export declare const getDefaultColumnFilterPredicate: (column: AdaptableColumn, defaultColumnFilter: "After" | "Before" | "Today" | "Yesterday" | "Tomorrow" | "Values" | "Blanks" | "NonBlanks" | "GreaterThan" | "LessThan" | "Positive" | "Negative" | "Zero" | "Equals" | "NotEquals" | "Between" | "NotBetween" | "Is" | "IsNot" | "Contains" | "NotContains" | "StartsWith" | "EndsWith" | "Regex" | "ThisWeek" | "ThisMonth" | "ThisQuarter" | "ThisYear" | "InPast" | "InFuture" | "On" | "NotOn" | "NextWorkDay" | "LastWorkDay" | "InRange" | "True" | "False" | "BooleanToggle" | ((column: AdaptableColumn) => SystemFilterPredicateId)) => SystemFilterPredicateId;

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -7,4 +7,4 @@ export declare type AdaptableFormControlTextClearProps = {
     autoFocus?: boolean;
     inputStyle?: CSSProperties;
 } & InputProps;
-export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Pick<AdaptableFormControlTextClearProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "colSpan" | "rowSpan" | "onClick" | "value" | "download" | "checked" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "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" | "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" | "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" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "focusOnClear" | "placehoder" | "OnTextChange" | "inputStyle"> & React.RefAttributes<any>>;
+export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Pick<AdaptableFormControlTextClearProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "download" | "value" | "checked" | "onClick" | "colSpan" | "rowSpan" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "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" | "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" | "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" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "focusOnClear" | "placehoder" | "OnTextChange" | "inputStyle"> & React.RefAttributes<any>>;

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -89,12 +89,12 @@ export declare const PanelWithImage: React.ForwardRefExoticComponent<{
     type?: string;
     min?: string | number;
     rows?: number;
-    colSpan?: number;
-    rowSpan?: number;
-    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
-    value?: string | number | readonly string[];
     download?: any;
+    value?: string | number | readonly string[];
     checked?: boolean;
+    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => void) & ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
+    colSpan?: number;
+    rowSpan?: number;
     name?: string;
     className?: string;
     id?: string;

package/src/View/Components/Panels/PanelWithImage.js

@@ -19,7 +19,7 @@ class PanelWithImageCmp extends React.Component {
             headerStyle.color = this.props.headerColor;
             headerStyle.fill = this.props.headerColor;
         }
-        let headerRow = (React.createElement(rebass_1.Flex, { style: { flex: 1 } },
+        let headerRow = (React.createElement(rebass_1.Flex, { flex: 1 },
             React.createElement(rebass_1.Flex, { alignItems: "center" },
                 React.createElement(rebass_1.Flex, { alignItems: "center", style: headerStyle },
                     IconCmp ? React.createElement(IconCmp, null) : null,
@@ -34,7 +34,7 @@ class PanelWithImageCmp extends React.Component {
                         ) }))),
                 React.createElement(rebass_1.Box, { flex: 1 }),
                 this.props.button && React.cloneElement(this.props.button))));
-        return (React.createElement(Panel_1.default, { header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
+        return (React.createElement(Panel_1.default, { flex: this.props.flex, header: headerRow, variant: this.props.variant, style: this.props.style, bodyScroll: this.props.bodyScroll !== undefined ? this.props.bodyScroll : true, border: "none", borderRadius: this.props.borderRadius || 'none', bodyProps: Object.assign({ padding: 0 }, this.props.bodyProps) }, this.props.children));
     }
 }
 exports.PanelWithImage = styled_components_1.withTheme(PanelWithImageCmp);

package/src/View/Components/Popups/AdaptableChart.js

@@ -34,7 +34,7 @@ class AdaptableChart extends React.Component {
         };
         let ChartCmp = AdaptableViewFactory_1.AdaptableViewFactory['ChartDisplayPopup'];
         const body = React.createElement(ChartCmp, Object.assign({}, commonProps));
-        return this.props.showModal ? (React.createElement(AdaptablePopup_1.AdaptablePopup, { api: this.props.api, onHide: this.props.onClose, showModal: true, moduleParams: null, componentName: 'ChartDisplayPopup', componentModule: ModuleConstants.ChartModuleId }, body)) : this.state.isValidUserChartContainer ? (ReactDOM.createPortal(body, this.state.chartContainer)) : (body);
+        return this.props.showModal ? (React.createElement(AdaptablePopup_1.AdaptablePopup, { api: this.props.api, onHide: this.props.onClose, moduleParams: null, componentName: 'ChartDisplayPopup', componentModule: ModuleConstants.ChartModuleId }, body)) : this.state.isValidUserChartContainer ? (ReactDOM.createPortal(body, this.state.chartContainer)) : (body);
     }
 }
 exports.AdaptableChart = AdaptableChart;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
+import { ModuleParams } from '../../SharedProps/ModuleViewPopupProps';
+import { AdaptableModule } from '../../../../PredefinedConfig/Common/Types';
+import { AdaptableApi } from '../../../../Api/AdaptableApi';
+/**
+ * This is the main popup that we use - so all Module popups will appear here.
+ */
+export interface AdaptablePopupProps {
+    componentName?: string;
+    componentModule: AdaptableModule;
+    onHide?: () => void;
+    api: AdaptableApi;
+    moduleParams: ModuleParams;
+    moduleProps?: {
+        [key: string]: any;
+    };
+    onClearParams?: () => PopupRedux.PopupClearParamAction;
+}
+export declare const AdaptablePopup: React.FunctionComponent<AdaptablePopupProps>;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const react_redux_1 = require("react-redux");
+const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
+const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
+const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const Navigation_1 = require("./Navigation");
+const PopupContext_1 = tslib_1.__importDefault(require("./PopupContext"));
+const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
+const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
+const SystemRedux_1 = require("../../../../Redux/ActionsReducers/SystemRedux");
+const Utilities_1 = require("./Utilities");
+const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
+exports.AdaptablePopup = (props) => {
+    var _a, _b, _c, _d, _e;
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
+    const dispatch = react_redux_1.useDispatch();
+    // Navigation
+    const allMenuItems = react_redux_1.useSelector((state) => { var _a; return (_a = state === null || state === void 0 ? void 0 : state.Grid) === null || _a === void 0 ? void 0 : _a.ModuleDropdownMenuItems; });
+    const menuItems = React.useMemo(() => {
+        var _a;
+        let navigationItems = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.navigation) === null || _a === void 0 ? void 0 : _a.items;
+        if (!navigationItems) {
+            navigationItems = [...DefaultSettingsPanel_1.DEFAULT_NAVIGATION_ITEMS];
+            if (settingsPanelOptions.customSettingsPanels) {
+                navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
+            }
+        }
+        const visibleItems = allMenuItems.filter((item) => item.module !== 'General' && !DefaultSettingsPanel_1.ACTION_POPUPS.includes(item.module) && item.isVisible);
+        return navigationItems
+            .map((moduleName) => {
+            var _a, _b;
+            if (moduleName === '-') {
+                return moduleName;
+            }
+            const customSettingsPanel = (_b = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (panel) => panel.name === moduleName);
+            let customPanelMenuItem = null;
+            if (customSettingsPanel) {
+                customPanelMenuItem = {
+                    label: customSettingsPanel.name,
+                    isVisible: true,
+                    reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name, null, {
+                        isCustomSettingsPanel: true,
+                    }),
+                };
+            }
+            return customPanelMenuItem || visibleItems.find((item) => item.module === moduleName);
+        })
+            .filter(Boolean);
+    }, [allMenuItems]);
+    const isCustomSettingsPanel = (_a = props.moduleProps) === null || _a === void 0 ? void 0 : _a.isCustomSettingsPanel;
+    const customSettingsPanel = isCustomSettingsPanel &&
+        settingsPanelOptions.customSettingsPanels.find((settingsPanel) => settingsPanel.name === props.componentName);
+    let componentModule = props.componentModule;
+    // When it is opened without specifying a module
+    const firstMenuItem = (_b = menuItems.find((menuItem) => menuItem !== '-')) === null || _b === void 0 ? void 0 : _b.module;
+    if (!customSettingsPanel && !props.componentModule && firstMenuItem !== 'General') {
+        componentModule = firstMenuItem;
+    }
+    const accessLevel = props.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(componentModule);
+    const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
+    const moduleInfo = module === null || module === void 0 ? void 0 : module.moduleInfo;
+    // action popups + non-primary module popups
+    const isActionModule = DefaultSettingsPanel_1.ACTION_POPUPS.includes(moduleInfo === null || moduleInfo === void 0 ? void 0 : moduleInfo.ModuleName) ||
+        (props.componentName && props.componentName !== moduleInfo.Popup);
+    const baseClassName = 'ab-Adaptable-Popup';
+    const className = join_1.default(baseClassName, `${baseClassName}--${(_c = settingsPanelOptions.type) !== null && _c !== void 0 ? _c : 'window'}`, isActionModule ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
+    const isWindowModal = settingsPanelOptions.type === 'window';
+    let style = { maxWidth: 1400, maxHeight: 1200 };
+    if (isWindowModal) {
+        style = { height: '100%' };
+    }
+    else if (isActionModule) {
+        style = { maxWidth: 800, maxHeight: 450 };
+    }
+    const settingsKey = isActionModule ? `action-${moduleInfo.FriendlyName}` : 'settings';
+    let popupSettings = react_redux_1.useSelector((state) => { var _a, _b; return (_b = (_a = state === null || state === void 0 ? void 0 : state.System) === null || _a === void 0 ? void 0 : _a.SettingsPanel) === null || _b === void 0 ? void 0 : _b[settingsKey]; });
+    if (!popupSettings) {
+        const size = isActionModule
+            ? Utilities_1.getActionPanelSize()
+            : (_d = settingsPanelOptions.size) !== null && _d !== void 0 ? _d : Utilities_1.getSettingsPanelSize();
+        popupSettings = {
+            size: size,
+            position: (_e = settingsPanelOptions.position) !== null && _e !== void 0 ? _e : Utilities_1.getMiddlePosition(size),
+        };
+    }
+    const handleWindowSettings = (settings) => {
+        dispatch(SystemRedux_1.SystemSettingsPanelSet(settingsKey, settings));
+    };
+    return (React.createElement(PopupContext_1.default.Provider, { value: {
+            hidePopup: () => {
+                if (props.onHide) {
+                    props.onHide();
+                }
+            },
+        } },
+        React.createElement(Dialog_1.default, Object.assign({ windowModal: isWindowModal, fixed: false, windowModalProps: {
+                handleSelector: isActionModule
+                    ? `.${baseClassName} .ab-Panel__header`
+                    : '.ab-Adaptable-Popup__TopBar',
+                size: popupSettings.size,
+                position: popupSettings.position,
+                onChange: handleWindowSettings,
+            }, style: style, padding: 0, height: isWindowModal ? null : '90vh', width: isWindowModal ? null : '90vw', className: className, onDismiss: props.onHide, isOpen: true, showCloseButton: true }, props.moduleProps),
+            !isActionModule && (React.createElement(TopBar_1.default, { icon: settingsPanelOptions.icon }, settingsPanelOptions.title)),
+            React.createElement(rebass_1.Flex, { "data-name": props.componentName, flexDirection: "row", flex: "1 1 0", style: { minHeight: 0 }, className: accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '' },
+                !isActionModule && (React.createElement(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, moduleInfo: moduleInfo, activeCustomSettingPanel: customSettingsPanel, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
+                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Adaptable-Popup__Body" }, isCustomSettingsPanel ? (React.createElement(CustomSettingsPanelView_1.CustomSettingsPanelView, { settingsPanel: customSettingsPanel })) : (React.createElement(AdaptablePopupBody_1.AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide })))))));
+};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IModule } from '../../../../Strategy/Interface/IModule';
+import { AdaptableApi } from '../../../../types';
+import { ModuleParams } from '../../SharedProps/ModuleViewPopupProps';
+import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
+interface AdaptablePopupBodyProps {
+    module: IModule;
+    moduleParams: ModuleParams;
+    componentName: string;
+    onClearParams?: () => PopupRedux.PopupClearParamAction;
+    onHide?: () => void;
+    api: AdaptableApi;
+}
+export declare const AdaptablePopupBody: React.FunctionComponent<AdaptablePopupBodyProps>;
+export {};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupBody.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopupBody = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const UIHelper_1 = require("../../../UIHelper");
+const AdaptableViewFactory_1 = require("../../../AdaptableViewFactory");
+const AdaptablePopupModuleView_1 = require("./AdaptablePopupModuleView");
+exports.AdaptablePopupBody = (props) => {
+    var _a;
+    const modalContainer = UIHelper_1.UIHelper.getModalContainer(props.api.internalApi.getAdaptableOptions(), document);
+    const moduleName = props.module.moduleInfo.ModuleName;
+    const accessLevel = props.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(moduleName);
+    const moduleInfo = props.api.internalApi.getModuleService().getModuleInfoByModule(moduleName);
+    const moduleProps = {
+        popupParams: props.moduleParams,
+        onClearPopupParams: () => (props.onClearParams ? props.onClearParams() : null),
+        onClosePopup: () => {
+            if (props.onHide) {
+                props.onHide();
+            }
+        },
+        // show share button if TeamSharing is active & user has edit rights
+        teamSharingActivated: props.api.teamSharingApi.isTeamSharingActivated() &&
+            props.api.teamSharingApi.hasTeamSharingFullRights(),
+        modalContainer: modalContainer,
+        accessLevel: accessLevel,
+        api: props.api,
+        moduleInfo,
+    };
+    const BodyComponent = (AdaptableViewFactory_1.AdaptableViewFactory === null || AdaptableViewFactory_1.AdaptableViewFactory === void 0 ? void 0 : AdaptableViewFactory_1.AdaptableViewFactory[(_a = props === null || props === void 0 ? void 0 : props.componentName) !== null && _a !== void 0 ? _a : moduleInfo.Popup]) || AdaptablePopupModuleView_1.AdaptablePopupModuleView;
+    return React.createElement(BodyComponent, Object.assign({ module: props.module }, moduleProps));
+};

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { AccessLevel, AdaptableApi } from '../../../../../types';
+import { IModule } from '../../../../Strategy/Interface/IModule';
+export interface AdaptablePopupModuleViewProps {
+    module: IModule;
+    api: AdaptableApi;
+    accessLevel: AccessLevel;
+}
+export declare const AdaptablePopupModuleView: React.FunctionComponent<AdaptablePopupModuleViewProps>;

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptablePopupModuleView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
+const EmptyContent_1 = tslib_1.__importDefault(require("../../../../components/EmptyContent"));
+const icons_1 = require("../../../../components/icons");
+const AdaptableObjectList_1 = require("../../AdaptableObjectList");
+const ButtonNew_1 = require("../../Buttons/ButtonNew");
+const PopupPanel_1 = require("./PopupPanel");
+exports.AdaptablePopupModuleView = (props) => {
+    var _a, _b, _c;
+    /**
+     * This triggers an render for each redux change.
+     * Not sure yet how to trigger this component to render when an item is edited.
+     */
+    react_redux_1.useSelector((state) => state);
+    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
+    const [abObjectType, setAbObjectType] = React.useState(null);
+    const moduleInfo = props.module.moduleInfo;
+    const items = (_a = props.module) === null || _a === void 0 ? void 0 : _a.toViewAll();
+    const moduleViewProperties = props.module.getViewProperties();
+    const EditWizard = (_b = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.getEditWizard) === null || _b === void 0 ? void 0 : _b.call(moduleViewProperties);
+    const emptyView = moduleViewProperties.emptyView;
+    let emptyContent = null;
+    if (typeof emptyView === 'function') {
+        emptyContent = React.createElement(emptyView, { module: props.module });
+    }
+    else if (typeof emptyView === 'string') {
+        emptyContent = emptyView;
+    }
+    // Some modules do not have new button
+    // e.g. filter
+    let newButton = null;
+    if ((_c = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes) === null || _c === void 0 ? void 0 : _c.length) {
+        const items = moduleViewProperties === null || moduleViewProperties === void 0 ? void 0 : moduleViewProperties.abObjectTypes.map((abObjctType) => {
+            var _a;
+            return {
+                disabled: (abObjctType === null || abObjctType === void 0 ? void 0 : abObjctType.accessLevel) === 'ReadOnly',
+                onClick: () => {
+                    setAbObjectType(abObjctType);
+                    setIsWizardOpen(true);
+                },
+                label: (_a = abObjctType.label) !== null && _a !== void 0 ? _a : abObjctType.name,
+            };
+        });
+        newButton = (React.createElement(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: 'Create ' + moduleInfo.FriendlyName },
+            React.createElement(icons_1.Icon, { name: "plus" }),
+            " New"));
+    }
+    else if (EditWizard) {
+        newButton = (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true), tooltip: 'Create ' + moduleInfo.FriendlyName, accessLevel: props.accessLevel, style: {
+                color: 'var(--ab-color-text-on-add)',
+                fill: 'var(--ab-color-text-on-add)',
+                background: 'var(--ab-color-action-add)',
+            } }));
+    }
+    const handleWizardClose = () => {
+        setAbObjectType(null);
+        setIsWizardOpen(false);
+    };
+    return (React.createElement(PopupPanel_1.PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, button: newButton },
+        (items === null || items === void 0 ? void 0 : items.length) ? (React.createElement(AdaptableObjectList_1.AdaptableObjectList, { module: props.module, items: items })) : (React.createElement(EmptyContent_1.default, null, emptyContent !== null && emptyContent !== void 0 ? emptyContent : `Click 'New' to create a new ${moduleInfo.FriendlyName}`)),
+        isWizardOpen && (React.createElement(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+};

package/src/View/Components/Popups/AdaptablePopup/CustomSettingsPanelView.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CustomSettingsPanel } from '../../../../AdaptableOptions/SettingsPanelOptions';
+export interface CustomSettingsPanelProp {
+    settingsPanel: CustomSettingsPanel;
+}
+export declare const CustomSettingsPanelView: React.FunctionComponent<CustomSettingsPanelProp>;

package/src/View/Components/Popups/AdaptablePopup/CustomSettingsPanelView.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSettingsPanelView = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const ExternalRenderer_1 = require("../../ExternalRenderer");
+exports.CustomSettingsPanelView = (props) => {
+    return (React.createElement(ExternalRenderer_1.ExternalRenderer, { render: props.settingsPanel.render, componentName: props.settingsPanel.name, frameworkComponent: props.settingsPanel.frameworkComponent }));
+};

package/src/View/Components/Popups/AdaptablePopup/Navigation.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AdaptableApi, AdaptableMenuItem } from '../../../../../types';
+import { CustomSettingsPanel } from '../../../../AdaptableOptions/SettingsPanelOptions';
+import { ModuleInfo } from '../../../../Strategy/Interface/IModule';
+interface NavigationProps {
+    api: AdaptableApi;
+    menuItems: (AdaptableMenuItem | '-')[];
+    moduleInfo?: ModuleInfo;
+    activeCustomSettingPanel?: CustomSettingsPanel;
+    customSettingsPanels?: CustomSettingsPanel[];
+}
+export declare const Navigation: React.FunctionComponent<NavigationProps>;
+export {};

package/src/View/Components/Popups/AdaptablePopup/Navigation.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navigation = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const ApplicationIcon_1 = require("../../../../components/ApplicationIcon");
+const icons_1 = require("../../../../components/icons");
+const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
+exports.Navigation = (props) => {
+    var _a;
+    const dispatch = react_redux_1.useDispatch();
+    const handleKeyPress = React.useCallback((event) => {
+        if ((event.ctrlKey || event.metaKey) &&
+            (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
+            const isKeyUp = event.code === 'ArrowUp';
+            const currentIndex = props.menuItems.findIndex((item) => {
+                var _a, _b;
+                return item !== '-' &&
+                    (item.module === ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) ||
+                        // in case of custom panel
+                        item.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name));
+            });
+            let nextMenuItem = null;
+            if (isKeyUp) {
+                let candidate = props.menuItems[currentIndex - 1] !== '-'
+                    ? props.menuItems[currentIndex - 1]
+                    : props.menuItems[currentIndex - 2];
+                nextMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
+            }
+            else {
+                let candidate = props.menuItems[currentIndex + 1] !== '-'
+                    ? props.menuItems[currentIndex + 1]
+                    : props.menuItems[currentIndex + 2];
+                nextMenuItem = candidate ? candidate : props.menuItems[0];
+            }
+            if (nextMenuItem && nextMenuItem !== '-') {
+                dispatch(nextMenuItem.reduxAction);
+            }
+        }
+    }, [(_a = props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName, props.menuItems]);
+    useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
+    return (React.createElement("nav", { className: "ab-Adaptable-Popup__Navigation" },
+        React.createElement("ul", { className: "ab-Adaptable-Popup__Navigation__List" }, props.menuItems.map((menuItem, index) => {
+            var _a, _b, _c, _d, _e, _f;
+            const baseClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
+            if (menuItem === '-') {
+                return React.createElement("li", { key: `separator-${index}`, className: `${baseClassName}__Separator` });
+            }
+            const isActive = ((_a = props === null || props === void 0 ? void 0 : props.moduleInfo) === null || _a === void 0 ? void 0 : _a.ModuleName) === menuItem.module ||
+                menuItem.label === ((_b = props === null || props === void 0 ? void 0 : props.activeCustomSettingPanel) === null || _b === void 0 ? void 0 : _b.name);
+            const className = join_1.default(baseClassName, isActive && `${baseClassName}--active`);
+            let customIcon = (_f = (_e = (_d = (_c = props.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find) === null || _d === void 0 ? void 0 : _d.call(_c, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _e === void 0 ? void 0 : _e.icon) !== null && _f !== void 0 ? _f : null;
+            return (React.createElement("li", { className: className, key: menuItem.label },
+                React.createElement("button", { className: `${baseClassName}__Button`, onClick: () => {
+                        dispatch(menuItem.reduxAction);
+                    } },
+                    menuItem.icon && (React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: menuItem.icon })),
+                    customIcon && React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: customIcon }),
+                    menuItem.label)));
+        }))));
+};

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface PanelWithButtonProps {
+    buttonClick?: () => void;
+    button?: React.ReactElement<any>;
+    headerText: string;
+    glyphicon?: string;
+    infoLink?: string;
+    infoLinkDisabled?: boolean;
+}
+export declare const PopupPanel: React.FunctionComponent<PanelWithButtonProps>;

package/src/View/Components/Popups/AdaptablePopup/PopupPanel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupPanel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
+const Noop = () => React.createElement(React.Fragment, null);
+exports.PopupPanel = (props) => {
+    const baseClassName = 'ab-Adaptable-Popup__Panel';
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", flex: "1 1 0", className: baseClassName, width: "100%" },
+        React.createElement("div", { className: `${baseClassName}__Header` },
+            React.createElement(rebass_1.Flex, { alignItems: "center" },
+                React.createElement(rebass_1.Box, { marginRight: 0, "data-name": "space-before" }),
+                React.createElement("div", { className: `${baseClassName}__Header__Title` }, props.headerText),
+                React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
+                props.infoLink != null && !props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                    ) }))),
+            React.createElement(rebass_1.Box, { style: { flex: 1 } }),
+            props.button),
+        React.createElement(rebass_1.Box, { className: `${baseClassName}__Body`, width: "100%", height: "100%", flex: 1 }, props.children)));
+};

package/src/View/Components/Popups/AdaptablePopup/TopBar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SettingsPanelOptions } from '../../../../AdaptableOptions/SettingsPanelOptions';
+interface TopBarProps {
+    icon: SettingsPanelOptions['icon'];
+}
+export declare const TopBar: React.FunctionComponent<TopBarProps>;
+export default TopBar;

package/src/View/Components/Popups/AdaptablePopup/TopBar.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ApplicationIcon_1 = require("../../../../components/ApplicationIcon");
+const icons_1 = require("../../../../components/icons");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+exports.TopBar = (props) => {
+    var _a;
+    const baseClassName = 'ab-Adaptable-Popup__TopBar';
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const applicationIcon = (_a = adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.applicationIcon;
+    let icon = React.createElement(React.Fragment, null);
+    if (props.icon === 'ConfigurationIcon') {
+        icon = React.createElement(icons_1.Icon, { className: `${baseClassName}__Icon`, name: "settings" });
+    }
+    else if (props.icon === 'ApplicationIcon' && applicationIcon) {
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: applicationIcon });
+    }
+    else if (typeof props.icon === 'object' && props.icon.src) {
+        icon = React.createElement(ApplicationIcon_1.ApplicationIcon, { icon: props.icon });
+    }
+    return (React.createElement(rebass_1.Flex, { flex: 0, className: baseClassName },
+        icon,
+        React.createElement(rebass_1.Text, null, props.children)));
+};
+exports.default = exports.TopBar;