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

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

@@ -0,0 +1,2 @@
+export type ColumnFilterLocation = 'columnMenu' | 'filterForm' | 'filtersToolPanel';
+export declare const isEmbeddedColumnFilterLocation: (location: ColumnFilterLocation) => boolean;

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

@@ -0,0 +1 @@
+export const isEmbeddedColumnFilterLocation = (location) => location === 'filterForm' || location === 'filtersToolPanel';

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

@@ -5,7 +5,7 @@ import AdaptableInput from '../../AdaptableInput';
 import { AdaptableDateInlineInput } from '../../AdaptableInput/AdaptableDateInlineInput';
 import { PermittedValuesSelector } from '../../Selectors/PermittedValuesSelector';
 import { useAdaptable } from '../../../AdaptableContext';
-import debounce from '../../../../Utilities/utils/debounce';
+import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import { useCallback } from 'react';
 function debounceOrImmediate(fn, time) {
     return time && time > 0 ? debounce(fn, time) : fn;
@@ -78,7 +78,6 @@ export const ColumnFilterInput = (props) => {
             } }));
     }
     if (usePrimitiveInputs === false && (type === 'number' || type === 'text')) {
-        // we use the permitted values selector
         return (_jsx(PermittedValuesSelector, { allowNewValues: true, searchable: 'inline', value: liveValue, columnId: columnId, onFocus: onFocus, onBlur: onBlur, onChange: (value) => {
                 if (value == undefined) {
                     onClear();

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import debounce from '../../../../Utilities/utils/debounce';
+import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import Panel from '../../../../components/Panel';
@@ -36,7 +36,9 @@ export const ColumnFilterInputList = (props) => {
     }
     return (_jsx(_Fragment, { children: (matchingInputs ?? []).map((input, index) => {
             const value = props?.predicate?.args?.[index];
-            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: false, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
+            const operator = props.predicate?.operator;
+            const usePermittedValuesSelector = input === 'number' || operator === 'Is' || operator === 'IsNot';
+            return (_jsx(ColumnFilterInput, { columnId: props.columnId, usePrimitiveInputs: !usePermittedValuesSelector, disabled: props.disabled, type: input, value: value, onKeyDown: props.onKeyDown, onClear: () => {
                     const args = [...props.predicate.args];
                     args.splice(index, 1);
                     const newPredicate = {

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

@@ -3,8 +3,8 @@ 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';
+import { cn } from '../../../../lib/utils';
 const ColumnFilterMenuItem = ({ active, onClick, icon, label, }) => {
     return (_jsxs(SimpleButton, { className: "twa:p-1 twa:w-full", variant: "text", tone: active ? 'info' : 'none', onClick: onClick, "aria-label": label, children: [_jsx(Box, { className: "twa:mr-2", children: icon }), _jsx(Box, { className: "twa:text-2", children: label })] }));
 };
@@ -59,7 +59,7 @@ export const ColumnFilterMenu = (props) => {
     }, [confirm]);
     return (_jsx(Panel, { className: "twa:min-w-max", children: props.predicateDefs?.map((predicateDef, index) => {
             const active = activeIndex === index;
-            return (_jsx(Flex, { className: clsx('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
+            return (_jsx(Flex, { className: cn('twa:mb-1', active && 'twa:bg-primarylight'), onMouseDownCapture: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
                 }, children: _jsx(ColumnFilterMenuItem, { onClick: () => confirm(predicateDef), icon: predicateDef.icon, label: predicateDef.label, active: active }) }, index));

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import debounce from '../../../../Utilities/utils/debounce';
+import { debounce } from '../../../../Utilities/Helpers/TimingHelper';
 import * as React from 'react';
 import { getOperatorMatchingInputs } from '../../../../components/ExpressionEditor/QueryBuilder/utils';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';

package/src/View/Components/ColumnSelector/index.d.ts

@@ -1,12 +1,24 @@
 import * as React from 'react';
 import { AdaptableColumn } from '../../../types';
+import { ValueSelectorProps } from '../ValueSelector';
 type NewColumnSelectorProps = {
     availableColumns: AdaptableColumn[];
     selected: string[];
     singleSelect?: boolean;
+    /** External filter text (legacy — prefer `compactColumnList` inline search). */
     columnFilterText?: string;
     allowReorder?: boolean;
     onChange?: (colIds: string[]) => void;
+    /** Layout wizard pattern: compact header with inline search beside selection controls. */
+    compactColumnList?: boolean;
+    compact?: ValueSelectorProps<AdaptableColumn, string>['compact'];
+    showFilterInput?: ValueSelectorProps<AdaptableColumn, string>['showFilterInput'];
+    filterPlaceholder?: string;
+    compactHeaderClassName?: string;
+    compactFilterClassName?: string;
+    hideShowSelectedOnly?: boolean;
+    optionClassName?: string;
+    className?: string;
 };
 export declare const NewColumnSelector: ({ allowReorder, ...props }: NewColumnSelectorProps) => React.JSX.Element;
 export {};

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

@@ -2,14 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { ValueSelector } from '../ValueSelector';
 import { ColumnGroupTag } from '../ColumnGroupTag';
+import { cn } from '../../../lib/utils';
+import { WIZARD_COLUMN_LIST_HEADER_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS, WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT, WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../wizardColumnListStyles';
 export const NewColumnSelector = ({ allowReorder = true, ...props }) => {
-    const { columnFilterText, availableColumns, selected, onChange, singleSelect } = props;
+    const { columnFilterText, availableColumns, selected, onChange, singleSelect, compactColumnList, compact, showFilterInput, filterPlaceholder, compactHeaderClassName, compactFilterClassName, hideShowSelectedOnly, optionClassName, className, } = props;
+    const useCompactColumnList = compactColumnList ?? false;
+    const effectiveCompact = useCompactColumnList || compact;
+    const effectiveShowFilterInput = useCompactColumnList || showFilterInput;
+    const effectiveFilterPlaceholder = filterPlaceholder ?? (useCompactColumnList ? 'Search Columns...' : undefined);
+    const effectiveCompactHeaderClassName = compactHeaderClassName ??
+        (useCompactColumnList ? WIZARD_COLUMN_LIST_HEADER_CLASS : undefined);
+    const effectiveCompactFilterClassName = compactFilterClassName ??
+        (useCompactColumnList ? WIZARD_COLUMN_LIST_SEARCH_CLASS : undefined);
+    const effectiveOptionClassName = optionClassName ??
+        (useCompactColumnList
+            ? singleSelect
+                ? WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT
+                : WIZARD_COLUMN_LIST_OPTION_CLASS
+            : undefined);
+    const effectiveHideShowSelectedOnly = hideShowSelectedOnly ?? (useCompactColumnList ? singleSelect : undefined);
     const filterFn = useMemo(() => {
-        return columnFilterText
-            ? (c) => c.friendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
-            : null;
-    }, [columnFilterText]);
-    return (_jsx(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, singleSelect: singleSelect, allowReorder: false, onChange: (colIds) => {
+        if (!effectiveShowFilterInput && !columnFilterText) {
+            return null;
+        }
+        return (column, searchValue) => {
+            const text = effectiveShowFilterInput ? searchValue : columnFilterText ?? '';
+            if (!text) {
+                return true;
+            }
+            return column.friendlyName.toLowerCase().includes(text.toLowerCase());
+        };
+    }, [columnFilterText, effectiveShowFilterInput]);
+    return (_jsx(ValueSelector, { value: selected, options: availableColumns, filter: filterFn, compact: effectiveCompact, showFilterInput: effectiveShowFilterInput, filterPlaceholder: effectiveFilterPlaceholder, compactHeaderClassName: effectiveCompactHeaderClassName, compactFilterClassName: effectiveCompactFilterClassName, hideShowSelectedOnly: effectiveHideShowSelectedOnly, optionClassName: effectiveOptionClassName, optionLayout: useCompactColumnList ? 'label-beside-checkbox' : undefined, toggleSelectionOnRowClick: useCompactColumnList ? true : undefined, singleSelect: singleSelect, allowReorder: allowReorder, className: cn(useCompactColumnList && 'twa:h-full', className), onChange: (colIds) => {
             if (singleSelect) {
                 onChange(colIds.length ? [colIds.pop()] : []);
             }

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

@@ -4,7 +4,7 @@ import HelpBlock from '../../../../components/HelpBlock';
 import { useAdaptable } from '../../../AdaptableContext';
 import { ButtonInfo } from '../../Buttons/ButtonInfo';
 import { PredicateDocsLink } from '../../../../Utilities/Constants/DocumentationLinkConstants';
-import SimpleButton from '../../../../components/SimpleButton';
+import { ButtonNew } from '../../Buttons/ButtonNew';
 import { Tag } from '../../../../components/Tag';
 import { EntityRulePredicateEditor } from './EntityRulePredicateEditor';
 import Radio from '../../../../components/Radio';
@@ -57,7 +57,7 @@ export const EntityRulePredicatesEditor = (props) => {
     };
     const scopeString = getScopeViewItems(props.data.Scope, api).values.join(', ');
     const enablePredicateColumnId = props.enablePredicateColumnId ?? true;
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { justifyContent: "space-between", className: "twa:mb-2", children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: props.descriptions.selectPredicate }), _jsx(SimpleButton, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, icon: "plus", variant: "raised", children: "Add Predicate" })] }), enablePredicateColumnId && (_jsxs(Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column", children: [_jsx(Box, { className: "twa:mb-2", children: "Create Predicate Rule(s) using" }), _jsxs(Radio, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled, children: ["Active Column: ", _jsx(Tag, { className: "twa:mx-1", children: scopeString || 'Not Defined' }), ' '] }), _jsx(Radio, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled, children: "Selected Columns (overriding Active Column)" })] })), (props.data.Rule?.Predicates?.length ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { justifyContent: "space-between", className: "twa:mb-2", children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: props.descriptions.selectPredicate }), _jsx(ButtonNew, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, children: "Add Predicate" })] }), enablePredicateColumnId && (_jsxs(Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column", children: [_jsx(Box, { className: "twa:mb-2", children: "Create Predicate Rule(s) using" }), _jsxs(Radio, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled, children: ["Active Column: ", _jsx(Tag, { className: "twa:mx-1", children: scopeString || 'Not Defined' }), ' '] }), _jsx(Radio, { "data-name": "column-scope", onClick: () => handlePredicateScopeTypeChange(true), checked: columnPredicateEnabled, children: "Selected Columns (overriding Active Column)" })] })), (props.data.Rule?.Predicates?.length ? props.data.Rule.Predicates : [null]).map((predicate, index) => {
                 const currentPredicatDef = props.predicateDefs.find((pd) => pd.id === predicate?.PredicateId);
                 let editorPredicateDefs = defaultPredicateDefs;
                 if (currentPredicatDef) {

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

@@ -8,6 +8,7 @@ import { toDisplayValueDefault, toDisplayValueFromOptionTree, } from '../../../c
 import { AG_GRID_GROUPED_COLUMN } from '../../../Utilities/Constants/GeneralConstants';
 import { useMemo } from 'react';
 import { GridFilterCombobox } from '../../../components/Combobox';
+import { isEmbeddedColumnFilterLocation } from '../ColumnFilter/columnFilterLocation';
 import { useColumnFilterLocation } from '../ColumnFilter/AdaptableColumnFilter';
 import { GridFilterTreeDropdown } from '../../../components/Tree/TreeDropdown';
 const baseClassName = 'ab-ListBoxFilterForm';
@@ -161,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: location === 'filterForm' })) : (_jsx(GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: location === 'filterForm' }, "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

@@ -5,11 +5,13 @@ import FieldWrap from '../../../components/FieldWrap';
 import SimpleButton from '../../../components/SimpleButton';
 import Input from '../../../components/Input';
 import { twMerge } from '../../../twMerge';
+import { cn } from '../../../lib/utils';
 export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    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) => {
+    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: cn('twa:min-w-0 twa:flex-1', props.inputClassName), ref: (r) => {
                     inputRef.current = r;
                     if (!ref) {
                         return;
@@ -31,5 +33,5 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                             input.focus();
                         }
                     });
-                }, disabled: StringExtensions.IsNullOrEmpty(props.value.toString()) })] }));
+                }, disabled: clearDisabled })] }));
 });

package/src/View/Components/ModuleProfile.js

@@ -4,7 +4,7 @@ import { Icon } from '../../components/icons';
 export class ModuleProfile extends React.Component {
     render() {
         return (_jsxs("div", { children: [_jsx(Icon, { name: this.props.moduleInfo.Glyph, style: {
-                        fill: 'var(--ab-color-text-on-primary)',
+                        fill: 'var(--ab-color-primary-foreground)',
                     } }), ' ', this.props.moduleInfo.FriendlyName] }));
     }
 }

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

@@ -3,6 +3,7 @@ import { ValueSelector } from '../ValueSelector';
 import { useAdaptable } from '../../AdaptableContext';
 import { useMemo, useCallback } from 'react';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Layout/Wizard/sections/layoutWizardColumns';
 export const ModuleValueSelector = (props) => {
     const { options, value, onChange, ...valueSelectorProps } = props;
     const adaptable = useAdaptable();
@@ -34,5 +35,5 @@ export const ModuleValueSelector = (props) => {
         return (module.toLowerCase().includes(searchText.toLowerCase()) ||
             withSpaces.toLowerCase().includes(searchText.toLowerCase()));
     }, []);
-    return (_jsx(ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, showFilterInput: true, filter: moduleFilter, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
+    return (_jsx(ValueSelector, { ...valueSelectorProps, compact: true, options: sortedOptions, value: value, onChange: onChange, showFilterInput: true, filter: moduleFilter, filterPlaceholder: "Search...", compactHeaderClassName: LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", optionClassName: LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
 };

package/src/View/Components/NewScopeComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState } from 'react';
 import Radio from '../../components/Radio';
@@ -6,12 +6,10 @@ import { CheckBox } from '../../components/CheckBox';
 import { Tabs } from '../../components/Tabs';
 import { SummaryText } from '../Wizard/OnePageAdaptableWizard';
 import { NewColumnSelector } from './ColumnSelector';
-import { AdaptableFormControlTextClear } from './Forms/AdaptableFormControlTextClear';
 import { useAdaptable } from '../AdaptableContext';
 import { getColumnTypeFriendlyName } from '../../AdaptableState/Common/AdaptableColumn';
-import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { Box, Flex } from '../../components/Flex';
-import { TagList } from '../../components/Tag/Tag';
+import { ScopeSummaryTags } from '../Wizard/scopeSummaryTags';
 export const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
@@ -43,14 +41,11 @@ const DATA_TYPES_MAP = {
         value: 'boolean',
     },
 };
-const renderDataTypeLabel = (c) => {
-    return 'DataType: ' + StringExtensions.CapitaliseFirstLetter(c);
-};
 export const renderScopeSummary = (scope, labels) => {
     const adaptable = useAdaptable();
     const scopeApi = adaptable.api.columnScopeApi;
     const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsx(SummaryText, { className: "twa:mb-0", children: scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null }) }), _jsx(Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: [_jsx(SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '', children: labels.scopeColumns }), columnsInScope.length ? (_jsx(TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), _jsx(Box, { children: 'DataTypes' in scope ? (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: labels.scopeDataTypes }), _jsx(TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) })] })) : null })] }));
+    return (_jsxs(_Fragment, { children: [scopeApi.scopeIsAll(scope) ? (_jsxs(Box, { children: [_jsx(SummaryText, { className: "twa:mb-2", children: labels.scopeWholeRow }), _jsx(ScopeSummaryTags, { scope: scope })] })) : null, 'ColumnIds' in scope ? (_jsxs(Box, { className: "twa:overflow-hidden", children: [_jsx(SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '', children: labels.scopeColumns }), _jsx(ScopeSummaryTags, { scope: scope })] })) : null, 'DataTypes' in scope ? (_jsxs(Box, { children: [_jsx(Box, { className: "twa:text-2 twa:mb-2", children: labels.scopeDataTypes }), _jsx(ScopeSummaryTags, { scope: scope })] })) : null, 'ColumnTypes' in scope ? (_jsx(Box, { children: _jsx(ScopeSummaryTags, { scope: scope }) })) : null] }));
 };
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
 export const NewScopeComponent = (props) => {
@@ -119,7 +114,7 @@ export const NewScopeComponent = (props) => {
     const hasColumnTypes = React.useMemo(() => {
         return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return (_jsxs(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged, children: [props.hideWholeRow ? null : (_jsx(Tabs.Tab, { value: "Row", children: _jsx(Radio, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1, children: "All Columns" }) })), !props.disableColumns && (_jsx(Tabs.Tab, { value: "Column", children: _jsx(Radio, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1, children: "Selected Columns" }) })), !props.disableDataTypes && (_jsx(Tabs.Tab, { value: "DataType", children: _jsx(Radio, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1, children: "Data Types" }) })), hasColumnTypes && (_jsx(Tabs.Tab, { value: "ColumnType", children: _jsx(Radio, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1, children: "Column Types" }) })), props.hideWholeRow ? null : (_jsx(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope", children: _jsx(Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: props.descriptions.rowScope }) })), !props.disableColumns && (_jsxs(Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Box, { className: "twa:text-2", children: props.descriptions.columnScope }), _jsx(Box, { className: "twa:flex-3" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), _jsx(Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1", children: _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged }) })] })), !props.disableDataTypes && (_jsx(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope", children: _jsxs(Box, { children: [props.descriptions.dataTypeScope && (_jsx(Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2", children: props.descriptions.dataTypeScope })), _jsx(Flex, { flexDirection: "column", children: dataTypeOptions.map((dataTypeOption) => (_jsx(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, checked: !!dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value), children: dataTypeOption.label }, dataTypeOption.value))) })] }) })), hasColumnTypes && (_jsx(Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope", children: _jsx(Box, { children: _jsx(Flex, { flexDirection: "column", children: api.columnApi.getColumnTypes()?.map?.((columnType) => (_jsx(CheckBox, { "data-name": "scope", "data-value": columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
+    return (_jsxs(Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged, children: [props.hideWholeRow ? null : (_jsx(Tabs.Tab, { value: "Row", children: _jsx(Radio, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1, children: "All Columns" }) })), !props.disableColumns && (_jsx(Tabs.Tab, { value: "Column", children: _jsx(Radio, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1, children: "Selected Columns" }) })), !props.disableDataTypes && (_jsx(Tabs.Tab, { value: "DataType", children: _jsx(Radio, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1, children: "Data Types" }) })), hasColumnTypes && (_jsx(Tabs.Tab, { value: "ColumnType", children: _jsx(Radio, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1, children: "Column Types" }) })), props.hideWholeRow ? null : (_jsx(Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope", children: _jsx(Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: props.descriptions.rowScope }) })), !props.disableColumns && (_jsx(Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto", children: _jsx(Flex, { flexDirection: "column", className: "twa:overflow-hidden twa:p-2 twa:flex-1 twa:min-h-0 twa:h-full", children: _jsx(NewColumnSelector, { compactColumnList: true, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged }) }) })), !props.disableDataTypes && (_jsx(Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope", children: _jsxs(Box, { children: [props.descriptions.dataTypeScope && (_jsx(Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2", children: props.descriptions.dataTypeScope })), _jsx(Flex, { flexDirection: "column", children: dataTypeOptions.map((dataTypeOption) => (_jsx(CheckBox, { "data-name": "scope", "data-value": dataTypeOption.value, checked: !!dataTypesInScope && dataTypesInScope.includes(dataTypeOption.value), onChange: (checked) => onCheckBoxDataTypeChecked(checked, dataTypeOption.value), children: dataTypeOption.label }, dataTypeOption.value))) })] }) })), hasColumnTypes && (_jsx(Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope", children: _jsx(Box, { children: _jsx(Flex, { flexDirection: "column", children: api.columnApi.getColumnTypes()?.map?.((columnType) => (_jsx(CheckBox, { "data-name": "scope", "data-value": columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
                                 let columnTypes = [].concat('ColumnTypes' in props.scope ? props.scope.ColumnTypes : []);
                                 if (checked) {
                                     columnTypes.push(columnType);

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

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
 import * as GeneralConstants from '../../../../Utilities/Constants/GeneralConstants';
 import TopBar from './TopBar';
 import join from '../../../../components/utils/join';
+import { cn } from '../../../../lib/utils';
 import { Navigation } from './Navigation';
 import PopupContext from './PopupContext';
 import { AdaptablePopupBody } from './AdaptablePopupBody';
 import { useAdaptable } from '../../../AdaptableContext';
 import { CustomSettingsPanelView } from './CustomSettingsPanelView';
 import { useMenuItems } from './useMenuItems';
+import { isSettingsPanelNavigationItem } from './settingsPanelNavigationTypes';
 import { resolveContainerElement } from '../../../../Utilities/resolveContainerElement';
 import { AdaptablePopupDialog } from './AdaptablePopupDialog';
 import { Box } from '../../../../components/Flex';
@@ -29,7 +30,7 @@ export const AdaptablePopup = (props) => {
     let moduleViewContent = null;
     let activeItem = null;
     let accessLevel = GeneralConstants.ACCESS_LEVEL_FULL;
-    const firstMenuItem = menuItems.find((menuItem) => menuItem !== '-');
+    const firstMenuItem = menuItems.find(isSettingsPanelNavigationItem)?.menuItem;
     const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
     let componentName = props.componentName;
@@ -67,7 +68,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: cn('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 })] })] }) }));
+                        : ''), children: [!isStandalone && (_jsx(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), _jsx(Box, { className: cn('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/AdaptablePopupDialog.js

@@ -5,7 +5,7 @@ import Dialog from '../../../../components/Dialog';
 import { SettingsPanelSet } from '../../../../Redux/ActionsReducers/InternalRedux';
 import { useAdaptable } from '../../../AdaptableContext';
 import { getActionPanelSize, getMiddlePosition, getSettingsPanelSize } from '../Utilities';
-import clsx from 'clsx';
+import { cn } from '../../../../lib/utils';
 const WindowDialog = (props) => {
     const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
     const adaptable = useAdaptable();
@@ -34,11 +34,11 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return (_jsx(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: clsx('twa:p-0 twa:h-full', className) }));
+    return (_jsx(Dialog, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: cn('twa:p-0 twa:h-full', className) }));
 };
 const PopupDialog = (props) => {
     const { style, className, onHide, children, ...dialogProps } = props;
-    return (_jsx(Dialog, { fixed: false, style: props.style, className: clsx('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, children: children }));
+    return (_jsx(Dialog, { fixed: false, style: props.style, className: cn('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, children: children }));
 };
 export const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
@@ -51,7 +51,7 @@ export const AdaptablePopupDialog = (props) => {
     }
     else {
         if (isActionModule) {
-            return (_jsx(Dialog, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: clsx('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, children: children }));
+            return (_jsx(Dialog, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: cn('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, children: children }));
         }
         const modalStyle = {
             ...style,

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/DropdownButton';
 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)) {
@@ -104,7 +104,7 @@ export const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: isAtLeastOneAbObjectActive ? 'neutral' : 'success', variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Unsuspend All' }));
+        suspendButton = (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: () => handleSuspendUnsuspendAll(), tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: props.accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' }));
     }
     const handleWizardClose = () => {
         setAbObjectType(null);

package/src/View/Components/Popups/AdaptablePopup/Navigation.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { AdaptableApi, AdaptableMenuItem } from '../../../../../types';
+import { AdaptableApi } from '../../../../../types';
 import { CustomSettingsPanel } from '../../../../AdaptableOptions/SettingsPanelOptions';
+import { SettingsPanelNavigationEntry } from './settingsPanelNavigationTypes';
 interface NavigationProps {
     api: AdaptableApi;
-    menuItems: (AdaptableMenuItem | '-')[];
+    menuItems: SettingsPanelNavigationEntry[];
     activeItem: string;
     customSettingsPanels?: CustomSettingsPanel[];
 }