@adaptabletools/adaptable-cjs 20.0.0 → 20.0.2-canary.0

package/src/AdaptableState/ThemeState.d.ts

@@ -31,7 +31,9 @@ export interface AdaptableTheme extends AdaptableObject {
      */
     Description: string;
     /**
-     * Ag Grid theme to apply when loading theme
+     * Ag Grid theme to apply when loading theme; relevant only when using the legacy AG Grid themes
+     *
+     * @deprecated no longer used with the new AG Grid Theming API
      */
     AgGridClassName?: string;
     /**
@@ -39,7 +41,17 @@ export interface AdaptableTheme extends AdaptableObject {
      */
     CSSVariables?: Record<string, string>;
     /**
-     * Whether theme is based on system Light or Dark Themes
+     * Base theme variant to derive custom theme from.
+     * Use `light` to inherit from Adaptable Light Theme or `dark` for Adaptable Dark Theme.
+     * When creating custom themes, specifying a variant ensures proper inheritance of base theme styles.
      */
     Variant?: 'light' | 'dark';
+    /**
+     * AG Grid theme mode to apply when this theme is selected.
+     * Valid values are `light`, `dark`, `dark-blue` or any custom theme mode defined in AG Grid.
+     * When set, adds a data-ag-theme-mode attribute to the document body.
+     *
+     * @see https://www.ag-grid.com/javascript-data-grid/theming-colors/#theme-modes
+     */
+    AgThemeMode?: TypeHint<string, 'light' | 'dark' | 'dark-blue'>;
 }

package/src/Api/ColumnFilterApi.d.ts

@@ -51,7 +51,7 @@ export interface ColumnFilterApi {
      */
     getColumnFiltersForLayout(layoutName: string): ColumnFilter[];
     /**
-     * Sets Column Filters in the current Layout - will replace filters for existing column and leave other column filters in place
+     * Sets Column Filters in current Layout; replaces filters for existing column, leaving other column filters in place
      * @param columnFilters Column Filters to set
      * @returns column filters
      */

package/src/Api/StateApi.d.ts

@@ -38,7 +38,7 @@ export interface StateApi {
      */
     getPredefinedConfig(): PredefinedConfig | any;
     /**
-     * Returns current Initial Adaptable State
+     * Returns the Initial Adaptable State
      */
     getInitialState(): InitialState | any;
     /**
@@ -46,7 +46,7 @@ export interface StateApi {
      */
     reloadPredefinedConfig(newPredefinedConfig?: PredefinedConfig): void;
     /**
-     * Reloads existing or supplied Initial State; clears persistent state by calling `StateOptions.clearState` for remote storage removal
+     * Reloads existing (or supplied) Initial State; clears persistent state by calling `StateOptions.clearState`
      * @param newInitialState optional new InitialState to load
      */
     reloadInitialState(newInitialState?: InitialState): void;

package/src/Redux/ActionsReducers/PluginsRedux.d.ts

@@ -3,129 +3,36 @@ import * as Redux from 'redux';
  * @ReduxAction Plugins have been instantiated
  */
 export declare const PLUGINS_SET_PLUGIN_STATE = "PLUGINS_SET_PLUGIN_STATE";
-/**
- * @ReduxAction Throttle time for live reports has been set
- */
 export declare const IPUSHPULL_SET_THROTTLE_TIME = "IPUSHPULL_SET_THROTTLE_TIME";
-/**
- * @ReduxAction A snapshot report has been sent
- */
 export declare const IPUSHPULL_SEND_SNAPSHOT = "IPUSHPULL_SEND_SNAPSHOT";
-/**
- * @ReduxAction An ipushpull report has been selected
- */
 export declare const IPUSHPULL_REPORT_SELECT = "IPUSHPULL_REPORT_SELECT";
-/**
- * @ReduxAction Live data has been sent to ipushpull
- */
 export declare const IPUSHPULL_START_LIVE_DATA = "IPUSHPULL_START_LIVE_DATA";
-/**
- * @ReduxAction Live data to ipushpull has been stopped
- */
 export declare const IPUSHPULL_STOP_LIVE_DATA = "IPUSHPULL_STOP_LIVE_DATA";
-/**
- * @ReduxAction A new ipushpull page has been added
- */
 export declare const IPUSHPULL_ADD_PAGE = "IPUSHPULL_ADD_PAGE";
-/**
- * @ReduxAction Logged in to ipushpull
- */
 export declare const IPUSHPULL_LOGIN = "IPUSHPULL_LOGIN";
-/**
- * @ReduxAction Logged out from ipushpull
- */
 export declare const IPUSHPULL_LOGOUT = "IPUSHPULL_LOGOUT";
-/**
- * @ReduxAction Error message set from failed login
- */
 export declare const IPUSHPULL_SET_LOGIN_ERROR_MESSAGE = "IPUSHPULL_SET_LOGIN_ERROR_MESSAGE";
-/**
- * @ReduxAction Login details to ipushpull have been set
- */
 export declare const IPUSHPULL_SET_LOGIN_DETAILS = "IPUSHPULL_SET_LOGIN_DETAILS";
-/**
- * @ReduxAction ipushpull has been made available
- */
 export declare const IPUSHPULL_SET_AVAILABLE_ON = "IPUSHPULL_SET_AVAILABLE_ON";
-/**
- * @ReduxAction ipushpull has been made unavailable
- */
 export declare const IPUSHPULL_SET_AVAILABLE_OFF = "SET_IPUSHPULL_AVAILABLE_OFF";
-/**
- * @ReduxAction ipushpull is now running
- */
 export declare const IPUSHPULL_SET_RUNNING_ON = "IPUSHPULL_SET_RUNNING_ON";
-/**
- * @ReduxAction ipushpull is no longer running
- */
 export declare const IPUSHPULL_SET_RUNNING_OFF = "IPUSHPULL_SET_RUNNING_OFF";
-/**
- * @ReduxAction A live report to ipuspull has been set
- */
 export declare const IPUSHPULL_LIVE_REPORT_SET = "IPUSHPULL_LIVE_REPORT_SET";
-/**
- * @ReduxAction The live report to ipuspull has been cleared
- */
 export declare const IPUSHPULL_LIVE_REPORT_CLEAR = "IPUSHPULL_LIVE_REPORT_CLEAR";
-/**
- * @ReduxAction ipushpull domain pages have been set
- */
 export declare const IPUSHPULL_DOMAIN_PAGES_SET = "IPUSHPULL_DOMAIN_PAGES_SET";
-/**
- * @ReduxAction ipushpull domain pages have been cleared
- */
 export declare const IPUSHPULL_DOMAIN_PAGES_CLEAR = "IPUSHPULL_DOMAIN_PAGES_CLEAR";
-/**
- * @ReduxAction ipushpull set current(selected) report name
- */
 export declare const IPUSHPULL_SET_CURRENT_REPORTNAME = "IPUSHPULL_SET_CURRENT_REPORTNAME";
-/**
- * @ReduxAction ipushpull set current(selected) folder
- */
 export declare const IPUSHPULL_SET_CURRENT_FOLDER = "IPUSHPULL_SET_CURRENT_FOLDER";
-/**
- * @ReduxAction ipushpull set current(selected) page
- */
 export declare const IPUSHPULL_SET_CURRENT_PAGE = "IPUSHPULL_SET_CURRENT_PAGE";
-/**
- * @ReduxAction ipushpull set available pages (depending on current folder)
- */
 export declare const IPUSHPULL_SET_AVAILABLE_PAGES = "IPUSHPULL_SET_AVAILABLE_PAGES";
-/**
- * @ReduxAction Live data has been sent to OpenFin
- */
 export declare const OPENFIN_START_LIVE_DATA = "OPENFIN_START_LIVE_DATA";
-/**
- * @ReduxAction Live data is not longer sent to OpenFin
- */
 export declare const OPENFIN_STOP_LIVE_DATA = "OPENFIN_STOP_LIVE_DATA";
-/**
- * @ReduxAction An OpenFin live report has started
- */
 export declare const OPENFIN_LIVE_REPORT_SET = "OPENFIN_LIVE_REPORT_SET";
-/**
- * @ReduxAction An OpenFin live report has stopped
- */
 export declare const OPENFIN_LIVE_REPORT_CLEAR = "OPENFIN_LIVE_REPORT_CLEAR";
-/**
- * @ReduxAction OpenFin is now available
- */
 export declare const OPENFIN_SET_AVAILABLE_ON = "OPENFIN_SET_AVAILABLE_ON";
-/**
- * @ReduxAction OpenFin is no longer available
- */
 export declare const OPENFIN_SET_AVAILABLE_OFF = "OPENFIN_SET_AVAILABLE_OFF";
-/**
- * @ReduxAction OpenFin is now running
- */
 export declare const OPENFIN_SET_RUNNING_ON = "OPENFIN_SET_RUNNING_ON";
-/**
- * @ReduxAction OpenFin is no longer running
- */
 export declare const OPENFIN_SET_RUNNING_OFF = "OPENFIN_SET_RUNNING_OFF";
-/**
- * @ReduxAction set current(selected) report name
- */
 export declare const OPENFIN_SET_CURRENT_REPORTNAME = "OPENFIN_SET_CURRENT_REPORTNAME";
 export interface PluginsAction extends Redux.Action {
     pluginState: any;

package/src/Redux/ActionsReducers/PluginsRedux.js

@@ -5,129 +5,36 @@ exports.PluginsReducer = exports.PluginsSetPluginState = exports.OPENFIN_SET_CUR
  * @ReduxAction Plugins have been instantiated
  */
 exports.PLUGINS_SET_PLUGIN_STATE = 'PLUGINS_SET_PLUGIN_STATE';
-/**
- * @ReduxAction Throttle time for live reports has been set
- */
 exports.IPUSHPULL_SET_THROTTLE_TIME = 'IPUSHPULL_SET_THROTTLE_TIME';
-/**
- * @ReduxAction A snapshot report has been sent
- */
 exports.IPUSHPULL_SEND_SNAPSHOT = 'IPUSHPULL_SEND_SNAPSHOT';
-/**
- * @ReduxAction An ipushpull report has been selected
- */
 exports.IPUSHPULL_REPORT_SELECT = 'IPUSHPULL_REPORT_SELECT';
-/**
- * @ReduxAction Live data has been sent to ipushpull
- */
 exports.IPUSHPULL_START_LIVE_DATA = 'IPUSHPULL_START_LIVE_DATA';
-/**
- * @ReduxAction Live data to ipushpull has been stopped
- */
 exports.IPUSHPULL_STOP_LIVE_DATA = 'IPUSHPULL_STOP_LIVE_DATA';
-/**
- * @ReduxAction A new ipushpull page has been added
- */
 exports.IPUSHPULL_ADD_PAGE = 'IPUSHPULL_ADD_PAGE';
-/**
- * @ReduxAction Logged in to ipushpull
- */
 exports.IPUSHPULL_LOGIN = 'IPUSHPULL_LOGIN';
-/**
- * @ReduxAction Logged out from ipushpull
- */
 exports.IPUSHPULL_LOGOUT = 'IPUSHPULL_LOGOUT';
-/**
- * @ReduxAction Error message set from failed login
- */
 exports.IPUSHPULL_SET_LOGIN_ERROR_MESSAGE = 'IPUSHPULL_SET_LOGIN_ERROR_MESSAGE';
-/**
- * @ReduxAction Login details to ipushpull have been set
- */
 exports.IPUSHPULL_SET_LOGIN_DETAILS = 'IPUSHPULL_SET_LOGIN_DETAILS';
-/**
- * @ReduxAction ipushpull has been made available
- */
 exports.IPUSHPULL_SET_AVAILABLE_ON = 'IPUSHPULL_SET_AVAILABLE_ON';
-/**
- * @ReduxAction ipushpull has been made unavailable
- */
 exports.IPUSHPULL_SET_AVAILABLE_OFF = 'SET_IPUSHPULL_AVAILABLE_OFF';
-/**
- * @ReduxAction ipushpull is now running
- */
 exports.IPUSHPULL_SET_RUNNING_ON = 'IPUSHPULL_SET_RUNNING_ON';
-/**
- * @ReduxAction ipushpull is no longer running
- */
 exports.IPUSHPULL_SET_RUNNING_OFF = 'IPUSHPULL_SET_RUNNING_OFF';
-/**
- * @ReduxAction A live report to ipuspull has been set
- */
 exports.IPUSHPULL_LIVE_REPORT_SET = 'IPUSHPULL_LIVE_REPORT_SET';
-/**
- * @ReduxAction The live report to ipuspull has been cleared
- */
 exports.IPUSHPULL_LIVE_REPORT_CLEAR = 'IPUSHPULL_LIVE_REPORT_CLEAR';
-/**
- * @ReduxAction ipushpull domain pages have been set
- */
 exports.IPUSHPULL_DOMAIN_PAGES_SET = 'IPUSHPULL_DOMAIN_PAGES_SET';
-/**
- * @ReduxAction ipushpull domain pages have been cleared
- */
 exports.IPUSHPULL_DOMAIN_PAGES_CLEAR = 'IPUSHPULL_DOMAIN_PAGES_CLEAR';
-/**
- * @ReduxAction ipushpull set current(selected) report name
- */
 exports.IPUSHPULL_SET_CURRENT_REPORTNAME = 'IPUSHPULL_SET_CURRENT_REPORTNAME';
-/**
- * @ReduxAction ipushpull set current(selected) folder
- */
 exports.IPUSHPULL_SET_CURRENT_FOLDER = 'IPUSHPULL_SET_CURRENT_FOLDER';
-/**
- * @ReduxAction ipushpull set current(selected) page
- */
 exports.IPUSHPULL_SET_CURRENT_PAGE = 'IPUSHPULL_SET_CURRENT_PAGE';
-/**
- * @ReduxAction ipushpull set available pages (depending on current folder)
- */
 exports.IPUSHPULL_SET_AVAILABLE_PAGES = 'IPUSHPULL_SET_AVAILABLE_PAGES';
-/**
- * @ReduxAction Live data has been sent to OpenFin
- */
 exports.OPENFIN_START_LIVE_DATA = 'OPENFIN_START_LIVE_DATA';
-/**
- * @ReduxAction Live data is not longer sent to OpenFin
- */
 exports.OPENFIN_STOP_LIVE_DATA = 'OPENFIN_STOP_LIVE_DATA';
-/**
- * @ReduxAction An OpenFin live report has started
- */
 exports.OPENFIN_LIVE_REPORT_SET = 'OPENFIN_LIVE_REPORT_SET';
-/**
- * @ReduxAction An OpenFin live report has stopped
- */
 exports.OPENFIN_LIVE_REPORT_CLEAR = 'OPENFIN_LIVE_REPORT_CLEAR';
-/**
- * @ReduxAction OpenFin is now available
- */
 exports.OPENFIN_SET_AVAILABLE_ON = 'OPENFIN_SET_AVAILABLE_ON';
-/**
- * @ReduxAction OpenFin is no longer available
- */
 exports.OPENFIN_SET_AVAILABLE_OFF = 'OPENFIN_SET_AVAILABLE_OFF';
-/**
- * @ReduxAction OpenFin is now running
- */
 exports.OPENFIN_SET_RUNNING_ON = 'OPENFIN_SET_RUNNING_ON';
-/**
- * @ReduxAction OpenFin is no longer running
- */
 exports.OPENFIN_SET_RUNNING_OFF = 'OPENFIN_SET_RUNNING_OFF';
-/**
- * @ReduxAction set current(selected) report name
- */
 exports.OPENFIN_SET_CURRENT_REPORTNAME = 'OPENFIN_SET_CURRENT_REPORTNAME';
 const PluginsSetPluginState = (pluginId, pluginState) => ({
     type: exports.PLUGINS_SET_PLUGIN_STATE,

package/src/Redux/ActionsReducers/ScheduleRedux.d.ts

@@ -65,61 +65,19 @@ export declare const REMINDER_SCHEDULE_SUSPEND_ALL = "REMINDER_SCHEDULE_SUSPEND_
  * @ReduxAction All Reminder Schedules have been unsuspended or activated
  */
 export declare const REMINDER_SCHEDULE_UNSUSPEND_ALL = "REMINDER_SCHEDULE_UNSUSPEND_ALL";
-/**
- * @ReduxAction An ipushpull Schedule has been added
- */
 export declare const IPUSHPULL_SCHEDULE_ADD = "IPUSHPULL_SCHEDULE_ADD";
-/**
- * @ReduxAction An ipushpull Schedule has been edited
- */
 export declare const IPUSHPULL_SCHEDULE_EDIT = "IPUSHPULL_SCHEDULE_EDIT";
-/**
- * @ReduxAction An ipushpull Schedule has been deleted
- */
 export declare const IPUSHPULL_SCHEDULE_DELETE = "IPUSHPULL_SCHEDULE_DELETE";
-/**
- * @ReduxAction An ipushpull Schedule has been suspended
- */
 export declare const IPUSHPULL_SCHEDULE_SUSPEND = "IPUSHPULL_SCHEDULE_SUSPEND";
-/**
- * @ReduxAction An ipushpull Schedule has been unsuspended or activated
- */
 export declare const IPUSHPULL_SCHEDULE_UNSUSPEND = "IPUSHPULL_SCHEDULE_UNSUSPEND";
-/**
- * @ReduxAction All ipushpull Schedules have been suspended
- */
 export declare const IPUSHPULL_SCHEDULE_SUSPEND_ALL = "IPUSHPULL_SCHEDULE_SUSPEND_ALL";
-/**
- * @ReduxAction All ipushpull Schedules have been unsuspended or activated
- */
 export declare const IPUSHPULL_SCHEDULE_UNSUSPEND_ALL = "IPUSHPULL_SCHEDULE_UNSUSPEND_ALL";
-/**
- * @ReduxAction An OpenFin Schedule has been added
- */
 export declare const OPENFIN_SCHEDULE_ADD = "OPENFIN_SCHEDULE_ADD";
-/**
- * @ReduxAction An OpenFin Schedule has been edited
- */
 export declare const OPENFIN_SCHEDULE_EDIT = "OPENFIN_SCHEDULE_EDIT";
-/**
- * @ReduxAction An OpenFin Schedule has been deleted
- */
 export declare const OPENFIN_SCHEDULE_DELETE = "OPENFIN_SCHEDULE_DELETE";
-/**
- * @ReduxAction An OpenFin Schedule has been suspended
- */
 export declare const OPENFIN_SCHEDULE_SUSPEND = "OPENFIN_SCHEDULE_SUSPEND";
-/**
- * @ReduxAction An OpenFin Schedule has been unsuspended or activated
- */
 export declare const OPENFIN_SCHEDULE_UNSUSPEND = "OPENFIN_SCHEDULE_UNSUSPEND";
-/**
- * @ReduxAction All OpenFin Schedules have been suspended
- */
 export declare const OPENFIN_SCHEDULE_SUSPEND_ALL = "OPENFIN_SCHEDULE_SUSPEND_ALL";
-/**
- * @ReduxAction All OpenFin Schedules have been unsuspended or activated
- */
 export declare const OPENFIN_SCHEDULE_UNSUSPEND_ALL = "OPENFIN_SCHEDULE_UNSUSPEND_ALL";
 /**
  * @ReduxAction Schedule Module is ready

package/src/Redux/ActionsReducers/ScheduleRedux.js

@@ -66,61 +66,19 @@ exports.REMINDER_SCHEDULE_SUSPEND_ALL = 'REMINDER_SCHEDULE_SUSPEND_ALL';
  * @ReduxAction All Reminder Schedules have been unsuspended or activated
  */
 exports.REMINDER_SCHEDULE_UNSUSPEND_ALL = 'REMINDER_SCHEDULE_UNSUSPEND_ALL';
-/**
- * @ReduxAction An ipushpull Schedule has been added
- */
 exports.IPUSHPULL_SCHEDULE_ADD = 'IPUSHPULL_SCHEDULE_ADD';
-/**
- * @ReduxAction An ipushpull Schedule has been edited
- */
 exports.IPUSHPULL_SCHEDULE_EDIT = 'IPUSHPULL_SCHEDULE_EDIT';
-/**
- * @ReduxAction An ipushpull Schedule has been deleted
- */
 exports.IPUSHPULL_SCHEDULE_DELETE = 'IPUSHPULL_SCHEDULE_DELETE';
-/**
- * @ReduxAction An ipushpull Schedule has been suspended
- */
 exports.IPUSHPULL_SCHEDULE_SUSPEND = 'IPUSHPULL_SCHEDULE_SUSPEND';
-/**
- * @ReduxAction An ipushpull Schedule has been unsuspended or activated
- */
 exports.IPUSHPULL_SCHEDULE_UNSUSPEND = 'IPUSHPULL_SCHEDULE_UNSUSPEND';
-/**
- * @ReduxAction All ipushpull Schedules have been suspended
- */
 exports.IPUSHPULL_SCHEDULE_SUSPEND_ALL = 'IPUSHPULL_SCHEDULE_SUSPEND_ALL';
-/**
- * @ReduxAction All ipushpull Schedules have been unsuspended or activated
- */
 exports.IPUSHPULL_SCHEDULE_UNSUSPEND_ALL = 'IPUSHPULL_SCHEDULE_UNSUSPEND_ALL';
-/**
- * @ReduxAction An OpenFin Schedule has been added
- */
 exports.OPENFIN_SCHEDULE_ADD = 'OPENFIN_SCHEDULE_ADD';
-/**
- * @ReduxAction An OpenFin Schedule has been edited
- */
 exports.OPENFIN_SCHEDULE_EDIT = 'OPENFIN_SCHEDULE_EDIT';
-/**
- * @ReduxAction An OpenFin Schedule has been deleted
- */
 exports.OPENFIN_SCHEDULE_DELETE = 'OPENFIN_SCHEDULE_DELETE';
-/**
- * @ReduxAction An OpenFin Schedule has been suspended
- */
 exports.OPENFIN_SCHEDULE_SUSPEND = 'OPENFIN_SCHEDULE_SUSPEND';
-/**
- * @ReduxAction An OpenFin Schedule has been unsuspended or activated
- */
 exports.OPENFIN_SCHEDULE_UNSUSPEND = 'OPENFIN_SCHEDULE_UNSUSPEND';
-/**
- * @ReduxAction All OpenFin Schedules have been suspended
- */
 exports.OPENFIN_SCHEDULE_SUSPEND_ALL = 'OPENFIN_SCHEDULE_SUSPEND_ALL';
-/**
- * @ReduxAction All OpenFin Schedules have been unsuspended or activated
- */
 exports.OPENFIN_SCHEDULE_UNSUSPEND_ALL = 'OPENFIN_SCHEDULE_UNSUSPEND_ALL';
 /**
  * @ReduxAction Schedule Module is ready

package/src/Utilities/Defaults/DefaultSettingsPanel.js

@@ -10,6 +10,7 @@ exports.DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS = [
     'Dashboard',
     'ToolPanel',
     'StatusBar',
+    'Theme',
     '-',
     'Layout',
     'CalculatedColumn',
@@ -23,7 +24,6 @@ exports.DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS = [
     'FormatColumn',
     'StyledColumn',
     'FlashingCell',
-    'Theme',
     '-',
     'QuickSearch',
     'GridFilter',

package/src/Utilities/Services/ThemeService.js

@@ -73,11 +73,11 @@ class ThemeService {
         if (abLoaded !== '777') {
             logger.consoleError('Please import Adaptable styles from "@adaptabletools/adaptable/index.css"');
         }
-        // every theme should define a custom css variable: --ab-theme-loaded: <themeName> defined on the document element.
-        if (abThemeLoaded !== themeName) {
+        const isCustomUserTheme = !this.api.themeApi.internalApi.isSystemTheme(themeName);
+        if (!isCustomUserTheme && abThemeLoaded !== themeName) {
             logger.consoleWarn(`Theme "${themeName}" doesn't seem to be loaded! Make sure you import the css file for the "${themeName}" theme!
 
-If it's a default theme, try
+If it's an AdapTable system theme, try
 
 import "@adaptabletools/adaptable/themes/${themeName}.css"`);
         }

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

@@ -155,7 +155,6 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     React.useEffect(() => {
         onValidityChange(isIncludedColumn(primaryKeyField));
     }, [includedColumnsMap, primaryKeyField]);
-    const rowHeight = 40;
     const data = columns;
     const CellWrapper = (props) => {
         return (React.createElement(rebass_1.Flex, { ...props, style: {
@@ -343,7 +342,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,
-                }, rowHeight: rowHeight, columnHeaderHeight: 65, domProps: tableDOMProps, columns: columnsMap }))));
+                }, domProps: tableDOMProps, columns: columnsMap }))));
 };
 function areEqual() {
     /**

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

@@ -17,6 +17,16 @@ const tableDOMProps = {
         minHeight: 600,
     },
 };
+const columnTypes = {
+    default: {
+        defaultFlex: 1,
+        align: 'center',
+        defaultSortable: false,
+    },
+};
+const headerOptions = {
+    alwaysReserveSpaceForSortIcon: false,
+};
 const EntitlementsListForm = (props) => {
     let abOptions = props.adaptableOptions;
     const entitlements = abOptions?.entitlementOptions?.moduleEntitlements ?? [];
@@ -99,15 +109,7 @@ const EntitlementsListForm = (props) => {
     }
     return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: theme },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
-                    default: {
-                        defaultFlex: 1,
-                        align: 'center',
-                        defaultSortable: false,
-                    },
-                }, headerOptions: {
-                    alwaysReserveSpaceForSortIcon: false,
-                }, columnHeaderHeight: 50, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const DefaultEntitlementForm = (props) => {
     const abOptions = props.adaptableOptions;

package/src/View/ColumnInfo/ColumnInfo.js

@@ -14,6 +14,12 @@ const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const BASE_CLASS_NAME = 'ab-AdaptableColumns';
+const domProps = {
+    style: {
+        height: '460px',
+        width: '100%',
+    },
+};
 // TODOS:
 // - use column from props as initial value
 // - table summary
@@ -154,12 +160,7 @@ const ColumnDefPreview = (props) => {
             Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
         };
         return (React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { domProps: {
-                    style: {
-                        height: '460px',
-                        width: '100%',
-                    },
-                }, columns: columnsMap })));
+            React.createElement(InfiniteTable_1.InfiniteTable, { domProps: domProps, columns: columnsMap })));
     }
 };
 const ModuleView = (props) => {
@@ -218,12 +219,13 @@ const ColumnInfo = (props) => {
                 React.createElement(FormLayout_1.FormRow, { label: "Select Column" },
                     React.createElement(ColumnSelector_1.ColumnSelector, { filterColumn: (column) => !column.alwaysHidden, value: selectedColumnId, onChange: (columnId) => setSelectedColumnId(columnId) })))),
         selectedColumnId && (React.createElement(Tabs_1.Tabs, { mb: 3 },
-            React.createElement(Tabs_1.Tabs.Tab, null, "State"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Summary"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Column State"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column }))),
+            ' ',
             React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && (React.createElement(rebass_1.Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
                 return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
-            })))),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })))))));
+            }))))))));
 };
 exports.ColumnInfo = ColumnInfo;

package/src/View/Comments/CommentsPopup.js

@@ -17,6 +17,16 @@ const tableDOMProps = {
         minWidth: '10rem',
     },
 };
+const columnTypes = {
+    default: {
+        align: 'start',
+        defaultFlex: 1,
+        defaultSortable: false,
+    },
+};
+const headerOptions = {
+    alwaysReserveSpaceForSortIcon: false,
+};
 const CellComments = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Comment') === 'ReadOnly';
@@ -77,15 +87,7 @@ const CellComments = (props) => {
                     adaptable.api.commentApi.deleteCommentThread(props.commentThread);
                 } })) },
         React.createElement(InfiniteTable_1.DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
-                    default: {
-                        align: 'start',
-                        defaultFlex: 1,
-                        defaultSortable: false,
-                    },
-                }, headerOptions: {
-                    alwaysReserveSpaceForSortIcon: false,
-                }, rowHeight: 30, columnHeaderHeight: 30, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const CommentsPopup = (props) => {
     const commentThreads = (0, react_redux_1.useSelector)((state) => {

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -105,6 +105,13 @@ const FloatingFilterValues = (props) => {
                             border: 'none',
                         },
                     },
+                    ...(props.value?.length
+                        ? {
+                            valueContainer: {
+                                fontWeight: 'var(--ab-cmp-quickfilter-selected-options-text__font-weight)',
+                            },
+                        }
+                        : {}),
                 },
                 onMenuOpen,
                 onInputChange,

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

@@ -31,7 +31,7 @@ const ColumnValuesSelect = (props) => {
     const component = (React.createElement(Select_1.Select, { isMulti: true, showHeaderSelectionCheckbox: true, searchable: true, closeMenuOnSelect: false, size: "small", menuStyle: {
             minWidth: `var(--ab-cmp-select-column-menu-${column.columnId}__min-width, var(--ab-cmp-select-column-menu__min-width, 260px))`,
         }, ...props.selectProps, options: options, value: value, isLoading: props.isLoading, onChange: props.onChange }));
-    return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.isLoading && `${baseClassName}--loading`), onKeyDownCapture: (e) => {
+    return (React.createElement("div", { className: (0, join_1.default)(baseClassName, props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             const event = e.nativeEvent || e;
             event.stopPropagation = () => {
                 // see #ensure-keyboard-navigation-works-in-column-values-filter

package/src/View/Layout/PivotDetailsPopoup.js

@@ -12,6 +12,11 @@ const tableDOMProps = {
         minHeight: 300,
     },
 };
+const columnTypes = {
+    default: {
+        defaultFlex: 1,
+    },
+};
 const PivotDetailsPopoup = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const adaptableApi = adaptable.api;
@@ -68,10 +73,6 @@ const PivotDetailsPopoup = (props) => {
         };
     }, [props.popupProps]);
     return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: columnId },
-        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
-                default: {
-                    defaultFlex: 1,
-                },
-            }, domProps: tableDOMProps, columns: columns })));
+        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
 };
 exports.PivotDetailsPopoup = PivotDetailsPopoup;