@adaptabletools/adaptable 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

@@ -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

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

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

@@ -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[];
 }

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

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
 import { useDispatch } from 'react-redux';
-import clsx from 'clsx';
 import { AdaptableIconComponent } from '../../AdaptableIconComponent';
+import { cn } from '../../../../lib/utils';
 import { targetOwn } from '../../../../components/twUtils';
 import { useAdaptable } from '../../../AdaptableContext';
+import { getSettingsPanelNavigationItems } from './useMenuItems';
+import { isSettingsPanelNavigationItem, } from './settingsPanelNavigationTypes';
 const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
 const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
     const ref = useRef(null);
@@ -14,9 +16,9 @@ const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, sh
             ref.current?.focus();
         }
     }, [isActive]);
-    return (_jsx("li", { className: clsx(navigationItemClassName, {
+    return (_jsx("li", { className: cn(navigationItemClassName, {
             [`${navigationItemClassName}--active`]: isActive,
-        }), children: _jsxs("button", { ref: ref, type: "button", className: clsx(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
+        }), children: _jsxs("button", { ref: ref, type: "button", className: cn(`${navigationItemClassName}__Button ${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,
@@ -24,55 +26,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 && (_jsx(AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${navigationItemClassName}__Icon` })), customIcon ? _jsx(AdaptableIconComponent, { icon: customIcon }) : null, menuItem.label] }) }));
 };
+const NavigationHeader = ({ label, showDividerAbove }) => (_jsxs("li", { className: cn(navigationItemClassName, `${navigationItemClassName}--header`, 'twa:list-none'), "aria-hidden": "true", children: [showDividerAbove ? (_jsx("span", { className: `${navigationItemClassName}__HeaderDivider`, role: "separator", "aria-hidden": "true" })) : null, _jsx("span", { className: `${navigationItemClassName}__Header`, children: label })] }));
+const findNavigationItemIndex = (entries, activeItem) => entries.findIndex((entry) => 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 (isSettingsPanelNavigationItem(entry)) {
+            return entry.menuItem;
+        }
+        index += direction;
+    }
+    const navigationItems = getSettingsPanelNavigationItems(entries);
+    if (!navigationItems.length) {
+        return null;
+    }
+    return direction === -1 ? navigationItems[navigationItems.length - 1] : navigationItems[0];
+};
 export const Navigation = (props) => {
     const { api } = useAdaptable();
+    const dispatch = 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 = useDispatch();
     const handleKeyPress = React.useCallback((event) => {
         const { code } = event;
         if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'Home' || code === 'End') {
             event.preventDefault();
             event.stopPropagation();
+            const navigationItems = 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 (_jsx("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1, children: _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 (_jsx("li", { className: `${navigationItemClassName}__Separator` }, `separator-${index}`));
+    const firstHeaderIndex = props.menuItems.findIndex((entry) => entry.type === 'header');
+    return (_jsx("nav", { className: "ab-Adaptable-Popup__Navigation twa:overflow-auto", tabIndex: -1, children: _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 (_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,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
 import { ButtonInfo } from '../../Buttons/ButtonInfo';
 import { Box, Flex } from '../../../../components/Flex';
+import { cn } from '../../../../lib/utils';
 export const PopupPanel = (props) => {
     const baseClassName = 'ab-Adaptable-Popup__Panel';
-    return (_jsxs(Box, { className: clsx('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: [_jsxs("div", { className: `${baseClassName}__Header twa:flex`, children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-0", "data-name": "space-before" }), _jsx("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
-                                ) }))] }), _jsx(Box, { className: "twa:flex-1" }), props.button] }), _jsx(Box, { className: clsx('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
+    return (_jsxs(Box, { className: 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: [_jsxs("div", { className: `${baseClassName}__Header twa:flex`, children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-0", "data-name": "space-before" }), _jsx("div", { className: `${baseClassName}__Header__Title`, children: props.headerText }), _jsx(Box, { className: "twa:mr-2", "data-name": "space-after" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { tone: "none", variant: "text", iconSize: 24, onClick: () => window.open(props.infoLink, '_blank' // <- opens the link in a new tab or window.
+                                ) }))] }), _jsx(Box, { className: "twa:flex-1" }), props.button] }), _jsx(Box, { className: cn('twa:w-full twa:flex twa:flex-col twa:flex-1 twa:min-h-0', `${baseClassName}__Body`, props.bodyClassName), children: props.children })] }));
 };

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

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptableIconComponent } from '../../AdaptableIconComponent';
 import { Box } from '../../../../components/Flex';
+import { cn } from '../../../../lib/utils';
 const baseClassName = 'ab-Adaptable-Popup__TopBar';
 export const TopBar = (props) => {
     const adaptable = useAdaptable();
@@ -18,6 +18,6 @@ export const TopBar = (props) => {
     else if (typeof props.icon === 'object') {
         icon = _jsx(AdaptableIconComponent, { icon: props.icon, iconClassName: iconClassName });
     }
-    return (_jsxs(Box, { className: clsx(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, _jsx(Box, { className: `${baseClassName}__Title`, children: props.children })] }));
+    return (_jsxs(Box, { className: 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, _jsx(Box, { className: `${baseClassName}__Title`, children: props.children })] }));
 };
 export default 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 @@
+export const isSettingsPanelNavigationItem = (entry) => entry.type === 'item';

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[];

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

@@ -1,52 +1,50 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS } from '../../../../Utilities/Defaults/DefaultSettingsPanel';
 import { useAdaptable } from '../../../AdaptableContext';
 import * as PopupRedux from '../../../../Redux/ActionsReducers/PopupRedux';
 import { STANDALONE_MODULE_POPUPS } from '../../../../Utilities/Constants/GeneralConstants';
+import { resolveSettingsPanelNavigation } from '../../../../Utilities/Helpers/SettingsPanelHelper';
+import { isSettingsPanelNavigationItem, } from './settingsPanelNavigationTypes';
 export const useMenuItems = () => {
     const adaptable = useAdaptable();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const allMenuItems = useSelector((state) => state?.Internal?.SettingsPanelModuleEntries);
     return React.useMemo(() => {
-        let navigationItems = settingsPanelOptions?.navigation?.items;
-        if (!navigationItems) {
-            navigationItems = [...DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS];
-            if (settingsPanelOptions.customSettingsPanels) {
-                navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
-            }
-        }
+        const navigation = resolveSettingsPanelNavigation(adaptable.api, settingsPanelOptions);
         const visibleItems = allMenuItems.filter((item) => item.category !== 'General' &&
             item.category !== 'CustomSettingsPanel' &&
             item.category !== 'Group' &&
             !STANDALONE_MODULE_POPUPS.includes(item.category) &&
             item.isVisible);
-        let navItems = navigationItems
-            .map((moduleName) => {
-            if (moduleName === '-') {
-                return moduleName;
-            }
+        const resolveNavigationItem = (moduleName) => {
             const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find?.((panel) => panel.name === moduleName);
-            let customPanelMenuItem = null;
             if (customSettingsPanel) {
-                // @ts-ignore
-                customPanelMenuItem = {
+                // @ts-ignore custom settings panel menu items are not part of the standard menu name union
+                return {
                     category: 'CustomSettingsPanel',
                     label: customSettingsPanel.name,
                     isVisible: true,
                     reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name),
                 };
             }
-            return customPanelMenuItem || visibleItems.find((item) => item.category === moduleName);
-        })
-            .filter(Boolean);
-        // remove sequential '-' items
-        navItems = navItems.filter((item, index) => {
-            if (item === '-' && navItems[index - 1] === '-') {
-                return false;
+            return visibleItems.find((item) => item.category === moduleName) ?? null;
+        };
+        const entries = [];
+        for (const group of navigation.groups) {
+            const groupMenuItems = group.items
+                .map((moduleName) => resolveNavigationItem(moduleName))
+                .filter(Boolean);
+            if (!groupMenuItems.length) {
+                continue;
             }
-            return true;
-        });
-        return navItems;
-    }, [allMenuItems]);
+            if (group.label) {
+                entries.push({ type: 'header', label: group.label });
+            }
+            for (const menuItem of groupMenuItems) {
+                entries.push({ type: 'item', menuItem });
+            }
+        }
+        return entries;
+    }, [allMenuItems, adaptable.api, settingsPanelOptions]);
 };
+export const getSettingsPanelNavigationItems = (entries) => entries.filter(isSettingsPanelNavigationItem).map((entry) => entry.menuItem);

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PanelWithImage } from '../Panels/PanelWithImage';
 import { UIHelper } from '../../UIHelper';
 import Dialog from '../../../components/Dialog';
-import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/alertFormHelper';
+import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/AlertHelper';
 import { AdaptableFormComponent } from '../../../components/AdaptableFormComponent';
 import { useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';