@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.3

package/src/Api/Events/ReportScheduleRan.d.ts

@@ -8,4 +8,8 @@ export interface ReportScheduleRanInfo extends BaseContext {
      * Report schedule that was triggered (if applicable)
      */
     reportSchedule?: ReportSchedule;
+    /**
+     * ISO datetime when Schedule ran (useful for logging)
+     */
+    RanAt: string;
 }

package/src/Api/Internal/EventInternalApi.js

@@ -99,7 +99,8 @@ export class EventInternalApi extends ApiBase {
     fireScheduledReportRanEvent(reportSchedule) {
         const reportScheduleRanInfo = {
             ...this.getAdaptableInternalApi().buildBaseContext(),
-            reportSchedule: reportSchedule,
+            reportSchedule,
+            RanAt: new Date().toISOString(),
         };
         this.getEventApi().emit('ReportScheduleRan', reportScheduleRanInfo);
     }

package/src/View/AdaptablePopover/index.js

@@ -25,7 +25,7 @@ export class AdaptablePopover extends React.Component {
         const openOnHover = showEvent === 'mouseenter';
         const triggerElement = useButton ? (_jsx(ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText, disabled: this.props.disabled, children: this.props.children })) : (_jsxs("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' }, children: [this.props.children, showIcon && _jsx(Icon, { name: icon, style: iconStyle })] }));
         const controlledProps = this.props.visible !== undefined ? { open: this.props.visible } : {};
-        return (_jsx(Flex, { alignItems: "center", className: this.props.className, children: _jsxs(Popover, { ...controlledProps, children: [_jsx(PopoverTrigger, { nativeButton: !!useButton, openOnHover: openOnHover, delay: 0, closeDelay: 0, render: triggerElement }), _jsxs(PopoverContent, { align: "start", sideOffset: 10, className: "ab-Popover twa:w-auto twa:gap-0 twa:p-0", style: {
+        return (_jsx(Flex, { alignItems: "center", className: this.props.className, children: _jsxs(Popover, { ...controlledProps, children: [_jsx(PopoverTrigger, { nativeButton: !!useButton, openOnHover: openOnHover, delay: 0, closeDelay: 0, render: triggerElement }), _jsxs(PopoverContent, { align: "start", sideOffset: 10, className: "ab-Popover twa:border twa:border-primarylight twa:w-auto twa:gap-0 twa:p-0", style: {
                             minWidth: popoverMinWidth,
                             maxWidth: this.props.popoverMaxWidth ?? 300,
                         }, children: [title ? _jsx(Box, { className: "twa:text-4 twa:p-2", children: title }) : null, _jsx(Box, { className: `ab-Popover__body ${(this.props.popupPadding ?? 2) === 0 ? 'twa:p-0' : 'twa:p-2'}`, children: this.props.bodyText.map((textOrHTML, index) => (_jsx("span", { children: textOrHTML }, index))) })] })] }) }));

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

@@ -4,4 +4,4 @@ export interface InfoButtonProps extends SimpleButtonProps {
     glyph?: string;
     tooltip?: string;
 }
-export declare const ButtonInfo: React.FunctionComponent<InfoButtonProps>;
+export declare const ButtonInfo: React.ForwardRefExoticComponent<Omit<InfoButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
 import SimpleButton from '../../../components/SimpleButton';
-export const ButtonInfo = (props) => {
-    return (_jsx(SimpleButton, { "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent", ...props }));
-};
+export const ButtonInfo = React.forwardRef(function ButtonInfo(props, ref) {
+    return (_jsx(SimpleButton, { ref: ref, "data-name": "info", iconSize: 20, icon: "info", variant: "raised", tone: "accent", ...props }));
+});

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

@@ -19,7 +19,7 @@ export const AdaptableColumnFilter = (props) => {
                 handlePredicateChange(predicate);
             }, [handlePredicateChange]) }) }));
     if (props.location === 'filtersToolPanel') {
-        return (_jsx(Panel, { className: "twa:mb-2", bodyProps: { className: 'twa:p-0' }, children: filterContent }));
+        return (_jsx(Panel, { className: "twa:p-1", bodyProps: { className: 'twa:p-0 twa:border-none' }, children: filterContent }));
     }
     return filterContent;
 };

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

@@ -11,11 +11,13 @@ import clsx from 'clsx';
 import { twMerge } from '../../../twMerge';
 import { SingleSelect } from '../../../components/NewSelect';
 import { isEmbeddedColumnFilterLocation } from './columnFilterLocation';
+import { captureTab } from '../../../lib/utils';
 const ColumnFilterPredicateDropdown = (props) => {
     const predicateDef = usePredicateDef(props.predicate?.operator, props.predicateDefs);
     const options = props.predicateDefs.map((predicateDef) => {
         return {
-            label: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(SimpleButton, { as: "span", variant: "raised", className: "twa:mr-2", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
+            label: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(SimpleButton, { as: "span", variant: "raised", className: "twa:mr-2 twa:p-0.5", tone: "accent", children: predicateDef.icon }), predicateDef.label] })),
+            tooltip: predicateDef.label,
             value: predicateDef.operator,
         };
     });
@@ -23,15 +25,14 @@ const ColumnFilterPredicateDropdown = (props) => {
     const isAndOr = operator === 'AND' || operator === 'OR';
     return (_jsx(Box, { className: "twa:flex twa:items-center ab-ColumnFilterPredicateDropdown twa:p-0.5", style: {
             //@ts-ignore ignore
-            '--ab-cmp-input__background': 'var(--ab-color-primary)',
             '--ab-color-input-background': 'var(--ab-color-primary)',
-        }, children: _jsx(SingleSelect, { "data-name": "filter-predicate-dropdown", 
+        }, children: _jsx(SingleSelect, { "data-name": "filter-predicate-dropdown", extraWidthChars: 8, 
             // The trigger lives inside ag-grid's column menu, which closes itself
             // on mousedowns outside its DOM subtree. Since the popup is portaled
             // to `document.body`, mousedowns inside it would otherwise bubble to
             // `document` and unmount the trigger mid-interaction (causing the
             // popup to re-align to (0,0) before disappearing).
-            stopMouseDownPropagation: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
+            stopMouseDownPropagation: true, showItemTooltip: true, className: predicateDef ? `twa:min-w-[10rem]` : null, onValueChange: (value) => {
                 props.onPredicateChange({
                     operator: value,
                     args: [],
@@ -60,6 +61,7 @@ const AndOrInput = (props) => {
 export const ColumnFilterComponent = (props) => {
     const adaptable = useAdaptable();
     const manuallyApplyColumnFilter = adaptable.api.filterApi.columnFilterApi.internalApi.shouldManuallyApplyColumnFilter(props.columnId);
+    const rootRef = React.useRef(null);
     const contentWrapperRef = React.useRef(null);
     React.useEffect(() => {
         if (props.location !== 'columnMenu')
@@ -69,6 +71,14 @@ export const ColumnFilterComponent = (props) => {
         const dropdown = contentWrapperRef.current?.querySelector('[data-name="filter-predicate-dropdown"]');
         dropdown?.focus();
     }, [props.location]);
+    // When rendered inside ag-grid's column menu, Tabbing would otherwise escape
+    // to the surrounding menu/grid. Trap focus so Tab / Shift+Tab cycle within the filter.
+    const handleFocusTrap = React.useCallback((e) => {
+        if (props.location !== 'columnMenu') {
+            return;
+        }
+        captureTab(rootRef.current, e);
+    }, [props.location]);
     const [predicateNotYetApplied, setPredicateNotYetApplied] = React.useState(props.predicate);
     const applyFilter = () => {
         props.onPredicateChange(currentPredicateRef.current);
@@ -129,7 +139,7 @@ export const ColumnFilterComponent = (props) => {
             .map((qlPredicate) => mapQlPredicateToAdaptablePredicate(qlPredicate))
             .some((adaptablePredicate) => adaptable.api.predicateApi.isValidPredicate(adaptablePredicate));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { flexDirection: "column", className: clsx({
+    return (_jsxs("div", { ref: rootRef, onKeyDown: handleFocusTrap, className: "twa:contents", children: [_jsxs(Flex, { flexDirection: "column", className: clsx({
                     'twa:pb-2': !props.hideActionButtons,
                     'twa:mb-2': isEmbeddedColumnFilterLocation(props.location),
                     'twa:mt-2 twa:ml-2 twa:mr-2': props.location === 'columnMenu',

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

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import OverlayTrigger from '../../../components/OverlayTrigger';
 import SimpleButton from '../../../components/SimpleButton';
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableIconComponent } from '../AdaptableIconComponent';
-import { ColumnFilterMenu } from './components/ColumnFilterMenu';
+import { SingleSelect } from '../../../components/NewSelect';
 import { FloatingFilterInputList } from './components/FloatingFilterInputList';
 import { isPredicateEmpty, qlPredicateToString } from './utils';
 import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
 import { Box, Flex } from '../../../components/Flex';
-import { cn } from '../../../lib/utils';
+import { cn, getFocusableElements } from '../../../lib/utils';
 import { Maximize2 } from 'lucide-react';
 export const FloatingFilter = (props) => {
     const adaptable = useAdaptable();
@@ -40,75 +39,74 @@ export const FloatingFilter = (props) => {
     const colDef = adaptable.api.columnApi.getAGGridColDefForColumnId(props.columnId);
     const showExpandFilterButton = colDef?.suppressHeaderFilterButton !== true;
     const handleClear = () => props.onClear?.();
-    const showEvent = 'click';
-    const hideEvent = 'blur';
-    const [overlayVisible, setOverlayVisible] = React.useState(false);
+    const [selectOpen, setSelectOpen] = React.useState(false);
+    const currentOperator = props.predicate?.args[0]?.operator;
+    const operatorOptions = props.predicateDefs.map((predicateDef) => ({
+        label: (_jsxs(Box, { className: "twa:flex twa:items-center", children: [_jsx(Box, { className: "twa:mr-2 twa:flex twa:items-center", children: predicateDef.icon }), _jsx(Box, { className: "twa:truncate", "data-name": "filter-predicate-label", "data-label": predicateDef.label, children: predicateDef.label })] })),
+        tooltip: predicateDef.label,
+        value: predicateDef.operator,
+    }));
+    const renderTriggerValue = () => (_jsxs(Flex, { alignItems: "center", className: "twa:min-w-0", children: [_jsx(Box, { className: "twa:flex twa:items-center", children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (_jsx(AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && (_jsx(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1 twa:truncate", title: label, children: label }))] }));
     let filterDropdown = null;
-    const filterDropdownButton = (_jsxs(SimpleButton, { variant: "text", "data-name": "floating-filter-button", "aria-label": "Column Filter Operator Dropdown", tooltip: "Click to change filter operator", onBlur: () => {
-            if (isInlineEditable) {
-                setOverlayVisible(false);
-            }
-        }, "data-value": props.predicate?.args[0]?.operator, onClick: () => {
-            if (!isInlineEditable) {
+    const filterDropdownSelect = (_jsx(SingleSelect, { chevronIcon: null, "data-name": "floating-filter-button", ariaLabel: "Column Filter Operator Dropdown", size: "small", stopMouseDownPropagation: true, disabled: props.disabled, open: selectOpen, extraWidthChars: 5, onOpenChange: (nextOpen) => {
+            // In non-inline mode the select doesn't pick an operator inline; opening it
+            // instead opens the full column filter popup, so keep the dropdown closed.
+            if (nextOpen && !isInlineEditable) {
                 adaptable.api.filterApi.columnFilterApi.internalApi.openColumnFilterPopup(props.columnId);
+                return;
             }
-            else {
-                setOverlayVisible(true);
-            }
-        }, className: "twa:my-0.5 twa:mx-0.5 twa:text-left twa:p-0.5", style: {
-            ...(!isInlineEditable
-                ? {
-                    minWidth: 0,
-                    flex: 1,
-                }
-                : {}),
-        }, children: [_jsx(Box, { children: !isManualApply && singleFilterPredicateDef?.icon ? (singleFilterPredicateDef?.icon) : (_jsx(AdaptableIconComponent, { icon: { name: 'filter' } })) }), showLabel && (_jsx(Box, { className: "ab-FloatingFilter-label twa:ml-2 twa:flex-1", title: label, children: label }))] }));
+            setSelectOpen(nextOpen);
+        }, value: currentOperator, placeholder: label, items: operatorOptions, showItemTooltip: true, renderValue: renderTriggerValue, onValueChange: (operator) => {
+            props.onPredicateChange({
+                operator: props.predicate.operator,
+                args: [{ operator: operator, args: [] }],
+            });
+        }, className: cn('twa:self-center twa:mx-0.5 twa:my-0.5 twa:text-left twa:p-0.5 twa:border-none', 'twa:shadow-none', !isInlineEditable && 'twa:min-w-0 twa:flex-1') }));
     if (isInlineEditable) {
-        filterDropdown = showQuickFilterDropdown && (_jsx(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 (_jsx(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],
-                        });
-                    } }));
-            }, children: filterDropdownButton }));
+        filterDropdown = showQuickFilterDropdown && filterDropdownSelect;
     }
     else {
-        filterDropdown = filterDropdownButton;
+        filterDropdown = filterDropdownSelect;
     }
     const showClearButton = isMultiple ||
         !isPredicateEmpty(props.predicate.args[0], singleFilterPredicateDef);
     return (_jsxs(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 the combobox sets isFocused=true,
-                            // triggering a React re-render. During this re-render, unstable component
-                            // references can cause the DummyInput to be removed from the 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();
-                                }
-                            });
-                        }
-                    }
-                }
+            // which prevents focus from moving between the controls inside the floating filter
+            // (operator select, filter input(s), expand/clear buttons). We handle Tab ourselves
+            // in the capture phase (before AG Grid's handlers) and move focus to the next/previous
+            // focusable control. At the boundaries we let the event through so AG Grid can move
+            // to the adjacent header cell.
+            if (e.key !== 'Tab') {
+                return;
+            }
+            const wrapper = e.currentTarget;
+            const focusable = getFocusableElements(wrapper);
+            if (focusable.length === 0) {
+                return;
             }
+            const active = document.activeElement;
+            const currentIndex = active ? focusable.indexOf(active) : -1;
+            if (currentIndex === -1) {
+                return;
+            }
+            const nextIndex = currentIndex + (e.shiftKey ? -1 : 1);
+            if (nextIndex < 0 || nextIndex >= focusable.length) {
+                // boundary reached: let AG Grid navigate between header cells
+                return;
+            }
+            e.preventDefault();
+            e.nativeEvent.stopImmediatePropagation();
+            focusable[nextIndex]?.focus();
+            // Focusing the values combobox's input makes it set isFocused=true, which
+            // re-renders and can momentarily recreate the input, dropping focus to <body>.
+            // Re-resolve the target after the re-render and restore focus to it.
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body || document.activeElement === null) {
+                    const refreshed = getFocusableElements(wrapper);
+                    refreshed[Math.min(nextIndex, refreshed.length - 1)]?.focus();
+                }
+            });
         }, children: [filterDropdown, isInlineEditable && (_jsx(Flex, { className: "twa:flex-1 twa:min-w-0", children: _jsx(FloatingFilterInputList, { onKeyDown: props.onKeydown, columnId: props.columnId, disabled: props.disabled, 
                     // It works only with a predicate
                     predicate: props.predicate.args[0], predicateDefs: props.predicateDefs, onPredicateChange: (predicate) => {

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

@@ -162,7 +162,7 @@ export const ColumnValuesSelect = (props) => {
             : props.onChange, items: options, 
         // for dates, the treeDateOptions have ids that are numbers
         // so we have to add the `toDateValue` function to convert the values to the correct format
-        value: selectedColumnValues, primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
+        value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: isEmbeddedColumnFilterLocation(location) })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: isEmbeddedColumnFilterLocation(location) }, "select"));
     return (_jsx("div", { className: join(baseClassName, 'twa:relative', props.isLoading && `${baseClassName}--loading`, !value.length && `${baseClassName}--empty`), onKeyDownCapture: (e) => {
             if (e.key === 'Tab') {
                 // Prevent AG Grid from hijacking Tab; keep browser default focus navigation.

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -9,6 +9,7 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
+    const clearDisabled = StringExtensions.IsNullOrEmpty(props.value.toString());
     return (_jsxs(FieldWrap, { onClick: props.onClick, className: twMerge('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [_jsx(Input, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
                     inputRef.current = r;
                     if (!ref) {
@@ -31,5 +32,5 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                             input.focus();
                         }
                     });
-                }, disabled: StringExtensions.IsNullOrEmpty(props.value.toString()) })] }));
+                }, disabled: clearDisabled })] }));
 });

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

@@ -67,7 +67,7 @@ export const AdaptablePopup = (props) => {
                     props.onHide();
                 }
             },
-        }, children: _jsxs(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && _jsx(TopBar, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), _jsxs(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+        }, children: _jsxs(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && _jsx(TopBar, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), _jsxs(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-background twa:text-foreground', 'twa:rounded-bl-standard twa:rounded-br-standard', accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
                         ? GeneralConstants.READ_ONLY_STYLE
                         : ''), children: [!isStandalone && (_jsx(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), _jsx(Box, { className: clsx('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto', 'twa:rounded-br-standard', !isStandalone && 'twa:*:p-3'), children: moduleViewContent })] })] }) }));
 };

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

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ACCESS_LEVEL_READ_ONLY } from '../../../../Utilities/Constants/GeneralConstants';
-import DropdownButton from '../../../../components/DropdownButton';
 import EmptyContent from '../../../../components/EmptyContent';
 import { Icon } from '../../../../components/icons';
 import { AdaptableObjectList } from '../../AdaptableObjectList';
@@ -17,6 +16,7 @@ import { useRerender } from '../../../../components/utils/useRerender';
 import { Box, Flex } from '../../../../components/Flex';
 import Panel from '../../../../components/Panel';
 import { Tabs } from '../../../../components/Tabs';
+import { NewDropdownButton } from '../../../../components/NewDropdownButton';
 export const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -80,7 +80,7 @@ export const AdaptablePopupModuleView = (props) => {
                 label: abObjectType.label ?? abObjectType.name,
             };
         });
-        newButton = (_jsxs(DropdownButton, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText, children: [_jsx(Icon, { name: "plus" }), " New"] }));
+        newButton = (_jsxs(NewDropdownButton, { showDivider: false, tone: "accent", variant: "raised", items: items, tooltip: toolTipText, children: [_jsx(Icon, { name: "plus" }), " New"] }));
     }
     else if (!moduleViewProperties.hideNewButton &&
         (EditWizard || moduleViewProperties.onOpenEditPopup)) {

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

@@ -101,7 +101,7 @@ export function ValueSelector(props) {
             notifyChange();
         },
     };
-    return (_jsxs(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column", children: [_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) }), renderSelectionSection(selectionSectionProps), _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+    return (_jsxs(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column", children: [_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) }), renderSelectionSection(selectionSectionProps), _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
                             proxyElement.classList.add('twa:shadow-md');
                         }, onDrop: (_sortedIndexes) => {
                             const selection = [];

package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js

@@ -55,9 +55,7 @@ export const FormatColumnScopeWizardSection = (props) => {
                 newData.Rule.BooleanExpression = '';
             }
             else {
-                const validPredicateIds = new Set(api.formatColumnApi.internalApi
-                    .getFormatColumnDefsForScope(Scope)
-                    .map((def) => def.id));
+                const validPredicateIds = new Set(api.formatColumnApi.internalApi.getFormatColumnDefsForScope(Scope).map((def) => def.id));
                 newData.Rule = {
                     Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
                         // if there are more than 1 column, then we must eliminate the IN/NotIn predicates
@@ -82,11 +80,8 @@ export const FormatColumnScopeWizardSection = (props) => {
         });
     };
     const showRowToggles = data.Target === 'cell';
-    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewScopeComponent, { descriptions: {
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "Which Columns the Format Column will be applied to" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-2", children: _jsx(NewScopeComponent, { descriptions: {
                                 rowScope: 'Format all columns in the row',
                                 columnScope: 'Select columns to format',
-                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && (_jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
-                            FORMAT_COLUMN_ROW_KINDS.slice(0, 2),
-                            FORMAT_COLUMN_ROW_KINDS.slice(2),
-                        ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
+                            }, scope: data.Scope, updateScope: handleScopeChange }) })] }), showRowToggles && (_jsxs(Box, { className: "twa:border-t twa:border-border twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:px-2 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows the Format Column will be applied to" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [FORMAT_COLUMN_ROW_KINDS.slice(0, 2), FORMAT_COLUMN_ROW_KINDS.slice(2)].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => (_jsx(FormRow, { label: `${ROW_KIND_LABELS[kind]}:`, children: _jsx(Flex, { alignItems: "center", className: "twa:ml-2", children: _jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, className: "twa:mr-2", checked: isRowKindIncluded(data, kind), onChange: (checked) => handleRowKindChange(kind, checked) }) }) }, kind))) }) }, groupIndex))) })] }))] }));
 };

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -22,7 +22,7 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === ACCESS_LEVEL_READ_ONLY;
     const buttonExpand = (_jsx(ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderExpressionLabel = () => {
-        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
+        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-background twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
         const labelClassName = clsx(baseClasses, {
             [placeholderClasses]: !expression,

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

@@ -189,7 +189,7 @@ export const ColumnsSection = (props) => {
         if (layout.RowGroupDisplayType === 'single') {
             allColumns.unshift(generateAutoRowGroupSingleColumn());
         }
-        else {
+        else if (layout.RowGroupDisplayType === 'multi') {
             [...layout.RowGroupedColumns].reverse().forEach((col) => {
                 const groupCol = generateAutoRowGroupColumnForColumn(adaptable.api.columnApi.getColumnWithColumnId(col));
                 allColumns.unshift(groupCol);
@@ -423,7 +423,7 @@ export const ColumnsSection = (props) => {
                                     const visible = isColumnVisible({ columnId: selectedColumnId, layout });
                                     handleColumnVisibilityChange(selectedColumnId, !visible);
                                 }
-                            }, children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:border-none twa:p-1" }), _jsx(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: _jsx(CheckBox, { checked: currentlyDisplayedColumnIds.length
+                            }, children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:h-full twa:overflow-hidden twa:p-1", children: [_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Search Columns...", className: "twa:w-full twa:p-1" }), _jsx(Box, { className: clsx('twa:font-bold', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: _jsx(CheckBox, { checked: currentlyDisplayedColumnIds.length
                                                 ? currentlyDisplayedColumnIds.length === visibleIdsCurrentlyDisplayed.length
                                                     ? true
                                                     : visibleIdsCurrentlyDisplayed.length
@@ -460,7 +460,7 @@ const ColumnPropertiesEditor = (props) => {
     const adaptable = useAdaptable();
     const baseCls = 'ab-Layout-Wizard__ColumnPropertiesEditor twa:border twa:rounded-standard';
     if (!props.column) {
-        return (_jsx(Box, { className: clsx(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-text-on-primarydark ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
+        return (_jsx(Box, { className: clsx(baseCls, 'twa:border-input-border twa:grid twa:place-items-center twa:border-dashed twa:border-2'), children: _jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:items-center twa:justify-center", children: [_jsx(Box, { className: "twa:text-muted-foreground ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Icon", children: _jsx(NaturallySizedIcon, { name: "inspector", style: { stroke: 'currentColor', fill: 'none', strokeWidth: 2 } }) }), _jsx(Box, { className: "twa:text-4 twa:font-bold ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Title", children: "No Column Selected" }), _jsx(Box, { className: "twa:text-3 twa:opacity-80 ab-Layout-Wizard__ColumnPropertiesEditor__Placeholder__Description", children: "Select a Column to view and edit its properties" })] }) }));
     }
     const { column } = props;
     const columnWidth = props.layout.ColumnSizing?.[column.columnId]?.Width;
@@ -472,7 +472,7 @@ const ColumnPropertiesEditor = (props) => {
     const columnPinning = props.layout.ColumnPinning?.[props.column.columnId] || 'None';
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const customHeader = props.layout.ColumnHeaders?.[props.column.columnId] ?? initialHeader;
-    return (_jsxs(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-defaultbackground twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col'), children: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-text-on-primarydark twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", _jsx(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
+    return (_jsxs(Box, { className: clsx(baseCls, 'ab-Layout-Wizard__ColumnPropertiesEditor__Container twa:border-none twa:bg-background twa:shadow-md', 'twa:max-h-full twa:overflow-hidden twa:flex twa:flex-col'), children: [_jsxs(Box, { className: "twa:px-4 twa:pt-4", children: [_jsxs(Box, { className: "twa:text-5 twa:font-bold twa:leading-relaxed ab-Layout-Wizard__ColumnPropertiesEditor__Title", children: ["Column Settings: ", column.friendlyName] }), _jsxs(Box, { className: "twa:text-3 twa:opacity-80 twa:flex twa:flex-row twa:gap-1 twa:items-center", children: ["Column ID:", ' ', _jsx(Box, { className: "twa:bg-primarydark/20 twa:text-muted-foreground twa:px-1 twa:py-0.5 twa:rounded-standard", children: column.columnId })] }), props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (_jsxs(Box, { className: "ab-Layout-Wizard__ColumnRow__Title twa:mx-2 twa:p-1", children: ["Column Group: ", props.column.columnGroup.friendlyName] })) : null] }), hr, _jsxs(Box, { className: "twa:px-4 twa:flex-1 twa:overflow-y-auto twa:pb-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3", children: [_jsxs(Flex, { flexDirection: "column", className: "twa:gap-1", children: ["Header", _jsx(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
                                             props.onColumnNameChange(props.column.columnId, event.target.value);
                                         }, value: customHeader })] }), _jsxs(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2", children: [_jsx(Box, { children: "Width:" }), " ", _jsx(Box, { children: "Flex:" }), _jsx(Input, { "data-name": "column-width", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input", type: "number", placeholder: "Column width", disabled: resizable === false, onChange: (event) => {
                                             let value = parseFloat(event.target.value);

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

@@ -12,7 +12,7 @@ import { CheckBox } from '../../../../components/CheckBox';
 export const PivotColumnsSectionSummary = () => {
     const adaptable = useAdaptable();
     const { data: layout } = useOnePageAdaptableWizardContext();
-    return (_jsx(Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) }));
+    return (_jsx(Box, { className: "twa:p-2 twa:rounded-standard twa:bg-background", children: layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (_jsx(Tag, { className: "twa:mr-1", children: adaptable.api.columnApi.getFriendlyNameForColumnId(columnId) }, columnId)))) : (_jsx(Tag, { children: "No Pivot Columns Defined" })) }));
 };
 export const PivotColumnsSection = (props) => {
     const adaptable = useAdaptable();

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

@@ -73,9 +73,13 @@ export const RowGroupingSection = (props) => {
                                     if (RowGroupDisplayType === 'single') {
                                         newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
                                     }
-                                    else {
+                                    else if (RowGroupDisplayType === 'multi') {
                                         newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
                                     }
+                                    else {
+                                        newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId) &&
+                                            !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
+                                    }
                                     onChange(newLayout);
-                                }, children: [_jsx(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), _jsx(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" })] }) }) })] }), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouped Columns" }), _jsx(Tabs.Tab, { children: rowGroupsText }), _jsx(Tabs.Content, { children: _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), _jsx(Tabs.Content, { children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
+                                }, children: [_jsx(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }), _jsx(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }), _jsx(TypeRadio, { value: "groupRows", text: "Full Width Group Rows", description: "Row groups display as full-width rows (no group column and no aggregations)" })] }) }) })] }), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouped Columns" }), _jsx(Tabs.Tab, { children: rowGroupsText }), _jsx(Tabs.Content, { children: _jsx(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (_jsxs(Flex, { alignItems: "center", children: [option.friendlyName ?? option.columnId, _jsx(ColumnGroupTag, { column: option })] })), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange }) }), _jsx(Tabs.Content, { children: _jsx(RowGroupBehaviorSection, { layout: layout, onChange: onChange }) })] })] }));
 };

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

@@ -69,5 +69,5 @@ export const RowSelectionSection = (props) => {
         }
         props.onChange(newLayout);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Row Selection Mode" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "column", children: _jsxs(RadioGroup, { orientation: "horizontal", variant: "text-only", className: twMerge(radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-defaultbackground twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [_jsx(Radio, { value: false, children: "Disabled" }), _jsx(Radio, { value: "singleRow", children: "Single Row" }), _jsx(Radio, { value: "multiRow", children: "Multi Row" })] }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Selection Column Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouping Selection Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Click Selection (when user clicks on Row outside of Selection Checkbox)" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Grouped Row Selection Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Select All (in Header) Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { children: "Row Selection Mode" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "column", children: _jsxs(RadioGroup, { orientation: "horizontal", variant: "text-only", className: twMerge(radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-background twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange, children: [_jsx(Radio, { value: false, children: "Disabled" }), _jsx(Radio, { value: "singleRow", children: "Single Row" }), _jsx(Radio, { value: "multiRow", children: "Multi Row" })] }) }) })] }), !rowSelection && _jsx(HelpBlock, { children: "There is no Row Selection configured for this Layout" }), rowSelection && (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Selection Column Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "row", className: "twa:gap-6", children: [_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }), children: "Checkboxes in Column Cells" }), mode === 'multiRow' && (_jsx(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }), children: "Checkbox in Column Header (to enable Select All)" }))] }) })] }), (rowSelection.Checkboxes ?? true) && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Grouping Selection Checkboxes" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }), children: [_jsx(Radio, { value: false, children: "Display in dedicated Selection Column" }), _jsx(Radio, { value: true, children: "Display in Row Grouped Column" })] }) })] })), _jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Row Click Selection (when user clicks on Row outside of Selection Checkbox)" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }), children: [_jsx(Radio, { value: false, children: "Disabled (Cannot select or deselect by clicking in Row)" }), _jsx(Radio, { value: true, children: "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)" }), _jsx(Radio, { value: 'enableSelection', children: "Selection Only (Enable selection by clicking in Row)" }), _jsx(Radio, { value: 'enableDeselection', children: "Deselection Only (Enable deselection by Ctrl+clicking in Row)" })] }) })] }), mode === 'multiRow' && !isPivot && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Grouped Row Selection Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }), children: [_jsx(Radio, { value: 'self', children: "Select Grouped Row Only (no cascade)" }), _jsx(Radio, { value: 'descendants', children: "Select Grouped Row and all descendants" }), _jsx(Radio, { value: 'filteredDescendants', children: "Select Grouped Row and only filtered descendants" })] }) })] })), mode === 'multiRow' && (_jsxs(Tabs, { className: "twa:mt-2", children: [_jsx(Tabs.Tab, { children: "Select All (in Header) Behaviour" }), _jsx(Tabs.Content, { children: _jsxs(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }), children: [_jsx(Radio, { value: 'all', children: "All rows" }), _jsx(Radio, { value: 'filtered', children: "Filtered rows only" }), _jsx(Radio, { value: 'currentPage', children: "Current page only" })] }) })] }))] }))] }));
 };

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

@@ -20,5 +20,5 @@ export const SettingsSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Grid Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "layout-type-table", disabled: true, checked: !isPivotLayout(layout), children: "Table" }), _jsx(Radio, { "data-name": "layout-type-pivot", disabled: true, checked: isPivotLayout(layout), children: "Pivot" })] }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "layout-name", onChange: onNameChange, value: layout?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Grid Type" }), _jsx(Tabs.Content, { children: _jsxs(Flex, { flexDirection: "column", children: [_jsx(Radio, { "data-name": "layout-type-table", disabled: true, checked: !isPivotLayout(layout), children: "Table" }), _jsx(Radio, { "data-name": "layout-type-pivot", disabled: true, checked: isPivotLayout(layout), children: "Pivot" })] }) })] })] }));
 };

package/src/View/License/LicenseWatermark.js

@@ -1 +1 @@
-import{jsx as r,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-defaultbackground)"},s=r=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[e,o]of t)if(r.style[e]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=e.useRef(null);return e.useEffect(()=>{const r=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(r)},[]),t(n,{style:i,ref:a,children:[r(o,{style:{marginRight:10}}),r("div",{children:l.children})]})};
+import{jsx as r,jsxs as t}from"react/jsx-runtime";import*as e from"react";import{Logo as o}from"../../components/Logo";import{Flex as n}from"../../components/Flex";const i={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-foreground)",background:"var(--ab-color-background)"},s=r=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[e,o]of t)if(r.style[e]===o)return!1;return!0};export const LicenseWatermark=l=>{const a=e.useRef(null);return e.useEffect(()=>{const r=setInterval(()=>{a.current?.isConnected||alert("It is not allowed to remove the Adaptable watermark."),s(a.current)||alert("It is not allowed to modify the Adaptable watermark."),a?.current?.style&&(a.current.style.border=i.border,a.current.style.padding=i.padding,a.current.style.fontWeight=`${i.fontWeight}`,a.current.style.margin=i.margin,a.current.style.fontSize=i.fontSize,a.current.style.color=i.color,a.current.style.background=i.background,a.current.style.display="flex",a.current.style.position="static",a.current.style.opacity="1",a.current.style.visibility="visible")},5e3);return()=>clearTimeout(r)},[]),t(n,{style:i,ref:a,children:[r(o,{style:{marginRight:10}}),r("div",{children:l.children})]})};

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

@@ -227,7 +227,7 @@ export const StyledColumnWizardScopeSection = (props) => {
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), _jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-text-on-defaultbackground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Column" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70", children: "The Column the Style is applied to" }), _jsx(Box, { className: "twa:flex-1" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1, maxWidth: 320 } })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }) })] }), _jsxs(Box, { className: "twa:border-t twa:border-border twa:px-2 twa:py-3 twa:shrink-0", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-3 twa:pb-2 twa:mb-3 twa:flex-wrap twa:border-b twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Rows" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Which kinds of Rows should the Styled Column render on" })] }), _jsx(Flex, { flexDirection: "row", className: "twa:gap-6 twa:flex-wrap", children: [
                             STYLED_COLUMN_ROW_KINDS.slice(0, 2),
                             STYLED_COLUMN_ROW_KINDS.slice(2),
                         ].map((rowKindGroup, groupIndex) => (_jsx(Box, { className: "twa:flex-1 twa:min-w-[220px]", children: _jsx(FormLayout, { sizes: ['180px', '1fr'], children: rowKindGroup.map((kind) => {

package/src/View/Wizard/OnePageWizards.js

@@ -78,7 +78,7 @@ export const OnePageWizard = (props) => {
         if (section === '-') {
             return _jsx(React.Fragment, {}, index);
         }
-        return (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: _jsx(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-defaultbackground", children: section.render(props.data, index) }) }, index));
+        return (_jsx(Flex, { flexDirection: "column", "data-name": `section-${index}`, className: "twa:min-h-full twa:mr-2", children: _jsx(Box, { className: "ab-OnePageWizard__section twa:flex-1 twa:rounded-standard twa:overflow-auto twa:bg-background", children: section.render(props.data, index) }) }, index));
     };
     const handleNavigation = useKeyboardNavigation(setCurrentSection, visibleSections);
     const selectedNodeRef = useRef(null);

package/src/View/renderWithAdaptableContext.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Provider } from 'react-redux';
 import AdaptableContext from './AdaptableContext';
 import { WithAdaptableComputedCSSVars } from './AdaptableComputedCSSVarsContext';
-import { TooltipProvider } from "../components/ui/tooltip";
+import { TooltipProvider } from '../components/ui/tooltip';
 export const renderWithAdaptableContext = (children, adaptable) => {
     return (_jsx(TooltipProvider, { delay: 300, children: _jsx(Provider, { store: adaptable.adaptableStore.TheStore, children: _jsx(WithAdaptableComputedCSSVars, { children: _jsx(AdaptableContext.Provider, { value: adaptable, children: children }) }) }) }));
 };

package/src/agGrid/AdaptableAgGrid.js

@@ -96,6 +96,7 @@ import { FlashingCellService } from '../Utilities/Services/FlashingCellService';
 import { AgGridExportAdapter } from './AgGridExportAdapter';
 import { checkForDuplicateColumns, getLayoutRowGroupValuesExceptionGroupKeys, isPivotLayout, layoutModelToLayoutState, layoutStateToLayoutModel, normalizeLayout, } from '../Api/Implementation/LayoutHelpers';
 import { LayoutManager } from '../layout-manager/src';
+import { rowGroupDisplayTypeToGridOption } from '../layout-manager/src/rowGroupDisplayType';
 import { isPivotLayoutModel } from '../layout-manager/src/isPivotLayoutModel';
 import { ACTION_COLUMN_TYPE, CALCULATED_COLUMN_TYPE, FDC3_COLUMN_TYPE, FREE_TEXT_COLUMN_TYPE, HIDDEN_COLUMN_TYPE, hiddenColDefConfig, PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../AdaptableState/Common/AdaptableColumn';
 import { agGridDataTypeDefinitions } from './agGridDataTypeDefinitions';
@@ -461,8 +462,7 @@ export class AdaptableAgGrid {
             if (isPivotLayoutModel(layoutModel)) {
                 gridOptions.pivotDefaultExpanded = layoutModel.PivotExpandLevel;
             }
-            gridOptions.groupDisplayType =
-                layoutModel.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+            gridOptions.groupDisplayType = rowGroupDisplayTypeToGridOption(layoutModel.RowGroupDisplayType);
             // fixes issue #3053
             gridOptions.suppressAggFuncInHeader = !!layoutModel.SuppressAggFuncInHeader;
             if (!isPivotLayoutModel(layoutModel) &&