@adaptabletools/adaptable 12.0.0-canary.1 → 12.0.0-canary.4

package/src/View/Wizard/OnePageWizards.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnePageWizard = exports.useOnePageWizardContext = exports.OnePageWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const Dialog_1 = tslib_1.__importDefault(require("../../components/Dialog"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const useProperty_1 = tslib_1.__importDefault(require("../../components/utils/useProperty"));
+const isMacLike_1 = require("../../Utilities/isMacLike");
+const KeyHint_1 = require("../KeyHint");
+const icons_1 = require("../../components/icons");
+const ResizeObserver_1 = require("../../components/ResizeObserver");
+const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
+const useKeyboardNavigation_1 = require("./useKeyboardNavigation");
+const SummaryTag = (props) => React.createElement(rebass_1.Text, Object.assign({}, props));
+exports.SummaryTag = SummaryTag;
+const SummaryText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mb: 3 }, props)));
+exports.SummaryText = SummaryText;
+const FormDescriptionText = (props) => (React.createElement(rebass_1.Text, Object.assign({ fontSize: 2, mt: 1 }, props)));
+exports.FormDescriptionText = FormDescriptionText;
+exports.OnePageWizardContext = React.createContext({
+    data: null,
+    sections: [],
+    setCurrentSection: (index) => { },
+});
+function useOnePageWizardContext() {
+    return React.useContext(exports.OnePageWizardContext);
+}
+exports.useOnePageWizardContext = useOnePageWizardContext;
+const OnePageWizard = (props) => {
+    var _a, _b;
+    let defaultCurrentIndex = 0;
+    if (props.defaultCurrentSectionName) {
+        const candidate = props.sections.findIndex((section) => section !== '-' && section.title === props.defaultCurrentSectionName);
+        if (candidate >= 0) {
+            defaultCurrentIndex = candidate;
+        }
+    }
+    const [currentSection, setCurrentSection] = useProperty_1.default(props, 'currentIndex', defaultCurrentIndex, {
+        onChange: (index) => {
+            var _a;
+            (_a = props.onSectionChange) === null || _a === void 0 ? void 0 : _a.call(props, index);
+        },
+    });
+    const [namedQuery, setNamedQuery] = react_1.useState(false);
+    const [navIndexMap] = react_1.useState(() => new Map());
+    const handleClickFinish = () => {
+        var _a;
+        (_a = props.onFinish) === null || _a === void 0 ? void 0 : _a.call(props, props.data);
+    };
+    const renderSection = (index) => {
+        const section = visibleSections[index];
+        if (section === '-') {
+            return React.createElement(React.Fragment, { key: index });
+        }
+        return (React.createElement(rebass_1.Flex, { flexDirection: "column", key: index, "data-name": `section-${index}`, style: { minHeight: '100%' }, mr: 2 },
+            React.createElement(rebass_1.Box, { py: 3, paddingLeft: 2, fontSize: 4, className: "ab-OnePageWizard__details" }, section.details),
+            React.createElement(rebass_1.Box, { flex: 1, className: "ab-OnePageWizard__section" }, section.render(props.data, index))));
+    };
+    const selectedNodeRef = react_1.useRef(null);
+    const selectedFeedback = (React.createElement("div", { ref: selectedNodeRef, className: "ab-OnePageWizard__selected-title-overlay", style: {
+            position: 'absolute',
+            background: 'var(--ab-cmp-one-page-wizard-selected-title__background)',
+            pointerEvents: 'none',
+            borderRadius: 'var(--ab__border-radius)',
+            transition: 'top 0.2s',
+        } }));
+    const sizeOwnerRef = react_1.useRef(null);
+    const [width, setWidth] = react_1.useState(0);
+    ResizeObserver_1.useResizeObserver(sizeOwnerRef, ({ width }) => {
+        setWidth(width);
+    });
+    React.useEffect(() => {
+        const node = selectedNodeRef.current;
+        const parent = node.parentNode;
+        const activeElement = parent.children[currentSection];
+        node.style.top = `${activeElement.offsetTop}px`;
+        node.style.left = `${activeElement.offsetLeft}px`;
+        node.style.height = `${activeElement.offsetHeight}px`;
+        node.style.width = `${activeElement.offsetWidth}px`;
+    }, [currentSection, width]);
+    let navIndex = 0;
+    const dialogRef = react_1.useRef(null);
+    let invalidCount = 0;
+    let firstErrorMessage = null;
+    const contextValue = {
+        data: props.data,
+        sections: props.sections,
+        setCurrentSection,
+    };
+    const visibleSections = React.useMemo(() => {
+        return props.sections.filter((section) => section === '-' ||
+            section.isVisible == undefined ||
+            section.isVisible(props.data, contextValue));
+    }, [props.sections]);
+    contextValue.sections = visibleSections;
+    const validSectionsMap = visibleSections.reduce((acc, section, index) => {
+        if (section === '-') {
+            acc.set(index, true);
+            return acc;
+        }
+        const valid = section.isValid ? section.isValid(props.data, contextValue) : true; //!active && canFinish !== true;
+        if (valid !== true) {
+            invalidCount++;
+            if (firstErrorMessage == null) {
+                firstErrorMessage = valid;
+            }
+        }
+        acc.set(index, valid);
+        return acc;
+    }, new Map());
+    useKeyboardNavigation_1.useKeyboardNavigation(setCurrentSection, visibleSections);
+    const canFinish = !invalidCount;
+    return (React.createElement(NamedQueryContext_1.NamedQueryContext.Provider, { value: { namedQuery, setNamedQuery } },
+        React.createElement(exports.OnePageWizardContext.Provider, { value: contextValue },
+            React.createElement(Dialog_1.default, { modal: true, isOpen: true, showCloseButton: false, focusOnBrowserVisible: true, style: {
+                    borderRadius: 'var(--ab__border-radius)',
+                    overflow: 'hidden',
+                    height: '80vh',
+                }, ref: dialogRef, onDismiss: () => { var _a; return (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props); }, onKeyDown: (event) => {
+                    if (event.metaKey || event.ctrlKey) {
+                        const { key } = event;
+                        if (!isNaN(Number(key))) {
+                            const num = Number(key);
+                            if (navIndexMap.has(num)) {
+                                const index = navIndexMap.get(num);
+                                setCurrentSection(index);
+                                event.preventDefault();
+                                event.stopPropagation();
+                                requestAnimationFrame(() => {
+                                    var _a;
+                                    (_a = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current) === null || _a === void 0 ? void 0 : _a.bringToFront();
+                                });
+                            }
+                        }
+                    }
+                } },
+                React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard", flexDirection: "column", "data-name": props.name, style: Object.assign({ height: '100%', width: '90vw', maxWidth: 1200 }, props.style) },
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "stretch", flex: 1, style: { overflow: 'auto' } },
+                        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 3, className: "ab-OnePageWizard__section-title-container", ref: sizeOwnerRef, style: { overflow: 'auto', position: 'relative', flex: 'none' } },
+                            visibleSections.map((section, index) => {
+                                if (section === '-') {
+                                    return (React.createElement(rebass_1.Box, { as: "hr", mt: 2, className: "ab-OnePageWizard__section-separator", key: `${index}-`, style: {
+                                            width: '100%',
+                                            border: 'none',
+                                            borderTop: `1px solid var(--ab-color-inputborder)`,
+                                        } }));
+                                }
+                                navIndex++;
+                                navIndexMap.set(navIndex, index);
+                                const active = index === currentSection;
+                                const disabled = false; //!active && !currentSectionValid;
+                                return (React.createElement(rebass_1.Flex, { className: "ab-OnePageWizard__section-title", "data-name": section.title, flexDirection: "row", style: {
+                                        cursor: disabled ? 'auto' : 'pointer',
+                                        zIndex: 10,
+                                        transition: 'color 0.2s',
+                                        opacity: disabled ? 0.5 : 1,
+                                    }, key: section.title, color: active ? 'var(--ab-cmp-one-page-wizard-section-title__color)' : '', px: 2, py: 1, mt: index ? 2 : 0, onClick: () => {
+                                        if (disabled) {
+                                            return;
+                                        }
+                                        setCurrentSection(index);
+                                    } },
+                                    React.createElement(KeyHint_1.KeyHint, { mr: 2, style: { display: 'inline-block' } }, navIndex),
+                                    React.createElement("div", { style: { flex: 1 } }, section.title),
+                                    React.createElement(icons_1.Icon, { name: "error", style: {
+                                            marginLeft: 'var(--ab-space-2)',
+                                            visibility: validSectionsMap.get(index) !== true ? 'visible' : 'hidden',
+                                        } })));
+                            }),
+                            selectedFeedback,
+                            React.createElement(rebass_1.Box, { flex: 1 }),
+                            React.createElement(KeyHint_1.KeyHint, { style: { lineHeight: 1.5 }, className: "ab-OnePageWizard__key-hint" },
+                                isMacLike_1.isMacLike() ? 'Cmd' : 'Ctrl',
+                                " + #",
+                                React.createElement("br", null),
+                                "to navigate")),
+                        React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "column", className: "ab-OnePageWizard__section-container" }, renderSection(currentSection))),
+                    React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, alignItems: "center", className: "ab-WizardDialog__footer ab-OnePageWizard__footer" },
+                        React.createElement(SimpleButton_1.default, { tone: "neutral", variant: "text", "data-name": "close", onClick: () => { var _a; return (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props); }, tooltip: (_a = props.closeTooltip) !== null && _a !== void 0 ? _a : 'Close wizard', accessLevel: 'Full' }, (_b = props.closeText) !== null && _b !== void 0 ? _b : 'CLOSE'),
+                        React.createElement(KeyHint_1.KeyHint, { ml: 2 }, "Esc"),
+                        React.createElement(rebass_1.Text, { fontSize: 2, mr: 3, className: "ab-OnePageWizard__error", style: {
+                                flex: 1,
+                                color: 'var(--ab-color-error)',
+                                textAlign: 'end',
+                            } }, firstErrorMessage),
+                        React.createElement(SimpleButton_1.default, { tone: "accent", "data-name": "finish", variant: "raised", disabled: canFinish !== true, onClick: () => handleClickFinish(), icon: 'check', accessLevel: 'Full' }, "Finish")))))));
+};
+exports.OnePageWizard = OnePageWizard;

package/src/View/Wizard/useKeyboardNavigation.d.ts

@@ -1,2 +1,2 @@
-import { OnePageWizardSection } from './OnePageAdaptableWizard';
+import { OnePageWizardSection } from './OnePageWizards';
 export declare const useKeyboardNavigation: <ENTITY>(setCurrentSection: (value: number | ((v: number) => number)) => void, sections: ("-" | OnePageWizardSection<ENTITY>)[]) => void;

package/src/View/Wizard/useKeyboardNavigation.js

@@ -4,7 +4,7 @@ exports.useKeyboardNavigation = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const useGlobalEvent_1 = require("../../components/utils/useGlobalEvent");
-exports.useKeyboardNavigation = (setCurrentSection, sections) => {
+const useKeyboardNavigation = (setCurrentSection, sections) => {
     const handleKeyPress = React.useCallback((event) => {
         if ((event.ctrlKey || event.metaKey) &&
             (event.code === 'ArrowUp' || event.code === 'ArrowDown')) {
@@ -33,3 +33,4 @@ exports.useKeyboardNavigation = (setCurrentSection, sections) => {
     }, [sections, setCurrentSection]);
     useGlobalEvent_1.useGlobalEvent('keydown', handleKeyPress);
 };
+exports.useKeyboardNavigation = useKeyboardNavigation;

package/src/View/renderWithAdaptableContext.js

@@ -7,8 +7,9 @@ const react_redux_1 = require("react-redux");
 const styled_components_1 = require("styled-components");
 const theme_1 = tslib_1.__importDefault(require("../theme"));
 const AdaptableContext_1 = tslib_1.__importDefault(require("./AdaptableContext"));
-exports.renderWithAdaptableContext = (children, adaptable) => {
+const renderWithAdaptableContext = (children, adaptable) => {
     return (React.createElement(react_redux_1.Provider, { store: adaptable.adaptableStore.TheStore },
         React.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             React.createElement(AdaptableContext_1.default.Provider, { value: adaptable }, children))));
 };
+exports.renderWithAdaptableContext = renderWithAdaptableContext;

package/src/agGrid/ActionColumnRenderer.d.ts

@@ -1,5 +1,5 @@
 import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/all-modules';
-import { ActionColumn } from '../AdaptableOptions/UserInterfaceOptions';
+import { ActionColumn } from '../AdaptableOptions/ActionOptions';
 interface ActionColumnCellRendererParams extends ICellRendererParams {
     actionColumn?: ActionColumn;
 }

package/src/agGrid/ActionColumnRenderer.js

@@ -13,7 +13,7 @@ class ActionColumnRenderer {
         const adaptable = params.api.__adaptable;
         const actionCol = params.actionColumn
             ? params.actionColumn
-            : (_a = adaptable.api.userInterfaceApi
+            : (_a = adaptable.api.actionApi
                 .getAllActionColumn()) === null || _a === void 0 ? void 0 : _a.find((ac) => ac.columnId == params.colDef.colId);
         if (actionCol && actionCol.actionColumnButton) {
             let actionButtons = Array.isArray(actionCol.actionColumnButton)

package/src/agGrid/Adaptable.js

@@ -976,14 +976,16 @@ class Adaptable {
         const alert = this.getActiveAlertWithHighlightCell(col, params);
         const highlightCell = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightCell;
         return typeof highlightCell === 'object' && (highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName)
-            ? highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName : null;
+            ? highlightCell === null || highlightCell === void 0 ? void 0 : highlightCell.ClassName
+            : null;
     }
     getAlertRowClass(params) {
         var _a, _b;
         const alert = this.getActiveAlertWithHighlightRow(params);
         const highlightRow = (_b = (_a = alert === null || alert === void 0 ? void 0 : alert.alertDefinition) === null || _a === void 0 ? void 0 : _a.AlertProperties) === null || _b === void 0 ? void 0 : _b.HighlightRow;
         return typeof highlightRow === 'object' && (highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName)
-            ? highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName : null;
+            ? highlightRow === null || highlightRow === void 0 ? void 0 : highlightRow.ClassName
+            : null;
     }
     getAlertRowStyle(params) {
         var _a, _b;
@@ -1023,9 +1025,12 @@ class Adaptable {
             return;
         }
         return flashingCell.direction === 'up'
-            ? (_a = flashingCell.flashingCellDefinition.UpChangeStyle) === null || _a === void 0 ? void 0 : _a.ClassName : flashingCell.direction === 'down'
-            ? (_b = flashingCell.flashingCellDefinition.DownChangeStyle) === null || _b === void 0 ? void 0 : _b.ClassName : flashingCell.direction === 'neutral'
-            ? (_c = flashingCell.flashingCellDefinition.NeutralChangeStyle) === null || _c === void 0 ? void 0 : _c.ClassName : undefined;
+            ? (_a = flashingCell.flashingCellDefinition.UpChangeStyle) === null || _a === void 0 ? void 0 : _a.ClassName
+            : flashingCell.direction === 'down'
+                ? (_b = flashingCell.flashingCellDefinition.DownChangeStyle) === null || _b === void 0 ? void 0 : _b.ClassName
+                : flashingCell.direction === 'neutral'
+                    ? (_c = flashingCell.flashingCellDefinition.NeutralChangeStyle) === null || _c === void 0 ? void 0 : _c.ClassName
+                    : undefined;
     }
     getCellHighlightStyle(col, params) {
         const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
@@ -1325,16 +1330,12 @@ class Adaptable {
                 newColState.aggFunc =
                     aggregationFunctionsColumnsMap[colId] === true
                         ? // if we have true, it means - take the default aggFunc from colDef
-                         (_e = (_d = (_c = 
-                        // NOTE: colState gives us the current aggFunc, which can be null,
-                        // while the colDef gives us the initially configured aggFunc for that column
-                        colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef === null || 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef === void 0 ? void 0 : 
-                        // @ts-ignore available only wth ag-Grid v27.3.x
-                        colDef.defaultAggFunc) !== null && _e !== void 0 ? _e : 'sum' : aggregationFunctionsColumnsMap[colId];
+                            // NOTE: colState gives us the current aggFunc, which can be null,
+                            // while the colDef gives us the initially configured aggFunc for that column
+                            (_e = (_d = (_c = colState.aggFunc) !== null && _c !== void 0 ? _c : colDef === null || colDef === void 0 ? void 0 : colDef.aggFunc) !== null && _d !== void 0 ? _d : 
+                            // @ts-ignore available only wth ag-Grid v27.3.x
+                            colDef === null || colDef === void 0 ? void 0 : colDef.defaultAggFunc) !== null && _e !== void 0 ? _e : 'sum'
+                        : aggregationFunctionsColumnsMap[colId];
             }
             if (sortModelMap[colId]) {
                 newColState.sort = sortModelMap[colId].sort;
@@ -1667,7 +1668,8 @@ class Adaptable {
         let returnValues = [];
         // this function does NOT look up for server values but actually it should...
         // that is currently commented out in the column api function (previously in filter form)
-        permittedValues = permittedValues !== null && permittedValues !== void 0 ? permittedValues : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
+        permittedValues =
+            permittedValues !== null && permittedValues !== void 0 ? permittedValues : this.api.userInterfaceApi.getPermittedValuesForColumn(column);
         if (ArrayExtensions_1.ArrayExtensions.IsNotNull(permittedValues)) {
             returnValues = permittedValues.map((pv) => {
                 return {
@@ -2184,7 +2186,7 @@ class Adaptable {
         }
     }
     getColDefsForRowEditColumns() {
-        const actionRowButtons = this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtons;
+        const actionRowButtons = this.adaptableOptions.actionOptions.actionRowButtons;
         if (!(actionRowButtons === null || actionRowButtons === void 0 ? void 0 : actionRowButtons.length)) {
             return [];
         }
@@ -2197,7 +2199,7 @@ class Adaptable {
                     label,
                     tooltip: 'Create',
                     onClick: () => {
-                        this.api.gridApi.openCreateRowForm();
+                        this.api.actionApi.displayCreateActionRow();
                     },
                 };
             }
@@ -2208,7 +2210,7 @@ class Adaptable {
                     label,
                     tooltip: 'Edit',
                     onClick: (button, context) => {
-                        this.api.gridApi.openEditRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2219,7 +2221,7 @@ class Adaptable {
                     label,
                     tooltip: 'Clone',
                     onClick: (button, context) => {
-                        this.api.gridApi.openCloneRowForm(context.primaryKeyValue);
+                        this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
                     },
                 };
             }
@@ -2236,8 +2238,8 @@ class Adaptable {
                             rowNode: context.rowNode,
                             adaptableApi: context.adaptableApi,
                         };
-                        this.api.eventApi.emit('RowFormSubmitted', eventInfo);
-                        (_b = (_a = this.adaptableOptions.editOptions.rowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                        this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
+                        (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
                     },
                 };
             }
@@ -2256,7 +2258,8 @@ class Adaptable {
                 colId: GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS,
                 hide: false,
                 editable: false,
-                width: editButtons.length * 42,
+                // 17px is the icon widht + left&right padding
+                width: editButtons.length * (UIHelper_1.default.getSimpleButtonPaddingWidth() * 2 + 17) + 3,
                 resizable: false,
                 lockVisible: true,
                 suppressColumnsToolPanel: true,
@@ -2266,8 +2269,7 @@ class Adaptable {
                 filter: false,
                 sortable: false,
                 enableRowGroup: false,
-                pinned: this.adaptableOptions.userInterfaceOptions.actionOptions.actionRowButtonsPosition ===
-                    'pinnedRight'
+                pinned: this.adaptableOptions.actionOptions.actionRowButtonsPosition === 'pinnedRight'
                     ? 'right'
                     : 'left',
                 cellRenderer: ActionColumnRenderer_1.ActionColumnRenderer,
@@ -2285,7 +2287,7 @@ class Adaptable {
             suppressMenu: false,
             suppressMovable: false,
         };
-        return this.api.userInterfaceApi.getAllActionColumn().map((actionColumn) => {
+        return this.api.actionApi.getAllActionColumn().map((actionColumn) => {
             const actionColumnSettings = Object.assign(Object.assign({}, defaultActionColumnSettings), actionColumn.actionColumnSettings);
             const newColDef = {
                 headerName: actionColumn.friendlyName ? actionColumn.friendlyName : actionColumn.columnId,

package/src/agGrid/CheckboxRenderer.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxEditor = exports.getCheckboxRendererForColumn = void 0;
-exports.getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
+const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     const CheckboxRenderer = function () {
         return '';
     };
@@ -54,6 +54,7 @@ exports.getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     };
     return CheckboxRenderer;
 };
+exports.getCheckboxRendererForColumn = getCheckboxRendererForColumn;
 // this is just a stub editor instance, we just need the `isCancelBeforeStart()` hook
 class CheckboxEditor {
     isCancelBeforeStart() {

package/src/agGrid/FilterWrapper.js

@@ -4,7 +4,7 @@ exports.FilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const FilterForm_1 = require("../View/Components/FilterForm/FilterForm");
-exports.FilterWrapperFactory = (adaptable) => {
+let FilterWrapperFactory = (adaptable) => {
     return class FilterWrapper {
         init(params) {
             this.params = params;
@@ -52,3 +52,4 @@ exports.FilterWrapperFactory = (adaptable) => {
         }
     };
 };
+exports.FilterWrapperFactory = FilterWrapperFactory;

package/src/agGrid/FloatingFilterWrapper.js

@@ -4,7 +4,7 @@ exports.FloatingFilterWrapperFactory = void 0;
 const tslib_1 = require("tslib");
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const QuickFilterForm_1 = require("../View/Components/FilterForm/QuickFilterForm");
-exports.FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
+const FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrapper {
     onParentModelChanged(parentModel, filterChangedEvent) {
         // todo?
     }
@@ -41,3 +41,4 @@ exports.FloatingFilterWrapperFactory = (adaptable) => class FloatingFilterWrappe
         this.filterContainer = null;
     }
 };
+exports.FloatingFilterWrapperFactory = FloatingFilterWrapperFactory;

package/src/agGrid/PercentBarRenderer.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
 const FormatHelper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/FormatHelper"));
-exports.getPercentBarRendererForColumn = (formatColumn, api) => {
+const getPercentBarRendererForColumn = (formatColumn, api) => {
     var _a;
     if (!((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.PercentBarStyle)) {
         return;
@@ -82,3 +82,4 @@ exports.getPercentBarRendererForColumn = (formatColumn, api) => {
         }
     };
 };
+exports.getPercentBarRendererForColumn = getPercentBarRendererForColumn;

package/src/agGrid/agGridHelper.js

@@ -162,7 +162,8 @@ class agGridHelper {
         const customFriendlyName = typeof columnFriendlyName === 'function'
             ? columnFriendlyName({ colId: colId, agColumn: agGridColumn })
             : null;
-        const FriendlyName = (customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : isActionRowButtonColumn) ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
+        const FriendlyName = (customFriendlyName !== null && customFriendlyName !== void 0 ? customFriendlyName : isActionRowButtonColumn)
+            ? GeneralConstants_1.ADAPTABLE_ROW_ACTION_BUTTONS_FRIENDLY_NAME
             : this.gridOptions.columnApi.getDisplayNameForColumn(agGridColumn, 'header');
         if (!this.initialAgGridColDefs[colId]) {
             this.initialAgGridColDefs[colId] = Object.assign({}, agGridColumn.getUserProvidedColDef());
@@ -220,6 +221,7 @@ class agGridHelper {
             iconKey: 'menu',
             width: UIHelper_1.default.getAdaptableToolPanelWidth(),
             minWidth: UIHelper_1.default.getAdaptableToolPanelWidth(),
+            // maxWidth = undefined,
         };
     }
     isSideBarDefObject(sidebarDef) {

package/src/agGrid/agGridMenuHelper.js

@@ -107,9 +107,7 @@ class agGridMenuHelper {
                 ? x.onClick
                 : () => this.adaptable.api.internalApi.dispatchReduxAction(x.reduxAction),
             icon: icons_1.iconToString(x.icon, {
-                style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                },
+                fill: 'var(--ab-color-text-on-primary)',
             }),
         };
     }
@@ -127,9 +125,7 @@ class agGridMenuHelper {
                     ? () => this.adaptable.api.internalApi.dispatchReduxAction(adaptableMenuItem.reduxAction)
                     : undefined,
             icon: icons_1.iconToString(adaptableMenuItem.icon, {
-                style: {
-                    fill: 'var(--ab-color-text-on-primary)',
-                },
+                fill: 'var(--ab-color-text-on-primary)',
             }),
             subMenu: subMenuItems,
         };
@@ -140,7 +136,9 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserColumnMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: menuItem.icon,
+            icon: icons_1.iconToString(menuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
             disabled: disabled,
             subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
                 ? undefined
@@ -155,7 +153,9 @@ class agGridMenuHelper {
         return {
             name: this.getLabelFromUserContextMenuItem(menuItem, menuContext),
             action: () => (fn ? fn(menuContext) : null),
-            icon: menuItem.icon,
+            icon: icons_1.iconToString(menuItem.icon, {
+                fill: 'var(--ab-color-text-on-primary)',
+            }),
             disabled: disabled,
             subMenu: ArrayExtensions_1.ArrayExtensions.IsNullOrEmpty(menuItem.subMenuItems)
                 ? undefined
@@ -188,7 +188,9 @@ class agGridMenuHelper {
                 label: groupedCols.length == 1 ? 'Ungroup Column' : 'Ungroup All',
                 onClick: () => this.gridOptions.columnApi.setRowGroupColumns([]),
                 isVisible: true,
-                icon: 'undo',
+                icon: {
+                    name: 'undo',
+                },
             };
             let menuItem = this.createAgGridMenuDefFromAdaptableMenu(ungroupMenuItem);
             return menuItem;
@@ -367,7 +369,8 @@ class agGridMenuHelper {
         });
     }
     buildStandaloneColumnHeader(adaptableColumn) {
-        let menuContext = this.createColumnMenuContextObject(adaptableColumn, null);
+        const agGridColumn = this.adaptable.api.columnApi.getAgGridColumnForAdaptableColumn(adaptableColumn.columnId);
+        let menuContext = this.createColumnMenuContextObject(adaptableColumn, agGridColumn);
         let returnMenuItems = [];
         returnMenuItems.push(...this.getAdaptableMenuItemsColumnHeader(adaptableColumn, menuContext));
         let userColumnMenuItems = this.getUserMenuItemsColumnHeader(menuContext);

package/src/agGrid/createAgStatusPanelComponent.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ReactDOM = tslib_1.__importStar(require("react-dom"));
 const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
-exports.createAgStatusPanelComponent = (component, adaptable, context) => {
+const createAgStatusPanelComponent = (component, adaptable, context) => {
     return class StatusBarRenderer {
         init(params) {
             this.params = params;
@@ -30,3 +30,4 @@ exports.createAgStatusPanelComponent = (component, adaptable, context) => {
         }
     };
 };
+exports.createAgStatusPanelComponent = createAgStatusPanelComponent;

package/src/components/AdaptableFormComponent/AdaptableFormComponent.js

@@ -39,11 +39,14 @@ function AdaptableFormComponent({ formDef, data, onChange, onButtonClick, displa
         const newData = Object.assign(Object.assign({}, data), { [key]: value });
         onChange(newData);
     };
-    const disabledButtons = react_1.useMemo(() => { var _a, _b; return (_b = (_a = formDef.buttons) === null || _a === void 0 ? void 0 : _a.map((button) => {
-        // defensive programming: conventionally context should ALWAYS be present for validating buttons
-        const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
-        return !isValid;
-    })) !== null && _b !== void 0 ? _b : []; }, [data]);
+    const disabledButtons = react_1.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = formDef.buttons) === null || _a === void 0 ? void 0 : _a.map((button) => {
+            // defensive programming: conventionally context should ALWAYS be present for validating buttons
+            const isValid = !!button.disabled && !!context ? !button.disabled(button, context) : true;
+            return !isValid;
+        })) !== null && _b !== void 0 ? _b : [];
+    }, [data]);
     const renderLabel = (field) => {
         return (React.createElement(rebass_1.Box, { className: 'ab-FormLayout_column--label', style: { textAlign: 'end' } }, field.label));
     };

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { AdaptableExternalIcon, AdaptableIcon, AdaptableInternalIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+export interface AdaptableIconComponentProps {
+    icon: AdaptableIcon;
+    iconClassName?: string;
+}
+export declare const AdaptableIconComponent: (props: AdaptableIconComponentProps) => JSX.Element;
+export declare const isAdaptableInternalIcon: (icon: unknown) => icon is AdaptableInternalIcon;
+export declare const isAdaptableExternalIcon: (icon: unknown) => icon is AdaptableExternalIcon;
+export declare const isAdaptableIcon: (icon: unknown) => icon is AdaptableIcon;

package/src/components/AdaptableIconComponent/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAdaptableIcon = exports.isAdaptableExternalIcon = exports.isAdaptableInternalIcon = exports.AdaptableIconComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const icons_1 = require("../icons");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const AdaptableIconComponent = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { icon, iconClassName } = props;
+    if (!icon) {
+        return null;
+    }
+    const className = join_1.default(icon.className, iconClassName);
+    if (exports.isAdaptableInternalIcon(icon)) {
+        return React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className });
+    }
+    if (exports.isAdaptableExternalIcon(icon)) {
+        let width = (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'var(--ab-cmp-icon__width)';
+        let height = (_d = (_c = icon.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'var(--ab-cmp-icon__height)';
+        const iconStyle = (_e = icon.style) !== null && _e !== void 0 ? _e : {};
+        return React.createElement("img", { src: icon.src, className: className, style: Object.assign({ height, width }, iconStyle) });
+    }
+    return null;
+};
+exports.AdaptableIconComponent = AdaptableIconComponent;
+const isAdaptableInternalIcon = (icon) => {
+    var _a;
+    return typeof ((_a = icon) === null || _a === void 0 ? void 0 : _a.name) === 'string';
+};
+exports.isAdaptableInternalIcon = isAdaptableInternalIcon;
+const isAdaptableExternalIcon = (icon) => {
+    var _a;
+    return typeof ((_a = icon) === null || _a === void 0 ? void 0 : _a.src) === 'string';
+};
+exports.isAdaptableExternalIcon = isAdaptableExternalIcon;
+const isAdaptableIcon = (icon) => {
+    return exports.isAdaptableInternalIcon(icon) || exports.isAdaptableExternalIcon(icon);
+};
+exports.isAdaptableIcon = isAdaptableIcon;

package/src/components/CheckBox/index.js

@@ -55,7 +55,8 @@ const CheckBox = (_a) => {
         after));
 };
 exports.CheckBox = CheckBox;
-exports.CheckBoxGroup = (props) => {
+const CheckBoxGroup = (props) => {
     const { orientation } = props, flexProps = tslib_1.__rest(props, ["orientation"]);
     return (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps)));
 };
+exports.CheckBoxGroup = CheckBoxGroup;