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

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) }) })] }));
 };

package/src/View/GridInfo/GridInfoPopup.js

@@ -8,12 +8,14 @@ import { Tabs } from '../../components/Tabs';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
 import { getDefaultAdaptableOptions } from '../../AdaptableOptions/DefaultAdaptableOptions';
+import { isPivotLayout } from '../../Utilities/Helpers/Layouts/LayoutHelper';
 import { cn } from '../../lib/utils';
 const adaptableVersion = ADAPTABLE_VERSION;
 const agGridVersion = AG_GRID_VERSION;
 export const GridInfoPopup = (props) => {
     const api = props.api;
-    const keyValuePairs = [];
+    const summaryKeyValuePairs = [];
+    const layoutKeyValuePairs = [];
     const calcColumns = api.calculatedColumnApi
         .getCalculatedColumns()
         .map((c) => c.ColumnId);
@@ -32,40 +34,74 @@ export const GridInfoPopup = (props) => {
         : null;
     const selectedRowInfo = api.gridApi.getSelectedRowInfo();
     if (api.optionsApi.getUserInterfaceOptions()?.showAdapTableVersion) {
-        keyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
+        summaryKeyValuePairs.push({ Key: 'AdapTable Version', Value: adaptableVersion });
     }
     if (api.optionsApi.getUserInterfaceOptions()?.showAgGridVersion) {
-        keyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
+        summaryKeyValuePairs.push({ Key: 'AG Grid Version', Value: agGridVersion });
     }
-    keyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
-    keyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
-    keyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
-    keyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
-    keyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
-    keyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
-    keyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
-    keyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
-    keyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
-    keyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
-    keyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
+    summaryKeyValuePairs.push({ Key: 'License Key', Value: api.optionsApi.getAdaptableOptions().licenseKey });
+    summaryKeyValuePairs.push({ Key: 'Adaptable Id', Value: api.optionsApi.getAdaptableId() });
+    summaryKeyValuePairs.push({ Key: 'State Key', Value: api.optionsApi.getAdaptableStateKey() });
+    summaryKeyValuePairs.push({ Key: 'User Name', Value: api.optionsApi.getUserName() });
+    const primaryKey = api.optionsApi.getPrimaryKey();
+    const primaryKeyFriendly = primaryKey
+        ? api.columnApi.getFriendlyNameForColumnId(primaryKey)
+        : undefined;
+    const primaryKeyLabel = primaryKeyFriendly && primaryKeyFriendly !== primaryKey
+        ? `${primaryKeyFriendly} (${primaryKey})`
+        : primaryKey;
+    summaryKeyValuePairs.push({
+        Key: 'Primary Key',
+        Value: api.optionsApi.isAutogeneratePrimaryKey()
+            ? `${primaryKeyLabel} (auto-generated)`
+            : primaryKeyLabel,
+    });
+    const currentLayout = api.layoutApi.getCurrentLayout();
+    const isPivot = isPivotLayout(currentLayout);
+    const columnLabels = (columnIds) => ArrayExtensions.IsNotNullOrEmpty(columnIds)
+        ? columnIds
+            .map((columnId) => api.columnApi.getFriendlyNameForColumnId(columnId) || columnId)
+            .join(', ')
+        : 'None';
+    layoutKeyValuePairs.push({
+        Key: 'Current Layout',
+        Value: api.layoutApi.getCurrentLayoutName() || 'None',
+    });
+    layoutKeyValuePairs.push({
+        Key: 'Layout Type',
+        Value: isPivot ? 'Pivot' : 'Table',
+    });
+    layoutKeyValuePairs.push({
+        Key: 'Row Groups',
+        Value: columnLabels(api.layoutApi.getCurrentRowGroupsColumnIds()),
+    });
+    if (isPivot) {
+        layoutKeyValuePairs.push({
+            Key: 'Pivot Columns',
+            Value: columnLabels(currentLayout.PivotColumns),
+        });
+    }
+    layoutKeyValuePairs.push({ Key: 'Sorted Columns', Value: ArrayExtensions.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None' });
+    layoutKeyValuePairs.push({ Key: 'Column Filters', Value: columnFilterDescription });
+    layoutKeyValuePairs.push({ Key: 'Grid Filter', Value: gridFilterExpression });
+    layoutKeyValuePairs.push({ Key: 'All Rows', Value: props.api.gridApi.getRowCount() });
+    layoutKeyValuePairs.push({ Key: 'Visible Rows', Value: props.api.gridApi.getVisibleRowCount() });
+    layoutKeyValuePairs.push({ Key: 'Selected Rows', Value: selectedRowInfo?.gridRows.length });
+    layoutKeyValuePairs.push({ Key: 'Visible Selected Rows', Value: selectedRowInfo?.gridRows.filter((gr) => gr.rowNode?.displayed == true).length });
+    layoutKeyValuePairs.push({ Key: 'All Columns', Value: props.api.gridApi.getColumnCount() });
+    layoutKeyValuePairs.push({ Key: 'Visible Columns', Value: props.api.gridApi.getVisibleColumnCount() });
+    layoutKeyValuePairs.push({ Key: 'Calculated Columns', Value: ArrayExtensions.IsNotNullOrEmpty(calcColumns)
             ? ArrayExtensions.createCommaSeparatedString(calcColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
+    layoutKeyValuePairs.push({ Key: 'Free Text Columns', Value: ArrayExtensions.IsNotNullOrEmpty(freeTextColumns)
             ? ArrayExtensions.createCommaSeparatedString(freeTextColumns)
             : 'None' });
-    keyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
+    layoutKeyValuePairs.push({ Key: 'Action Columns', Value: ArrayExtensions.IsNotNullOrEmpty(actionColumns)
             ? ArrayExtensions.createCommaSeparatedString(actionColumns)
             : 'None' });
     const domProps = {
         className: 'twa:flex-1 twa:min-h-0 twa:w-full',
     };
-    keyValuePairs.map((keyValuePair) => {
-        return {
-            Key: keyValuePair.Key,
-            Value: keyValuePair.Value === 'Ignore' ? null : keyValuePair.Value,
-        };
-    })
-        .filter((x) => x.Value);
     const columnsMap = {
         Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
         Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
@@ -199,12 +235,13 @@ export const GridInfoPopup = (props) => {
         return Math.min(total + 40, 400);
     };
     const enabledTabs = api.optionsApi.getSettingsPanelOptions()?.gridInfoTabs ??
-        ['Grid Options', 'Grid Summary', 'Grid State'];
+        ['Grid Summary', 'Layout', 'Grid State', 'Grid Options'];
     const showSummary = enabledTabs.includes('Grid Summary');
+    const showLayout = enabledTabs.includes('Layout');
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Grid Summary" }) : null, showState ? _jsx(Tabs.Tab, { children: "Grid State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: keyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
+    return (_jsx(PopupPanel, { className: cn(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? _jsx(Tabs.Tab, { children: "Summary" }) : null, showLayout ? _jsx(Tabs.Tab, { children: "Layout" }) : null, showState ? _jsx(Tabs.Tab, { children: "State" }) : null, showOptions ? _jsx(Tabs.Tab, { children: "Options" }) : null, showSummary ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: summaryKeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showLayout ? (_jsx(Tabs.Content, { children: _jsx(DataSource, { data: layoutKeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? (_jsx(Tabs.Content, { children: _jsx(AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? (_jsx(Tabs.Content, { children: _jsx("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => (_jsxs("div", { children: [_jsx("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), _jsx(DataSource, { data: section.rows, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { domProps: {
                                                     style: { height: sectionHeight(section.rows), width: '100%' },
                                                 }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/StyledColumn/RangesComponent.js

@@ -7,7 +7,7 @@ import FormLayout, { FormRow } from '../../components/FormLayout';
 import { NumberInput } from '../../components/Input/NumberInput';
 import SimpleButton from '../../components/SimpleButton';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { getGraySwatchColor } from '../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../Utilities/Helpers/UIHelper';
 import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
 import { Tabs } from '../../components/Tabs';
 import Radio from '../../components/Radio';
@@ -159,7 +159,7 @@ export class RangesComponent extends React.Component {
         }
         if (value === 'ColumnComparison') {
             const columnComparison = {
-                Color: getGraySwatchColor(),
+                Color: getDefaultRangeColor(),
                 MinValue: undefined,
                 MaxValue: undefined,
             };
@@ -252,7 +252,7 @@ export class RangesComponent extends React.Component {
                     {
                         Min: isPercentage ? 0 : 'Col-Min',
                         Max: isPercentage ? 100 : 'Col-Max',
-                        Color: getGraySwatchColor(),
+                        Color: getDefaultRangeColor(),
                     },
                 ]
                 : (() => {
@@ -298,7 +298,7 @@ export class RangesComponent extends React.Component {
         const newRange = {
             Min,
             Max: lastRange.Max,
-            Color: getGraySwatchColor(),
+            Color: getDefaultRangeColor(),
         };
         const newRanges = [...existingRanges.slice(0, -1), previousRange, newRange];
         this.props.updateRanges(newRanges);
@@ -311,7 +311,7 @@ export class RangesComponent extends React.Component {
             }
             return [
                 { ...onlyRange, Max: 50 },
-                { Min: 50, Max: 100, Color: getGraySwatchColor() },
+                { Min: 50, Max: 100, Color: getDefaultRangeColor() },
             ];
         }
         if (onlyRange.Min !== 'Col-Min' || onlyRange.Max !== 'Col-Max') {
@@ -322,7 +322,7 @@ export class RangesComponent extends React.Component {
         const mid = Math.round((min + max) / 2);
         return [
             { ...onlyRange, Max: mid },
-            { Min: mid, Max: 'Col-Max', Color: getGraySwatchColor() },
+            { Min: mid, Max: 'Col-Max', Color: getDefaultRangeColor() },
         ];
     }
     setColumnComparisonMin(value) {

package/src/View/StyledColumn/Wizard/StyledColumnWizardBulletSection.js

@@ -7,7 +7,7 @@ import { Tag } from '../../../components/Tag';
 import { ColorPicker } from '../../../components/ColorPicker';
 import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getGraySwatchColor } from '../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -230,7 +230,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                 {
                     Min: 0,
                     Max: 100,
-                    Color: getGraySwatchColor(),
+                    Color: getDefaultRangeColor(),
                 },
             ];
         props.onChange({

package/src/View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection.js

@@ -8,7 +8,7 @@ import { InputGroup } from '../../../components/InputGroup';
 import { ColorPicker, OptionalColorPicker } from '../../../components/ColorPicker';
 import { RangesComponent } from '../RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
-import { getGraySwatchColor } from '../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
@@ -276,7 +276,7 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
         const ranges = rangeValueType === 'Number'
             ? api.columnScopeApi.createCellColorRangesForScope(scope)
-            : [{ Min: 0, Max: 100, Color: getGraySwatchColor() }];
+            : [{ Min: 0, Max: 100, Color: getDefaultRangeColor() }];
         props.onChange({
             ...data,
             RangeBarStyle: {
@@ -424,9 +424,9 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                             : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
                                                         { value: 'Vertical', label: 'Vertical' },
-                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getGraySwatchColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
+                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getDefaultRangeColor(), onChange: (c) => updateTrackProperties({ Color: c }) }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
                                                         Height: e.target.value === '' ? undefined : Number(e.target.value),
-                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
+                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: (c) => updateBackColor(c) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => updateOutOfRangeProperties({
                                                         Mode: v,
                                                     }), items: [
                                                         { value: 'Clamp', label: 'Clamp to edge' },

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardRangesSection.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import ErrorBox from '../../../../components/ErrorBox';
 import { Tag } from '../../../../components/Tag';
 import { RangesComponent } from '../../RangesComponent';
-import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box } from '../../../../components/Flex';
 import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumnComparisonPreview';
@@ -108,7 +108,7 @@ export const StyledColumnWizardRangesSection = (props) => {
                 {
                     Min: 0,
                     Max: 100,
-                    Color: getGraySwatchColor(),
+                    Color: getDefaultRangeColor(),
                 },
             ];
         let newStyledColumn = data;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.js

@@ -6,7 +6,7 @@ import { Tag } from '../../../../components/Tag';
 import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
 import { BarStyleCellTextLayoutEditor } from './Components/BarStyleCellTextLayoutEditor';
 import { OptionalColorPicker } from '../../../../components/ColorPicker';
-import { getGraySwatchColor } from '../../../../Utilities/Helpers/UIHelper';
+import { getDefaultRangeColor } from '../../../../Utilities/Helpers/UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
 import { Box, Flex } from '../../../../components/Flex';
 import Radio, { RadioGroup } from '../../../../components/Radio';
@@ -145,5 +145,5 @@ export const StyledColumnWizardStyleSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, PercentBarStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: onBackColorChange }) })] }) })] })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Style" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Configure Tooltip and Background Colour" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: pb.ToolTipText?.includes('CellValue'), onChange: (checked) => onToolTipTextChanged('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: pb.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onToolTipTextChanged('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: pb.BackColor ?? undefined, defaultColor: getDefaultRangeColor(), onChange: onBackColorChange }) })] }) })] })] }));
 };

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

@@ -19,7 +19,9 @@ export interface CollapsibleWizardCardProps {
     headerVisual?: React.ReactNode;
     /** Trailing header controls (all states) — e.g. delete. Clicks do not toggle expand. */
     headerActions?: React.ReactNode;
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    /** When false, the card is a static header + summary (no expand chevron). Default: true. */
+    collapsible?: boolean;
     defaultExpanded?: boolean;
     expanded?: boolean;
     /** When true, only the header row is shown (another card in the accordion is expanded). */

package/src/View/Wizard/CollapsibleWizardCard.js

@@ -21,28 +21,36 @@ export function renderCompactAccentTags(ids, getLabel, options) {
     return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((id) => (_jsx(AccentTag, { className: "twa:shrink-0", children: getLabel(id) }, id))), remainder > 0 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
 }
 export const CollapsibleWizardCard = (props) => {
-    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
+    const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, collapsible = true, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
     const [expanded, setExpanded] = useProperty(props, 'expanded', defaultExpanded, {
         onChange: props.onExpandedChange,
     });
-    const showSummary = !expanded && !compact;
+    const canToggle = collapsible;
+    const isExpanded = canToggle && expanded;
+    const isCompact = canToggle && compact;
+    const showSummary = !isExpanded && !isCompact;
     const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
-    const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
-    const isInteractiveCompactSummary = compact && compactSummaryInteractive;
-    const toggleExpanded = () => setExpanded(!expanded);
+    const headerInline = isExpanded ? help : isCompact ? compactSummary : collapsedHeaderInline;
+    const isInteractiveCompactSummary = isCompact && compactSummaryInteractive;
+    const toggleExpanded = () => {
+        if (!canToggle) {
+            return;
+        }
+        setExpanded(!expanded);
+    };
     const handleTitleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             toggleExpanded();
         }
     };
-    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
+    return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', isExpanded
             ? getCollapsibleWizardCardExpandedClasses(surface)
-            : getCollapsibleWizardCardCollapsedClasses(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
+            : getCollapsibleWizardCardCollapsedClasses(surface), isCompact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
             ? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
-            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !compact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [_jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [_jsx(IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
+            : 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !isCompact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:rounded-standard', canToggle && 'twa:cursor-pointer twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !isCompact && !isExpanded }, canToggle && targetOwn.focusOutline, canToggle && 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: canToggle ? toggleExpanded : undefined, onKeyDown: canToggle ? handleTitleKeyDown : undefined, tabIndex: canToggle ? 0 : undefined, "aria-expanded": canToggle ? isExpanded : undefined, role: canToggle ? 'button' : undefined, children: [_jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:select-none', canToggle && 'twa:cursor-pointer'), children: [canToggle ? (_jsx(IconComponent, { icon: { name: isExpanded ? 'collapse' : 'expand' } })) : null, _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
                                 ? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
-                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
+                                : cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', isCompact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), isExpanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
 };
 export function useWizardCardAccordion(initialExpandedId, options) {
     const fillExpandedCard = options?.fillExpandedCard ?? false;

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -7,7 +7,7 @@ import { EmitterCallback } from '../Utilities/Emitter';
 import { AdaptablePlugin } from '../AdaptableOptions/AdaptablePlugin';
 import { AgGridAdapter, RowNodeEvent } from './AgGridAdapter';
 import { IDataService } from '../Utilities/Services/Interface/IDataService';
-import { AdaptableState } from '../AdaptableState/AdaptableState';
+import { AdaptablePersistentState } from '../AdaptableState/AdaptableState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { ICalculatedColumnExpressionService } from '../Utilities/Services/Interface/ICalculatedColumnExpressionService';
 import { IModuleService } from '../Utilities/Services/Interface/IModuleService';
@@ -157,9 +157,9 @@ export declare class AdaptableAgGrid implements IAdaptable {
     static _initInternal(config: AdaptableInitInternalConfig): Promise<AdaptableApi>;
     private _initAdaptableAgGrid;
     midwayDestroy(): void;
-    migrateLoadedAdaptableState(state: AdaptableState): AdaptableState;
-    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: AdaptableState) => AdaptableState;
-    normalizeAdaptableState(state: AdaptableState, agGridOptions: NormalizeAdaptableStateOptions): AdaptableState;
+    migrateLoadedAdaptableState<T extends Partial<AdaptablePersistentState>>(state: T): T;
+    buildPostLoadHook(gridOptions: NormalizeAdaptableStateOptions): (state: Partial<AdaptablePersistentState>) => Partial<AdaptablePersistentState>;
+    normalizeAdaptableState(state: Partial<AdaptablePersistentState>, agGridOptions: NormalizeAdaptableStateOptions): Partial<AdaptablePersistentState>;
     private normaliseLayoutState;
     private normaliseToolPanelState;
     private getCurrentLayoutModel;

package/src/agGrid/AdaptableAgGrid.js

@@ -15,6 +15,7 @@ import { AG_GRID_GRAND_TOTAL_ROW_ID, AG_GRID_GROUPED_COLUMN, AG_GRID_SELECTION_C
 import { generateSelectionColumn } from '../Api/Implementation/ColumnApiImpl';
 import { DataService } from '../Utilities/Services/DataService';
 import { AdaptableStore } from '../Redux/Store/AdaptableStore';
+import { validateStateOptions } from '../Redux/Store/StateOptionsGuards';
 import { AdaptableApiImpl } from '../Api/Implementation/AdaptableApiImpl';
 import { Fdc3Service } from '../Utilities/Services/Fdc3Service';
 import { CommentsService } from '../Utilities/Services/CommentsService';
@@ -739,6 +740,7 @@ export class AdaptableAgGrid {
         }
     }
     normalizeAdaptableOptions(adaptableOptions) {
+        validateStateOptions(adaptableOptions.stateOptions, this.logger);
         if (this.hasAutogeneratedPrimaryKey) {
             this.logger.warn(`Autogenerated primary key is enabled (adaptableOptions.autogeneratedPrimaryKey = true). This should be a last resort as it limits some Adaptable features. See: ${PrimaryKeyDocsLink}`);
             this.adaptableOptions.primaryKey = AUTOGENERATED_PK_COLUMN;

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -88,7 +88,7 @@ export declare class AgGridColumnAdapter {
     private setupColumnHeaderStyle;
     private setupColumnCellEditor;
     private setupColumnCellRenderer;
-    private setupColumnTooltipValueGetter;
+    private setupColumnTooltip;
     /**
      * Resolves a Range Bar bound (number / column id / Col-Min / Col-Max /
      * Col-Avg / Col-Median) into a concrete numeric value for the supplied row.