@adaptabletools/adaptable-cjs 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -5,14 +5,38 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ValueSelector_1 = require("../ValueSelector");
 const ColumnGroupTag_1 = require("../ColumnGroupTag");
+const utils_1 = require("../../../lib/utils");
+const wizardColumnListStyles_1 = require("../wizardColumnListStyles");
 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 ? wizardColumnListStyles_1.WIZARD_COLUMN_LIST_HEADER_CLASS : undefined);
+    const effectiveCompactFilterClassName = compactFilterClassName ??
+        (useCompactColumnList ? wizardColumnListStyles_1.WIZARD_COLUMN_LIST_SEARCH_CLASS : undefined);
+    const effectiveOptionClassName = optionClassName ??
+        (useCompactColumnList
+            ? singleSelect
+                ? wizardColumnListStyles_1.WIZARD_COLUMN_LIST_OPTION_CLASS_SINGLE_SELECT
+                : wizardColumnListStyles_1.WIZARD_COLUMN_LIST_OPTION_CLASS
+            : undefined);
+    const effectiveHideShowSelectedOnly = hideShowSelectedOnly ?? (useCompactColumnList ? singleSelect : undefined);
     const filterFn = (0, react_1.useMemo)(() => {
-        return columnFilterText
-            ? (c) => c.friendlyName.toLowerCase().indexOf(columnFilterText.toLowerCase()) != -1
-            : null;
-    }, [columnFilterText]);
-    return ((0, jsx_runtime_1.jsx)(ValueSelector_1.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 ((0, jsx_runtime_1.jsx)(ValueSelector_1.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: (0, utils_1.cn)(useCompactColumnList && 'twa:h-full', className), onChange: (colIds) => {
             if (singleSelect) {
                 onChange(colIds.length ? [colIds.pop()] : []);
             }

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

@@ -8,7 +8,7 @@ const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/Help
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
 const DocumentationLinkConstants_1 = require("../../../../Utilities/Constants/DocumentationLinkConstants");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
+const ButtonNew_1 = require("../../Buttons/ButtonNew");
 const Tag_1 = require("../../../../components/Tag");
 const EntityRulePredicateEditor_1 = require("./EntityRulePredicateEditor");
 const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
@@ -61,7 +61,7 @@ const EntityRulePredicatesEditor = (props) => {
     };
     const scopeString = (0, getScopeViewItems_1.getScopeViewItems)(props.data.Scope, api).values.join(', ');
     const enablePredicateColumnId = props.enablePredicateColumnId ?? true;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mb-2", children: props.descriptions.selectPredicate }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, icon: "plus", variant: "raised", children: "Add Predicate" })] }), enablePredicateColumnId && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", children: "Create Predicate Rule(s) using" }), (0, jsx_runtime_1.jsxs)(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled, children: ["Active Column: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mx-1", children: scopeString || 'Not Defined' }), ' '] }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-between", className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mb-2", children: props.descriptions.selectPredicate }), (0, jsx_runtime_1.jsx)(ButtonNew_1.ButtonNew, { disabled: !props.data.Rule?.Predicates?.length, onClick: handleAddNewPredicate, children: "Add Predicate" })] }), enablePredicateColumnId && ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "ab-EntityRulePredicateEditor-ScopeTypeSelector twa:p-2 twa:mb-2", flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-2", children: "Create Predicate Rule(s) using" }), (0, jsx_runtime_1.jsxs)(Radio_1.default, { "data-name": "entity-scope", onClick: () => handlePredicateScopeTypeChange(false), className: "twa:mr-3", checked: !columnPredicateEnabled, children: ["Active Column: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mx-1", children: scopeString || 'Not Defined' }), ' '] }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "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

@@ -166,7 +166,7 @@ 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: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
+        value: selectedColumnValues, "data-name": "Select Values", primaryKey: 'value', isLoading: props.isLoading, onOpenChange: onOpenChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) })) : ((0, jsx_runtime_1.jsx)(Combobox_1.GridFilterCombobox, { disabled: props.disabled, ...selectProps, onOpenChange: onOpenChange, items: options, value: value, isLoading: props.isLoading, onValueChange: props.onChange, showClear: (0, columnFilterLocation_1.isEmbeddedColumnFilterLocation)(location) }, "select"));
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, join_1.default)(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,11 +9,13 @@ const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWr
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const twMerge_1 = require("../../../twMerge");
+const utils_1 = require("../../../lib/utils");
 exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
     let closeButtonTooltip = props.value ? 'Clear' : null;
     const inputRef = React.useRef(null);
     const { focusOnClear = true } = props;
-    return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: props.inputClassName, ref: (r) => {
+    const clearDisabled = StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString());
+    return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { onClick: props.onClick, className: (0, twMerge_1.twMerge)('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: (0, utils_1.cn)('twa:min-w-0 twa:flex-1', props.inputClassName), ref: (r) => {
                     inputRef.current = r;
                     if (!ref) {
                         return;
@@ -35,5 +37,5 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                             input.focus();
                         }
                     });
-                }, disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(props.value.toString()) })] }));
+                }, disabled: clearDisabled })] }));
 });

package/src/View/Components/ModuleProfile.js

@@ -8,7 +8,7 @@ const icons_1 = require("../../components/icons");
 class ModuleProfile extends React.Component {
     render() {
         return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(icons_1.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

@@ -7,6 +7,7 @@ const ValueSelector_1 = require("../ValueSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const react_1 = require("react");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const layoutWizardColumns_1 = require("../../Layout/Wizard/sections/layoutWizardColumns");
 const ModuleValueSelector = (props) => {
     const { options, value, onChange, ...valueSelectorProps } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -38,6 +39,6 @@ const ModuleValueSelector = (props) => {
         return (module.toLowerCase().includes(searchText.toLowerCase()) ||
             withSpaces.toLowerCase().includes(searchText.toLowerCase()));
     }, []);
-    return ((0, jsx_runtime_1.jsx)(ValueSelector_1.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 ((0, jsx_runtime_1.jsx)(ValueSelector_1.ValueSelector, { ...valueSelectorProps, compact: true, options: sortedOptions, value: value, onChange: onChange, showFilterInput: true, filter: moduleFilter, filterPlaceholder: "Search...", compactHeaderClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, compactFilterClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, optionLayout: "label-beside-checkbox", optionClassName: layoutWizardColumns_1.LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
 };
 exports.ModuleValueSelector = ModuleValueSelector;

package/src/View/Components/NewScopeComponent.js

@@ -10,12 +10,10 @@ const CheckBox_1 = require("../../components/CheckBox");
 const Tabs_1 = require("../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../Wizard/OnePageAdaptableWizard");
 const ColumnSelector_1 = require("./ColumnSelector");
-const AdaptableFormControlTextClear_1 = require("./Forms/AdaptableFormControlTextClear");
 const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableColumn_1 = require("../../AdaptableState/Common/AdaptableColumn");
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const Flex_1 = require("../../components/Flex");
-const Tag_1 = require("../../components/Tag/Tag");
+const scopeSummaryTags_1 = require("../Wizard/scopeSummaryTags");
 const isScopeValid = ({ Scope }) => {
     const result = [];
     if (!Scope) {
@@ -48,14 +46,11 @@ const DATA_TYPES_MAP = {
         value: 'boolean',
     },
 };
-const renderDataTypeLabel = (c) => {
-    return 'DataType: ' + StringExtensions_1.default.CapitaliseFirstLetter(c);
-};
 const renderScopeSummary = (scope, labels) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const scopeApi = adaptable.api.columnScopeApi;
     const columnsInScope = scopeApi.getColumnsInScope(scope);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.SummaryText, { className: "twa:mb-0", children: scopeApi.scopeIsAll(scope) ? labels.scopeWholeRow : null }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:overflow-hidden", children: 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '', children: labels.scopeColumns }), columnsInScope.length ? ((0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: columnsInScope.map((c) => c.friendlyName) })) : null] })) : null }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mb-2", children: labels.scopeDataTypes }), (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: scope.DataTypes.map((dataType) => renderDataTypeLabel(dataType)) })] })) : null })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scopeApi.scopeIsAll(scope) ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.SummaryText, { className: "twa:mb-2", children: labels.scopeWholeRow }), (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: scope })] })) : null, 'ColumnIds' in scope ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:overflow-hidden", children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.SummaryText, { className: columnsInScope.length ? 'twa:mb-2' : '', children: labels.scopeColumns }), (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: scope })] })) : null, 'DataTypes' in scope ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:mb-2", children: labels.scopeDataTypes }), (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: scope })] })) : null, 'ColumnTypes' in scope ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(scopeSummaryTags_1.ScopeSummaryTags, { scope: scope }) })) : null] }));
 };
 exports.renderScopeSummary = renderScopeSummary;
 const DATA_TYPES_OPTIONS = Object.values(DATA_TYPES_MAP);
@@ -125,7 +120,7 @@ const NewScopeComponent = (props) => {
     const hasColumnTypes = React.useMemo(() => {
         return api.columnApi.getColumnTypes()?.length > 0;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged, children: [props.hideWholeRow ? null : ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "Row", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1, children: "All Columns" }) })), !props.disableColumns && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "Column", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1, children: "Selected Columns" }) })), !props.disableDataTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "DataType", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1, children: "Data Types" }) })), hasColumnTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ColumnType", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1, children: "Column Types" }) })), props.hideWholeRow ? null : ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: props.descriptions.rowScope }) })), !props.disableColumns && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2", children: props.descriptions.columnScope }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-3" }), (0, jsx_runtime_1.jsx)(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:overflow-hidden twa:pl-2 twa:flex-1", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { columnFilterText: columnsSearchText, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged }) })] })), !props.disableDataTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [props.descriptions.dataTypeScope && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2", children: props.descriptions.dataTypeScope })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: dataTypeOptions.map((dataTypeOption) => ((0, jsx_runtime_1.jsx)(CheckBox_1.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 && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: api.columnApi.getColumnTypes()?.map?.((columnType) => ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "scope", "data-value": columnType, checked: 'ColumnTypes' in props.scope && props.scope.ColumnTypes?.includes(columnType), onChange: (checked) => {
+    return ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { "data-name": 'scope-component', className: "ab-ScopeComponent", value: activeTab, style: { height: '100%', ...props.style }, onValueChange: onTabChanged, children: [props.hideWholeRow ? null : ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "Row", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", checked: activeTab == 'Row', tabIndex: -1, children: "All Columns" }) })), !props.disableColumns && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "Column", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "Column", checked: activeTab == 'Column', tabIndex: -1, children: "Selected Columns" }) })), !props.disableDataTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "DataType", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "DataType", checked: activeTab == 'DataType', tabIndex: -1, children: "Data Types" }) })), hasColumnTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: "ColumnType", children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: "ColumnType", checked: activeTab == 'ColumnType', tabIndex: -1, children: "Column Types" }) })), props.hideWholeRow ? null : ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "Row", style: { flex: 'none' }, "data-name": "row-scope", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:text-2", children: props.descriptions.rowScope }) })), !props.disableColumns && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "Column", "data-name": "column-scope", className: "twa:p-0 twa:flex-1 twa:overflow-auto", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:overflow-hidden twa:p-2 twa:flex-1 twa:min-h-0 twa:h-full", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.NewColumnSelector, { compactColumnList: true, allowReorder: false, availableColumns: scopeColumns, selected: scopeApi.getColumnIdsInScope(props.scope) ?? [], onChange: onColumnsSelectedChanged }) }) })), !props.disableDataTypes && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "DataType", style: { flex: 'none' }, "data-name": "datatype-scope", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [props.descriptions.dataTypeScope && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:pl-0 twa:mb-2 twa:text-2", children: props.descriptions.dataTypeScope })), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: dataTypeOptions.map((dataTypeOption) => ((0, jsx_runtime_1.jsx)(CheckBox_1.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 && ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "ColumnType", className: "twa:flex-none", "data-name": "column-type-scope", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: api.columnApi.getColumnTypes()?.map?.((columnType) => ((0, jsx_runtime_1.jsx)(CheckBox_1.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

@@ -3,16 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptablePopup = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const GeneralConstants = tslib_1.__importStar(require("../../../../Utilities/Constants/GeneralConstants"));
 const TopBar_1 = tslib_1.__importDefault(require("./TopBar"));
 const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
+const utils_1 = require("../../../../lib/utils");
 const Navigation_1 = require("./Navigation");
 const PopupContext_1 = tslib_1.__importDefault(require("./PopupContext"));
 const AdaptablePopupBody_1 = require("./AdaptablePopupBody");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const CustomSettingsPanelView_1 = require("./CustomSettingsPanelView");
 const useMenuItems_1 = require("./useMenuItems");
+const settingsPanelNavigationTypes_1 = require("./settingsPanelNavigationTypes");
 const resolveContainerElement_1 = require("../../../../Utilities/resolveContainerElement");
 const AdaptablePopupDialog_1 = require("./AdaptablePopupDialog");
 const Flex_1 = require("../../../../components/Flex");
@@ -33,7 +34,7 @@ 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(settingsPanelNavigationTypes_1.isSettingsPanelNavigationItem)?.menuItem;
     const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
     let componentName = props.componentName;
@@ -71,8 +72,8 @@ const AdaptablePopup = (props) => {
                     props.onHide();
                 }
             },
-        }, children: (0, jsx_runtime_1.jsxs)(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && (0, jsx_runtime_1.jsx)(TopBar_1.default, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('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: (0, jsx_runtime_1.jsxs)(AdaptablePopupDialog_1.AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer, children: [!isStandalone && (0, jsx_runtime_1.jsx)(TopBar_1.default, { icon: settingsPanelOptions.icon, children: settingsPanelTitle }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.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 && ((0, jsx_runtime_1.jsx)(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('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 && ((0, jsx_runtime_1.jsx)(Navigation_1.Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.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 })] })] }) }));
 };
 exports.AdaptablePopup = AdaptablePopup;

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

@@ -9,7 +9,7 @@ const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"
 const InternalRedux_1 = require("../../../../Redux/ActionsReducers/InternalRedux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const Utilities_1 = require("../Utilities");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../../../lib/utils");
 const WindowDialog = (props) => {
     const { onChange, style, baseClassName, className, isActionModule, settingsPanelOptionsKey, onHide, ...dialogProps } = props;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -38,11 +38,11 @@ const WindowDialog = (props) => {
         position: popupSettings.position,
         onChange: handleWindowSettings,
     };
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: (0, clsx_1.default)('twa:p-0 twa:h-full', className) }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { windowModal: true, fixed: false, windowModalProps: windowModalProps, style: props.style, onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, className: (0, utils_1.cn)('twa:p-0 twa:h-full', className) }));
 };
 const PopupDialog = (props) => {
     const { style, className, onHide, children, ...dialogProps } = props;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { fixed: false, style: props.style, className: (0, clsx_1.default)('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { fixed: false, style: props.style, className: (0, utils_1.cn)('twa:p-0 twa:h-[90vh] twa:w-[90vw]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, ...dialogProps, children: children }));
 };
 const AdaptablePopupDialog = (props) => {
     const { isActionModule, style, friendlyName, baseClassName, className, children, onHide, isWindowModal, modalContainer, } = props;
@@ -55,7 +55,7 @@ const AdaptablePopupDialog = (props) => {
     }
     else {
         if (isActionModule) {
-            return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: (0, clsx_1.default)('twa:p-0 twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, children: children }));
+            return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800 }, className: (0, utils_1.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

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const EmptyContent_1 = tslib_1.__importDefault(require("../../../../components/EmptyContent"));
 const icons_1 = require("../../../../components/icons");
 const AdaptableObjectList_1 = require("../../AdaptableObjectList");
@@ -21,6 +20,7 @@ const useRerender_1 = require("../../../../components/utils/useRerender");
 const Flex_1 = require("../../../../components/Flex");
 const Panel_1 = tslib_1.__importDefault(require("../../../../components/Panel"));
 const Tabs_1 = require("../../../../components/Tabs");
+const DropdownButton_1 = require("../../../../components/DropdownButton");
 const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.
@@ -84,7 +84,7 @@ const AdaptablePopupModuleView = (props) => {
                 label: abObjectType.label ?? abObjectType.name,
             };
         });
-        newButton = ((0, jsx_runtime_1.jsxs)(DropdownButton_1.default, { tone: "accent", variant: "raised", columns: ['label'], items: items, tooltip: toolTipText, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }), " New"] }));
+        newButton = ((0, jsx_runtime_1.jsxs)(DropdownButton_1.NewDropdownButton, { showDivider: false, tone: "accent", variant: "raised", items: items, tooltip: toolTipText, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus" }), " New"] }));
     }
     else if (!moduleViewProperties.hideNewButton &&
         (EditWizard || moduleViewProperties.onOpenEditPopup)) {
@@ -108,7 +108,7 @@ const AdaptablePopupModuleView = (props) => {
                 dispatch(unsuspendAllAction);
             }
         };
-        suspendButton = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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 = ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { 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[];
 }

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

@@ -6,10 +6,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
+const utils_1 = require("../../../../lib/utils");
 const twUtils_1 = require("../../../../components/twUtils");
 const AdaptableContext_1 = require("../../../AdaptableContext");
+const useMenuItems_1 = require("./useMenuItems");
+const settingsPanelNavigationTypes_1 = require("./settingsPanelNavigationTypes");
 const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
 const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
     const ref = (0, react_1.useRef)(null);
@@ -18,9 +20,9 @@ const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, sh
             ref.current?.focus();
         }
     }, [isActive]);
-    return ((0, jsx_runtime_1.jsx)("li", { className: (0, clsx_1.default)(navigationItemClassName, {
+    return ((0, jsx_runtime_1.jsx)("li", { className: (0, utils_1.cn)(navigationItemClassName, {
             [`${navigationItemClassName}--active`]: isActive,
-        }), children: (0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", className: (0, clsx_1.default)(`${navigationItemClassName}__Button ${twUtils_1.targetOwn.focusOutline}`, {
+        }), children: (0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", className: (0, utils_1.cn)(`${navigationItemClassName}__Button ${twUtils_1.targetOwn.focusOutline}`, {
                 'twa:flex twa:flex-row twa:items-center twa:gap-2': 'layout flex',
                 [`twa:bg-transparent`]: !isActive,
                 'twa:bg-accent twa:text-accentlight': isActive,
@@ -28,55 +30,63 @@ const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, sh
                 'twa:rounded-standard': true,
             }), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1, children: [showModuleIcons && menuItem.icon && ((0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })), customIcon ? (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }) : null, menuItem.label] }) }));
 };
+const NavigationHeader = ({ label, showDividerAbove }) => ((0, jsx_runtime_1.jsxs)("li", { className: (0, utils_1.cn)(navigationItemClassName, `${navigationItemClassName}--header`, 'twa:list-none'), "aria-hidden": "true", children: [showDividerAbove ? ((0, jsx_runtime_1.jsx)("span", { className: `${navigationItemClassName}__HeaderDivider`, role: "separator", "aria-hidden": "true" })) : null, (0, jsx_runtime_1.jsx)("span", { className: `${navigationItemClassName}__Header`, children: label })] }));
+const findNavigationItemIndex = (entries, activeItem) => entries.findIndex((entry) => (0, settingsPanelNavigationTypes_1.isSettingsPanelNavigationItem)(entry) &&
+    (entry.menuItem.category === activeItem || entry.menuItem.label === activeItem));
+const getAdjacentNavigationItem = (entries, currentIndex, direction) => {
+    let index = currentIndex + direction;
+    while (index >= 0 && index < entries.length) {
+        const entry = entries[index];
+        if ((0, settingsPanelNavigationTypes_1.isSettingsPanelNavigationItem)(entry)) {
+            return entry.menuItem;
+        }
+        index += direction;
+    }
+    const navigationItems = (0, useMenuItems_1.getSettingsPanelNavigationItems)(entries);
+    if (!navigationItems.length) {
+        return null;
+    }
+    return direction === -1 ? navigationItems[navigationItems.length - 1] : navigationItems[0];
+};
 const Navigation = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const dispatch = (0, react_redux_1.useDispatch)();
     const makeActive = (menuItem) => {
         dispatch(menuItem.reduxAction);
     };
-    const getMenuItemForDirection = (direction) => {
-        const currentIndex = props.menuItems.findIndex((item) => item !== '-' && (item.category === props.activeItem || item.label === props.activeItem));
-        let foundMenuItem = null;
-        if (direction === -1) {
-            let candidate = props.menuItems[currentIndex - 1] !== '-'
-                ? props.menuItems[currentIndex - 1]
-                : props.menuItems[currentIndex - 2];
-            foundMenuItem = candidate ? candidate : props.menuItems[props.menuItems.length - 1];
-        }
-        else {
-            let candidate = props.menuItems[currentIndex + 1] !== '-'
-                ? props.menuItems[currentIndex + 1]
-                : props.menuItems[currentIndex + 2];
-            foundMenuItem = candidate ? candidate : props.menuItems[0];
-        }
-        return foundMenuItem === '-' ? null : foundMenuItem;
-    };
-    const dispatch = (0, react_redux_1.useDispatch)();
     const handleKeyPress = React.useCallback((event) => {
         const { code } = event;
         if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'Home' || code === 'End') {
             event.preventDefault();
             event.stopPropagation();
+            const navigationItems = (0, useMenuItems_1.getSettingsPanelNavigationItems)(props.menuItems);
+            if (!navigationItems.length) {
+                return;
+            }
             let nextMenuItem = null;
             if (code === 'Home') {
-                nextMenuItem = props.menuItems[0];
+                nextMenuItem = navigationItems[0];
             }
             else if (code === 'End') {
-                nextMenuItem = props.menuItems[props.menuItems.length - 1];
+                nextMenuItem = navigationItems[navigationItems.length - 1];
             }
             else {
-                nextMenuItem = getMenuItemForDirection(event.code === 'ArrowUp' ? -1 : 1);
+                const currentIndex = findNavigationItemIndex(props.menuItems, props.activeItem);
+                nextMenuItem = getAdjacentNavigationItem(props.menuItems, currentIndex, code === 'ArrowUp' ? -1 : 1);
             }
             if (nextMenuItem) {
                 makeActive(nextMenuItem);
             }
         }
     }, [props.activeItem, props.menuItems]);
-    return ((0, jsx_runtime_1.jsx)("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1, children: (0, jsx_runtime_1.jsx)("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col", onKeyDown: handleKeyPress, children: props.menuItems.map((menuItem, index) => {
-                if (menuItem === '-') {
-                    return ((0, jsx_runtime_1.jsx)("li", { className: `${navigationItemClassName}__Separator` }, `separator-${index}`));
+    const firstHeaderIndex = props.menuItems.findIndex((entry) => entry.type === 'header');
+    return ((0, jsx_runtime_1.jsx)("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1, children: (0, jsx_runtime_1.jsx)("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col", onKeyDown: handleKeyPress, children: props.menuItems.map((entry, index) => {
+                if (entry.type === 'header') {
+                    return ((0, jsx_runtime_1.jsx)(NavigationHeader, { label: entry.label, showDividerAbove: index !== firstHeaderIndex }, `header-${entry.label}-${index}`));
                 }
+                const menuItem = entry.menuItem;
                 const isActive = props.activeItem === menuItem.category || menuItem.label === props.activeItem;
-                let customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
+                const customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
                 const dataName = menuItem.category === 'CustomSettingsPanel'
                     ? `CSP-${menuItem.label}`
                     : menuItem.category ?? menuItem.label;

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PopupPanel = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const ButtonInfo_1 = require("../../Buttons/ButtonInfo");
 const Flex_1 = require("../../../../components/Flex");
+const utils_1 = require("../../../../lib/utils");
 const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${baseClassName}__Header twa:flex`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-0", "data-name": "space-before" }), (0, jsx_runtime_1.jsx)("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                                ) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), props.button] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex-1 twa:flex twa:flex-col twa:gap-3 twa:p-1', props.className, baseClassName, props.scrollable === false ? 'twa:overflow-hidden' : 'twa:overflow-auto'), children: [(0, jsx_runtime_1.jsxs)("div", { className: `${baseClassName}__Header twa:flex`, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-0", "data-name": "space-before" }), (0, jsx_runtime_1.jsx)("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && ((0, jsx_runtime_1.jsx)(ButtonInfo_1.ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                                ) }))] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1" }), props.button] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
 };
 exports.PopupPanel = PopupPanel;

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

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopBar = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const AdaptableIconComponent_1 = require("../../AdaptableIconComponent");
 const Flex_1 = require("../../../../components/Flex");
+const utils_1 = require("../../../../lib/utils");
 const baseClassName = 'ab-Adaptable-Popup__TopBar';
 const TopBar = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -22,7 +21,7 @@ const TopBar = (props) => {
     else if (typeof props.icon === 'object') {
         icon = (0, jsx_runtime_1.jsx)(AdaptableIconComponent_1.AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
     }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, 'twa:font-medium twa:p-3', 'twa:flex twa:flex-row twa:items-center twa:flex-0 twa:gap-2', 'twa:bg-(--ab-dashboard-header__background) twa:text-(--ab-dashboard-header__color)', 'twa:rounded-tl-standard twa:rounded-tr-standard'), children: [icon, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Title`, children: props.children })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: (0, utils_1.cn)(baseClassName, 'twa:font-medium twa:p-3', 'twa:flex twa:flex-row twa:items-center twa:flex-0 twa:gap-2', 'twa:bg-(--ab-dashboard-header__background) twa:text-(--ab-dashboard-header__color)', 'twa:rounded-tl-standard twa:rounded-tr-standard'), children: [icon, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${baseClassName}__Title`, children: props.children })] }));
 };
 exports.TopBar = TopBar;
 exports.default = exports.TopBar;

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

@@ -0,0 +1,11 @@
+import { AdaptableMenuItem } from '../../../../types';
+export type SettingsPanelNavigationHeaderEntry = {
+    type: 'header';
+    label: string;
+};
+export type SettingsPanelNavigationItemEntry = {
+    type: 'item';
+    menuItem: AdaptableMenuItem;
+};
+export type SettingsPanelNavigationEntry = SettingsPanelNavigationHeaderEntry | SettingsPanelNavigationItemEntry;
+export declare const isSettingsPanelNavigationItem: (entry: SettingsPanelNavigationEntry) => entry is SettingsPanelNavigationItemEntry;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSettingsPanelNavigationItem = void 0;
+const isSettingsPanelNavigationItem = (entry) => entry.type === 'item';
+exports.isSettingsPanelNavigationItem = isSettingsPanelNavigationItem;

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

@@ -1,2 +1,4 @@
 import { AdaptableMenuItem } from '../../../../../types';
-export declare const useMenuItems: () => (AdaptableMenuItem | "-")[];
+import { SettingsPanelNavigationEntry } from './settingsPanelNavigationTypes';
+export declare const useMenuItems: () => SettingsPanelNavigationEntry[];
+export declare const getSettingsPanelNavigationItems: (entries: SettingsPanelNavigationEntry[]) => AdaptableMenuItem[];