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

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/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/StyleComponent.d.ts

@@ -10,6 +10,7 @@ export interface StyleComponentProps {
     hidePreview?: boolean;
     headerText?: string;
     Style: AdaptableStyle;
+    /** @deprecated No longer used - font size is always displayed as dropdown */
     showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }

package/src/View/Components/StyleComponent.js

@@ -5,7 +5,7 @@ import { CheckBox } from '../../components/CheckBox';
 import { ColorPicker } from '../../components/ColorPicker';
 import HelpBlock from '../../components/HelpBlock';
 import Panel from '../../components/Panel';
-import Radio from '../../components/Radio';
+import { Tabs } from '../../components/Tabs';
 import { Select } from '../../components/Select';
 import { StylePreview } from '../../components/StylePreview';
 import { Toggle, ToggleGroup } from '../../components/Toggle';
@@ -148,25 +148,85 @@ 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 fontSizes = ['Default', ...EnumExtensions.getNames(FontSize)];
     return (React.createElement(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)) },
-        ArrayExtensions.IsNotNullOrEmpty(styleClassNames) && (React.createElement(Flex, { flexDirection: "row", className: "twa:p-2" },
-            React.createElement(Radio, { "data-name": "show-class-name", value: "classname", checked: showClassName, onChange: () => onShowClassNameChanged(true) }, "Use Style Class Name"),
-            ' ',
-            React.createElement(Radio, { "data-name": "create-style", className: "twa:ml-3", value: "expression", checked: !showClassName, onChange: () => onShowClassNameChanged(false) }, "Create Style"),
-            ' ')),
-        showClassName ? (React.createElement(Card, { shadow: false },
-            React.createElement(Card.Title, null, "CSS Class Name"),
-            React.createElement(Card.Body, { gap: 2, className: "twa:p-1" },
-                React.createElement(HelpBlock, null, "Select a CSS Class Name"),
-                React.createElement(Box, { className: "twa:max-w-[15rem]" },
-                    React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
-                            ? []
-                            : styleClassNames.map((item) => ({
-                                label: item,
-                                value: item,
-                            })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
-                React.createElement(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))) : (React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+        ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
+            React.createElement(Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
+            React.createElement(Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
+            React.createElement(Tabs.Content, { value: "classname" },
+                React.createElement(Card, { shadow: false },
+                    React.createElement(Card.Title, null, "CSS Class Name"),
+                    React.createElement(Card.Body, { gap: 2, className: "twa:p-1" },
+                        React.createElement(HelpBlock, null, "Select a CSS Class Name"),
+                        React.createElement(Box, { className: "twa:max-w-[15rem]" },
+                            React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
+                                    ? []
+                                    : styleClassNames.map((item) => ({
+                                        label: item,
+                                        value: item,
+                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
+                        React.createElement(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))),
+            React.createElement(Tabs.Content, { value: "createstyle" },
+                React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
+                    React.createElement(Card, { shadow: false, className: "twa:flex-1" },
+                        React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
+                            React.createElement(Card.Title, { className: "twa:col-span-2" },
+                                colourSpellingVariant,
+                                " & Border Properties"),
+                            React.createElement(HelpBlock, { className: "twa:col-span-2" },
+                                "Set ",
+                                coloursSpellingVariant,
+                                " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
+                                coloursSpellingVariant),
+                            React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
+                                "Back ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
+                            React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
+                                "Fore ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
+                            React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
+                                "Border ",
+                                colourSpellingVariant),
+                            React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
+                            React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
+                            React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+                                    const number = Number(event.target.value);
+                                    if (isNaN(number)) {
+                                        onBorderRadiusChange(0);
+                                    }
+                                    else {
+                                        onBorderRadiusChange(number);
+                                    }
+                                } }),
+                            React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
+                            React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
+                            React.createElement("span", null, "Font Style"),
+                            React.createElement(ToggleGroup, null,
+                                React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
+                                React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
+                            React.createElement("span", null, "Text Decoration"),
+                            React.createElement(ToggleGroup, null,
+                                React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
+                                React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
+                                React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
+                            React.createElement("span", null, "Font Size"),
+                            React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                                React.createElement(Select, { placeholder: "Default", options: [
+                                        {
+                                            label: 'Default',
+                                            value: '',
+                                        },
+                                        ...EnumExtensions.getNames(FontSize).map((enumName) => ({
+                                            label: enumName,
+                                            value: enumName,
+                                        })),
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
+                            React.createElement("span", null, "Alignment"),
+                            React.createElement(ToggleGroup, null,
+                                React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                                React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
             React.createElement(Card, { shadow: false, className: "twa:flex-1" },
                 React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
                     React.createElement(Card.Title, { className: "twa:col-span-2" },
@@ -211,7 +271,7 @@ export const StyleComponent = (props) => {
                         React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
                         React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
                     React.createElement("span", null, "Font Size"),
-                    !props.showFontSizeAs || props.showFontSizeAs === 'dropdown' ? (React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
+                    React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
                         React.createElement(Select, { placeholder: "Default", options: [
                                 {
                                     label: 'Default',
@@ -221,21 +281,12 @@ export const StyleComponent = (props) => {
                                     label: enumName,
                                     value: enumName,
                                 })),
-                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) }))) : (React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:gap-2 twa:flex-wrap" }, fontSizes.map((enumName) => {
-                        return (React.createElement(Radio, { onClick: () => onFontSizeChange(enumName), checked: (enumName == 'Default' && !componentStyle.FontSize) ||
-                                componentStyle.FontSize === enumName, key: enumName }, enumName));
-                    }))),
+                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
                     React.createElement("span", null, "Alignment"),
                     React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Left')
-                                : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Center')
-                                : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed
-                                ? onAlignmentChange('Right')
-                                : onAlignmentChange('Default') })))))),
+                        React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
+                        React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
         !props.hidePreview && (React.createElement(Card, { shadow: false },
             React.createElement(Card.Title, null, "Preview"),
             React.createElement(Card.Body, { className: "twa:grid twa:place-items-center" },

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -28,6 +28,10 @@ export const GridFilterExpressionEditor = (props) => {
     const onRunQuery = (expression) => {
         api.filterApi.gridFilterApi.setGridFilterExpression(expression);
     };
+    const onClearExpression = () => {
+        setExpression('');
+        api.filterApi.gridFilterApi.clearGridFilter();
+    };
     const onAddNamedQuery = (namedQuery) => dispatch(NamedQueryRedux.NamedQueryAdd(namedQuery));
     const handleSaveQuery = () => {
         dispatch(PopupShowForm({
@@ -80,7 +84,7 @@ export const GridFilterExpressionEditor = (props) => {
         }));
     };
     const expressionEditorProps = useGridFilterOptionsForExpressionEditorProps();
-    const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError || isExistingNamedQuery;
+    const actionsDisabled = !isExpressionValid || IsNullOrEmpty(expression) || hasNamedQueryError;
     return (React.createElement(NamedQueryContext.Provider, { value: {
             namedQuery: namedQuery,
             setNamedQuery: (newQuery) => {
@@ -95,6 +99,7 @@ export const GridFilterExpressionEditor = (props) => {
                     } }, "CLOSE")),
                 React.createElement(Box, { className: "twa:flex-1" }),
                 React.createElement(SimpleButton, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
+                React.createElement(SimpleButton, { "data-name": "action-clear", onClick: onClearExpression, icon: "close", disabled: IsNullOrEmpty(expression), className: "twa:ml-1" }, "Clear Query"),
                 React.createElement(SimpleButton, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
                         if (namedQuery) {
                             onAddNamedQuery({

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -1,98 +1,61 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
-import DropdownButton from '../../components/DropdownButton';
 import FieldWrap from '../../components/FieldWrap';
-import Textarea from '../../components/Textarea';
-import { Icon } from '../../components/icons';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
 import { ButtonExpand } from '../Components/Buttons/ButtonExpand';
 import { ButtonInvalid } from '../Components/Buttons/ButtonInvalid';
 import { ButtonPause } from '../Components/Buttons/ButtonPause';
-import { ButtonPlay } from '../Components/Buttons/ButtonPlay';
 import { ButtonSave } from '../Components/Buttons/ButtonSave';
 import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
 import { NamedQuerySelector } from './NamedQuerySelector';
 import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
 import { Box, Flex } from '../../components/Flex';
+import Tooltip from '../../components/Tooltip';
 const QueryViewPanelComponent = (props) => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
+    const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
     if (!isAdaptableReady) {
         return null;
     }
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    const handleEnter = (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            runQuery();
-        }
-    };
     const buttonExpand = (React.createElement(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
-    const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap, { className: "twa:mr-1 twa:w-[500px] twa:overflow-visible" },
-            buttonExpand,
-            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:h-full" },
-                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        border: 0,
-                        position: 'absolute',
-                        resize: 'none',
-                        fontFamily: 'monospace',
-                        fontSize: 12,
-                        maxHeight: 52,
-                        height: '100%',
-                        paddingTop: 6,
-                        overflow: 'hidden',
-                        zIndex: 100,
-                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
-            isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, className: "twa:mr-1" })),
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
-            ' ',
-            StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap, { className: "twa:w-full twa:overflow-visible" },
-            ' ',
+    const renderExpressionLabel = () => {
+        const baseClasses = 'twa:font-mono twa:text-xs twa:py-1.5 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-white twa:rounded twa:cursor-pointer twa:h-7 twa:leading-4';
+        const placeholderClasses = 'twa:text-gray-400 twa:italic';
+        const labelClassName = clsx(baseClasses, {
+            [placeholderClasses]: !expression,
+        });
+        const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
+            React.createElement(Box, { className: clsx('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter')));
+        return (React.createElement(FieldWrap, { className: "twa:flex-1 twa:min-w-0 twa:overflow-visible" },
             buttonExpand,
-            React.createElement(Box, { className: "twa:flex-1 twa:relative twa:w-full twa:min-h-[40px]" },
-                React.createElement(Textarea, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
-                        left: 0,
-                        top: 0,
-                        right: 0,
-                        border: 0,
-                        position: 'absolute',
-                        resize: 'none',
-                        fontFamily: 'monospace',
-                        fontSize: 12,
-                        maxHeight: 60,
-                        paddingTop: 7,
-                        zIndex: 100,
-                        height: '100%',
-                        overflow: 'hidden',
-                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
+            expressionLabel,
+            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
     };
-    const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const suspendButton = (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
-    const namedQuerySelector = (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
-    const columnsDropdown = (React.createElement(DropdownButton, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns" },
-        React.createElement(Icon, { name: 'list' })));
+    const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
+    const hasActiveGridFilter = gridFilter != null && hasExpression;
+    const hasNamedQueries = namedQueries && namedQueries.length > 0;
+    const clearButton = hasExpression ? (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
+    const saveButton = hasExpression ? (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === 'ReadOnly' || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
+    const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
+    const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
     const renderButtons = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
-            saveButton,
+        return (React.createElement(React.Fragment, null,
+            clearButton,
             isSuspended ? unSuspendButton : suspendButton,
-            columnsDropdown,
-            namedQuerySelector,
-            ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, className: "twa:mr-1" }),
-            ' ',
-            React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
-            ' ',
             saveButton,
-            isSuspended ? unSuspendButton : suspendButton,
             namedQuerySelector));
     };
-    return (React.createElement(Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(Flex, { className: props.viewType === 'ToolPanel' ? 'twa:w-full' : 'twa:w-auto' }, renderTextInput()),
-        React.createElement(Flex, null, renderButtons())));
+    const isToolbar = props.viewType === 'Toolbar';
+    return (React.createElement(Flex, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
+            'twa:w-[500px]': isToolbar,
+        }) },
+        React.createElement(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
+        React.createElement(Flex, { className: clsx('twa:flex-shrink-0', {
+                'twa:pl-1': isToolbar,
+                'twa:pt-1': !isToolbar,
+            }) }, renderButtons())));
 };
 export const GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/Layout/Wizard/sections/PivotColumnsSection.js

@@ -30,10 +30,10 @@ export const PivotColumnsSection = (props) => {
         React.createElement(Tabs.Tab, null, "Pivot Columns"),
         React.createElement(Tabs.Content, null,
             React.createElement(Box, { className: "twa:mb-3 twa:px-2" },
-                React.createElement(CheckBox, { checked: !!layout.PivotResultColumns, onChange: (checked) => {
+                React.createElement(CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
                         props.onChange({
                             ...layout,
-                            PivotResultColumns: checked,
+                            PivotResultColumnsOrder: checked,
                         });
                     } }, "Persist Order of Pivot Result Columns")),
             React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));

package/src/agGrid/AdaptableAgGrid.js

@@ -3423,6 +3423,15 @@ You need to define at least one Layout!`);
             suppressChartRanges: Boolean(chart.Model.suppressChartRanges),
             aggFunc: chart.Model.aggFunc,
         };
+        // Skip the AG Grid API call if the upgradable properties haven't changed
+        // to avoid unnecessary chartOptionsChanged events (see #ag_grid_update_chart_loop)
+        const currentModel = this.getChartModels().find((model) => model.chartId === chart.Model.chartId);
+        if (currentModel &&
+            Boolean(currentModel.unlinkChart) === upgradableProperties.unlinkChart &&
+            Boolean(currentModel.suppressChartRanges) === upgradableProperties.suppressChartRanges &&
+            currentModel.aggFunc === upgradableProperties.aggFunc) {
+            return;
+        }
         // see also #ag_grid_update_chart_loop
         this.agGridAdapter.getAgGridApi().updateChart(upgradableProperties);
     }

package/src/agGrid/AgGridColumnAdapter.d.ts

@@ -71,6 +71,7 @@ export declare class AgGridColumnAdapter {
     private getAlertCellStyle;
     private getFlashingCellStyle;
     private getCellHighlightStyle;
+    private getColumnHighlightStyle;
     isColGroupDef(columnDefinition: ColDef | ColGroupDef): columnDefinition is ColGroupDef;
     private getRelevantFormatColumnHeaderStyles;
 }

package/src/agGrid/AgGridColumnAdapter.js

@@ -398,6 +398,7 @@ export class AgGridColumnAdapter {
                     ...this.getAlertCellStyle(gridCell, params),
                     ...this.getFlashingCellStyle(gridCell, params),
                     ...this.getCellHighlightStyle(gridCell, params),
+                    ...this.getColumnHighlightStyle(gridCell, params),
                 };
                 return normalizeStyleForAgGrid(result);
             };
@@ -1289,14 +1290,24 @@ export class AgGridColumnAdapter {
                 : flashingCell.flashingCellDefinition.NeutralChangeStyle) ?? {});
     }
     getCellHighlightStyle(gridCell, params) {
-        const cellHightlight = this.adaptableApi.internalApi
+        const cellHighlight = this.adaptableApi.internalApi
             .getInternalState()
             .CellHighlightInfo.find((cellHighlightInfo) => {
             return (gridCell.column.columnId === cellHighlightInfo.columnId &&
                 cellHighlightInfo.primaryKeyValue === gridCell.primaryKeyValue);
         });
-        if (cellHightlight) {
-            return convertAdaptableStyleToCSS(cellHightlight.highlightStyle);
+        if (cellHighlight) {
+            return convertAdaptableStyleToCSS(cellHighlight.highlightStyle);
+        }
+    }
+    getColumnHighlightStyle(gridCell, params) {
+        const columnHighlight = this.adaptableApi.internalApi
+            .getInternalState()
+            .ColumnHighlightInfo.find((columnHighlightInfo) => {
+            return (gridCell.column.columnId === columnHighlightInfo.columnId);
+        });
+        if (columnHighlight) {
+            return convertAdaptableStyleToCSS(columnHighlight.highlightStyle);
         }
     }
     isColGroupDef(columnDefinition) {

package/src/components/ColorPicker/ColorPicker.js

@@ -49,8 +49,9 @@ export const ColorPicker = React.forwardRef((props, ref) => {
         ABcolorChoices,
         includeAlpha && (React.createElement(Flex, { alignItems: "center", className: "twa:gap-1" },
             React.createElement(Box, null, "Opacity"),
-            React.createElement(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
-                    const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
-                    debouncedOnChange(color);
-                }, min: 0, max: 1, step: 0.01, type: "range" })))));
+            React.createElement(Flex, { alignItems: "center", className: "twa:min-h-input" },
+                React.createElement(Input, { disabled: props.disabled, className: "ab-ColorPicker-range", style: { background: rangeBackround }, value: alpha, onChange: (event) => {
+                        const color = tinycolor(value).setAlpha(event.target.value).toRgbString();
+                        debouncedOnChange(color);
+                    }, min: 0, max: 1, step: 0.01, type: "range" }))))));
 });

package/src/components/ExpressionEditor/ExpressionFunctionDocumentation.js

@@ -15,5 +15,5 @@ export const ExpressionFunctionDocumentation = (props) => {
                 React.createElement("pre", { className: signatureClassName }, example))))))),
         props.expressionFunction.returnType && (React.createElement(Box, { "data-name": "expression-editor-documentation-examples" },
             React.createElement("b", null, "Return Type"),
-            React.createElement(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full" }, props.expressionFunction.returnType))))) : null;
+            React.createElement(Tag, { className: "twa:bg-accentlight twa:text-accent twa:ml-3 twa:rounded-full twa:py-1" }, props.expressionFunction.returnType))))) : null;
 };