@adaptabletools/adaptable 24.0.0-canary.5 → 24.0.0-canary.6

package/src/Redux/Store/AdaptableStore.js

@@ -4,6 +4,7 @@ import * as PopupRedux from '../ActionsReducers/PopupRedux';
 import { PROGRESS_INDICATOR_HIDE, PROGRESS_INDICATOR_SHOW } from '../ActionsReducers/PopupRedux';
 import { createEngine as createEngineLocal } from './AdaptableReduxLocalStorageEngine';
 import { mergeReducer } from './AdaptableReduxMerger';
+import { runSyncStateFunction } from './StateOptionsGuards';
 import { isRowChangeAlertDefinition } from '../../AdaptableState/AlertState';
 import { getAlertCellDataChangedInfos, isAdaptableRowChangedAlert, } from '../../AdaptableState/Common/AdaptableAlert';
 import { closeAgChartDefinitionIfOpen, closeExternalChartDefinitionIfOpen, } from '../../Utilities/Helpers/ChartHelper';
@@ -185,13 +186,9 @@ export class AdaptableStore {
                 !init &&
                 !this.loadStorageInProgress;
             if (shouldPersist) {
-                let storageState = { ...finalState };
-                storageState = getPersistableState(storageState);
+                const storageState = getPersistableState({ ...finalState });
                 this.currentStorageState = storageState;
-                this.previousStorageState = { ...state };
-                NON_PERSISTENT_STORE_KEYS.forEach((key) => {
-                    delete this.previousStorageState[key];
-                });
+                this.previousStorageState = getPersistableState({ ...state });
                 storageEngine.save(adaptable, storageState, action.type);
             }
             return finalState;
@@ -245,7 +242,9 @@ export class AdaptableStore {
         return this.previousStorageState;
     }
     saveStateNow(adaptable, state) {
-        const newState = state ?? this.getCurrentStorageState();
+        const newState = state
+            ? getPersistableState({ ...state })
+            : this.getCurrentStorageState();
         if (newState) {
             return this.storageEngine.saveNow(adaptable, newState, 'API_CALL_SAVE_STATE');
         }
@@ -260,7 +259,8 @@ export class AdaptableStore {
             .load(adaptable, initialState ?? adaptable.adaptableOptions.initialState)
             .then((storedState) => {
             if (storedState && this.loadStateOnStartup) {
-                this.TheStore.dispatch(LoadState(postProcessState(adaptable.adaptableOptions.stateOptions.applyState(storedState, adaptable.api.stateApi.internalApi.buildAdaptableStateFunctionConfig()))));
+                const appliedState = runSyncStateFunction('applyState', adaptable.adaptableOptions.stateOptions.applyState, storedState, adaptable.api.stateApi.internalApi.buildAdaptableStateFunctionConfig(), adaptable.logger);
+                this.TheStore.dispatch(LoadState(postProcessState(appliedState)));
             }
         })
             .then(() => {
@@ -402,10 +402,26 @@ function refreshFormulaTraceCells(adaptable, formulaTraceInfo) {
     });
 }
 const LAYOUT_EXTENSION_OBJECT_ACTIONS = {
-    [AlertRedux.ALERT_DEFINITION_EDIT]: { module: 'Alert', payloadKey: 'alertDefinition', kind: 'edit' },
-    [AlertRedux.ALERT_DEFINITION_DELETE]: { module: 'Alert', payloadKey: 'alertDefinition', kind: 'delete' },
-    [CustomSortRedux.CUSTOM_SORT_EDIT]: { module: 'CustomSort', payloadKey: 'customSort', kind: 'edit' },
-    [CustomSortRedux.CUSTOM_SORT_DELETE]: { module: 'CustomSort', payloadKey: 'customSort', kind: 'delete' },
+    [AlertRedux.ALERT_DEFINITION_EDIT]: {
+        module: 'Alert',
+        payloadKey: 'alertDefinition',
+        kind: 'edit',
+    },
+    [AlertRedux.ALERT_DEFINITION_DELETE]: {
+        module: 'Alert',
+        payloadKey: 'alertDefinition',
+        kind: 'delete',
+    },
+    [CustomSortRedux.CUSTOM_SORT_EDIT]: {
+        module: 'CustomSort',
+        payloadKey: 'customSort',
+        kind: 'edit',
+    },
+    [CustomSortRedux.CUSTOM_SORT_DELETE]: {
+        module: 'CustomSort',
+        payloadKey: 'customSort',
+        kind: 'delete',
+    },
     [FlashingCellRedux.FLASHING_CELL_DEFINITION_EDIT]: {
         module: 'FlashingCell',
         payloadKey: 'flashingCellDefinition',
@@ -416,13 +432,21 @@ const LAYOUT_EXTENSION_OBJECT_ACTIONS = {
         payloadKey: 'flashingCellDefinition',
         kind: 'delete',
     },
-    [FormatColumnRedux.FORMAT_COLUMN_EDIT]: { module: 'FormatColumn', payloadKey: 'formatColumn', kind: 'edit' },
+    [FormatColumnRedux.FORMAT_COLUMN_EDIT]: {
+        module: 'FormatColumn',
+        payloadKey: 'formatColumn',
+        kind: 'edit',
+    },
     [FormatColumnRedux.FORMAT_COLUMN_DELETE]: {
         module: 'FormatColumn',
         payloadKey: 'formatColumn',
         kind: 'delete',
     },
-    [PlusMinusRedux.PLUS_MINUS_RULE_EDIT]: { module: 'PlusMinus', payloadKey: 'plusMinusNudge', kind: 'edit' },
+    [PlusMinusRedux.PLUS_MINUS_RULE_EDIT]: {
+        module: 'PlusMinus',
+        payloadKey: 'plusMinusNudge',
+        kind: 'edit',
+    },
     [PlusMinusRedux.PLUS_MINUS_RULE_DELETE]: {
         module: 'PlusMinus',
         payloadKey: 'plusMinusNudge',
@@ -430,7 +454,11 @@ const LAYOUT_EXTENSION_OBJECT_ACTIONS = {
     },
     [ShortcutRedux.SHORTCUT_EDIT]: { module: 'Shortcut', payloadKey: 'shortcut', kind: 'edit' },
     [ShortcutRedux.SHORTCUT_DELETE]: { module: 'Shortcut', payloadKey: 'shortcut', kind: 'delete' },
-    [StyledColumnRedux.STYLED_COLUMN_EDIT]: { module: 'StyledColumn', payloadKey: 'StyledColumn', kind: 'edit' },
+    [StyledColumnRedux.STYLED_COLUMN_EDIT]: {
+        module: 'StyledColumn',
+        payloadKey: 'StyledColumn',
+        kind: 'edit',
+    },
     [StyledColumnRedux.STYLED_COLUMN_DELETE]: {
         module: 'StyledColumn',
         payloadKey: 'StyledColumn',
@@ -585,8 +613,8 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                         if (!adaptable.api.freeTextColumnApi.internalApi.validateDeletedFreeTextColumn(actionTyped.freeTextColumn)) {
                             return;
                         }
-                        if (adaptable.api.optionsApi.getLayoutOptions()
-                            ?.autoRemoveDeletedColumnsFromLayouts !== false) {
+                        if (adaptable.api.optionsApi.getLayoutOptions()?.autoRemoveDeletedColumnsFromLayouts !==
+                            false) {
                             adaptable.api.layoutApi.internalApi.removeColumnIdFromAllLayouts(actionTyped.freeTextColumn.ColumnId);
                         }
                     }
@@ -607,8 +635,8 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                         if (!adaptable.api.calculatedColumnApi.internalApi.validateDeletedCalculatedColumn(calculatedColumn)) {
                             return;
                         }
-                        if (adaptable.api.optionsApi.getLayoutOptions()
-                            ?.autoRemoveDeletedColumnsFromLayouts !== false) {
+                        if (adaptable.api.optionsApi.getLayoutOptions()?.autoRemoveDeletedColumnsFromLayouts !==
+                            false) {
                             adaptable.api.layoutApi.internalApi.removeColumnIdFromAllLayouts(calculatedColumn.ColumnId);
                         }
                     }

package/src/Redux/Store/Interface/IAdaptableStore.d.ts

@@ -1,20 +1,20 @@
 import * as Redux from 'redux';
-import { AdaptableState } from '../../../AdaptableState/AdaptableState';
+import { AdaptablePersistentState, AdaptableState } from '../../../AdaptableState/AdaptableState';
 import { InitialState } from '../../../types';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
 export interface LoadStoreConfig {
     adaptable: IAdaptable;
     adaptableStateKey: string;
     initialState?: InitialState;
-    postLoadHook?: (state: AdaptableState) => AdaptableState;
+    postLoadHook?: (state: Partial<AdaptablePersistentState>) => Partial<AdaptablePersistentState>;
 }
 export interface IAdaptableStore {
     TheStore: Redux.Store<AdaptableState>;
     Load: Promise<any>;
     loadStore: (config: LoadStoreConfig) => Promise<any>;
-    getCurrentStorageState: () => AdaptableState | void;
-    getPreviousStorageState: () => AdaptableState | void;
-    saveStateNow: (adaptable: IAdaptable, state?: AdaptableState) => Promise<any>;
+    getCurrentStorageState: () => AdaptablePersistentState | void;
+    getPreviousStorageState: () => AdaptablePersistentState | void;
+    saveStateNow: (adaptable: IAdaptable, state?: AdaptablePersistentState) => Promise<any>;
     on: (eventName: string, callback: (data?: any) => any) => () => void;
     onAny: (callback: (eventName: string, data?: any) => any) => () => void;
     onBeforeAny: (callback: (eventName: string, data?: any) => any) => () => void;

package/src/Redux/Store/Interface/IStorageEngine.d.ts

@@ -1,9 +1,9 @@
-import { AdaptableState } from '../../../AdaptableState/AdaptableState';
+import { AdaptablePersistentState } from '../../../AdaptableState/AdaptableState';
 import { InitialState } from '../../../AdaptableState/InitialState';
 import { IAdaptable } from '../../../AdaptableInterfaces/IAdaptable';
 export default interface IStorageEngine {
-    load(adaptable: IAdaptable, initialState?: string | InitialState): Promise<any>;
-    save(adaptable: IAdaptable, state: AdaptableState, actionName: string): Promise<any>;
-    saveNow(adaptable: IAdaptable, state: AdaptableState, actionName: string): Promise<any>;
+    load(adaptable: IAdaptable, initialState?: string | InitialState): Promise<Partial<AdaptablePersistentState> | void>;
+    save(adaptable: IAdaptable, state: AdaptablePersistentState, actionName: string): Promise<any>;
+    saveNow(adaptable: IAdaptable, state: AdaptablePersistentState, actionName: string): Promise<any>;
     setStateKey(stateKey: string): void;
 }

package/src/Redux/Store/StateOptionsGuards.d.ts

@@ -0,0 +1,58 @@
+import { AdaptablePersistentState } from '../../AdaptableState/AdaptableState';
+import { AdaptableStateFunctionConfig, StateOptions } from '../../AdaptableOptions/StateOptions';
+/**
+ * Runtime guards for the `StateOptions` functions.
+ *
+ * The most frequent mistakes when implementing these functions are:
+ * - providing an `async` function (or otherwise returning a Promise) for `saveState` / `applyState`, which are synchronous
+ * - mutating the state in `saveState` / `applyState` but forgetting to return it
+ * - returning a plain value (not a Promise) from `loadState` / `persistState`
+ *
+ * The helpers below detect these cases - as early as possible - and either recover (when there is only one sensible
+ * interpretation) or fail with an actionable error message instead of an obscure one further down the line.
+ */
+export type StateOptionsLogger = {
+    consoleError(message: string, ...optionalParams: any[]): void;
+    consoleWarn(message: string, ...optionalParams: any[]): void;
+};
+export type SyncStateFunctionName = 'saveState' | 'applyState';
+export type AsyncStateFunctionName = 'loadState' | 'persistState' | 'clearState';
+export type StateFunctionName = SyncStateFunctionName | AsyncStateFunctionName;
+/**
+ * Error thrown when a `StateOptions` function breaks its contract
+ */
+export declare class AdaptableStateOptionsError extends Error {
+    constructor(message: string);
+}
+export declare const isThenable: (value: unknown) => value is PromiseLike<unknown>;
+/**
+ * Detects functions declared with the `async` keyword (not transpiled to generators / promises)
+ */
+export declare const isAsyncFunction: (fn: unknown) => boolean;
+/**
+ * Validates the shape of `stateOptions` once, at initialisation - before any state is loaded or persisted.
+ *
+ * Reports (does not throw):
+ * - non-function values for any state function
+ * - `async` functions for `saveState` / `applyState`
+ * - `loadState` without `persistState` (or vice versa) - the localStorage fallback is used for the missing one,
+ *   which makes the remote and local copies of the state diverge
+ */
+export declare function validateStateOptions(stateOptions: StateOptions | undefined, logger: StateOptionsLogger): void;
+/**
+ * Invokes a synchronous state transform (`saveState` / `applyState`) and validates its result.
+ *
+ * - returns the result when it is a state object
+ * - **recovers** when the function returned nothing: the input state is used (the function most likely mutated it in place
+ *   and forgot to `return` it) and an error is logged
+ * - **throws** `AdaptableStateOptionsError` when the result is a Promise (async function) or any other non-object value;
+ *   there is no safe way to continue in these cases
+ */
+export declare function runSyncStateFunction<T extends Partial<AdaptablePersistentState>>(functionName: SyncStateFunctionName, fn: ((state: T, config: AdaptableStateFunctionConfig) => T) | undefined, state: T, config: AdaptableStateFunctionConfig, logger: StateOptionsLogger): T;
+/**
+ * Invokes an asynchronous state function (`loadState` / `persistState` / `clearState`) and normalises its result to a Promise.
+ *
+ * A non-Promise result is logged (these functions are expected to be async) and wrapped in a resolved Promise, so a
+ * synchronous implementation degrades gracefully instead of failing with `.then is not a function`.
+ */
+export declare function runAsyncStateFunction<TResult, TArgs extends unknown[]>(functionName: AsyncStateFunctionName, fn: (...args: TArgs) => Promise<TResult>, args: TArgs, logger: StateOptionsLogger): Promise<TResult>;

package/src/Redux/Store/StateOptionsGuards.js

@@ -0,0 +1,112 @@
+import { StatePersistenceDocsLink } from '../../Utilities/Constants/DocumentationLinkConstants';
+const STATE_FUNCTION_NAMES = [
+    'loadState',
+    'persistState',
+    'applyState',
+    'saveState',
+    'clearState',
+];
+export class AdaptableStateOptionsError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'AdaptableStateOptionsError';
+    }
+}
+export const isThenable = (value) => {
+    return value != null && typeof value.then === 'function';
+};
+export const isAsyncFunction = (fn) => {
+    return typeof fn === 'function' && fn.constructor?.name === 'AsyncFunction';
+};
+const isStateObject = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const docs = `See ${StatePersistenceDocsLink}`;
+const syncFunctionMustReturnMessage = (functionName) => `stateOptions.${functionName} must be synchronous and return the (modified) state object.`;
+const asyncFunctionMessage = (functionName, reason) => `${syncFunctionMustReturnMessage(functionName)} ${reason} ` +
+    `Asynchronous work belongs in stateOptions.${functionName === 'saveState' ? 'persistState' : 'loadState'}. ${docs}`;
+export function validateStateOptions(stateOptions, logger) {
+    if (!stateOptions) {
+        return;
+    }
+    for (const functionName of STATE_FUNCTION_NAMES) {
+        const fn = stateOptions[functionName];
+        if (fn != null && typeof fn !== 'function') {
+            logger.consoleError(`stateOptions.${functionName} must be a function, but received ${describe(fn)}. ${docs}`);
+        }
+    }
+    for (const functionName of ['saveState', 'applyState']) {
+        if (isAsyncFunction(stateOptions[functionName])) {
+            logger.consoleError(asyncFunctionMessage(functionName, 'It is declared as an async function.'));
+        }
+    }
+    const hasLoadState = typeof stateOptions.loadState === 'function';
+    const hasPersistState = typeof stateOptions.persistState === 'function';
+    if (hasLoadState !== hasPersistState) {
+        const provided = hasLoadState ? 'loadState' : 'persistState';
+        const missing = hasLoadState ? 'persistState' : 'loadState';
+        logger.consoleWarn(`stateOptions.${provided} is provided without stateOptions.${missing}; ` +
+            `the default localStorage implementation is used for ${missing}, so the loaded and the persisted state may diverge. ` +
+            `Provide both functions (or neither). ${docs}`);
+    }
+}
+export function runSyncStateFunction(functionName, fn, state, config, logger) {
+    if (fn == null) {
+        return state;
+    }
+    if (typeof fn !== 'function') {
+        throw new AdaptableStateOptionsError(`stateOptions.${functionName} must be a function, but received ${describe(fn)}. ${docs}`);
+    }
+    const result = fn(state, config);
+    if (result === undefined) {
+        logger.consoleError(`${syncFunctionMustReturnMessage(functionName)} It returned nothing - ` +
+            `the state object passed to it is used instead (add 'return state;' to fix this). ${docs}`);
+        return state;
+    }
+    if (isThenable(result)) {
+        throw new AdaptableStateOptionsError(asyncFunctionMessage(functionName, 'It returned a Promise (is it an async function?).'));
+    }
+    if (!isStateObject(result)) {
+        throw new AdaptableStateOptionsError(`${syncFunctionMustReturnMessage(functionName)} It returned ${describe(result)}. ${docs}`);
+    }
+    return result;
+}
+export function runAsyncStateFunction(functionName, fn, args, logger) {
+    if (typeof fn !== 'function') {
+        return Promise.reject(new AdaptableStateOptionsError(`stateOptions.${functionName} must be a function, but received ${describe(fn)}. ${docs}`));
+    }
+    let result;
+    try {
+        result = fn(...args);
+    }
+    catch (error) {
+        return Promise.reject(error);
+    }
+    if (!isThenable(result)) {
+        logger.consoleWarn(`stateOptions.${functionName} should be asynchronous and return a Promise, but it returned ${describe(result)}. The value is used as if it had been resolved. ${docs}`);
+        return Promise.resolve(result);
+    }
+    return Promise.resolve(result);
+}
+function describe(value) {
+    if (value === null) {
+        return 'null';
+    }
+    if (value === undefined) {
+        return 'undefined';
+    }
+    if (Array.isArray(value)) {
+        return 'an array';
+    }
+    if (isThenable(value)) {
+        return 'a Promise';
+    }
+    const type = typeof value;
+    if (type === 'object') {
+        return 'an object';
+    }
+    if (type === 'string') {
+        return `a string ('${String(value).slice(0, 40)}${String(value).length > 40 ? '…' : ''}')`;
+    }
+    return `${type} (${String(value)})`;
+}

package/src/Redux/Store/isTransientReduxAction.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a Redux action only affects transient (non-persisted) Adaptable state,
+ * e.g. showing a popup, highlighting cells or setting the selected rows.
+ */
+export declare function isTransientReduxAction(actionType: string | undefined): boolean;

package/src/Redux/Store/isTransientReduxAction.js

@@ -0,0 +1,19 @@
+import * as CommentsRedux from '../ActionsReducers/CommentsRedux';
+import * as InternalRedux from '../ActionsReducers/InternalRedux';
+import * as PluginsRedux from '../ActionsReducers/PluginsRedux';
+import * as PopupRedux from '../ActionsReducers/PopupRedux';
+const collectActionTypes = (reduxModule) => {
+    return Object.values(reduxModule).filter((value) => typeof value === 'string');
+};
+const TRANSIENT_REDUX_ACTION_TYPES = new Set([
+    ...collectActionTypes(InternalRedux),
+    ...collectActionTypes(PopupRedux),
+    ...collectActionTypes(PluginsRedux),
+    ...collectActionTypes(CommentsRedux),
+]);
+export function isTransientReduxAction(actionType) {
+    if (!actionType) {
+        return false;
+    }
+    return TRANSIENT_REDUX_ACTION_TYPES.has(actionType);
+}

package/src/Utilities/Constants/DocumentationLinkConstants.d.ts

@@ -16,3 +16,4 @@ export declare const AgGridModulesDocsLink = "https://www.adaptabletools.com/doc
 export declare const AlertMessageDocsLink = "https://www.adaptabletools.com/docs/handbook-alerting-message";
 export declare const FormatColumnPlaceholderDocsLink = "https://www.adaptabletools.com/docs/handbook-column-formatting-display-format-template";
 export declare const AgGridRequiredModulesDocsLink = "https://www.adaptabletools.com/docs/getting-started-aggrid-modules#mandatory-modules";
+export declare const StatePersistenceDocsLink = "https://www.adaptabletools.com/docs/dev-guide-adaptable-state-persistence";

package/src/Utilities/Constants/DocumentationLinkConstants.js

@@ -16,3 +16,4 @@ export const AgGridModulesDocsLink = `${HOST_URL_DOCS}/getting-started-aggrid-mo
 export const AlertMessageDocsLink = `${HOST_URL_DOCS}/handbook-alerting-message`;
 export const FormatColumnPlaceholderDocsLink = `${HOST_URL_DOCS}/handbook-column-formatting-display-format-template`;
 export const AgGridRequiredModulesDocsLink = `${HOST_URL_DOCS}/getting-started-aggrid-modules#mandatory-modules`;
+export const StatePersistenceDocsLink = `${HOST_URL_DOCS}/dev-guide-adaptable-state-persistence`;

package/src/Utilities/Constants/ReduxConstants.d.ts

@@ -2,8 +2,8 @@ import { SummaryOperation } from '../../AdaptableState/Common/Enums';
 import { SystemThemeEntry } from '../../AdaptableState/ThemeState';
 export declare const CELL_SUMMARY_DEFAULT_OPERATION: SummaryOperation | string;
 export declare const QUICK_SEARCH_DEFAULT_TEXT_BACK_COLOR: string;
-export declare const QUICK_SEARCH_DEFAULT_CELL_BACK_COLOR: string;
-export declare const QUICK_SEARCH_DEFAULT_FORE_COLOR: string;
+export declare const QUICK_SEARCH_DEFAULT_TEXT_FORE_COLOR: string;
 export declare const QUICK_SEARCH_DEFAULT_CURRENT_BACK_COLOR: string;
+export declare const QUICK_SEARCH_DEFAULT_CURRENT_FORE_COLOR: string;
 export declare const SYSTEM_THEMES: SystemThemeEntry[];
 export declare const THEME_DEFAULT_CURRENT_THEME: string;

package/src/Utilities/Constants/ReduxConstants.js

@@ -1,10 +1,10 @@
 import { SummaryOperation } from '../../AdaptableState/Common/Enums';
-import { getSwatchColorVar } from '../../Utilities/Helpers/UIHelper';
+import { themeColorVar } from '../../Utilities/Helpers/UIHelper';
 import { LIGHT_THEME, DARK_THEME, OS_THEME } from './GeneralConstants';
 export const CELL_SUMMARY_DEFAULT_OPERATION = SummaryOperation.Sum;
-export const QUICK_SEARCH_DEFAULT_TEXT_BACK_COLOR = getSwatchColorVar(9);
-export const QUICK_SEARCH_DEFAULT_CELL_BACK_COLOR = getSwatchColorVar(10);
-export const QUICK_SEARCH_DEFAULT_FORE_COLOR = getSwatchColorVar(1);
-export const QUICK_SEARCH_DEFAULT_CURRENT_BACK_COLOR = getSwatchColorVar(20);
+export const QUICK_SEARCH_DEFAULT_TEXT_BACK_COLOR = themeColorVar('quick-search-match');
+export const QUICK_SEARCH_DEFAULT_TEXT_FORE_COLOR = themeColorVar('quick-search-match-foreground');
+export const QUICK_SEARCH_DEFAULT_CURRENT_BACK_COLOR = themeColorVar('quick-search-current-match');
+export const QUICK_SEARCH_DEFAULT_CURRENT_FORE_COLOR = themeColorVar('quick-search-current-match-foreground');
 export const SYSTEM_THEMES = [LIGHT_THEME, DARK_THEME, OS_THEME];
 export const THEME_DEFAULT_CURRENT_THEME = LIGHT_THEME;

package/src/Utilities/Helpers/AlertTypeHelper.d.ts

@@ -31,4 +31,4 @@ export declare const inferAlertTypeFromDefinition: (alert: AlertDefinition, kind
  * otherwise inferred from Rule / Schedule shape.
  */
 export declare const getAlertType: (alert: AlertDefinition, kind?: ExpressionKind) => AlertType | null;
-export declare const getAlertTypeText: (alertType: AlertType) => "" | "Aggregation" | "Observable" | "Scheduled" | "Data Change" | "Relative Change" | "Data Validation" | "Row Change";
+export declare const getAlertTypeText: (alertType: AlertType) => "" | "Observable" | "Aggregation" | "Scheduled" | "Data Change" | "Relative Change" | "Data Validation" | "Row Change";

package/src/Utilities/Helpers/SettingsPanelHelper.d.ts

@@ -1,6 +1,15 @@
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { SettingsPanelDisplayOptions, SettingsPanelNavigation, SettingsPanelNavigationGroup, SettingsPanelOptions } from '../../AdaptableOptions/SettingsPanelOptions';
 import { AdaptableIcon } from '../../types';
+/** One Settings Panel sidebar module (visible for the current grid / entitlements). */
+export type VisibleSettingsPanelNavigationItem = {
+    moduleName: string;
+    label: string;
+};
+export type VisibleSettingsPanelNavigationGroup = {
+    label: string;
+    items: VisibleSettingsPanelNavigationItem[];
+};
 /**
  * True when `adaptableId` is the framework placeholder (`adaptable_id` or `adaptable_id_<n>`),
  * not a developer-supplied human name.
@@ -41,3 +50,8 @@ export declare const getSettingsPanelOpenIcon: (resolvedIcon: SettingsPanelOptio
 export declare const DEFAULT_SETTINGS_PANEL_NAVIGATION_GROUPS: SettingsPanelNavigationGroup[];
 export declare const buildDefaultSettingsPanelNavigation: (customPanelNames?: string[]) => SettingsPanelNavigation;
 export declare const resolveSettingsPanelNavigation: (api: AdaptableApi, settingsPanelOptions: SettingsPanelOptions) => SettingsPanelNavigation;
+/**
+ * Settings Panel navigation groups containing only modules that appear in the
+ * panel sidebar (same rules as {@link useMenuItems} in AdaptablePopup).
+ */
+export declare function resolveVisibleSettingsPanelNavigationGroups(api: AdaptableApi): VisibleSettingsPanelNavigationGroup[];

package/src/Utilities/Helpers/SettingsPanelHelper.js

@@ -1,4 +1,4 @@
-import { ADAPTABLE_ID } from '../Constants/GeneralConstants';
+import { ADAPTABLE_ID, STANDALONE_MODULE_POPUPS } from '../Constants/GeneralConstants';
 import { SettingsPanelFriendlyName } from '../Constants/ModuleConstants';
 import StringExtensions from '../Extensions/StringExtensions';
 export const isGenericAdaptableId = (adaptableId) => {
@@ -143,3 +143,39 @@ export const resolveSettingsPanelNavigation = (api, settingsPanelOptions) => {
     warnLegacyNavigationOnce(api);
     return convertLegacyFlatNavigationToGrouped(navigation);
 };
+export function resolveVisibleSettingsPanelNavigationGroups(api) {
+    const settingsPanelOptions = api.optionsApi.getAdaptableOptions().settingsPanelOptions;
+    const navigation = resolveSettingsPanelNavigation(api, settingsPanelOptions ?? {});
+    const allMenuItems = api.internalApi.getInternalState().SettingsPanelModuleEntries ?? [];
+    const visibleItems = allMenuItems.filter((item) => item.category !== 'General' &&
+        item.category !== 'CustomSettingsPanel' &&
+        item.category !== 'Group' &&
+        !STANDALONE_MODULE_POPUPS.includes(item.category) &&
+        item.isVisible);
+    const moduleService = api.internalApi.getModuleService();
+    const groups = [];
+    for (const group of navigation.groups) {
+        const items = [];
+        for (const moduleName of group.items) {
+            const moduleId = String(moduleName);
+            const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find((panel) => panel.name === moduleId);
+            if (customSettingsPanel) {
+                items.push({ moduleName: moduleId, label: customSettingsPanel.name });
+                continue;
+            }
+            const menuItem = visibleItems.find((item) => item.category === moduleId);
+            if (!menuItem) {
+                continue;
+            }
+            items.push({
+                moduleName: moduleId,
+                label: menuItem.label ??
+                    moduleService.getModuleFriendlyName(moduleId),
+            });
+        }
+        if (items.length) {
+            groups.push({ label: group.label ?? '', items });
+        }
+    }
+    return groups;
+}

package/src/Utilities/Helpers/UIHelper.d.ts

@@ -6,10 +6,12 @@ import { Schedule, Weekday } from '../../AdaptableState/Common/Schedule';
 import { AdaptableColumnDataType, AdaptableSystemIconName } from '../../types';
 import { AdaptableAlert } from '../../AdaptableState/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../../AdaptableState/Common/AdaptableMessageType';
+/** A theme colour token as a CSS value: `themeColorVar('badge')` → `var(--ab-color-badge)`. */
+export declare function themeColorVar(token: string): string;
 /** Generic swatch entries for the Colour Picker (resolved at runtime per active theme). */
 export declare function getSwatchColorVar(index: number): string;
-/** Default mid-gray from the theme swatch palette (`--ab-color-swatch-4`). */
-export declare function getGraySwatchColor(): string;
+/** Default colour of a new range in Range Bar, Bullet and Ranges styled columns. */
+export declare function getDefaultRangeColor(): string;
 export declare function getSwatchColorPaletteEntries(): string[];
 /** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
 export declare function getThemeSemanticColorPaletteEntries(): string[];
@@ -41,8 +43,9 @@ export declare function getCSSVariableValue(cssVariable: string): string | undef
 export declare function setCSSVariableValue(cssVariable: string, value: string): void;
 export declare function isBrowserDocumentAvailable(): boolean;
 export declare const UIHelper: {
+    themeColorVar: typeof themeColorVar;
     getSwatchColorVar: typeof getSwatchColorVar;
-    getGraySwatchColor: typeof getGraySwatchColor;
+    getDefaultRangeColor: typeof getDefaultRangeColor;
     getSwatchColorPaletteEntries: typeof getSwatchColorPaletteEntries;
     getThemeSemanticColorPaletteEntries: typeof getThemeSemanticColorPaletteEntries;
     getDefaultColorPalette: typeof getDefaultColorPalette;

package/src/Utilities/Helpers/UIHelper.js

@@ -3,11 +3,14 @@ import { FontWeight, FontStyle, StatusColour } from '../../AdaptableState/Common
 import { StringExtensions } from '../Extensions/StringExtensions';
 import { getScheduleDescription as getScheduleDescriptionFromHelper } from './Scheduling/ScheduleHelper';
 import ArrayExtensions from '../Extensions/ArrayExtensions';
+export function themeColorVar(token) {
+    return `var(--ab-color-${token})`;
+}
 export function getSwatchColorVar(index) {
-    return `var(--ab-color-swatch-${index})`;
+    return themeColorVar(`swatch-${index}`);
 }
-export function getGraySwatchColor() {
-    return getSwatchColorVar(4);
+export function getDefaultRangeColor() {
+    return themeColorVar('range-default');
 }
 export function getSwatchColorPaletteEntries() {
     return Array.from({ length: 20 }, (_, i) => getSwatchColorVar(i + 1));
@@ -324,8 +327,9 @@ export function isBrowserDocumentAvailable() {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
 export const UIHelper = {
+    themeColorVar,
     getSwatchColorVar,
-    getGraySwatchColor,
+    getDefaultRangeColor,
     getSwatchColorPaletteEntries,
     getThemeSemanticColorPaletteEntries,
     getDefaultColorPalette,

package/src/Utilities/ObjectFactory.js

@@ -4,7 +4,7 @@ import { buildCronExpression } from './Helpers/Scheduling/ScheduleHelper';
 import { EMPTY_STRING } from './Constants/GeneralConstants';
 import { ALERT_DEFAULT_MESSAGE_TYPE, ALERT_DEFAULT_SHOW_POPUP, PLUS_MINUS_DEFAULT_NUDGE_VALUE, } from './Constants/ObjectDefaultConstants';
 import { Bounce, Flip, Slide, Zoom } from '../components/Toastify';
-import { getSwatchColorVar } from './Helpers/UIHelper';
+import { themeColorVar } from './Helpers/UIHelper';
 import { isPivotLayout } from './Helpers/Layouts/LayoutHelper';
 export function CreateEmptyCustomSort() {
     return { Uuid: createUuid(), Name: EMPTY_STRING, ColumnId: EMPTY_STRING, SortedValues: [] };
@@ -250,8 +250,8 @@ export function CreateDefaultStyledColumnBadge() {
     return {
         Shape: 'Rounded',
         PillStyle: {
-            BackColor: getSwatchColorVar(3),
-            ForeColor: getSwatchColorVar(1),
+            BackColor: themeColorVar('badge'),
+            ForeColor: themeColorVar('badge-foreground'),
         },
     };
 }

package/src/View/Dashboard/DashboardPopupSections.js

@@ -61,5 +61,5 @@ export const DashboardPopupSections = (props) => {
             return (_jsxs(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: [_jsxs(Tag, { children: ["Tab: ", tab.Name] }), toolbarTitles.map((title, index) => (_jsx(Tag, { children: title }, `${tab.Name}-${title}-${index}`)))] }, tab.Uuid ?? tab.Name));
         }) })) : (_jsx(Tag, { children: "No Tabs Configured" }));
     const moduleButtonsSummary = moduleButtonLabels.length > 0 ? (_jsx(Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => (_jsx(Tag, { children: label }, label))) })) : (_jsx(Tag, { children: "No Module Buttons" }));
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && (_jsx(CollapsibleWizardCard, { ...bindCard('settings'), "data-name": "dashboard-settings", title: "Settings", help: "Control Dashboard visibility, expansion and floating mode", compactSummary: settingsToggles, compactSummaryInteractive: true, summary: settingsToggles, className: "twa:overflow-hidden", children: settingsToggles })), _jsx(CollapsibleWizardCard, { ...bindCard('pinned-toolbars'), "data-name": "dashboard-pinned-toolbars", title: "Pinned Toolbars", help: "Optional strip along the top of the grid \u2014 pin Toolbars you want always visible (e.g. Grid Filter)", compactSummary: renderCompactAccentTags(pinnedToolbarTitles, (title) => title, { emptyLabel: 'No Pinned Toolbars' }), summary: pinnedSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:overflow-hidden", children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(CollapsibleWizardCard, { ...bindCard('tabs-toolbars'), "data-name": "dashboard-tabs-toolbars", title: "Tabs & Toolbars", help: "Group Toolbars into named Tabs in the Dashboard header (independent of Pinned Toolbars)", compactSummary: renderCompactAccentTags(tabsCompactLabels, (label) => label, { emptyLabel: 'No Tabs Configured' }), summary: tabsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[280px] twa:overflow-hidden", children: _jsx(DashboardManagerUI, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "dashboard-module-buttons", title: "Module Buttons", help: "Buttons in the Dashboard header that open Module settings", compactSummary: renderCompactAccentTags(moduleButtonLabels, (label) => label, { emptyLabel: 'No Module Buttons' }), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full twa:min-h-0 twa:gap-3 twa:overflow-y-auto", children: [props.areDashboardSettingsVisible && (_jsx(CollapsibleWizardCard, { "data-name": "dashboard-settings", title: "Settings", help: "Control Dashboard visibility, expansion and floating mode", summary: settingsToggles, collapsible: false, className: "twa:overflow-hidden" })), _jsx(CollapsibleWizardCard, { ...bindCard('pinned-toolbars'), "data-name": "dashboard-pinned-toolbars", title: "Pinned Toolbars", help: "Optional strip along the top of the grid \u2014 pin Toolbars you want always visible (e.g. Grid Filter)", compactSummary: renderCompactAccentTags(pinnedToolbarTitles, (title) => title, { emptyLabel: 'No Pinned Toolbars' }), summary: pinnedSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:overflow-hidden", children: _jsx(PinnedToolbarsSelector, {}) }), _jsx(CollapsibleWizardCard, { ...bindCard('tabs-toolbars'), "data-name": "dashboard-tabs-toolbars", title: "Tabs & Toolbars", help: "Group Toolbars into named Tabs in the Dashboard header (independent of Pinned Toolbars)", compactSummary: renderCompactAccentTags(tabsCompactLabels, (label) => label, { emptyLabel: 'No Tabs Configured' }), summary: tabsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[280px] twa:overflow-hidden", children: _jsx(DashboardManagerUI, { disabled: props.isDashboardDisabled, availableToolbars: [...systemToolbars, ...customToolbars], tabs: tabs, onTabsChange: props.onDashboardSetTabs, api: api }) }), _jsx(CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "dashboard-module-buttons", title: "Module Buttons", help: "Buttons in the Dashboard header that open Module settings", compactSummary: renderCompactAccentTags(moduleButtonLabels, (label) => label, { emptyLabel: 'No Module Buttons' }), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(ModuleValueSelector, { disabled: props.isDashboardDisabled, options: allModuleButtons, value: selectedModuleButtons, onChange: (selectedValues) => props.onDashboardSetModuleButtons(selectedValues) }) })] }));
 };