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

package/src/View/Dashboard/Dashboard.js

@@ -70,7 +70,7 @@ const DashboardComponent = (props) => {
     const renderModuleButtons = () => {
         let shortcutsArray = props.DashboardState.ModuleButtons;
         let shortcuts = null;
-        const alwaysShowInDashboard = props.api.internalApi.getAdaptableOptions().settingsPanelOptions.alwaysShowInDashboard;
+        const alwaysShowInDashboard = props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
         const shouldAddSettingsPanel = alwaysShowInDashboard &&
             !props.api.internalApi.getEntitlementService().isModuleHiddenEntitlement('SettingsPanel');
         if (shouldAddSettingsPanel && !shortcutsArray.includes('SettingsPanel')) {
@@ -100,14 +100,14 @@ const DashboardComponent = (props) => {
     };
     const renderQuickSearch = () => {
         return (React.createElement(rebass_1.Box, { ml: 2 },
-            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.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.getSearchOptions().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.internalApi.getAdaptableOptions().dashboardOptions;
+    let dashboardOptions = props.api.optionsApi.getDashboardOptions();
     const shouldRenderQuickSearchHeader = dashboardOptions.showQuickSearchInHeader &&
         props.api.internalApi.getModuleService().getModuleById(ModuleConstants_1.QuickSearchModuleId).isModuleAvailable();
-    const applicationIcon = props.api.internalApi.getAdaptableOptions().userInterfaceOptions.applicationIcon;
-    return props.DashboardState.IsHidden ? (React.createElement("div", null)) : (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat, activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
+    const applicationIcon = props.api.optionsApi.getUserInterfaceOptions().applicationIcon;
+    return props.DashboardState.IsHidden ? (React.createElement("div", null)) : (React.createElement(Dashboard_1.Dashboard, { title: instanceName, canFloat: props.api.optionsApi.getDashboardOptions().canFloat, activeTabIndex: props.DashboardState.ActiveTabIndex, onActiveTabIndexChange: (ActiveTabIndex) => {
             props.onSetActiveTabIndex(ActiveTabIndex);
         }, collapsed: props.DashboardState.IsCollapsed, onCollapsedChange: (IsCollapsed) => {
             props.onSetIsCollapsed(IsCollapsed);

package/src/View/Dashboard/DashboardPopup.js

@@ -65,8 +65,7 @@ class DashboardPopupComponent extends React.Component {
         const isDashboardDisabled = dashboardAccessLevel === 'ReadOnly';
         const isModuleCheckboxDisabled = (module) => {
             if (module === 'SettingsPanel') {
-                return this.props.api.internalApi.getAdaptableOptions().settingsPanelOptions
-                    .alwaysShowInDashboard;
+                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
             }
             return false;
         };
@@ -75,7 +74,7 @@ class DashboardPopupComponent extends React.Component {
                 areDashboardSettingsVisible && (React.createElement(Panel_1.default, { header: 'Dashboard Modes', style: { height: 'auto', overflow: 'visible' }, variant: "default", borderRadius: "none" },
                     React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "collapse", className: `${baseClassName}__settings-option`, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
                     ' ',
-                    this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+                    this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { mr: 3, "data-name": "floating", className: `${baseClassName}__settings-option`, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
                     ' ',
                     React.createElement(CheckBox_1.CheckBox, { "data-name": "hidden", className: `${baseClassName}__settings-option`, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden"))),
                 React.createElement(Panel_1.default, { header: 'Dashboard Contents', style: { borderBottom: '1px solid var(--ab-color-primary)' }, variant: "default", borderRadius: "none", marginTop: 4 },

package/src/View/Dashboard/DashboardViewPanel.js

@@ -17,7 +17,7 @@ class DashboardViewPanelComponent extends React.Component {
             ' ',
             React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsCollapsed, onChange: (checked) => this.props.onSetDashboardCollapsed(checked) }, "Collapse"),
             '',
-            this.props.api.internalApi.getAdaptableOptions().dashboardOptions.canFloat && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
+            this.props.api.optionsApi.getDashboardOptions().canFloat && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__collapsed-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsFloating, onChange: (checked) => this.props.onSetDashboardFloating(checked) }, "Float")),
             ' ',
             React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Dashboard__hidden-check`, marginTop: 0, fontSize: 2, padding: 1, checked: this.props.IsHidden, onChange: (checked) => this.props.onSetDashboardHidden(checked) }, "Hidden")));
     }

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -64,7 +64,7 @@ const DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.internalApi.getAdaptableOptions().gridOptions.api.applyTransactionAsync({
+        adaptableApi.optionsApi.getAgGridOptions().api.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });

package/src/View/DataChangeHistory/DataChangeHistoryPopup.js

@@ -31,8 +31,7 @@ class DataChangeHistoryPopupComponent extends React.Component {
             suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPopup--button-resume", "data-name": 'data-change-history--button-resume', variant: 'outlined', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() }, "Resume")),
             enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPopup--button-suspend", "data-name": 'data-change-history--button-suspend', variant: 'outlined', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() }, "Suspend")),
             (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPopup--button-deactivate", "data-name": 'data-change-history--button-deactivate', variant: 'outlined', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }, "Deactivate"))));
-        const dateFormat = `${this.props.api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions
-            .dateFormat} HH:mm:ss`;
+        const dateFormat = `${this.props.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
         const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPopup--status-panel", alignItems: 'center', style: { gap: 'var(--ab-space-1)' } },
             enabled && (React.createElement(React.Fragment, null,
                 React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", style: { color: 'var(--ab-color-success)', fontWeight: 'bold' } }, "Active"),

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -40,7 +40,7 @@ const DataChangeHistoryViewPanelControl = (props) => {
         suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
         enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
         (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
-    const dateFormat = `${adaptable.api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions.dateFormat} HH:mm:ss`;
+    const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
     const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
         enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}` },
             React.createElement(rebass_1.Text, { className: "ab-DataChangeHistoryPanel--status-active", fontSize: 2, style: { color: 'var(--ab-color-success)' } }, "Active"))),

package/src/View/Filter/FilterViewPanel.js

@@ -19,10 +19,10 @@ class FilterViewPanelComponent extends React.Component {
         super(props);
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        const showClearButton = (_b = (_a = this.props.api.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.filterOptions) === null || _b === void 0 ? void 0 : _b.showClearFilterButton;
-        const showSuspendFilterButton = (_d = (_c = this.props.api.internalApi.getAdaptableOptions()) === null || _c === void 0 ? void 0 : _c.filterOptions) === null || _d === void 0 ? void 0 : _d.showSuspendFilterButton;
+        const showClearButton = (_a = this.props.api.optionsApi.getFilterOptions()) === null || _a === void 0 ? void 0 : _a.showClearFilterButton;
+        const showSuspendFilterButton = (_b = this.props.api.optionsApi.getFilterOptions()) === null || _b === void 0 ? void 0 : _b.showSuspendFilterButton;
         const isAtLeastOneFilterActive = this.props.api.filterApi.getActiveColumnFilters().length > 0;
         const isAtLeastOneFilter = this.props.api.filterApi.getColumnFilters().length > 0;
         const handleSuspendUnsuspendAll = () => {

package/src/View/FlashingCell/Wizard/isValidFlashingCellRules.js

@@ -1,24 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isValidFlashingCellRules = void 0;
-const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
 const isValidFlashingCellRules = (flashingCell, api, context) => {
-    var _a, _b, _c, _d, _e;
-    let valid = true;
+    var _a, _b;
     if (!((_b = (_a = flashingCell.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length) && !flashingCell.Rule.BooleanExpression) {
         return 'No Rule defined for Flashing Cell';
     }
-    if (valid && ((_d = (_c = flashingCell.Rule) === null || _c === void 0 ? void 0 : _c.Predicates) === null || _d === void 0 ? void 0 : _d.length)) {
-        valid = api.predicateApi.isEveryPredicateValid((_e = flashingCell.Rule) === null || _e === void 0 ? void 0 : _e.Predicates);
-        if (!valid) {
-            return 'Predicate is not valid';
-        }
-    }
-    if (valid && flashingCell.Rule.BooleanExpression) {
-        valid = api.queryLanguageApi.isValidBooleanExpression(flashingCell.Rule.BooleanExpression, ModuleConstants_1.FlashingCellModuleId);
-        if (!valid) {
-            return 'The Expression is not a valid Boolean Expression';
-        }
+    const isRuleValid = (0, Utilities_1.isAdaptableRuleValid)(flashingCell, api, context);
+    if (typeof isRuleValid === 'string') {
+        return isRuleValid;
     }
     // boolean expressions may also be saved as named queries
     if (context.namedQuery != false) {

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -151,6 +151,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
 const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters) => {
+    var _a;
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
@@ -165,8 +166,9 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                     ")."),
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
-                        React.createElement(Input_1.default, { "data-name": "pattern", value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
-                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
+                        React.createElement(Input_1.default, { "data-name": "pattern", value: (_a = data.DisplayFormat.Options.Pattern) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
+                        React.createElement("span", null, data.DisplayFormat.Options.Pattern &&
+                            FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs_1.Tabs.Content, null,

package/src/View/FormatColumn/Wizard/FormatColumnWizard.js

@@ -97,7 +97,10 @@ function FormatColumnWizard(props) {
             },
             {
                 isValid: (abObject, api, context) => {
-                    return abObject.Rule ? (0, Utilities_1.isRuleValid)(abObject, api, context) : true;
+                    if (!abObject.Rule) {
+                        return true;
+                    }
+                    return (0, Utilities_1.isAdaptableRuleValid)(abObject, api, context);
                 },
                 title: 'Condition',
                 details: 'Build a Rule when the Format Column should be applied',

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -62,7 +62,7 @@ exports.isValidFreeTextColumn = isValidFreeTextColumn;
 const FreeTextColumnSettingsWizardSection = (props) => {
     var _a;
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const Pattern = api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions.dateFormat;
+    const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
     const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
     const inEdit = props.isEdit;
     const validCheck = (0, exports.isValidFreeTextColumn)(data, api);

package/src/View/GridInfo/GridInfoPopup.js

@@ -65,7 +65,7 @@ const GridInfoPopup = (props) => {
             })
             : null;
         const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
-        if ((_a = props.api.internalApi.getAdaptableOptions().userInterfaceOptions) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
+        if ((_a = props.api.optionsApi.getUserInterfaceOptions()) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
             returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
         }
         returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));

package/src/View/Layout/PivotDetailsPopoup.js

@@ -15,13 +15,13 @@ const tableDOMProps = {
 const PivotDetailsPopoup = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const adaptableApi = adaptable.api;
-    const primaryKey = adaptableApi.internalApi.getAdaptableOptions().primaryKey;
+    const primaryKey = adaptableApi.optionsApi.getPrimaryKey();
     const { hasPivotValue, rows, rowGroups, columnId, layout, aggColumn, pivotValue, pivotColumnId, } = props.popupProps;
     let data = rows;
     const columns = React.useMemo(() => {
-        var _a, _b;
+        var _a;
         const getFriendlyName = (columnId) => adaptableApi.columnApi.getFriendlyNameForColumnId(columnId);
-        const pivotPreviewOptionColumn = (_b = (_a = adaptableApi.internalApi.getAdaptableOptions()) === null || _a === void 0 ? void 0 : _a.layoutOptions) === null || _b === void 0 ? void 0 : _b.pivotPreviewColumns;
+        const pivotPreviewOptionColumn = (_a = adaptableApi.optionsApi.getLayoutOptions()) === null || _a === void 0 ? void 0 : _a.pivotPreviewColumns;
         let pivotPreviewExtraColumns = [];
         if (typeof pivotPreviewOptionColumn === 'function') {
             const pivotPreviewColumnsContext = {

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { OnePageAdaptableWizardContextType } from '../../Wizard/OnePageAdaptableWizard';
-import { PlusMinusNudge, AdaptableApi } from '../../../types';
+import { AdaptableApi, PlusMinusNudge } from '../../../types';
 export declare const PlusMinusSettingsSummary: React.FunctionComponent<{
     hasCondition: boolean;
 }>;
-export declare const isSettingsValid: (hasCondition: boolean) => (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => true | "The Expression is not a valid Boolean Expression" | "No valid Condition is specified" | "The Predicates are not valid" | "Nudge value is not specified" | "Nudge value must be different than 0";
+export declare const isSettingsValid: (hasCondition: boolean) => (data: PlusMinusNudge, api: AdaptableApi, context: OnePageAdaptableWizardContextType<PlusMinusNudge>) => string | true;
 interface PlusMinusSettingsWizardSectionProps {
     onChange: (plusMinusNudge: PlusMinusNudge) => void;
     hasCondition: boolean;

package/src/View/PlusMinus/Wizard/PlusMinusSettingsWizardSection.js

@@ -24,9 +24,15 @@ const PlusMinusSettingsSummary = (props) => {
 };
 exports.PlusMinusSettingsSummary = PlusMinusSettingsSummary;
 const isSettingsValid = (hasCondition) => (data, api, context) => {
-    const ruleValidation = hasCondition ? (0, Utilities_1.isRuleValid)(data, api, context) : true;
-    if (typeof ruleValidation === 'string') {
-        return ruleValidation;
+    var _a;
+    if (hasCondition) {
+        if (!((_a = data === null || data === void 0 ? void 0 : data.Rule) === null || _a === void 0 ? void 0 : _a.BooleanExpression)) {
+            return 'No valid Rule is specified';
+        }
+        const ruleValidation = (0, Utilities_1.isAdaptableRuleValid)(data, api, context);
+        if (typeof ruleValidation === 'string') {
+            return ruleValidation;
+        }
     }
     if (typeof data.NudgeValue !== 'number') {
         return 'Nudge value is not specified';

package/src/View/QuickSearch/QuickSearchPopup.js

@@ -18,7 +18,7 @@ const useQuickSearchDebounced_1 = require("./useQuickSearchDebounced");
 const QuickSearchPopupComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const [state, setState] = (0, react_1.useState)({
-        RunQueryAfterQuickSearch: props.api.internalApi.getAdaptableOptions().searchOptions.filterResultsAfterQuickSearch,
+        RunQueryAfterQuickSearch: props.api.optionsApi.getSearchOptions().filterResultsAfterQuickSearch,
         EditedStyle: props.QuickSearchStyle,
     });
     const onUpdateStyle = (style) => {
@@ -27,14 +27,14 @@ const QuickSearchPopupComponent = (props) => {
     };
     const onQuickSearchBehaviourChange = (checked) => {
         setState(Object.assign(Object.assign({}, state), { RunQueryAfterQuickSearch: checked }));
-        props.api.internalApi.getAdaptableOptions().searchOptions.filterResultsAfterQuickSearch =
+        props.api.optionsApi.getAdaptableOptions().searchOptions.filterResultsAfterQuickSearch =
             checked;
     };
     return (React.createElement(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
         React.createElement(Panel_1.default, { header: props.moduleInfo.FriendlyName + ' Text', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
             ' ',
             React.createElement(FormLayout_1.default, null,
-                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { "data-name": "quick-search-text", type: "text", marginLeft: 2, marginRight: 5, padding: 20, style: { height: '100%' }, placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, value: searchText, OnTextChange: search }))),
+                React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { "data-name": "quick-search-text", type: "text", marginLeft: 2, marginRight: 5, padding: 20, style: { height: '100%' }, placeholder: props.api.optionsApi.getSearchOptions().quickSearchPlaceholder, value: searchText, OnTextChange: search }))),
         React.createElement(Panel_1.default, { header: props.api.internalApi.getCorrectEnglishVariant('Behaviour'), style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginLeft: 2, marginRight: 2 },
             ' ',
             React.createElement(rebass_1.Flex, { flexDirection: "column" },

package/src/View/QuickSearch/QuickSearchStatusBarContent.js

@@ -12,6 +12,6 @@ const QuickSearchStatusBarContent = () => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const handleTextChange = React.useCallback((text) => dispatch(QuickSearchRedux.QuickSearchRun(text)), []);
-    return (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { onClick: (event) => event.stopPropagation(), type: "text", inputStyle: { padding: '2px 3px', width: 90 }, placeholder: adaptable.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, value: text, OnTextChange: handleTextChange }));
+    return (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { onClick: (event) => event.stopPropagation(), type: "text", inputStyle: { padding: '2px 3px', width: 90 }, placeholder: adaptable.api.optionsApi.getSearchOptions().quickSearchPlaceholder, value: text, OnTextChange: handleTextChange }));
 };
 exports.QuickSearchStatusBarContent = QuickSearchStatusBarContent;

package/src/View/QuickSearch/QuickSearchViewPanel.js

@@ -10,7 +10,7 @@ const React = tslib_1.__importStar(require("react"));
 const QuickSearchViewPanelComponent = (props) => {
     const [searchText, search] = (0, useQuickSearchDebounced_1.useQuickSearchDebounced)(props);
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.internalApi.getAdaptableOptions().searchOptions.quickSearchPlaceholder, className: `ab-${elementType}__QuickSearch__text`, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: '7rem' } }));
+    return (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getSearchOptions().quickSearchPlaceholder, className: `ab-${elementType}__QuickSearch__text`, value: searchText, OnTextChange: search, style: { height: '100%' }, inputStyle: { width: '7rem' } }));
 };
 function mapStateToProps(state) {
     return {

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -12,7 +12,7 @@ const AdaptableContext_1 = require("./AdaptableContext");
 const SpecialColumnSettingsWizardStep = (props) => {
     var _a, _b;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const possibleColumnTypes = adaptable.api.internalApi.getAdaptableOptions().columnOptions.columnTypes;
+    const possibleColumnTypes = adaptable.api.optionsApi.getColumnOptions().columnTypes;
     const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = (_a = props.settings) !== null && _a !== void 0 ? _a : {};
     const handleColumnTypeChange = (columnType, checked) => {
         var _a, _b, _c;
@@ -38,8 +38,7 @@ const SpecialColumnSettingsWizardStep = (props) => {
                             { size: '30%', name: 'third' },
                         ] },
                         React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.internalApi.getAdaptableOptions().filterOptions
-                                    .enableFilterOnSpecialColumns }, "Filterable"),
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
                         React.createElement(FormLayout_1.FormRow, null,

package/src/agGrid/Adaptable.d.ts

@@ -282,7 +282,7 @@ export declare class Adaptable implements IAdaptable {
     private getUserColDefProperty;
     setupColumnCellStyle({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnCellClass({ col, colId, abColumn }: ColumnSetupInfo): void;
-    getExcelClassNameForCell(colId: string, primaryKeyValue: any): string;
+    getExcelClassNameForCell(colId: string, primaryKeyValue: any, userDefinedCellClass?: string | string[]): string;
     setupColumnCellEditor({ colId, col }: ColumnSetupInfo): void;
     setupColumnCellRenderer({ col, colId, abColumn }: ColumnSetupInfo): void;
     setupColumnTooltipValueGetter({ col, colId, abColumn }: ColumnSetupInfo): void;

package/src/agGrid/Adaptable.js

@@ -436,7 +436,7 @@ class Adaptable {
         this.TeamSharingService = new TeamSharingService_1.TeamSharingService(this.api);
         // @ts-ignore
         this.RowEditService = new RowEditService_1.RowEditService(this.api);
-        this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.internalApi.getAdaptableOptions());
+        this.MetamodelService = new MetamodelService_1.MetamodelService(() => this.api.optionsApi.getAdaptableOptions());
         this.forPlugins((plugin) => plugin.afterInitServices(this));
         // Set up Modules - we set up all the Modules suitable for AG Grid
         // But users can make some hidden or readonly in their entitlements
@@ -3226,8 +3226,16 @@ class Adaptable {
             const quickSearchStyleClassName = this.api.quickSearchApi.getQuickSearchStyle().ClassName;
             const hasQuickSearchStyleClassName = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(quickSearchStyleClassName);
             const cellClass = (params) => {
-                const isQuickSearchActive = hasQuickSearchStyleClassName && this.isQuickSearchActive(abColumn, params);
                 const primaryKeyValue = this.getPrimaryKeyValueFromRowNode(params.node);
+                // if a Visual Data export is in progress, we are interested only in the Excel Style Class
+                if (this.api.exportApi.internalApi.isVisualDataExportInProgress()) {
+                    const userDefinedCellClass = typeof userCellClass === 'function' ? userCellClass(params) : userCellClass;
+                    const cellClassKey = this.getExcelClassNameForCell(colId, primaryKeyValue, userDefinedCellClass);
+                    return this.api.internalApi
+                        .getReportService()
+                        .getExcelStyleIdForCellClassKey(cellClassKey);
+                }
+                const isQuickSearchActive = hasQuickSearchStyleClassName && this.isQuickSearchActive(abColumn, params);
                 const editableClassName = this.getEditableCellClass(abColumn, params);
                 const readonlyClassName = this.getReadonlyCellClass(abColumn, params);
                 const highlightAlertClassName = this.getAlertCellClass(abColumn, params);
@@ -3235,7 +3243,6 @@ class Adaptable {
                 const styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
                 const hasStyledColumn = !!styledColumn && !styledColumn.IsSuspended;
                 const returnValue = [
-                    this.getExcelClassNameForCell(colId, primaryKeyValue),
                     typeof userCellClass === 'function' ? userCellClass(params) : userCellClass,
                     !hasStyledColumn && formatColumns.length
                         ? this.getFormatColumnCellClass(formatColumns, abColumn, params)
@@ -3256,12 +3263,16 @@ class Adaptable {
             return cellClass;
         });
     }
-    getExcelClassNameForCell(colId, primaryKeyValue) {
+    getExcelClassNameForCell(colId, primaryKeyValue, userDefinedCellClass) {
         let excelClassName = `--excel-cell-${colId}-${primaryKeyValue}`;
         if (excelClassName.indexOf(' ') > 0) {
             excelClassName = excelClassName.replace(/\s/g, '_');
         }
-        return excelClassName;
+        return userDefinedCellClass != null
+            ? `${excelClassName}-${Array.isArray(userDefinedCellClass)
+                ? userDefinedCellClass.join('-')
+                : userDefinedCellClass}`
+            : excelClassName;
     }
     setupColumnCellEditor({ colId, col }) {
         const adaptableColumn = this.api.columnApi.getColumnWithColumnId(colId);
@@ -3461,7 +3472,7 @@ class Adaptable {
             }
             return (params) => {
                 const { node, value } = params;
-                const [mostRelevantFormatColumn] = this.api.formatColumnApi.internalApi.getFormatColumnsRelevantForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node, value });
+                const mostRelevantFormatColumn = this.api.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node, value });
                 if (!mostRelevantFormatColumn) {
                     // ALL FormatColumns are conditional and NONE of them are relevant for this row
                     return value;
@@ -4226,7 +4237,7 @@ class Adaptable {
         return false;
     }
     showQuickFilter() {
-        const height = this.api.internalApi.getAdaptableOptions().filterOptions.quickFilterHeight;
+        const height = this.api.optionsApi.getFilterOptions().quickFilterHeight;
         this.gridOptions.api.setFloatingFiltersHeight(height);
     }
     hideQuickFilter() {
@@ -4479,8 +4490,30 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         grid.destroy();
     }
     setExcelStylesForExport() {
+        // we memoize as much as possible, as this is called quite A LOT
+        const adaptableColumnMap = {};
+        const getAdaptableColumnWithColumnId = (columnId) => {
+            const memoizedColumn = adaptableColumnMap[columnId];
+            if (memoizedColumn) {
+                return memoizedColumn;
+            }
+            const abColumn = this.api.columnApi.getColumnWithColumnId(columnId);
+            adaptableColumnMap[columnId] = abColumn;
+            return abColumn;
+        };
+        const formatColumnsWithDisplayFormatForColumn = {};
+        const getFormatColumnsWithDisplayFormatForColumn = (columnId) => {
+            const memoizedFormatColumns = formatColumnsWithDisplayFormatForColumn[columnId];
+            if (memoizedFormatColumns) {
+                return memoizedFormatColumns;
+            }
+            const abColumn = getAdaptableColumnWithColumnId(columnId);
+            const formatColumns = this.api.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
+            formatColumnsWithDisplayFormatForColumn[columnId] = formatColumns;
+            return formatColumns;
+        };
+        const isDateCellExportedAsFormattedValue = this.api.exportApi.internalApi.isDateCellExportedAsFormattedValue();
         this.setGridOptionsProperty('excelStyles', (userExcelStyles = []) => {
-            const adaptableExcelStyles = [];
             const displayedColumns = this.gridOptions.columnApi.getAllDisplayedColumns();
             const colDefs = displayedColumns.map((column) => {
                 return column.getColDef();
@@ -4497,24 +4530,33 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                 };
                 const rowStyle = this.gridOptions.getRowStyle(rowParams);
                 displayedColumns.forEach((column, columnIndex) => {
+                    var _a, _b, _c;
                     const colDef = colDefs[columnIndex];
-                    const cellParams = {
-                        colDef,
-                        node,
-                        column,
-                        data: node.data,
-                        value: this.getRawValueFromRowNode(node, column.getId()),
-                        rowIndex,
-                        api: this.gridOptions.api,
-                        columnApi: this.gridOptions.columnApi,
-                        context: {},
+                    let cellClassParams;
+                    const getLazyCellClassParams = () => {
+                        if (!cellClassParams) {
+                            cellClassParams = {
+                                colDef,
+                                node,
+                                column,
+                                data: node.data,
+                                value: this.getRawValueFromRowNode(node, column.getId()),
+                                rowIndex,
+                                api: this.gridOptions.api,
+                                columnApi: this.gridOptions.columnApi,
+                                context: {},
+                            };
+                        }
+                        return cellClassParams;
                     };
-                    const cellStyle = typeof colDef.cellStyle === 'function' ? colDef.cellStyle(cellParams) : {};
+                    const cellStyle = typeof colDef.cellStyle === 'function'
+                        ? colDef.cellStyle(getLazyCellClassParams())
+                        : {};
                     const excelStyles = [];
                     // add user defined excel styles
                     let userColDefCellClass = this.getUserColDefProperty(column.getColId(), 'cellClass');
                     const userDefinedCellClass = typeof userColDefCellClass === 'function'
-                        ? userColDefCellClass(cellParams)
+                        ? userColDefCellClass(getLazyCellClassParams())
                         : userColDefCellClass;
                     const userDefinedExcelStyle = userDefinedCellClass &&
                         userExcelStyles.find((excelStyle) => {
@@ -4536,21 +4578,48 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
                     if (Object.values(adaptableStyle).some((style) => style != null)) {
                         excelStyles.push(this.convertCSSToExcelStyle(adaptableStyle));
                     }
+                    const excelDataType = this.api.exportApi.internalApi.getExcelDataType(colDef === null || colDef === void 0 ? void 0 : colDef.type);
                     // don't add the cell style if it has no adaptable custom styles or user defined styles
-                    if (!excelStyles.length) {
+                    if (!excelStyles.length &&
+                        // if this is a formatted Date value, we still need to add the AG GRID specific type & numberFormat below
+                        !(excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue)) {
                         return;
                     }
-                    const cellClass = typeof colDef.cellClass === 'function'
-                        ? colDef.cellClass(cellParams)
-                        : this.getExcelClassNameForCell(column.getId(), this.getPrimaryKeyValueFromRowNode(node));
-                    const cellClassId = Array.isArray(cellClass) ? cellClass.join(' ') : cellClass;
-                    const finalCellExcelStyle = Object.assign({}, ...excelStyles, {
-                        id: cellClassId,
-                    });
-                    adaptableExcelStyles.push(finalCellExcelStyle);
+                    const cellClassId = this.getExcelClassNameForCell(column.getId(), this.getPrimaryKeyValueFromRowNode(node), userDefinedCellClass);
+                    const finalCellExcelStyle = Object.assign({}, ...excelStyles);
+                    if (excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue) {
+                        let dateFormatPattern = this.api.optionsApi.getExportOptions().exportDateFormat;
+                        const rawValue = this.getRawValueFromRowNode(node, column.getId());
+                        const abColumn = getAdaptableColumnWithColumnId(column.getColId());
+                        if (!dateFormatPattern) {
+                            const mostRelevantFormatColumn = this.api.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(getFormatColumnsWithDisplayFormatForColumn(column.getColId()), abColumn, { node, value: rawValue });
+                            dateFormatPattern =
+                                ((_a = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Formatter) === 'DateFormatter' &&
+                                    ((_c = (_b = mostRelevantFormatColumn === null || mostRelevantFormatColumn === void 0 ? void 0 : mostRelevantFormatColumn.DisplayFormat) === null || _b === void 0 ? void 0 : _b.Options) === null || _c === void 0 ? void 0 : _c.Pattern);
+                        }
+                        if (dateFormatPattern) {
+                            const normalisedValue = this.getNormalisedValueFromRawValue(rawValue, abColumn);
+                            // we have to pass the date in the ISO format to Excel
+                            // see https://www.ag-grid.com/javascript-data-grid/excel-export-data-types/#dates
+                            const isoFormattedValue = normalisedValue === null || normalisedValue === void 0 ? void 0 : normalisedValue.toISOString();
+                            if (isoFormattedValue) {
+                                finalCellExcelStyle.dataType = 'DateTime';
+                                finalCellExcelStyle.numberFormat = { format: dateFormatPattern };
+                                // create a new cell key to ensure any user provided className does not interfere
+                                const cellKey = this.getExcelClassNameForCell(column.getColId(), this.getPrimaryKeyValueFromRowNode(node));
+                                // we need to register so that later the cellProcessor will put the isoFormattedValue through (thus giving the formatting responsability to Excel)
+                                this.api.internalApi
+                                    .getReportService()
+                                    .registerExcelStyleWithFormattedDate(cellKey, isoFormattedValue);
+                            }
+                        }
+                    }
+                    this.api.internalApi
+                        .getReportService()
+                        .registerExcelStyle(finalCellExcelStyle, cellClassId);
                 });
             });
-            return adaptableExcelStyles;
+            return this.api.internalApi.getReportService().getRegisteredExcelStyles();
         });
     }
     exportVisualDataToExcel() {
@@ -4560,13 +4629,17 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
             sheetName: 'Sheet 1',
             fileName: this.ReportService.getReportFileName(this.adaptableOptions.adaptableId),
             // delegate the cell value processing to Adaptable
-            processCellCallback: (params) => {
+            processCellCallback: ({ node, column, value }) => {
                 var _a;
-                if ((_a = params.node) === null || _a === void 0 ? void 0 : _a.group) {
+                const columnId = column.getColId();
+                if ((node === null || node === void 0 ? void 0 : node.group) &&
+                    (this.api.columnApi.isAutoRowGroupColumn(columnId) ||
+                        // we would still need to process the cell if this is a group row with an aggregated value
+                        ((_a = node === null || node === void 0 ? void 0 : node.aggData) === null || _a === void 0 ? void 0 : _a[columnId]) == undefined)) {
                     // skip processing of row groups, this was already handled in processRowGroupCallback()
-                    return params.value;
+                    return value;
                 }
-                return this.processCellForExcelExport(params.node, params.column.getColId());
+                return this.processCellForExcelExport(node, columnId);
             },
             processRowGroupCallback: (params) => {
                 var _a;
@@ -4654,6 +4727,14 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         return result;
     }
     processCellForExcelExport(rowNode, columnId) {
+        if (this.api.exportApi.internalApi.isVisualDataExportInProgress()) {
+            const cellKey = this.getExcelClassNameForCell(columnId, this.getPrimaryKeyValueFromRowNode(rowNode));
+            const isoFormattedDate = this.ReportService.getExcelStyleWithFormattedDate(cellKey);
+            if (isoFormattedDate) {
+                // this is a Date cell which will be formatted by Excel
+                return isoFormattedDate;
+            }
+        }
         return this.ReportService.getCellExportValueFromRowNode(rowNode, columnId);
     }
     processRowGroupForExcelExport(rowNode) {
@@ -4664,9 +4745,10 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         }
         let rawValue = rowNode.key;
         if (this.api.columnApi.getColumnDataTypeForColumnId(columnId) === 'Date' &&
-            typeof rawValue === 'string') {
+            typeof rawValue === 'string' &&
+            !Number.isNaN(rawValue)) {
             // AG-Grid converts the value to string, we have to reconvert it back
-            const dateRawValue = (0, DateHelper_1.parseDateValue)(rawValue);
+            const dateRawValue = parseInt(rawValue);
             if (dateRawValue != undefined) {
                 // @ts-ignore
                 rawValue = dateRawValue;
@@ -4693,8 +4775,7 @@ import "@adaptabletools/adaptable/themes/${themeName}.css"`);
     }
     initLicenseService() {
         const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
-        const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY ||
-            this.api.internalApi.getAdaptableOptions().licenseKey;
+        const licenseKey = globalObject.ADAPTABLE_LICENSE_KEY || this.api.optionsApi.getLicenseKey();
         return new LicenseService_1.LicenseService(this, licenseKey, {
             publishedAt: publishTimestamp_1.default,
         });