@adaptabletools/adaptable 24.0.0-canary.0 → 24.0.0-canary.10

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/Strategy/AlertModule.js

@@ -102,7 +102,7 @@ export class AlertModule extends AdaptableModuleBase {
         if (isScheduledAlertDefinition(alertDefinition)) {
             return [];
         }
-        const queryExpression = this.api.expressionApi.getAdaptableQueryExpression(alertDefinition.Rule);
+        const queryExpression = alertDefinition.Rule;
         if (queryExpression) {
             return this.api.expressionApi.getColumnsFromExpression(queryExpression);
         }
@@ -117,7 +117,7 @@ export class AlertModule extends AdaptableModuleBase {
         if (isScheduledAlertDefinition(alertDefinition)) {
             return [];
         }
-        const queryExpression = this.api.expressionApi.getAdaptableQueryExpression(alertDefinition.Rule);
+        const queryExpression = alertDefinition.Rule;
         if (!queryExpression) {
             return [];
         }

package/src/Strategy/FormatColumnModule.js

@@ -22,7 +22,7 @@ export class FormatColumnModule extends AdaptableModuleBase {
         return this.getLayoutExtensionModuleObjects('FormatColumn', () => this.api.formatColumnApi.getFormatColumns(), config);
     }
     getExplicitlyReferencedColumnIds(formatColumn) {
-        const queryExpression = formatColumn.Rule && this.api.expressionApi.getAdaptableQueryExpression(formatColumn.Rule);
+        const queryExpression = formatColumn.Rule;
         if (queryExpression) {
             return this.api.expressionApi.getColumnsFromExpression(queryExpression);
         }
@@ -34,7 +34,7 @@ export class FormatColumnModule extends AdaptableModuleBase {
         return [];
     }
     getReferencedNamedQueryNames(formatColumn) {
-        const queryExpression = formatColumn.Rule && this.api.expressionApi.getAdaptableQueryExpression(formatColumn.Rule);
+        const queryExpression = formatColumn.Rule;
         if (!queryExpression) {
             return [];
         }

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,15 +6,15 @@ import { Schedule, Weekday } from '../../AdaptableState/Common/Schedule';
 import { AdaptableColumnDataType, AdaptableSystemIconName } from '../../types';
 import { AdaptableAlert } from '../../AdaptableState/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../../AdaptableState/Common/AdaptableMessageType';
-/** 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;
-export declare function getSwatchColorPaletteEntries(): string[];
-/** Theme semantic colours for the Colour Picker (resolved at runtime per active theme). */
-export declare function getThemeSemanticColorPaletteEntries(): string[];
-/** Swatch and theme semantic entries (default Colour Picker set). */
-export declare function getDefaultColorPalette(): string[];
+/** A theme colour token as a CSS value: `themeColorVar('badge')` → `var(--ab-color-badge)`. */
+export declare function themeColorVar(token: string): string;
+/** Default colour of a new range in Range Bar, Bullet and Ranges styled columns. */
+export declare function getDefaultRangeColor(): string;
+/** Default colours for a new Gradient Zero Centred range (follows the theme). */
+export declare function getDefaultZeroCentredColors(): {
+    NegativeColor: string;
+    PositiveColor: string;
+};
 export declare function getEmptyConfigState(): EditableConfigEntityState;
 export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
@@ -41,11 +41,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: {
-    getSwatchColorVar: typeof getSwatchColorVar;
-    getGraySwatchColor: typeof getGraySwatchColor;
-    getSwatchColorPaletteEntries: typeof getSwatchColorPaletteEntries;
-    getThemeSemanticColorPaletteEntries: typeof getThemeSemanticColorPaletteEntries;
-    getDefaultColorPalette: typeof getDefaultColorPalette;
+    themeColorVar: typeof themeColorVar;
+    getDefaultRangeColor: typeof getDefaultRangeColor;
+    getDefaultZeroCentredColors: typeof getDefaultZeroCentredColors;
     getEmptyConfigState: typeof getEmptyConfigState;
     getDescriptionForDataType: typeof getDescriptionForDataType;
     getPlaceholderForDataType: typeof getPlaceholderForDataType;

package/src/Utilities/Helpers/UIHelper.js

@@ -3,38 +3,17 @@ 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 getSwatchColorVar(index) {
-    return `var(--ab-color-swatch-${index})`;
+export function themeColorVar(token) {
+    return `var(--ab-color-${token})`;
 }
-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));
-}
-export function getThemeSemanticColorPaletteEntries() {
-    return [
-        'var(--ab-color-destructive)',
-        'var(--ab-color-warn)',
-        'var(--ab-color-success)',
-        'var(--ab-color-info)',
-        'var(--ab-color-accent)',
-        'var(--ab-color-palette-1)',
-        'var(--ab-color-palette-2)',
-        'var(--ab-color-palette-3)',
-        'var(--ab-color-palette-4)',
-        'var(--ab-color-palette-5)',
-        'var(--ab-color-palette-6)',
-        'var(--ab-color-palette-7)',
-        'var(--ab-color-palette-8)',
-        'var(--ab-color-palette-9)',
-        'var(--ab-color-palette-10)',
-        'var(--ab-color-palette-11)',
-        'var(--ab-color-palette-12)',
-    ];
-}
-export function getDefaultColorPalette() {
-    return [...getSwatchColorPaletteEntries(), ...getThemeSemanticColorPaletteEntries()];
+export function getDefaultZeroCentredColors() {
+    return {
+        NegativeColor: themeColorVar('destructive'),
+        PositiveColor: themeColorVar('success'),
+    };
 }
 export function getEmptyConfigState() {
     return {
@@ -324,11 +303,9 @@ export function isBrowserDocumentAvailable() {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
 export const UIHelper = {
-    getSwatchColorVar,
-    getGraySwatchColor,
-    getSwatchColorPaletteEntries,
-    getThemeSemanticColorPaletteEntries,
-    getDefaultColorPalette,
+    themeColorVar,
+    getDefaultRangeColor,
+    getDefaultZeroCentredColors,
     getEmptyConfigState,
     getDescriptionForDataType,
     getPlaceholderForDataType,

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/Utilities/Services/QueryLanguageService.js

@@ -784,8 +784,6 @@ export class QueryLanguageService {
             const columnFriendlyName = this.adaptableApi.columnApi.getFriendlyNameForColumnId(columnId);
             result = result.split(columnId).join(columnFriendlyName);
         }
-        result = result.replace(/\$SCOPE\s*\(\s*\)/g, '$Column_Scope');
-        result = result.replace(/\$SCOPE\b/g, '$Column_Scope');
         return result;
     }
     getNodesFromExpression(input, nodeType) {

package/src/View/CalculatedColumn/Wizard/CalculatedColumnExpressionWizardSection.js

@@ -121,5 +121,5 @@ export const CalculatedColumnExpressionWizardSection = (props) => {
     const showObservableHint = props.calculatedColumnType === 'Standard' &&
         props.onCalculatedColumnTypeChange != null &&
         expressionContainsObservableCall(data.Expression);
-    return (_jsxs(ExpressionUseCaseCard, { title: getTypeTitle(props.calculatedColumnType), description: getTypeDescription(props.calculatedColumnType), examplesKind: getExamplesKind(props.calculatedColumnType), children: [_jsx(ExpressionEditor, { type: editorType, scalarVariant: isObservable ? 'observable' : undefined, module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Expression ?? '', onChange: (expression) => setCalculatedColumnExpression(expression), initialData: initialData, columns: columns, fields: isPerRow ? api.expressionApi.internalApi.getAvailableFields() : undefined, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api, suppressTypeInfoCard: true, examplesKind: getExamplesKind(props.calculatedColumnType) }), showObservableHint ? (_jsxs(HelpBlock, { "data-name": "calculated-column-observable-hint", className: "twa:mt-2 twa:flex twa:items-center twa:gap-2 twa:text-3", children: [_jsx("span", { children: "This Expression uses observable (live) functions." }), _jsx(SimpleButton, { variant: "outlined", "data-name": "calculated-column-switch-to-observable", onClick: () => props.onCalculatedColumnTypeChange?.('Observable'), children: "Switch to Observable" })] })) : null] }));
+    return (_jsxs(ExpressionUseCaseCard, { title: getTypeTitle(props.calculatedColumnType), description: getTypeDescription(props.calculatedColumnType), examplesKind: getExamplesKind(props.calculatedColumnType), children: [_jsx(ExpressionEditor, { type: editorType, scalarVariant: isObservable ? 'observable' : undefined, suppressObservable: !isObservable, module: moduleInfo.ModuleName, className: "twa:pl-0", value: data.Expression ?? '', onChange: (expression) => setCalculatedColumnExpression(expression), initialData: initialData, columns: columns, fields: isPerRow ? api.expressionApi.internalApi.getAvailableFields() : undefined, namedQueries: api.namedQueryApi.getNamedQueries(), isFullExpression: true, api: api, suppressTypeInfoCard: true, examplesKind: getExamplesKind(props.calculatedColumnType) }), showObservableHint ? (_jsxs(HelpBlock, { "data-name": "calculated-column-observable-hint", className: "twa:mt-2 twa:flex twa:items-center twa:gap-2 twa:text-3", children: [_jsx("span", { children: "This Expression uses observable (live) functions." }), _jsx(SimpleButton, { variant: "outlined", "data-name": "calculated-column-switch-to-observable", onClick: () => props.onCalculatedColumnTypeChange?.('Observable'), children: "Switch to Observable" })] })) : null] }));
 };

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

@@ -10,7 +10,7 @@ import { getSettingsPanelNavigationItems } from './useMenuItems';
 import { isSettingsPanelNavigationItem, } from './settingsPanelNavigationTypes';
 import { SidebarTrigger } from '../../../../components/ui/sidebar';
 import { Flex } from '../../../../components/Flex';
-import { Input } from '../../../../components/ui/input';
+import { AdaptableFormControlTextClear } from '../../Forms/AdaptableFormControlTextClear';
 import { Tooltip } from '../../../../components/Tooltip';
 import { resolveSettingsPanelDisplayOptions } from '../../../../Utilities/Helpers/SettingsPanelHelper';
 const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
@@ -56,13 +56,7 @@ export const filterSettingsPanelNavigationEntries = (entries, query) => {
     }
     return filtered;
 };
-const NavigationItem = ({ menuItem, description, isActive, dataName, customPanelIcon, isCustomSettingsPanel, onAction, showModuleIcons, showModuleDescriptions, collapsed, }) => {
-    const ref = useRef(null);
-    useEffect(() => {
-        if (isActive) {
-            ref.current?.focus();
-        }
-    }, [isActive]);
+const NavigationItem = ({ menuItem, description, isActive, dataName, customPanelIcon, isCustomSettingsPanel, onAction, showModuleIcons, showModuleDescriptions, collapsed, buttonRef, }) => {
     const visibleDescription = !collapsed && showModuleDescriptions ? description : undefined;
     let icon = null;
     if (isCustomSettingsPanel) {
@@ -82,7 +76,7 @@ const NavigationItem = ({ menuItem, description, isActive, dataName, customPanel
     return (_jsx("li", { className: cn(navigationItemClassName, {
             [`${navigationItemClassName}--active`]: isActive,
             [`${navigationItemClassName}--collapsed`]: collapsed,
-        }), children: _jsxs("button", { ref: ref, type: "button", title: tooltip, "aria-label": menuItem.label, className: cn(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
+        }), children: _jsxs("button", { ref: buttonRef, type: "button", title: tooltip, "aria-label": menuItem.label, className: cn(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
                 'twa:flex twa:flex-row twa:gap-2': true,
                 'twa:items-start': Boolean(visibleDescription),
                 'twa:items-center': !visibleDescription,
@@ -128,6 +122,10 @@ export const Navigation = (props) => {
     const { showModuleIcons, showModuleDescriptions, showNavigationSearch, enableCollapseView, } = displayOptions;
     const collapsed = enableCollapseView && (props.collapsed ?? false);
     const visibleMenuItems = useMemo(() => filterSettingsPanelNavigationEntries(props.menuItems, searchQuery), [props.menuItems, searchQuery]);
+    const activeButtonRef = useRef(null);
+    useEffect(() => {
+        activeButtonRef.current?.focus();
+    }, [props.activeItem]);
     const makeActive = (menuItem) => {
         dispatch(menuItem.reduxAction);
     };
@@ -167,7 +165,7 @@ export const Navigation = (props) => {
                     'twa:justify-center twa:px-1 twa:pt-2 twa:pb-1': collapsed,
                     'twa:px-2 twa:pt-2 twa:pb-1': !collapsed,
                     'twa:justify-end': !collapsed && !showSearchInput,
-                }), children: [showSearchInput ? (_jsx(Input, { "data-name": "settings-panel-nav-search", type: "search", value: searchQuery, onChange: (event) => setSearchQuery(event.currentTarget.value), placeholder: "Search...", "aria-label": "Search Settings Panel modules", className: "twa:h-8 twa:flex-1 twa:min-w-0 twa:text-2" })) : null, collapseTrigger] })) : null, _jsxs("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col twa:flex-1 twa:min-h-0 twa:overflow-auto", onKeyDown: handleKeyPress, children: [!hasVisibleItems ? (_jsx("li", { className: "twa:list-none twa:px-3 twa:py-2 twa:text-2 twa:opacity-70", children: collapsed ? null : 'No modules match' })) : null, visibleMenuItems.map((entry, index) => {
+                }), children: [showSearchInput ? (_jsx(AdaptableFormControlTextClear, { "data-name": "settings-panel-nav-search", value: searchQuery, OnTextChange: setSearchQuery, placeholder: "Search...", "aria-label": "Search Settings Panel modules", className: "twa:h-8 twa:flex-1 twa:min-w-0", inputClassName: "twa:text-2" })) : null, collapseTrigger] })) : null, _jsxs("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col twa:flex-1 twa:min-h-0 twa:overflow-auto", onKeyDown: handleKeyPress, children: [!hasVisibleItems ? (_jsx("li", { className: "twa:list-none twa:px-3 twa:py-2 twa:text-2 twa:opacity-70", children: collapsed ? null : 'No modules match' })) : null, visibleMenuItems.map((entry, index) => {
                         if (entry.type === 'header') {
                             if (collapsed) {
                                 return null;
@@ -181,6 +179,6 @@ export const Navigation = (props) => {
                         const dataName = isCustomSettingsPanel
                             ? `CSP-${menuItem.label}`
                             : menuItem.category ?? menuItem.label;
-                        return (_jsx(NavigationItem, { menuItem: menuItem, description: entry.description, isActive: isActive, dataName: dataName, customPanelIcon: customPanelIcon, isCustomSettingsPanel: isCustomSettingsPanel, showModuleIcons: showModuleIcons, showModuleDescriptions: showModuleDescriptions, collapsed: collapsed, onAction: () => makeActive(menuItem) }, menuItem.label));
+                        return (_jsx(NavigationItem, { menuItem: menuItem, description: entry.description, isActive: isActive, dataName: dataName, customPanelIcon: customPanelIcon, isCustomSettingsPanel: isCustomSettingsPanel, showModuleIcons: showModuleIcons, showModuleDescriptions: showModuleDescriptions, collapsed: collapsed, onAction: () => makeActive(menuItem), buttonRef: isActive ? activeButtonRef : undefined }, menuItem.label));
                     })] })] }));
 };

package/src/View/Components/StyleComponent.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { OptionalColorPicker } from '../../components/ColorPicker';
+import { ColorField } from '../../components/ColorField';
 import HelpBlock from '../../components/HelpBlock';
 import Panel from '../../components/Panel';
 import { Tabs } from '../../components/Tabs';
@@ -131,7 +131,7 @@ export const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    const styleEditorGrid = (_jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2 twa:self-stretch", children: [_jsxs(Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), _jsxs("span", { children: ["Back ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { api: props.api, value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), _jsxs("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-3", api: props.api, value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), _jsxs("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), _jsx(OptionalColorPicker, { className: "twa:row-start-4", api: props.api, value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), _jsx("span", { className: "twa:row-start-5", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-5", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+    const styleEditorGrid = (_jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2 twa:self-stretch", children: [_jsxs(Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), _jsxs("span", { children: ["Back ", colourSpellingVariant] }), _jsx(ColorField, { value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), _jsxs("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), _jsx(ColorField, { className: "twa:row-start-3", value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), _jsxs("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), _jsx(ColorField, { className: "twa:row-start-4", value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), _jsx("span", { className: "twa:row-start-5", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-5", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
                     const number = Number(event.target.value);
                     if (isNaN(number)) {
                         onBorderRadiusChange(0);

package/src/View/Dashboard/Dashboard.d.ts

@@ -18,7 +18,7 @@ interface DashboardComponentProps extends ModuleViewPopupProps<any> {
     onSetIsCollapsed: (IsCollapsed: boolean) => DashboardRedux.DashboardSetIsCollapsedAction;
     onSetIsFloating: (IsFloating: boolean) => DashboardRedux.DashboardSetIsFloatingAction;
     onSetFloatingPosition: (FloatingPosition: AdaptableCoordinate) => DashboardRedux.DashboardSetFloatingPositionAction;
-    onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction;
+    onRunQuickSearch: (quickSearchText: string) => QuickSearchRedux.QuickSearchRunAction | QuickSearchRedux.QuickSearchClearAction;
     onShowQuickSearchPopup: () => PopupRedux.PopupShowScreenAction;
     onShowDashboardPopup: () => PopupRedux.PopupShowScreenAction;
 }

package/src/View/Dashboard/Dashboard.js

@@ -126,7 +126,7 @@ function mapDispatchToProps(dispatch) {
         onSetIsCollapsed: (IsCollapsed) => dispatch(DashboardRedux.DashboardSetIsCollapsed(IsCollapsed)),
         onSetIsFloating: (IsFloating) => dispatch(DashboardRedux.DashboardSetIsFloating(IsFloating)),
         onSetFloatingPosition: (FloatingPosition) => dispatch(DashboardRedux.DashboardSetFloatingPosition(FloatingPosition)),
-        onRunQuickSearch: (newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchRun(newQuickSearchText)),
+        onRunQuickSearch: (newQuickSearchText) => dispatch(QuickSearchRedux.QuickSearchTextAction(newQuickSearchText)),
         onShowQuickSearchPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.QuickSearchModuleId, 'QuickSearchPopup')),
         onShowDashboardPopup: () => dispatch(PopupRedux.PopupShowScreen(ModuleConstants.DashboardModuleId, 'DashboardPopup')),
     };

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/Filter/ColumnFilter/ColumnFilterNew.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { clsx } from 'cn';
 import SimpleButton from '../../../components/SimpleButton';
 import { useAdaptable } from '../../AdaptableContext';
 import { Box, Flex } from '../../../components/Flex';
 import { twMerge } from '../../../twMerge';
-import { captureTab } from '../../../lib/utils';
+import { captureTab, cn } from '../../../lib/utils';
 import * as ModuleConstants from '../../../Utilities/Constants/ModuleConstants';
 import { QueryBuilder } from '../../../components/aql/QueryBuilder';
 import { getQueryBuilderColumnOptions, getQueryBuilderFieldOptions, } from '../../../components/aql/QueryBuilder/qlGroupUtils';
@@ -33,8 +32,17 @@ export const ColumnFilterComponentNew = (props) => {
     }, [api, props.columnId]);
     const seededGroup = React.useMemo(() => foldInFilterFunctionsForEditing(props.columnId, props.qlGroup, operatorDefs), [props.columnId, resetNonce, operatorDefs]);
     const pendingGroupRef = React.useRef(null);
+    const clearAllFilters = React.useCallback(() => {
+        pendingGroupRef.current = null;
+        props.onClear();
+        setResetNonce((n) => n + 1);
+    }, [props.onClear]);
     const handlePredicateChange = (predicate) => {
         const group = unfoldInFilterFunctionsFromEditing(props.columnId, asColumnFilterGroup(predicate), operatorDefs);
+        if (group.children.length === 0) {
+            clearAllFilters();
+            return;
+        }
         if (manuallyApplyColumnFilter) {
             pendingGroupRef.current = group;
             api.eventApi.internalApi.fireColumnFilterChangedEvent({
@@ -58,14 +66,10 @@ export const ColumnFilterComponentNew = (props) => {
         pendingGroupRef.current = null;
         setResetNonce((n) => n + 1);
     };
-    const clearAllFilters = () => {
-        pendingGroupRef.current = null;
-        props.onClear();
-        setResetNonce((n) => n + 1);
-    };
-    const showClear = props.location !== 'filterForm';
-    const showActions = !props.hideActionButtons && (showClear || manuallyApplyColumnFilter);
-    return (_jsx(ColumnFilterOverlayHost, { location: props.location, children: _jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [showActions && (_jsxs(Flex, { className: clsx('ab-ColumnFilter-actions twa:m-2', {
+    const clearAllOnCombinatorRow = props.location === 'columnMenu' || props.location === 'filtersToolPanel';
+    const rootHeaderEnd = React.useMemo(() => clearAllOnCombinatorRow ? (_jsx(SimpleButton, { "aria-label": "Clear All Filters", "data-name": "column-filter-clear-all", onClick: clearAllFilters, children: "Clear All" })) : undefined, [clearAllOnCombinatorRow, clearAllFilters]);
+    const showActions = !props.hideActionButtons && manuallyApplyColumnFilter;
+    return (_jsx(ColumnFilterOverlayHost, { location: props.location, children: _jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [showActions && (_jsx(Flex, { className: cn('ab-ColumnFilter-actions twa:m-2', {
                         'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
-                    }), justifyContent: "space-between", children: [showClear && (_jsx(Box, { className: "ab-ColumnFilter-action-clearall", children: _jsx(SimpleButton, { "aria-label": "Clear All Filters", onClick: clearAllFilters, children: "Clear All" }) })), manuallyApplyColumnFilter && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1", "data-name": "spacer" }), _jsx(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: _jsx(SimpleButton, { "aria-label": "Reset All", tone: "neutral", variant: "raised", onClick: resetFilter, children: "Reset" }) }), _jsx(Box, { className: "ab-ColumnFilter-action-apply", children: _jsx(SimpleButton, { "aria-label": "Apply Filter", tone: "accent", variant: "raised", onClick: applyFilter, children: "Apply" }) })] }))] })), _jsx(Box, { style: props.wrapperProps?.style, className: twMerge('ab-ColumnFilter twa:flex-1 twa:min-h-0 twa:overflow-auto twa:overflow-x-hidden twa:p-0.5 twa:gap-1 twa:flex twa:flex-col', props.location === 'filtersToolPanel' && 'ab-ColumnFilter--tool-panel', props.disabled ? 'twa:opacity-60 twa:pointer-events-none' : '', props.wrapperProps?.className), children: _jsx(QueryBuilder, { module: ModuleConstants.ColumnFilterModuleId, query: "", initialPredicate: seededGroup, onChange: noop, onPredicateChange: handlePredicateChange, getColumns: getColumns, getFields: getFields, subject: { mode: 'locked', columnId: props.columnId }, hideExpressionPreview: true, hideInlineAdd: true, hideAddGroup: true, hideLockedSubject: true, hideDragHandles: true, layout: getColumnFilterQueryBuilderLayout(props.location) }, `${props.columnId}:${resetNonce}`) })] }) }));
+                    }), justifyContent: "space-between", children: manuallyApplyColumnFilter && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:flex-1", "data-name": "spacer" }), _jsx(Box, { className: "ab-ColumnFilter-action-reset twa:mr-2", children: _jsx(SimpleButton, { "aria-label": "Reset All", tone: "neutral", variant: "raised", onClick: resetFilter, children: "Reset" }) }), _jsx(Box, { className: "ab-ColumnFilter-action-apply", children: _jsx(SimpleButton, { "aria-label": "Apply Filter", tone: "accent", variant: "raised", onClick: applyFilter, children: "Apply" }) })] })) })), _jsx(Box, { style: props.wrapperProps?.style, className: twMerge('ab-ColumnFilter twa:flex-1 twa:min-h-0 twa:overflow-auto twa:overflow-x-hidden twa:p-0.5 twa:gap-1 twa:flex twa:flex-col', props.location === 'filtersToolPanel' && 'ab-ColumnFilter--tool-panel', props.disabled ? 'twa:opacity-60 twa:pointer-events-none' : '', props.wrapperProps?.className), children: _jsx(QueryBuilder, { module: ModuleConstants.ColumnFilterModuleId, query: "", initialPredicate: seededGroup, onChange: noop, onPredicateChange: handlePredicateChange, getColumns: getColumns, getFields: getFields, subject: { mode: 'locked', columnId: props.columnId }, hideExpressionPreview: true, hideInlineAdd: true, hideAddGroup: true, hideLockedSubject: true, hideDragHandles: true, layout: getColumnFilterQueryBuilderLayout(props.location), rootHeaderEnd: rootHeaderEnd }, `${props.columnId}:${resetNonce}`) })] }) }));
 };