@adaptabletools/adaptable 22.0.0-canary.1 → 22.0.0-canary.10

package/src/View/Alert/Wizard/isValidAlertRules.js

@@ -4,7 +4,7 @@ export const isValidAlertRules = (alert, api, context) => {
         !alert.Rule.BooleanExpression &&
         !alert.Rule.ObservableExpression &&
         !alert.Rule.AggregatedBooleanExpression) {
-        return 'No Rule defined for Alert';
+        return 'A rule is required for the Alert.';
     }
     const isRuleValid = isAdaptableRuleValid(alert, api, context);
     if (typeof isRuleValid === 'string') {

package/src/View/BulkUpdate/BulkUpdateViewPanel.js

@@ -13,6 +13,7 @@ import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
 import clsx from 'clsx';
 class BulkUpdateViewPanelComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
         this.state = {
@@ -37,24 +38,36 @@ class BulkUpdateViewPanelComponent extends React.Component {
         let statusColour = this.getStatusColour();
         let selectedColumn = this.props.BulkUpdateValidationResult.Column;
         let previewPanel = (React.createElement(PreviewResultsPanel, { previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: selectedColumn, showPanel: true, showHeader: false }));
-        let shouldDisable = this.props.accessLevel == 'ReadOnly' ||
+        const valueSelectorDisabled = this.props.accessLevel == 'ReadOnly' ||
             !this.props.BulkUpdateValidationResult.IsValid ||
-            this.props.api.layoutApi.isCurrentLayoutPivot() == true;
+            this.props.api.layoutApi.isCurrentLayoutPivot();
+        const valueOperationDisabled = valueSelectorDisabled ||
+            StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
+            (this.props.PreviewInfo != null &&
+                this.props.PreviewInfo.previewValidationSummary.validationResult == 'All');
         const applyStyle = {
             color: statusColour,
             fill: 'currentColor',
         };
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: clsx(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:min-w-[150px]`), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(Flex, null,
+        const isToolbar = this.props.viewType === 'Toolbar';
+        const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+        const messageStyle = UIHelper.getMessageTypeByStatusColour(statusColour);
+        const infoStyle = messageStyle === 'Success' ? 'Info' : messageStyle;
+        return (React.createElement(Flex, { className: clsx(valueSelectorDisabled ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__BulkUpdate__wrap twa:gap-1 twa:flex-row`, {
+                'twa:min-w-[300px] twa:max-w-[300px] twa:w-[300px] twa:flex-nowrap': isToolbar,
+                'twa:flex-1 twa:flex-wrap': !isToolbar,
+            }), flexWrap: isToolbar ? 'nowrap' : 'wrap' },
+            React.createElement(Flex, { className: clsx('twa:flex-1', {
+                    'twa:min-w-[100px]': !isToolbar,
+                    'twa:min-w-0': isToolbar,
+                }) },
                 React.createElement(BulkUpdateValueSelector, { selectedGridCells: this.props.SelectedGridCells, newLabel: "New", existingLabel: "Existing", dropdownButtonProps: {
                         listMinWidth: 160,
-                    }, className: `ab-${elementType}__BulkUpdate__select`, disabled: shouldDisable, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
-            React.createElement(Flex, null,
-                !shouldDisable && StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:ml-2`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) ||
-                        (this.props.PreviewInfo != null &&
-                            this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel }, this.props.viewType === 'ToolPanel' && 'Update')),
-                !shouldDisable && StringExtensions.IsNotNullOrEmpty(this.props.BulkUpdateValue) && (React.createElement(AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: UIHelper.getMessageTypeByStatusColour(statusColour), useButton: true, showEvent: 'focus', hideEvent: "blur" })))));
+                    }, className: `ab-${elementType}__BulkUpdate__select twa:w-full`, disabled: valueSelectorDisabled, selectedColumnValue: this.props.BulkUpdateValue, selectedColumn: selectedColumn, api: this.props.api, onColumnValueChange: (columns) => this.onColumnValueSelectedChanged(columns) })),
+            React.createElement(Flex, { className: "twa:flex-shrink-0 twa:gap-1" },
+                React.createElement(Flex, { className: "twa:flex twa:box-border twa:items-center" },
+                    React.createElement(ButtonApply, { className: `ab-${elementType}__BulkUpdate__apply twa:h-full`, onClick: () => this.onApplyClick(), style: applyStyle, tooltip: "Apply Bulk Update", disabled: valueOperationDisabled, accessLevel: this.props.accessLevel }, 'Apply')),
+                React.createElement(AdaptablePopover, { popoverMinWidth: 360, className: `ab-${elementType}__BulkUpdate__info`, headerText: "Preview Results", bodyText: [previewPanel], MessageType: infoStyle, useButton: true, showEvent: 'focus', hideEvent: "blur", disabled: valueSelectorDisabled || StringExtensions.IsNullOrEmpty(this.props.BulkUpdateValue) }))));
     }
     onColumnValueSelectedChanged(selectedColumnValue) {
         this.props.onBulkUpdateValueChange(selectedColumnValue);

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

@@ -21,11 +21,11 @@ export const renderCalculatedColumnDefinitionSummary = (data) => {
 export const isValidCalculatedColumnDefinition = (data, api) => {
     const columns = api.columnApi.getColumns();
     if (!data.ColumnId) {
-        return 'Column Id cannot be empty';
+        return 'A Column ID is required.';
     }
     const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
     const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
-    return hasAlreadyExistingId ? 'A Column already exists with that id' : true;
+    return hasAlreadyExistingId ? 'A column with this ID already exists.' : true;
 };
 export const CalculatedColumnDefinitionWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();

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

@@ -17,11 +17,11 @@ export const isValidCalculatedColumnExpression = (data, api) => {
     const calculatedColumnExpressionService = api.internalApi.getCalculatedColumnExpressionService();
     const expression = api.expressionApi.getAdaptableQueryExpression(data.Query)?.trim();
     if (!expression) {
-        return 'Calculated column expression cannot be empty';
+        return 'An expression is required for the Calculated Column.';
     }
     const isValid = calculatedColumnExpressionService.isCalculatedColumnQueryValid(data.Query);
     if (!isValid) {
-        return 'Calculated column expression is not valid';
+        return 'The Calculated Column expression is not valid.';
     }
     return true;
 };

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

@@ -16,7 +16,7 @@ export const renderCalculatedColumnSettingsSummary = (data) => {
 };
 export const isValidCalculatedColumnSettings = (data) => {
     if (!data.CalculatedColumnSettings?.DataType) {
-        return 'No data type is specified and it could not be inferred from the defined expression';
+        return 'A data type is required. It could not be inferred from the expression.';
     }
     return true;
 };

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -9,7 +9,9 @@ import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import { connect } from 'react-redux';
 import { Select } from '../../components/Select';
 import { Flex } from '../../components/Flex';
+import clsx from 'clsx';
 class CellSummaryViewPanelComponent extends React.Component {
+    cleanupEvent;
     constructor(props) {
         super(props);
     }
@@ -43,30 +45,27 @@ class CellSummaryViewPanelComponent extends React.Component {
             });
         let cellSummaryPopover = React.createElement(CellSummaryPopover, { CellSummary: this.props.CellSummary });
         let shouldDisable = this.props.accessLevel == 'ReadOnly' || this.props.CellSummary == null;
-        const renderOperationValue = () => {
-            if (shouldDisable) {
-                return;
-            }
-            const operationValue = this.getOperationValue();
-            if (operationValue == undefined) {
-                return;
-            }
-            return this.props.viewType === 'ToolPanel' ? (React.createElement(Flex, { className: `ab-${elementType}__CellSummary__value twa:rounded-standard twa:mr-2 twa:p-2 twa:text-text-on-info twa:bg-info twa:text-2` }, operationValue)) : (React.createElement(Flex, { justifyContent: "center", className: `ab-${elementType}__CellSummary__value twa:flex-1 twa:mr-2 twa:ml-1 text-text-on-primary` }, operationValue));
-        };
-        const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        const isToolbar = this.props.viewType === 'Toolbar';
+        const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
+        const operationValue = this.getOperationValue() ?? 'N/A';
+        return (React.createElement(Flex, { className: clsx(shouldDisable ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__CellSummary__wrap twa:gap-2 twa:flex-row`, {
+                'twa:min-w-[215px] twa:max-w-[215px] twa:w-[215px] twa:flex-nowrap': isToolbar,
+                'twa:flex-1 twa:flex-wrap': !isToolbar,
+            }) },
             React.createElement(Flex, { className: "twa:flex-1" },
                 React.createElement(Select, { "aria-label": "Cell Summary Operation Selector", className: `ab-${elementType}__CellSummary__select twa:w-full`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
-            React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" }, React.createElement(React.Fragment, null,
-                renderOperationValue(),
-                this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries' }))))));
+            React.createElement(Flex, { className: "twa:items-center twa:gap-1" }, React.createElement(React.Fragment, null,
+                React.createElement(Flex, { className: clsx(`ab-${elementType}__CellSummary__value twa:min-w-[50px]`, {
+                        'twa:rounded-standard twa:text-color-text-on-info twa:bg-color-info twa:text-2': !isToolbar,
+                        'twa:flex-1 twa:text-color-text-on-primary twa:justify-center': isToolbar,
+                    }) }, operationValue),
+                React.createElement(AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries', disabled: !this.props.CellSummary?.Count })))));
     }
     checkSelectedCells() {
         this.props.onCreateCellSummary();
     }
     getOperationValue() {
-        const api = this.props.api;
-        return api.cellSummaryApi.getCellSummaryOperationValue(this.props.CellSummaryOperation);
+        return this.props.api.cellSummaryApi.getCellSummaryOperationValue(this.props.CellSummaryOperation);
     }
 }
 function mapStateToProps(state, ownProps) {

package/src/View/Charting/ChartingWizard/AgChargingWizard/SettingsSection.js

@@ -5,12 +5,12 @@ import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import AdaptableInput from '../../../Components/AdaptableInput';
 export const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
-        return 'Name is mandatory';
+        return 'A name is required.';
     }
     const allChartDefinitions = api.chartingApi.getChartDefinitions();
     if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
         chartDefinitionLoopItem.Name === chartDefinition.Name)) {
-        return 'There is already a chart with this name';
+        return 'A Chart with this name already exists.';
     }
     return true;
 };

package/src/View/Charting/ChartingWizard/ExternalChartingWizard/SettingsSection.js

@@ -3,12 +3,12 @@ import FormLayout, { FormRow } from '../../../../components/FormLayout';
 import AdaptableInput from '../../../Components/AdaptableInput';
 export const isSettingsValid = (chartDefinition, api) => {
     if (!chartDefinition.Name) {
-        return 'Name is mandatory';
+        return 'A name is required.';
     }
     const allChartDefinitions = api.chartingApi.getExternalChartDefinitions();
     if (allChartDefinitions.some((chartDefinitionLoopItem) => chartDefinitionLoopItem.Uuid !== chartDefinition.Uuid &&
         chartDefinitionLoopItem.Name === chartDefinition.Name)) {
-        return 'There is already a chart with this name';
+        return 'A Chart with this name already exists.';
     }
     return true;
 };

package/src/View/Components/AdaptableDateInput/index.js

@@ -8,7 +8,7 @@ const AdaptableDateInput = React.forwardRef(function AdaptableDateInputCmp(props
     const { value: _, defaultValue: __, onChange, required, disabled, showClearButton, ...inputProps } = props;
     const [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: (dateString) => 
-        // wrap date value in FormEvent in order to keep the external API unchanged
+        // wrap date value in ChangeEvent in order to keep the external API unchanged
         props.onChange?.({
             target: {
                 // ALWAYS trigger onChange with the ISO format

package/src/View/Components/Buttons/ButtonApply.js

@@ -2,6 +2,6 @@ import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
 export class ButtonApply extends React.Component {
     render() {
-        return (React.createElement(SimpleButton, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "text", ...this.props }));
+        return (React.createElement(SimpleButton, { "data-name": "apply", tooltip: "Apply", iconSize: 20, icon: "check", variant: "outlined", ...this.props }));
     }
 }

package/src/View/Components/Buttons/ButtonBase/index.js

@@ -7,6 +7,15 @@ const Glyphicon = ({ glyph, style }) => {
 };
 const baseClassName = 'ab-Button twa:text-current';
 export class ButtonBase extends React.Component {
+    static defaultProps = {
+        overrideDisableButton: false,
+        toolTipAndText: '',
+        glyph: '',
+        displayMode: 'Glyph+Text',
+        transformGlyph: false,
+        accessLevel: 'Full',
+        showDefaultStyle: false,
+    };
     render() {
         let isDisabled;
         isDisabled = this.props.accessLevel == 'Hidden';
@@ -59,12 +68,3 @@ export class ButtonBase extends React.Component {
         return hideToolTip ? button : buttonwithtooltip;
     }
 }
-ButtonBase.defaultProps = {
-    overrideDisableButton: false,
-    toolTipAndText: '',
-    glyph: '',
-    displayMode: 'Glyph+Text',
-    transformGlyph: false,
-    accessLevel: 'Full',
-    showDefaultStyle: false,
-};

package/src/View/Components/Buttons/ButtonClear.d.ts

@@ -3,6 +3,7 @@ import { SimpleButtonProps } from '../../../components/SimpleButton';
 export interface ClearButtonProps extends SimpleButtonProps {
     showText?: boolean;
     showIcon?: boolean;
+    variant?: SimpleButtonProps['variant'];
 }
 export declare class ButtonClear extends React.Component<ClearButtonProps, {}> {
     render(): React.JSX.Element;

package/src/View/Components/Buttons/EntityListActionButtons.d.ts

@@ -2,8 +2,7 @@ import * as React from 'react';
 import * as Redux from 'redux';
 import { AccessLevel } from '../../../AdaptableState/Common/Entitlement';
 import { AdaptableSharedEntityConfig } from '../../../AdaptableState/TeamSharingState';
-import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
-import { SuspendableObject } from '../../../AdaptableState/Common/SuspendableObject';
+import { AdaptableObject, SuspendableObject } from '../../../AdaptableState/Common/AdaptableObject';
 export interface EntityListActionButtonsProps extends React.ClassAttributes<EntityListActionButtons> {
     editClick?: () => void;
     cloneClick?: () => void;

package/src/View/Components/Buttons/EntityListActionButtons.js

@@ -10,6 +10,24 @@ const stopPropagation = (e) => {
     e.stopPropagation();
 };
 export class EntityListActionButtons extends React.Component {
+    static defaultProps = {
+        // Adaptable: null,
+        suspendableObject: null,
+        showEdit: true,
+        showDelete: true,
+        showShare: false,
+        showSuspend: false,
+        overrideDisableEdit: false,
+        overrideDisableDelete: false,
+        overrideDisableClone: false,
+        overrideDisableShare: false,
+        confirmDeleteAction: null,
+        entityType: '',
+        accessLevel: 'Full',
+        editSize: 'xsmall',
+        deleteSize: 'xsmall',
+        shareSize: 'xsmall',
+    };
     render() {
         const { justifyContent } = this.props;
         const justifyContentClassName = clsx({
@@ -25,21 +43,3 @@ export class EntityListActionButtons extends React.Component {
             this.props.showSuspend && this.props.suspendableObject && (React.createElement(SuspendToggleButton, { className: `twa:ml-[2px] twa:align-self-center`, onSuspend: this.props.onSuspend, onUnSuspend: this.props.onUnSuspend, suspendableObject: this.props.suspendableObject, disabled: this.props.accessLevel == 'ReadOnly' }))));
     }
 }
-EntityListActionButtons.defaultProps = {
-    // Adaptable: null,
-    suspendableObject: null,
-    showEdit: true,
-    showDelete: true,
-    showShare: false,
-    showSuspend: false,
-    overrideDisableEdit: false,
-    overrideDisableDelete: false,
-    overrideDisableClone: false,
-    overrideDisableShare: false,
-    confirmDeleteAction: null,
-    entityType: '',
-    accessLevel: 'Full',
-    editSize: 'xsmall',
-    deleteSize: 'xsmall',
-    shareSize: 'xsmall',
-};

package/src/View/Components/Buttons/SuspendToggleButton/SuspendToggleButton.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { AdaptableObject } from '../../../../AdaptableState/Common/AdaptableObject';
+import { AdaptableObject, SuspendableObject } from '../../../../AdaptableState/Common/AdaptableObject';
 import { AccessLevel } from '../../../../AdaptableState/Common/Entitlement';
-import { SuspendableObject } from '../../../../AdaptableState/Common/SuspendableObject';
 interface EntityListSuspendButtonProps {
     onSuspend: (adaptableObject: AdaptableObject) => void;
     onUnSuspend: (adaptableObject: AdaptableObject) => void;

package/src/View/Components/CellPopup/index.js

@@ -32,7 +32,7 @@ export const CellPopup = React.forwardRef((props, ref) => {
         const cellSelector = `[row-id="${props.primaryKeyValue}"] [col-id="${props.columnId}"]`;
         const alignTo = document.querySelector(cellSelector);
         if (!alignTo) {
-            adaptable.logger.consoleError(`Could not find cell with selector ${cellSelector} to show popup`);
+            adaptable.logger.consoleError(`Cell not found for selector "${cellSelector}". Unable to display popup.`);
             return;
         }
         const showOverlayOptions = {

package/src/View/Components/ColumnFilter/FloatingFilter.js

@@ -37,11 +37,19 @@ export const FloatingFilter = (props) => {
     const handleClear = () => props.onClear?.();
     const showEvent = 'click';
     const hideEvent = 'blur';
+    const [overlayVisible, setOverlayVisible] = React.useState(false);
     let filterDropdown = null;
-    let filterDropdownButton = (React.createElement(SimpleButton, { variant: "text", "data-name": "floating-filter-button", "data-value": props.predicate?.args[0]?.operator, onClick: () => {
+    const filterDropdownButton = (React.createElement(SimpleButton, { variant: "text", "data-name": "floating-filter-button", onBlur: () => {
+            if (isInlineEditable) {
+                setOverlayVisible(false);
+            }
+        }, "data-value": props.predicate?.args[0]?.operator, onClick: () => {
             if (!isInlineEditable) {
                 adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
             }
+            else {
+                setOverlayVisible(true);
+            }
         }, style: {
             textAlign: 'left',
             marginRight: 1, // just so that the focus outline is not cut off
@@ -55,9 +63,10 @@ export const FloatingFilter = (props) => {
         React.createElement(Box, null, !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (React.createElement(AdaptableIconComponent, { icon: { name: 'filter' } }))),
         showLabel && (React.createElement(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label }, label))));
     if (isInlineEditable) {
-        filterDropdown = showQuickFilterDropdown && (React.createElement(OverlayTrigger, { className: "ab-FloatingFilter-overlay", showEvent: showEvent, hideEvent: hideEvent, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "floating-filter-overlay", render: () => {
+        filterDropdown = showQuickFilterDropdown && (React.createElement(OverlayTrigger, { className: "ab-FloatingFilter-overlay", showEvent: showEvent, hideEvent: hideEvent, visible: overlayVisible, onVisibleChange: setOverlayVisible, preventPortalEventPropagation: showEvent === 'click', targetOffset: 10, hideDelay: 50, "data-name": "floating-filter-overlay", render: () => {
                 // we render this only for single filter
                 return (React.createElement(ColumnFilterMenu, { columnId: props.columnId, disabled: props.disabled, predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {
+                        setOverlayVisible(false);
                         props.onPredicateChange({
                             operator: props.predicate.operator,
                             args: [predicate],
@@ -68,7 +77,36 @@ export const FloatingFilter = (props) => {
     else {
         filterDropdown = filterDropdownButton;
     }
-    return (React.createElement(Flex, { className: "ab-FloatingFilter twa:w-full" },
+    return (React.createElement(Flex, { className: "ab-FloatingFilter twa:w-full", onKeyDownCapture: (e) => {
+            // AG Grid's header keyboard navigation intercepts Tab and calls preventDefault(),
+            // which prevents focus from moving between elements inside the floating filter.
+            // We handle Tab manually in the capture phase (before AG Grid's handlers).
+            if (e.key === 'Tab') {
+                const target = e.target;
+                const wrapper = e.currentTarget;
+                if (!e.shiftKey) {
+                    // Tab forward: from filter button → select input
+                    if (target.getAttribute('data-name') === 'floating-filter-button') {
+                        const selectInput = wrapper.querySelector('[data-name="Select Values"] input');
+                        if (selectInput) {
+                            e.preventDefault();
+                            e.nativeEvent.stopImmediatePropagation();
+                            selectInput.focus();
+                            // When the DummyInput gets focus, react-select sets isFocused=true,
+                            // triggering a React re-render. During this re-render, unstable component
+                            // references in selectComponents can cause the DummyInput to be removed
+                            // from DOM and recreated, losing focus. We restore focus after the re-render.
+                            requestAnimationFrame(() => {
+                                if (document.activeElement === document.body || document.activeElement === null) {
+                                    const newInput = wrapper.querySelector('[data-name="Select Values"] input');
+                                    newInput?.focus();
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+        } },
         filterDropdown,
         isInlineEditable && (React.createElement(Flex, { className: "twa:flex-1 twa:min-w-0" },
             React.createElement(FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 

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

@@ -93,7 +93,7 @@ export const ColumnFilterInput = (props) => {
     return (React.createElement(AdaptableInput, { style: filterType === 'floating'
             ? {
                 width: '100%',
-                padding: 'var(--ab-space-1)',
+                padding: 'var(--ab-base-space)',
                 borderRadius: 0,
                 border: 'none',
             }

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

@@ -2,16 +2,68 @@ import * as React from 'react';
 import Panel from '../../../../components/Panel';
 import SimpleButton from '../../../../components/SimpleButton';
 import { Box, Flex } from '../../../../components/Flex';
+import clsx from 'clsx';
+import { useEffect, useLayoutEffect } from 'react';
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
     return (React.createElement(SimpleButton, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick },
         React.createElement(Box, { className: "twa:mr-2" }, icon),
         React.createElement(Box, { className: "twa:text-2" }, label)));
 };
 export const ColumnFilterMenu = (props) => {
+    const [activeIndex, setActiveIndex] = React.useState(() => {
+        const index = props.predicateDefs.findIndex((predicateDef) => predicateDef.operator === props.predicate.operator);
+        return index === -1 ? 0 : index;
+    });
+    const activeIndexRef = React.useRef(activeIndex);
+    const onPredicateChangeRef = React.useRef(props.onPredicateChange);
+    const predicateDefsRef = React.useRef(props.predicateDefs);
+    useLayoutEffect(() => {
+        activeIndexRef.current = activeIndex;
+        onPredicateChangeRef.current = props.onPredicateChange;
+        predicateDefsRef.current = props.predicateDefs;
+    });
+    const confirm = React.useCallback((predicateDef) => {
+        onPredicateChangeRef.current({ operator: predicateDef.operator, args: [] });
+    }, []);
+    useEffect(() => {
+        const onKeyDown = (e) => {
+            // Only handle arrow keys and Enter - let other keys (like Tab) pass through
+            if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Enter') {
+                return;
+            }
+            const activeIndex = activeIndexRef.current;
+            const predicateDefs = predicateDefsRef.current;
+            if (e.key === 'Enter') {
+                const predicateDef = predicateDefs[activeIndex];
+                if (predicateDef) {
+                    confirm(predicateDef);
+                }
+            }
+            e.stopPropagation();
+            e.preventDefault();
+            const dir = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0;
+            if (dir) {
+                let nextIndex = activeIndex + dir;
+                if (nextIndex < 0) {
+                    nextIndex = predicateDefs.length - 1;
+                }
+                else if (nextIndex >= predicateDefs.length) {
+                    nextIndex = 0;
+                }
+                setActiveIndex(nextIndex);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [confirm]);
     return (React.createElement(Panel, { className: "twa:min-w-max" }, props.predicateDefs?.map((predicateDef, index) => {
-        return (React.createElement(Flex, { className: "twa:mb-1", key: index, onMouseDownCapture: (e) => {
+        const active = activeIndex === index;
+        return (React.createElement(Flex, { className: clsx("twa:mb-1", active && "twa:bg-primarylight"), key: index, onMouseDownCapture: (e) => {
                 e.stopPropagation();
+                e.preventDefault();
             } },
-            React.createElement(ColumnFilterMenuItem, { onClick: () => props.onPredicateChange({ operator: predicateDef.operator, args: [] }), icon: predicateDef.icon, label: predicateDef.label, active: props.predicate.operator === predicateDef.operator })));
+            React.createElement(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active })));
     })));
 };

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

@@ -204,7 +204,7 @@ export const FloatingFilterValues = (props) => {
                     ...(props.value?.length
                         ? {
                             valueContainer: {
-                                fontWeight: 'var(--ab-cmp-quickfilter-selected-options-text__font-weight)',
+                                fontWeight: 'var(--ab-cmp-floatingfilter-selected-options-text__font-weight)',
                             },
                         }
                         : {}),

package/src/View/Components/EntityRulesEditor/Utilities.js

@@ -1,28 +1,28 @@
 export const isAdaptableRuleValid = (abObject, api, context) => {
     if (abObject?.Rule?.Predicates?.length) {
         if (!api.predicateApi.isEveryPredicateValid(abObject?.Rule?.Predicates)) {
-            return `The Predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid`;
+            return `The predicate${abObject?.Rule?.Predicates?.length === 1 ? ' is' : 's are'} not valid.`;
         }
     }
     if (abObject?.Rule?.BooleanExpression) {
         if (!api.expressionApi.isValidBooleanExpression(abObject?.Rule?.BooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Boolean Expression';
+            return 'The Boolean expression is not valid.';
         }
     }
     if (abObject?.Rule?.ObservableExpression) {
         if (!api.expressionApi.isValidObservableExpression(abObject?.Rule?.ObservableExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Observable Expression';
+            return 'The Observable expression is not valid.';
         }
     }
     if (abObject?.Rule?.AggregatedBooleanExpression) {
         if (!api.expressionApi.isValidAggregatedBooleanExpression(abObject?.Rule?.AggregatedBooleanExpression, context.moduleInfo.ModuleName)) {
-            return 'The Expression is not a valid Aggregated Boolean Expression';
+            return 'The Aggregated Boolean expression is not valid.';
         }
     }
     if (abObject?.Rule?.Predicates?.length) {
         const isAPredicateWithInvalidColumnId = abObject?.Rule?.Predicates?.some((predicate) => predicate.ColumnId !== undefined && predicate.ColumnId === '');
         if (isAPredicateWithInvalidColumnId) {
-            return 'Predicates with custom scope need a valid column';
+            return 'Predicates with a custom scope require a valid column.';
         }
     }
     return true;

package/src/View/Components/NewScopeComponent.js

@@ -14,13 +14,13 @@ import { TagList } from '../../components/Tag/Tag';
 export const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
-        return 'No scope specified or scope is empty';
+        return 'A scope is required.';
     }
     if (Scope && 'ColumnIds' in Scope && Scope.ColumnIds.length === 0) {
-        result.push('No Columns selected in Scope');
+        result.push('Please select at least one column for the scope.');
     }
     if (Scope && 'DataTypes' in Scope && Scope.DataTypes.length === 0) {
-        result.push('No Data Types selected in Scope');
+        result.push('Please select at least one data type for the scope.');
     }
     return result.length ? result.join(', ') : true;
 };

package/src/View/Components/Panels/PanelDashboard/index.js

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { DashboardToolbar as DashboardToolbarUI } from '../../../../components/Dashboard';
 export class PanelDashboard extends React.Component {
+    static defaultProps = {
+        showConfigureActionButton: true,
+        showCloseActionButton: true,
+        headerText: 'Module',
+        onClose: null,
+        onConfigure: null,
+        accessLevel: 'Full',
+    };
     render() {
         const { headerText, showConfigureActionButton, showCloseActionButton, onConfigure, onClose, accessLevel, children, } = this.props;
         return (React.createElement(DashboardToolbarUI, { title: headerText, onConfigure: onConfigure, showConfigure: showConfigureActionButton, showClose: showCloseActionButton, onClose: onClose, accessLevel: accessLevel }, children));
     }
 }
-PanelDashboard.defaultProps = {
-    showConfigureActionButton: true,
-    showCloseActionButton: true,
-    headerText: 'Module',
-    onClose: null,
-    onConfigure: null,
-    accessLevel: 'Full',
-};

package/src/View/Components/Panels/PanelToolPanel/index.js

@@ -7,6 +7,13 @@ import { ButtonMaximise } from '../../Buttons/ButtonMaximise';
 import { twMerge } from '../../../../twMerge';
 import { Flex } from '../../../../components/Flex';
 export class PanelToolPanel extends React.Component {
+    static defaultProps = {
+        headerText: '',
+        onClose: null,
+        onConfigure: null,
+        onMinimiseChanged: null,
+        isMinimised: true,
+    };
     render() {
         const { useDefaultPanelStyle, isMinimised, onMinimiseChanged, headerText, onClose, onConfigure, ...props } = this.props;
         let header = (React.createElement(React.Fragment, null,
@@ -38,10 +45,3 @@ export class PanelToolPanel extends React.Component {
             } }));
     }
 }
-PanelToolPanel.defaultProps = {
-    headerText: '',
-    onClose: null,
-    onConfigure: null,
-    onMinimiseChanged: null,
-    isMinimised: true,
-};

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

@@ -9,6 +9,7 @@ import { AdaptablePopupBody } from './AdaptablePopupBody';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CustomSettingsPanelView } from './CustomSettingsPanelView';
 import { useMenuItems } from './useMenuItems';
+import { resolveContainerElement } from '../../../../Utilities/resolveContainerElement';
 import { AdaptablePopupDialog } from './AdaptablePopupDialog';
 import { Box } from '../../../../components/Flex';
 export const AdaptablePopup = (props) => {
@@ -17,7 +18,7 @@ export const AdaptablePopup = (props) => {
     const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = useMenuItems();
     const isWindowModal = settingsPanelOptions.popupType === 'window';
-    const modalContainer = adaptable.adaptableOptions?.containerOptions?.modalContainer;
+    const modalContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
     let friendlyName = null;
     /**
      * This means that it is not rendered in the context of Settings Panel