@adaptabletools/adaptable 16.0.0-canary.1 → 16.0.0-canary.3

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -5,44 +5,34 @@ const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const DefaultAdaptableOptions_1 = require("../../../Utilities/Defaults/DefaultAdaptableOptions");
 const rebass_1 = require("rebass");
 const GridOptionsForm = (props) => {
     var _a;
-    let abOptions = props.adaptableOptions;
-    const gridOptions = Object.assign(Object.assign({}, DefaultAdaptableOptions_1.DefaultAdaptableOptions._gridOptions), abOptions._gridOptions);
+    let { gridOptions } = props;
     return (React.createElement(rebass_1.Box, { p: 2 },
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
         React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormLayout_1.FormRow, { label: "Enable Range Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.enableRangeSelection, onChange: (enableRangeSelection) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions._gridOptions = Object.assign({}, abOptions._gridOptions);
-                        abOptions._gridOptions.enableRangeSelection = enableRangeSelection;
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { enableRangeSelection: enableRangeSelection });
+                        props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Quick Filter" },
                 React.createElement(CheckBox_1.CheckBox, { checked: (_a = gridOptions.defaultColDef) === null || _a === void 0 ? void 0 : _a.floatingFilter, onChange: (floatingFilter) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions._gridOptions = Object.assign({}, abOptions._gridOptions);
-                        abOptions._gridOptions.defaultColDef = {
-                            floatingFilter,
-                        };
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { defaultColDef: {
+                                floatingFilter,
+                            } });
+                        props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Suppress Column Virtualisation" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressColumnVirtualisation, onChange: (suppressColumnVirtualisation) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions._gridOptions = Object.assign({}, abOptions._gridOptions);
-                        abOptions._gridOptions.suppressColumnVirtualisation = suppressColumnVirtualisation;
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressColumnVirtualisation: suppressColumnVirtualisation });
+                        props.onChangedGridOptions(gridOptions);
                     } })),
             React.createElement(FormLayout_1.FormRow, { label: "Show Column Menu Button" },
                 React.createElement(CheckBox_1.CheckBox, { checked: gridOptions.suppressMenuHide, onChange: (suppressMenuHide) => {
-                        abOptions = Object.assign({}, abOptions);
-                        abOptions._gridOptions = Object.assign({}, abOptions._gridOptions);
-                        abOptions._gridOptions.suppressMenuHide = suppressMenuHide;
-                        props.onChangeadAptableOptions(abOptions);
+                        gridOptions = Object.assign(Object.assign({}, gridOptions), { suppressMenuHide: suppressMenuHide });
+                        props.onChangedGridOptions(gridOptions);
                     } })))));
 };
 exports.default = GridOptionsForm;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.d.ts

@@ -1,6 +1,6 @@
+import { GridOptions } from '@ag-grid-community/core';
 import * as React from 'react';
-import { AdaptableOptions } from '../../../../../types';
 export declare const UIOptionsSidebarForm: React.FunctionComponent<{
-    abOptions: AdaptableOptions;
-    onChange: (abOptions: AdaptableOptions) => void;
+    gridOptions: GridOptions;
+    onChange: (gridOptions: GridOptions) => void;
 }>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -38,9 +38,8 @@ const isSidebarChecked = (sideBar, panelName) => {
 };
 const UIOptionsSidebarForm = (props) => {
     var _a;
-    const { abOptions, onChange } = props;
-    const { _gridOptions } = props.abOptions;
-    const sideBar = prepareSidebarDef(_gridOptions.sideBar);
+    const { gridOptions, onChange } = props;
+    const sideBar = prepareSidebarDef(gridOptions.sideBar);
     const renderSidebarCheckbox = (sidebarName) => {
         return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
     };
@@ -60,13 +59,13 @@ const UIOptionsSidebarForm = (props) => {
         if (newPanels.length === 0) {
             hiddenByDefault = true;
         }
-        const newAbOptions = Object.assign(Object.assign({}, abOptions), { _gridOptions: Object.assign(Object.assign({}, abOptions._gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) }) });
-        props.onChange(newAbOptions);
+        const newGridOptions = Object.assign(Object.assign({}, gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { toolPanels: newPanels, hiddenByDefault }) });
+        props.onChange(newGridOptions);
     };
     let sidebarPosition = (_a = sideBar === null || sideBar === void 0 ? void 0 : sideBar.position) !== null && _a !== void 0 ? _a : 'right';
     const handleSidebarPositionChange = (position) => {
-        const newAbOptions = Object.assign(Object.assign({}, abOptions), { gridOptions: Object.assign(Object.assign({}, abOptions._gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) }) });
-        props.onChange(newAbOptions);
+        const newGridOptions = Object.assign(Object.assign({}, gridOptions), { sideBar: Object.assign(Object.assign({}, sideBar), { position }) });
+        props.onChange(newGridOptions);
     };
     return (React.createElement(rebass_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Tool Panels"),

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { AdaptableOptions } from '../../../../types';
+import { GridOptions } from '@ag-grid-community/core';
 export declare const UIOptionsStatusbarForm: React.FunctionComponent<{
-    abOptions: AdaptableOptions;
-    onChange: (abOptions: AdaptableOptions) => void;
+    gridOptions: GridOptions;
+    onChange: (gridOptions: GridOptions) => void;
 }>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -13,7 +13,7 @@ const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components
 const FormBox_1 = require("../Components/FormBox");
 const UIOptionsStatusbarForm = (props) => {
     var _a, _b, _c, _d;
-    const allPanels = (_c = (_b = (_a = props.abOptions._gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
+    const allPanels = (_c = (_b = (_a = props.gridOptions) === null || _a === void 0 ? void 0 : _a.statusBar) === null || _b === void 0 ? void 0 : _b.statusPanels) !== null && _c !== void 0 ? _c : [];
     const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
         const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
         if (previousItem) {
@@ -35,7 +35,7 @@ const UIOptionsStatusbarForm = (props) => {
         const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
         const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
         const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
-        props.onChange(Object.assign(Object.assign({}, props.abOptions), { _gridOptions: Object.assign(Object.assign({}, props.abOptions._gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions._gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+        props.onChange(Object.assign(Object.assign({}, props.gridOptions), { statusBar: Object.assign(Object.assign({}, props.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }));
     };
     const disabled = false;
     const panelToTabItemId = (panel) => { var _a; return (_a = panel.key) !== null && _a !== void 0 ? _a : panel.statusPanel; };
@@ -78,7 +78,7 @@ const UIOptionsStatusbarForm = (props) => {
         const newStatusbarPanels = [...allPanels, newAdaptablePanel];
         setAdaptablePanelTitle('');
         setAdaptablePanelAlign('left');
-        props.onChange(Object.assign(Object.assign({}, props.abOptions), { _gridOptions: Object.assign(Object.assign({}, props.abOptions._gridOptions), { statusBar: Object.assign(Object.assign({}, props.abOptions._gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }) }));
+        props.onChange(Object.assign(Object.assign({}, props.gridOptions), { statusBar: Object.assign(Object.assign({}, props.gridOptions.statusBar), { statusPanels: newStatusbarPanels }) }));
     };
     return (React.createElement(rebass_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Status Bar"),

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.d.ts

@@ -1,8 +1,11 @@
+import { GridOptions } from '@ag-grid-community/core';
 import * as React from 'react';
 import { AdaptableOptions } from '../../../../types';
 interface UIElementsOptionsProps {
     adaptableOptions: AdaptableOptions;
-    onChangeadAptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    gridOptions: GridOptions;
+    onChangedAdaptableOptions: (adaptableOptions: AdaptableOptions) => void;
+    onChangedGridOptions: (gridOptions: GridOptions) => void;
 }
 export declare const UIElementsForm: React.FunctionComponent<UIElementsOptionsProps>;
 export {};

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -9,18 +9,17 @@ const UIOptionsActionColumnsForm_1 = require("./UIOptionsActionColumnsForm");
 const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
 const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
 const UIElementsForm = (props) => {
-    let abOptions = props.adaptableOptions;
     return (React.createElement(rebass_1.Box, { p: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Tool Panel"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Status Bar"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Action Rows"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })),
+                React.createElement(UIOptionsSidebarForm_1.UIOptionsSidebarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions })),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })),
+                React.createElement(UIOptionsStatusbarForm_1.UIOptionsStatusbarForm, { gridOptions: props.gridOptions, onChange: props.onChangedGridOptions })),
             ' ',
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: abOptions, onChange: props.onChangeadAptableOptions })))));
+                React.createElement(UIOptionsActionColumnsForm_1.UIOptionsActionColumnsForm, { abOptions: props.adaptableOptions, onChange: props.onChangedAdaptableOptions })))));
 };
 exports.UIElementsForm = UIElementsForm;

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

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { Reducer, ReactNode } from 'react';
+import { GridOptions } from '@ag-grid-community/core';
 import { AdaptableOptions } from '../../types';
 import { ConfigurationWizardProps } from './AdaptableConfigurationDialog/ConfigurationWizard';
 export interface AdaptableWizardViewProps {
     adaptableOptions?: Omit<AdaptableOptions, 'primaryKey'> & {
         primaryKey?: string;
     };
+    gridOptions?: GridOptions;
     /**
      * Default true.
      */
@@ -16,7 +18,7 @@ export interface AdaptableWizardViewProps {
      * This mode skips over interpreting data to figure-out columns.
      */
     skipToWizard?: boolean;
-    onInit: (adaptableOptions: AdaptableOptions) => any;
+    onInit: (adaptableOptions: AdaptableOptions, gridOptions: GridOptions) => any;
     fileContentsToJSON?: (str: string) => Promise<any> | any;
     readFile?: (file: File) => Promise<any>;
     fileAccept?: string;
@@ -39,6 +41,7 @@ interface WizardState {
     dropped: boolean;
     error: any;
     adaptableOptions: AdaptableOptions;
+    gridOptions: GridOptions;
 }
 /**
  * The wizard in a few modes:

package/src/View/AdaptableWizardView/Wizard.js

@@ -14,7 +14,7 @@ exports.initialState = {
 };
 const reducer = (state, action) => {
     if (action.type === 'DROPPED') {
-        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload, dropped: true, error: null });
+        return Object.assign(Object.assign({}, state), { adaptableOptions: action.payload.adaptableOptions, gridOptions: action.payload.gridOptions, dropped: true, error: null });
     }
     if (action.type === 'ERROR') {
         return Object.assign(Object.assign({}, state), { dropped: false, error: action.payload });
@@ -37,11 +37,10 @@ exports.reducer = reducer;
  */
 const Wizard = (props) => {
     var _a;
-    const [state, dispatch] = (0, react_1.useReducer)(exports.reducer, Object.assign(Object.assign({}, exports.initialState), { adaptableOptions: props.adaptableOptions }));
+    const [state, dispatch] = (0, react_1.useReducer)(exports.reducer, Object.assign(Object.assign({}, exports.initialState), { adaptableOptions: props.adaptableOptions, gridOptions: props.gridOptions }));
     const [droppableKey, setDroppableKey] = (0, react_1.useState)(Date.now());
     const [isDataLoading, setIsDataLoading] = (0, react_1.useState)(false);
     const handleDataSource = (array, file) => {
-        var _a;
         const dataSourceInfo = (props.prepareData || helper_1.prepareDataSource)(array, file);
         try {
             (0, Utils_1.validDataSource)(dataSourceInfo);
@@ -52,10 +51,9 @@ const Wizard = (props) => {
                 payload: `Invalid adaptable configuration - ${err}`,
             });
         }
-        const gridOptions = (0, helper_1.prepareGridOptions)(dataSourceInfo, (_a = props.adaptableOptions) === null || _a === void 0 ? void 0 : _a._gridOptions);
+        const gridOptions = (0, helper_1.prepareGridOptions)(dataSourceInfo, props.gridOptions);
         const adaptableOptions = Object.assign({}, props.adaptableOptions);
         adaptableOptions.adaptableId = adaptableOptions.adaptableId || (file ? file.name : '');
-        adaptableOptions._gridOptions = gridOptions;
         if (dataSourceInfo.primaryKey) {
             adaptableOptions.primaryKey = dataSourceInfo.primaryKey;
         }
@@ -63,24 +61,27 @@ const Wizard = (props) => {
         if (shouldShowWizard) {
             dispatch({
                 type: 'DROPPED',
-                payload: adaptableOptions,
+                payload: { adaptableOptions, gridOptions },
             });
         }
         else {
-            props.onInit(adaptableOptions);
+            props.onInit(adaptableOptions, gridOptions);
         }
     };
     let wizard;
     if (props.skipToWizard || state.dropped) {
-        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { startSections: props.startSections, adaptableOptions: state.adaptableOptions, onCancel: () => {
+        wizard = (React.createElement(AdaptableConfigurationDialog_1.default, { startSections: props.startSections, adaptableConfig: {
+                adaptableOptions: state.adaptableOptions,
+                gridOptions: state.gridOptions,
+            }, onCancel: () => {
                 // change the file droppable component key
                 // so it's remounted and it's in the initial state
                 setDroppableKey(Date.now());
                 dispatch({
                     type: 'CANCEL',
                 });
-            }, onFinish: (adaptableOptions) => {
-                props.onInit(adaptableOptions);
+            }, onFinish: (adaptableConfig) => {
+                props.onInit(adaptableConfig.adaptableOptions, adaptableConfig.gridOptions);
             } }));
     }
     (0, react_1.useEffect)(() => {

package/src/View/Charting/useChartingElements.js

@@ -77,7 +77,7 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
     }
     const chartSelector = (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, content));
     const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) || chartingOptions.agGridContainerName || GeneralConstants_1.AG_GRID_CHART_WINDOW));
-    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
+    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? closeChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
     return {

package/src/View/Components/AdaptableButton/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { SimpleButtonProps } from '../../../components/SimpleButton';
+export declare const AdaptableButtonComponent: React.FunctionComponent<SimpleButtonProps>;

package/src/View/Components/AdaptableButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableButtonComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Icon_1 = require("../../../components/Icon");
+const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptableContext_1 = require("../../AdaptableContext");
+// This component is connected to adaptable and know about custom icons
+const AdaptableButtonComponent = (props) => {
+    let icon = props.icon;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
+        icon = adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
+    }
+    return React.createElement(SimpleButton_1.default, Object.assign({}, props, { icon: icon }));
+};
+exports.AdaptableButtonComponent = AdaptableButtonComponent;

package/src/View/Components/AdaptableIconComponent/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IconComponentProps } from '../../../components/Icon';
+/**
+ * This is a connected componnet.
+ * It needs to be used only inside adaptable context.
+ */
+export declare const AdaptableIconComponent: React.FunctionComponent<IconComponentProps>;

package/src/View/Components/AdaptableIconComponent/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdaptableIconComponent = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Icon_1 = require("../../../components/Icon");
+const useCustomIcon_1 = require("./useCustomIcon");
+/**
+ * This is a connected componnet.
+ * It needs to be used only inside adaptable context.
+ */
+const AdaptableIconComponent = (props) => {
+    const icon = (0, useCustomIcon_1.useCustomIcon)(props.icon);
+    return React.createElement(Icon_1.IconComponent, Object.assign({}, props, { icon: icon }));
+};
+exports.AdaptableIconComponent = AdaptableIconComponent;

package/src/View/Components/AdaptableIconComponent/useCustomIcon.d.ts

@@ -0,0 +1,2 @@
+import { AdaptableIcon } from '../../../types';
+export declare const useCustomIcon: (icon: AdaptableIcon) => AdaptableIcon;

package/src/View/Components/AdaptableIconComponent/useCustomIcon.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCustomIcon = void 0;
+const AdaptableContext_1 = require("../../AdaptableContext");
+const useCustomIcon = (icon) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    if (!icon) {
+        return icon;
+    }
+    return adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(icon);
+};
+exports.useCustomIcon = useCustomIcon;

package/src/{components → View/Components}/Badge/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableIcon, AdaptableStyle } from '../../types';
+import { AdaptableIcon, AdaptableStyle } from '../../../types';
 export interface BadgeProps {
     adaptableStyle: AdaptableStyle;
     icon?: AdaptableIcon;

package/src/{components → View/Components}/Badge/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
+const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
 const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 const Badge = (props) => {
     const { iconPosition = 'start', icon: iconProps } = props;

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

@@ -125,7 +125,7 @@ class FilterFormComponent extends React.Component {
         const filterOptions = this.props.api.optionsApi.getFilterOptions();
         const predicateDefs = this.props.api.filterApi
             .getFilterPredicateDefsForColumn(this.props.currentColumn)
-            .filter((predicate) => !predicate.onlyQuickFilter);
+            .filter((predicate) => predicate.id !== 'BooleanToggle');
         let uiSelectedColumnValues = ((_b = (_a = this.state.editedColumnFilter) === null || _a === void 0 ? void 0 : _a.Predicate) === null || _b === void 0 ? void 0 : _b.PredicateId) === 'Values'
             ? this.state.editedColumnFilter.Predicate.Inputs
             : [];

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ListGroupItem_1 = tslib_1.__importDefault(require("../../../components/List/ListGroupItem"));
 const ListGroup_1 = tslib_1.__importDefault(require("../../../components/List/ListGroup"));
-const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
+const Icon_1 = require("../../../components/Icon");
 class ListBoxMenu extends React.Component {
     constructor(props) {
         super(props);
@@ -14,7 +14,7 @@ class ListBoxMenu extends React.Component {
     render() {
         let menuItems = this.props.MenuItems.map((menuItem, index) => {
             return (React.createElement(ListGroupItem_1.default, { key: index, onClick: () => this.onClick(menuItem) },
-                menuItem.icon && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon }),
+                menuItem.icon && React.createElement(Icon_1.IconComponent, { icon: menuItem.icon }),
                 menuItem.label));
         });
         return (React.createElement("div", { style: divStyle },

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

@@ -16,8 +16,9 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const CheckBox_1 = require("../../../components/CheckBox");
 const getDefaultColumnFilterPredicate_1 = require("./getDefaultColumnFilterPredicate");
-const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
+const Icon_1 = require("../../../components/Icon");
 const QuickFilterValues_1 = require("./QuickFilterValues");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 class QuickFilterFormComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -113,7 +114,7 @@ class QuickFilterFormComponent extends React.Component {
         if ('text' in predicateDef.icon) {
             return React.createElement("span", null, predicateDef.icon.text);
         }
-        if ((0, AdaptableIconComponent_1.isAdaptableIcon)(predicateDef.icon)) {
+        if ((0, Icon_1.isAdaptableIcon)(predicateDef.icon)) {
             return React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: predicateDef.icon });
         }
     }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
 import { BoxProps } from 'rebass';
-import { AdaptableInternalIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
+import { AdaptableSystemIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
 export interface PanelWithButtonProps extends PanelProps {
     buttonContent?: React.ReactNode;
     buttonClick?: () => void;
@@ -11,7 +11,7 @@ export interface PanelWithButtonProps extends PanelProps {
     headerProps?: BoxProps & {
         'data-name': string;
     };
-    glyphicon?: AdaptableInternalIconName;
+    glyphicon?: AdaptableSystemIconName;
     buttonDisabled?: boolean;
     buttonStyle?: string;
     borderRadius?: string;

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
 import { BoxProps } from 'rebass';
-import { AdaptableInternalIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
+import { AdaptableSystemIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
 export interface PanelWithImageProps extends PanelProps {
-    glyphicon?: AdaptableInternalIconName;
-    icon?: AdaptableInternalIconName;
+    glyphicon?: AdaptableSystemIconName;
+    icon?: AdaptableSystemIconName;
     infoLink?: string;
     infoLinkDisabled?: boolean;
     borderRadius?: string;

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

@@ -6,7 +6,7 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
 const useGlobalEvent_1 = require("../../../../components/utils/useGlobalEvent");
-const AdaptableIconComponent_1 = require("../../../../components/AdaptableIconComponent");
+const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
 const Navigation = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleKeyPress = React.useCallback((event) => {

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

@@ -4,9 +4,8 @@ exports.TopBar = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const icons_1 = require("../../../../components/icons");
 const AdaptableContext_1 = require("../../../AdaptableContext");
-const AdaptableIconComponent_1 = require("../../../../components/AdaptableIconComponent");
+const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
 const TopBar = (props) => {
     var _a;
     const baseClassName = 'ab-Adaptable-Popup__TopBar';
@@ -15,7 +14,7 @@ const TopBar = (props) => {
     let icon = React.createElement(React.Fragment, null);
     const iconClassName = `${baseClassName}__Icon`;
     if (props.icon === 'ConfigurationIcon') {
-        icon = React.createElement(icons_1.Icon, { className: iconClassName, name: "settings" });
+        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { iconClassName: iconClassName, icon: { name: 'settings' } });
     }
     else if (props.icon === 'ApplicationIcon' && applicationIcon) {
         icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: applicationIcon, iconClassName: iconClassName });

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

@@ -10,7 +10,7 @@ const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
 const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 const AdaptablePopupAlert = (props) => {
     var _a;
     const messageType = props.adaptableAlert.alertDefinition.MessageType || 'Error';

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -4,13 +4,13 @@ exports.PredicateEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
-const AdaptableIconComponent_1 = require("../../../components/AdaptableIconComponent");
+const Icon_1 = require("../../../components/Icon");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const icons_1 = require("../../../components/icons");
 const Tag_1 = require("../../../components/Tag");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../AdaptableInput"));
 const PermittedValuesSelector_1 = require("../PermittedValuesSelector");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 const isValuesPredicateDef = (colDef) => colDef && ['Values', 'ExcludeValues'].includes(colDef.id);
 const PredicateEditor = (props) => {
     var _a, _b, _c;
@@ -40,8 +40,8 @@ const PredicateEditor = (props) => {
     const currentPredicateDef = (_b = props === null || props === void 0 ? void 0 : props.predicateDefs) === null || _b === void 0 ? void 0 : _b.find((item) => { var _a; return item.id === ((_a = props.predicate) === null || _a === void 0 ? void 0 : _a.PredicateId); });
     let icon = null;
     if (currentPredicateDef) {
-        if ((0, AdaptableIconComponent_1.isAdaptableInternalIcon)(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
-            icon = React.createElement(icons_1.Icon, { name: currentPredicateDef.icon.name });
+        if ((0, Icon_1.isAdaptableSystemIcon)(currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
+            icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: currentPredicateDef.icon });
         }
         else if ((currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon) && 'text' in (currentPredicateDef === null || currentPredicateDef === void 0 ? void 0 : currentPredicateDef.icon)) {
             icon = React.createElement("span", null, currentPredicateDef.icon.text);

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const PanelDashboard_1 = require("../Components/Panels/PanelDashboard");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
 const CustomToolbarWrapper = (props) => {
     let contentsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__contents';
     let buttonsDivId = 'ab-CustomToolbar__' + props.customToolbar.name + '__buttons';
@@ -97,7 +97,7 @@ const CustomToolbarWrapper = (props) => {
                 const disabled = button.disabled && button.disabled(button, dashboardContext);
                 let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
                 let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
+                return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, className: (buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || '', onClick: () => {
                         button.onClick ? button.onClick(button, dashboardContext) : null;
                         setTimeout(() => {
                             // mutate state to force a re-rendering

package/src/View/Dashboard/Dashboard.js

@@ -10,7 +10,6 @@ const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const DashboardRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/DashboardRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const QuickSearchRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/QuickSearchRedux"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const rebass_1 = require("rebass");
 const Dashboard_1 = require("../../components/Dashboard");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
@@ -20,7 +19,8 @@ const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const ModuleToolbarWrapper_1 = require("./ModuleToolbarWrapper");
 const CustomToolbarWrapper_1 = require("./CustomToolbarWrapper");
 const CustomDashboardButton_1 = require("./CustomDashboardButton");
-const AdaptableIconComponent_1 = require("../../components/AdaptableIconComponent");
+const AdaptableIconComponent_1 = require("../Components/AdaptableIconComponent");
+const AdaptableButton_1 = require("../Components/AdaptableButton");
 const DashboardComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const dashboardAccessLevel = props.api.internalApi
@@ -80,7 +80,7 @@ const DashboardComponent = (props) => {
                 var _a, _b, _c;
                 let menuItem = props.GridState.ModuleButtonMenuItems.find((y) => y.isVisible && y.module == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton_1.default, { "data-name": `dashboard-module-button-${(_a = menuItem.module) !== null && _a !== void 0 ? _a : 'custom-' + index}`, key: menuItem.label, variant: menuItem.module === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.module === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.module === 'SystemStatus'
+                    return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${(_a = menuItem.module) !== null && _a !== void 0 ? _a : 'custom-' + index}`, key: menuItem.label, variant: menuItem.module === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.module === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.module === 'SystemStatus'
                             ? Object.assign(Object.assign({}, UIHelper_1.default.getStyleForMessageType((_c = (_b = props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()) === null || _b === void 0 ? void 0 : _b.statusType) !== null && _c !== void 0 ? _c : 'Success')), { border: 0 }) : {} }));
                 }
             });
@@ -99,7 +99,7 @@ const DashboardComponent = (props) => {
     };
     const renderQuickSearch = () => {
         return (React.createElement(rebass_1.Box, { ml: 2 },
-            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
+            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();

package/src/View/DataChangeHistory/DataChangeHistoryGrid.d.ts

@@ -12,5 +12,6 @@ export interface DataChangeHistoryGridProps {
     agGridContainerId: string;
     changeHistoryLog: Record<string, CellDataChangedInfo>;
     onUndoChange: (changeKey: string) => void;
+    onClearRow: (changeKey: string) => void;
 }
 export declare const DataChangeHistoryGrid: (props: DataChangeHistoryGridProps) => JSX.Element;