@adaptabletools/adaptable 23.1.0-canary.2 → 24.0.0-canary.0

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

@@ -3,12 +3,21 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { SupportedTabMenuComps, Tabs } from '../../../components/Tabs';
 import Radio from '../../../components/Radio';
-import { ExpressionEditor } from '../../../components/ExpressionEditor';
+import { ExpressionEditor, } from '../../../components/aql/ExpressionEditor';
+import { inferExpressionKindFromText, } from '../../../AdaptableState/Common/AdaptableQuery';
 import { useAdaptable } from '../../AdaptableContext';
-import { EntityRulePredicatesEditor } from './EntityRulePredicatesEditor';
 import Panel from '../../../components/Panel';
 import { Box, Flex } from '../../../components/Flex';
 import { twMerge } from '../../../twMerge';
+const ruleTypeForKind = (kind) => {
+    switch (kind) {
+        case 'aggregated':
+            return 'AggregatedExpression';
+        case 'scalar':
+        default:
+            return 'Expression';
+    }
+};
 const QueryTab = (props) => {
     const { type, label, disabled = false, ...tabProps } = props;
     const text = (_jsxs(Flex, { flexDirection: "column", children: [label, " ", _jsx(Box, { className: "twa:text-2", children: "query" })] }));
@@ -17,112 +26,60 @@ const QueryTab = (props) => {
 SupportedTabMenuComps.add(QueryTab);
 export const EntityRulesSummary = (props) => {
     const { data } = props;
-    const { api: { predicateApi, internalApi }, } = useAdaptable();
-    if (!data?.Rule?.Predicates?.length &&
-        !data?.Rule?.BooleanExpression &&
-        !data?.Rule?.ObservableExpression &&
-        !data?.Rule?.AggregatedBooleanExpression) {
+    const { api: { internalApi }, } = useAdaptable();
+    if (!data?.Rule?.trim()) {
         return _jsx(Box, { className: "twa:text-2", children: "No Rule defined" });
     }
-    return (_jsx(Box, { className: "twa:text-2", children: data.Rule.Predicates ? (_jsx(_Fragment, { children: data.Rule?.Predicates?.map?.((predicate, index) => (_jsx(React.Fragment, { children: props.renderPredicate(predicateApi.predicateToString(predicate)) }, index))) })) : (_jsx(_Fragment, { children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) })) }));
+    return (_jsx(Box, { className: "twa:text-2", children: props.renderQueryExpression(internalApi.getAdaptableQueryExpressionText(data.Rule)) }));
 };
 const RuleTabTitle = (props) => {
     return props.showRadio ? (_jsx(Radio, { className: "twa:m-0", tabIndex: -1, checked: props.checked, children: props.children })) : (_jsx(_Fragment, { children: "props.children" }));
 };
 export const EntityRulesEditor = (props) => {
-    const { data, children, descriptions, predicateDefs, showNoRule = false, showPredicate = true, showObservable = true, showBoolean = true, showAggregation = true, flexProps, module, } = props;
+    const { data, children, showNoRule = false, showBoolean = true, showAggregation = true, flexProps, module, } = props;
     const { api } = useAdaptable();
-    const numberOfTabs = [
-        showNoRule,
-        showPredicate,
-        showObservable,
-        showBoolean,
-        showAggregation,
-    ].filter(Boolean).length;
+    const numberOfTabs = [showNoRule, showBoolean, showAggregation].filter(Boolean).length;
     const showRadioButtons = numberOfTabs > 1;
-    const type = data.Rule == undefined
-        ? 'NoRule'
-        : data.Rule.BooleanExpression != undefined
-            ? 'BooleanExpression'
-            : data.Rule.ObservableExpression != undefined && showObservable
-                ? 'ObservableExpression'
-                : data.Rule.AggregatedBooleanExpression != undefined && showAggregation
-                    ? 'AggregatedBooleanExpression'
-                    : 'Predicate';
-    const [selectedTab, setSelectedTab] = React.useState(type);
-    const setType = (type) => {
-        setSelectedTab(type);
-        if (type === 'NoRule' && showNoRule) {
-            delete data.Rule;
-            props.onChange({
-                ...data,
-            });
-        }
-        else if (type === 'BooleanExpression' && showBoolean) {
-            props.onChange({
-                ...data,
-                Rule: {
-                    BooleanExpression: '',
-                },
-            });
-        }
-        else if (type === 'ObservableExpression' && showObservable) {
-            props.onChange({
-                ...data,
-                Rule: {
-                    ObservableExpression: '',
-                },
-            });
+    const inferredKind = inferExpressionKindFromText(data.Rule);
+    const initialType = data.Rule == undefined
+        ? showNoRule
+            ? 'NoRule'
+            : ruleTypeForKind(props.expectedKind)
+        : ruleTypeForKind(inferredKind ?? props.expectedKind);
+    const isTypeAvailable = (candidate) => (candidate === 'NoRule' && showNoRule) ||
+        (candidate === 'Expression' && showBoolean) ||
+        (candidate === 'AggregatedExpression' && showAggregation);
+    const fallbackType = showBoolean
+        ? 'Expression'
+        : showAggregation
+            ? 'AggregatedExpression'
+            : 'NoRule';
+    const [selectedTab, setSelectedTab] = React.useState(isTypeAvailable(initialType) ? initialType : fallbackType);
+    const type = selectedTab;
+    const setType = (nextType) => {
+        setSelectedTab(nextType);
+        if (nextType === 'NoRule' && showNoRule) {
+            const next = { ...data };
+            delete next.Rule;
+            props.onChange(next);
+            return;
         }
-        else if (type === 'AggregatedBooleanExpression' && showAggregation) {
-            props.onChange({
-                ...data,
-                Rule: {
-                    AggregatedBooleanExpression: '',
-                },
-            });
-        }
-        else {
-            props.onChange({
-                ...data,
-                Rule: {
-                    Predicates: [
-                        {
-                            PredicateId: props.defaultPredicateId,
-                        },
-                    ],
-                },
-            });
-        }
-    };
-    const filteredPredicateDefs = predicateDefs.filter((def) => {
-        if (api.predicateApi.internalApi.IsInOrNotInPredicateDef(def)) {
-            return 'ColumnIds' in data.Scope && data.Scope.ColumnIds.length === 1;
-        }
-        return true;
-    });
-    const setBooleanExpression = (expression) => {
-        props.onChange({
-            ...data,
-            Rule: { BooleanExpression: expression },
-        });
-    };
-    const setReactiveExpression = (expression) => {
         props.onChange({
             ...data,
-            Rule: { ObservableExpression: expression },
+            Rule: '',
         });
     };
-    const setAggregationExpression = (expression) => {
+    const setRuleExpression = (expression) => {
         props.onChange({
             ...data,
-            Rule: { AggregatedBooleanExpression: expression },
+            Rule: expression,
         });
     };
     const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
     const baseClassName = 'ab-EntityRulesEditor';
-    return (_jsxs(Flex, { ...flexProps, className: twMerge(baseClassName, 'twa:p-2 twa:pt-0 twa:pl-0 twa:h-full', flexProps?.className), flexDirection: "column", style: flexProps?.style, children: [children, _jsxs(Tabs, { onValueChange: setType, value: selectedTab, className: "twa:pt-2 twa:pl-2 twa:flex-1 twa:overflow-auto", children: [showNoRule ? (_jsx(Tabs.Tab, { value: 'NoRule', style: { flex: 1 }, children: _jsx(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule', children: "No Condition" }) })) : null, showNoRule ? (_jsx(Tabs.Content, { value: 'NoRule', children: _jsx(Box, { className: "twa:text-2 twa:mb-2", children: 'Format Column is always applied' }) })) : null, showPredicate ? (_jsx(Tabs.Tab, { value: 'Predicate', style: { flex: 1 }, children: _jsx(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'Predicate', children: "Predicate" }) })) : null, showPredicate ? (_jsx(Tabs.Content, { "data-name": "Predicate", value: "Predicate", children: _jsx(EntityRulePredicatesEditor, { enablePredicateColumnId: props.enablePredicateColumnId, data: data, descriptions: descriptions, predicateDefs: filteredPredicateDefs, getPredicateDefsForColId: props.getPredicateDefsForColId, onChange: props.onChange }) })) : null, showBoolean ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "BooleanExpression", type: type, label: "Boolean" })) : null, showBoolean ? (_jsx(Tabs.Content, { "data-name": "BooleanExpression", value: 'BooleanExpression', children: (() => {
-                            const editor = (_jsx(ExpressionEditor, { type: 'boolean', module: module, value: data.Rule?.BooleanExpression, onChange: setBooleanExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder, columnScope: data.Scope }));
-                            return props.showQueryBuilder ? _jsx(Panel, { children: editor }) : editor;
-                        })() })) : null, showObservable ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "ObservableExpression", type: type, label: "Observable" })) : null, showObservable ? (_jsx(Tabs.Content, { "data-name": "ObservableExpression", value: 'ObservableExpression', children: _jsx(ExpressionEditor, { type: 'observable', module: module, value: data.Rule?.ObservableExpression, onChange: setReactiveExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })) : null, showAggregation ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "AggregatedBooleanExpression", type: type, label: "Aggregated Boolean" })) : null, showAggregation ? (_jsx(Tabs.Content, { "data-name": "AggregatedBooleanExpression", value: 'AggregatedBooleanExpression', children: _jsx(ExpressionEditor, { type: 'aggregatedBoolean', module: module, value: data.Rule?.AggregatedBooleanExpression, onChange: setAggregationExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }) })) : null] })] }));
+    const booleanExpressionEditor = showBoolean ? (_jsx(ExpressionEditor, { type: 'scalar', module: module, value: type === 'Expression' ? data.Rule : '', onChange: setRuleExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, showQueryBuilder: props.showQueryBuilder, columnScope: data.Scope, extraEditorButtons: props.extraEditorButtons, extraFunctionMenus: props.extraFunctionMenus, secondaryAction: props.secondaryAction, suppressTypeInfoCard: props.suppressTypeInfoCard, suppressObservable: props.suppressObservable, examplesKind: props.examplesKind, onActiveEditorChange: props.onActiveEditorChange })) : null;
+    if (numberOfTabs === 1 && showBoolean) {
+        return (_jsxs(Flex, { ...flexProps, className: twMerge(baseClassName, 'twa:h-full twa:min-h-0', flexProps?.className), flexDirection: "column", style: flexProps?.style, children: [children, _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-hidden", children: booleanExpressionEditor })] }));
+    }
+    return (_jsxs(Flex, { ...flexProps, className: twMerge(baseClassName, 'twa:p-2 twa:pt-0 twa:pl-0 twa:h-full twa:min-h-0 twa:overflow-hidden', flexProps?.className), flexDirection: "column", style: flexProps?.style, children: [children, _jsxs(Tabs, { onValueChange: setType, value: selectedTab, className: "twa:pt-2 twa:pl-2 twa:flex-1 twa:min-h-0 twa:overflow-hidden", children: [showNoRule ? (_jsx(Tabs.Tab, { value: 'NoRule', style: { flex: 1 }, children: _jsx(RuleTabTitle, { showRadio: showRadioButtons, checked: type === 'NoRule', children: "No Condition" }) })) : null, showNoRule ? (_jsx(Tabs.Content, { value: 'NoRule', children: _jsx(Box, { className: "twa:text-2 twa:mb-2", children: 'Format Column is always applied' }) })) : null, showBoolean ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "Expression", type: type, label: "Boolean" })) : null, showBoolean ? (_jsx(Tabs.Content, { "data-name": "Expression", value: 'Expression', className: "twa:min-h-0 twa:h-full twa:overflow-hidden twa:flex twa:flex-col", children: props.showQueryBuilder ? (_jsx(Panel, { className: "twa:h-full twa:min-h-0 twa:overflow-hidden", children: _jsx(Panel.FlexBody, { className: "twa:p-0 twa:overflow-hidden", children: booleanExpressionEditor }) })) : (booleanExpressionEditor) })) : null, showAggregation ? (_jsx(QueryTab, { showRadio: showRadioButtons, value: "AggregatedExpression", type: type, label: "Aggregated Boolean" })) : null, showAggregation ? (_jsx(Tabs.Content, { "data-name": "AggregatedExpression", value: 'AggregatedExpression', children: _jsx(ExpressionEditor, { type: 'aggregated', module: module, value: type === 'AggregatedExpression' ? data.Rule : '', onChange: setRuleExpression, initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api, suppressTypeInfoCard: props.suppressTypeInfoCard, examplesKind: props.suppressTypeInfoCard ? 'aggregatedBoolean' : undefined }) })) : null] })] }));
 };

package/src/View/Components/Forms/AdaptableFormControlTextClear.d.ts

@@ -8,5 +8,6 @@ export type AdaptableFormControlTextClearProps = {
     inputStyle?: CSSProperties;
     inputClassName?: string;
     actionTools?: React.ReactNode;
+    'data-name'?: string;
 } & InputProps;
 export declare const AdaptableFormControlTextClear: React.ForwardRefExoticComponent<Omit<AdaptableFormControlTextClearProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -22,7 +22,7 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
                     else {
                         ref.current = r;
                     }
-                }, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }), props.actionTools, _jsx(SimpleButton, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
+                }, type: "text", placeholder: props.placeholder, value: props.value, "data-name": props['data-name'], onFocus: props.onFocus, onBlur: props.onBlur, onChange: (x) => props.OnTextChange(x.target.value) }), props.actionTools, _jsx(SimpleButton, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
                     props.OnTextChange('');
                     const input = inputRef.current;
                     if (!focusOnClear) {

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

@@ -3,7 +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';
+import { LAYOUT_WIZARD_COLUMN_LIST_HEADER_CLASS, LAYOUT_WIZARD_COLUMN_LIST_OPTION_CLASS, LAYOUT_WIZARD_COLUMN_LIST_SEARCH_CLASS, } from '../../Layout/Utilities/layoutWizardColumns';
 export const ModuleValueSelector = (props) => {
     const { options, value, onChange, ...valueSelectorProps } = props;
     const adaptable = useAdaptable();

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
-import { AdaptableSystemIconName } from '../../../AdaptableState/Common/AdaptableIcon';
+import { AdaptableIcon, AdaptableSystemIconName } from '../../../AdaptableState/Common/AdaptableIcon';
 export interface PanelWithButtonProps extends Omit<PanelProps, 'flex' | 'borderRadius' | 'border'> {
     buttonContent?: React.ReactNode;
     buttonClick?: () => void;
@@ -10,7 +10,7 @@ export interface PanelWithButtonProps extends Omit<PanelProps, 'flex' | 'borderR
     headerProps?: PanelProps['headerProps'] & {
         'data-name': string;
     };
-    glyphicon?: AdaptableSystemIconName;
+    glyphicon?: AdaptableSystemIconName | AdaptableIcon;
     buttonDisabled?: boolean;
     buttonStyle?: string;
     infoLink?: string;

package/src/View/Components/Panels/PanelWithButton.js

@@ -4,11 +4,18 @@ import SimpleButton from '../../../components/SimpleButton';
 import Panel from '../../../components/Panel';
 import { allIcons } from '../../../components/icons';
 import { ButtonInfo } from '../Buttons/ButtonInfo';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '../../../twMerge';
 import { Box, Flex } from '../../../components/Flex';
+import { AdaptableIconComponent } from '../AdaptableIconComponent';
+const renderGlyphicon = (glyphicon) => {
+    if (typeof glyphicon === 'string') {
+        const IconCmp = allIcons[glyphicon];
+        return IconCmp ? _jsx(IconCmp, {}) : null;
+    }
+    return _jsx(AdaptableIconComponent, { icon: glyphicon });
+};
 export const PanelWithButton = (props) => {
     const { buttonContent } = props;
-    const IconCmp = allIcons[props.glyphicon];
-    const header = (_jsxs(Flex, { alignItems: "center", className: "twa:w-full", children: [_jsxs(Flex, { alignItems: "center", children: [props.glyphicon != null && (IconCmp ? _jsx(IconCmp, {}) : null), _jsx(Box, { "data-name": "space-before", className: "twa:mr-2" }), props.headerText, _jsx(Box, { "data-name": "space-after", className: "twa:mr-2" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))] }), _jsx(Box, { className: "twa:flex-1" }), buttonContent ? (_jsx(SimpleButton, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null), children: buttonContent })) : null, props.button ? React.cloneElement(props.button) : null] }));
+    const header = (_jsxs(Flex, { alignItems: "center", className: "twa:w-full", children: [_jsxs(Flex, { alignItems: "center", children: [props.glyphicon != null ? renderGlyphicon(props.glyphicon) : null, _jsx(Box, { "data-name": "space-before", className: "twa:mr-2" }), props.headerText, _jsx(Box, { "data-name": "space-after", className: "twa:mr-2" }), props.infoLink != null && !props.infoLinkDisabled && (_jsx(ButtonInfo, { onClick: () => window.open(props.infoLink, '_blank') }))] }), _jsx(Box, { className: "twa:flex-1" }), buttonContent ? (_jsx(SimpleButton, { variant: "raised", tone: "accent", disabled: props.buttonDisabled, onClick: () => (props.buttonClick ? props.buttonClick() : null), children: buttonContent })) : null, props.button ? React.cloneElement(props.button) : null] }));
     return (_jsx(Panel, { className: twMerge('twa:flex-1 twa:rounded-none twa:border-none', props.className), bodyScroll: props.bodyScroll != null ? props.bodyScroll : true, bodyProps: props.bodyProps, variant: props.variant || 'primary', header: header, headerProps: props.headerProps, style: props.style, children: props.children }));
 };

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import * as GeneralConstants from '../../../../Utilities/Constants/GeneralConstants';
 import TopBar from './TopBar';
 import join from '../../../../components/utils/join';
@@ -19,12 +20,14 @@ export const AdaptablePopup = (props) => {
     const wizardOptions = adaptable.adaptableOptions.wizardOptions;
     const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
     const menuItems = useMenuItems();
+    const [navigationCollapsed, setNavigationCollapsed] = React.useState(false);
     const modalContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
     let friendlyName = null;
     let isStandalone = false;
     let moduleViewContent = null;
     let activeItem = null;
     let accessLevel = GeneralConstants.ACCESS_LEVEL_FULL;
+    const settingsPanelHidden = props.api.entitlementApi.isModuleHiddenEntitlement('SettingsPanel');
     const firstMenuItem = menuItems.find(isSettingsPanelNavigationItem)?.menuItem;
     const firstMenuModule = firstMenuItem?.category;
     let componentModule = props.componentModule;
@@ -40,6 +43,7 @@ export const AdaptablePopup = (props) => {
     if (customSettingsPanel) {
         friendlyName = customSettingsPanel.name;
         activeItem = customSettingsPanel.name;
+        isStandalone = settingsPanelHidden;
         moduleViewContent = _jsx(CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
     }
     else {
@@ -48,9 +52,10 @@ export const AdaptablePopup = (props) => {
         accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(componentModule);
         friendlyName = moduleInfo.FriendlyName;
         isStandalone =
-            moduleInfo &&
-                (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo?.ModuleName) ||
-                    (props.componentName && props.componentName !== moduleInfo?.Popup));
+            settingsPanelHidden ||
+                (moduleInfo &&
+                    (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo?.ModuleName) ||
+                        (props.componentName && props.componentName !== moduleInfo?.Popup)));
         activeItem = moduleInfo.ModuleName;
         moduleViewContent = (_jsx(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
     }
@@ -68,5 +73,5 @@ export const AdaptablePopup = (props) => {
             },
         }, 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: 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 })] })] }) }));
+                        : ''), children: [!isStandalone && (_jsx(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels, collapsed: navigationCollapsed, onCollapsedChange: setNavigationCollapsed })), _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/AdaptablePopupBody.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { UIHelper } from '../../../UIHelper';
 import { AdaptableViewFactory } from '../../../AdaptableViewFactory';
 import { AdaptablePopupModuleView } from './AdaptablePopupModuleView';
 export const AdaptablePopupBody = (props) => {
-    const modalContainer = UIHelper.getModalContainer(props.api.optionsApi.getAdaptableOptions(), document, props.api.internalApi.buildBaseContext());
     const moduleName = props.module.moduleInfo.ModuleName;
     const accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(moduleName);
     const moduleInfo = props.api.internalApi.getModuleService().getModuleInfoByModule(moduleName);
@@ -17,7 +15,6 @@ export const AdaptablePopupBody = (props) => {
         },
         teamSharingActivated: props.api.teamSharingApi.isTeamSharingAvailable() &&
             props.api.teamSharingApi.hasTeamSharingFullRights(),
-        modalContainer: modalContainer,
         accessLevel: accessLevel,
         api: props.api,
         moduleInfo,

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

@@ -55,7 +55,7 @@ export const AdaptablePopupDialog = (props) => {
     }
     else {
         if (isActionModule) {
-            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 }));
+            return (_jsx(Dialog, { "data-name": props.dataName, fixed: false, style: { ...style, maxWidth: 800, minWidth: 420 }, className: cn('twa:p-0 twa:w-full twa:max-h-[90vh]', className), onDismiss: onHide, isOpen: true, showCloseButton: true, children: children }));
         }
         const modalStyle = {
             ...style,

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

@@ -27,6 +27,21 @@ export const AdaptablePopupModuleView = (props) => {
     const moduleInfo = props.module.moduleInfo;
     const items = props.module?.toViewAll();
     const moduleViewProperties = props.module?.getViewProperties?.() ?? {};
+    const settingsPanelTabs = moduleViewProperties.settingsPanelTabs?.filter((tab) => !tab.isVisible || tab.isVisible(props.api)) ?? [];
+    const useTabbedSettingsPanel = settingsPanelTabs.length > 1;
+    const getTabIndexForLabel = (label) => {
+        if (!label) {
+            return 0;
+        }
+        const index = settingsPanelTabs.findIndex((tab) => tab.label === label);
+        return index >= 0 ? index : 0;
+    };
+    const [selectedTabIndex, setSelectedTabIndex] = React.useState(() => getTabIndexForLabel(props.popupParams?.settingsPanelTab ?? moduleViewProperties.getDefaultSettingsPanelTab?.()));
+    React.useEffect(() => {
+        if (props.popupParams?.settingsPanelTab) {
+            setSelectedTabIndex(getTabIndexForLabel(props.popupParams.settingsPanelTab));
+        }
+    }, [props.popupParams?.settingsPanelTab]);
     const EditWizard = moduleViewProperties?.getEditWizard?.();
     const [isWizardOpen, setIsWizardOpen] = React.useState(() => {
         return (props.popupParams?.action === 'New' ||
@@ -100,6 +115,12 @@ export const AdaptablePopupModuleView = (props) => {
         };
         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' }));
     }
+    let clearAllButton = null;
+    if (editableObjects.length &&
+        moduleViewProperties?.showDeleteAllButtonInSettingsPanel &&
+        moduleViewProperties?.getDeleteAllAction) {
+        clearAllButton = (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: () => dispatch(moduleViewProperties.getDeleteAllAction()), tone: "neutral", variant: "raised", icon: "close", accessLevel: props.accessLevel, children: "Clear All" }));
+    }
     const handleWizardClose = () => {
         setAbObjectType(null);
         setIsWizardOpen(false);
@@ -121,14 +142,12 @@ export const AdaptablePopupModuleView = (props) => {
         }
         return (_jsx(Flex, { className: "twa:justify-start", children: _jsxs(CheckBox, { className: "twa:m-0 twa:p-0", checked: showLayoutNonExtendedObjects, onChange: (checked) => dispatch(LayoutShowNonExtendedObjects(checked)), children: ["Show ", moduleInfo.FriendlyName, "s not available in current Layout"] }) }));
     };
-    const renderModuleObjectList = () => (_jsxs(_Fragment, { children: [moduleViewProperties.HeaderComponent && _jsx(moduleViewProperties.HeaderComponent, {}), toggleButtonShowLayoutExtensionObjects(), items?.length ? (_jsx(AdaptableObjectList, { module: props.module, items: items })) : (_jsx(EmptyContent, { children: emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}` }))] }));
-    const settingsPanelTabs = moduleViewProperties.settingsPanelTabs?.filter((tab) => !tab.isVisible || tab.isVisible(props.api)) ?? [];
-    const useTabbedSettingsPanel = settingsPanelTabs.length > 1;
+    const renderModuleObjectList = () => (_jsxs(Flex, { flexDirection: "column", className: "twa:flex-1 twa:min-h-0 twa:h-full", children: [moduleViewProperties.HeaderComponent && _jsx(moduleViewProperties.HeaderComponent, {}), toggleButtonShowLayoutExtensionObjects(), items?.length ? (moduleViewProperties.ListComponent ? (_jsx(moduleViewProperties.ListComponent, { module: props.module, items: items })) : (_jsx(AdaptableObjectList, { module: props.module, items: items }))) : (_jsx(EmptyContent, { children: emptyContent ?? `Click 'New' to create a new ${moduleInfo.FriendlyName}` }))] }));
     const renderTabbedBody = () => {
         if (!useTabbedSettingsPanel) {
             return renderModuleObjectList();
         }
-        return (_jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0", children: [settingsPanelTabs.map((tab) => (_jsx(Tabs.Tab, { children: tab.label }, tab.label))), settingsPanelTabs.map((tab) => (_jsx(Tabs.Content, { children: _jsx(Box, { className: "twa:min-h-0 twa:overflow-auto twa:pt-2", children: tab.render ? React.createElement(tab.render) : renderModuleObjectList() }) }, tab.label)))] }) }) }));
+        return (_jsx(Panel, { className: "twa:flex-1 twa:min-h-0 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { className: "twa:overflow-hidden", children: _jsxs(Tabs, { className: "twa:flex-1 twa:min-h-0 twa:h-full twa:overflow-hidden", selectedIndex: selectedTabIndex, onSelectedIndexChange: setSelectedTabIndex, children: [settingsPanelTabs.map((tab) => (_jsx(Tabs.Tab, { children: tab.label }, tab.label))), settingsPanelTabs.map((tab) => (_jsx(Tabs.Content, { className: "twa:h-full twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden", children: _jsx(Box, { className: "twa:min-h-0 twa:flex-1 twa:h-full twa:overflow-auto twa:pt-2 twa:flex twa:flex-col", children: tab.render ? React.createElement(tab.render) : renderModuleObjectList() }) }, tab.label)))] }) }) }));
     };
-    return (_jsxs(PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, scrollable: !useTabbedSettingsPanel, button: _jsxs(_Fragment, { children: [suspendButton, " ", newButton] }), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [renderTabbedBody(), isWizardOpen && EditWizard && (_jsx(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))] }));
+    return (_jsxs(PopupPanel, { glyphicon: moduleInfo.Glyph, infoLink: moduleInfo.HelpPage, headerText: moduleInfo.FriendlyName, scrollable: !useTabbedSettingsPanel, button: _jsxs(_Fragment, { children: [suspendButton, " ", clearAllButton, " ", newButton] }), infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [renderTabbedBody(), isWizardOpen && EditWizard && (_jsx(EditWizard, { abObjectType: abObjectType, moduleInfo: moduleInfo, data: null, popupParams: props.popupParams, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))] }));
 };

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

@@ -7,6 +7,10 @@ interface NavigationProps {
     menuItems: SettingsPanelNavigationEntry[];
     activeItem: string;
     customSettingsPanels?: CustomSettingsPanel[];
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
 }
+/** Keep group headers only when they still have at least one matching item. */
+export declare const filterSettingsPanelNavigationEntries: (entries: SettingsPanelNavigationEntry[], query: string) => SettingsPanelNavigationEntry[];
 export declare const Navigation: React.FunctionComponent<React.PropsWithChildren<NavigationProps>>;
 export {};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { AdaptableIconComponent } from '../../AdaptableIconComponent';
 import { cn } from '../../../../lib/utils';
@@ -8,25 +8,100 @@ import { targetOwn } from '../../../../components/twUtils';
 import { useAdaptable } from '../../../AdaptableContext';
 import { getSettingsPanelNavigationItems } from './useMenuItems';
 import { isSettingsPanelNavigationItem, } from './settingsPanelNavigationTypes';
+import { SidebarTrigger } from '../../../../components/ui/sidebar';
+import { Flex } from '../../../../components/Flex';
+import { Input } from '../../../../components/ui/input';
+import { Tooltip } from '../../../../components/Tooltip';
+import { resolveSettingsPanelDisplayOptions } from '../../../../Utilities/Helpers/SettingsPanelHelper';
 const navigationItemClassName = 'ab-Adaptable-Popup__Navigation__List__Item';
-const NavigationItem = ({ menuItem, isActive, dataName, customIcon, onAction, showModuleIcons, }) => {
+const customPanelCollapsedFallbackIcon = { name: 'settings' };
+export const filterSettingsPanelNavigationEntries = (entries, query) => {
+    const normalised = query.trim().toLowerCase();
+    if (!normalised) {
+        return entries;
+    }
+    const matchesItem = (entry) => {
+        const label = entry.menuItem.label?.toLowerCase() ?? '';
+        const description = entry.description?.toLowerCase() ?? '';
+        const category = String(entry.menuItem.category ?? '').toLowerCase();
+        return (label.includes(normalised) ||
+            description.includes(normalised) ||
+            category.includes(normalised));
+    };
+    const filtered = [];
+    let index = 0;
+    while (index < entries.length) {
+        const entry = entries[index];
+        if (entry.type === 'header') {
+            const header = entry;
+            const items = [];
+            index += 1;
+            while (index < entries.length && entries[index].type === 'item') {
+                const itemEntry = entries[index];
+                if (matchesItem(itemEntry)) {
+                    items.push(itemEntry);
+                }
+                index += 1;
+            }
+            if (items.length) {
+                filtered.push(header, ...items);
+            }
+        }
+        else {
+            if (matchesItem(entry)) {
+                filtered.push(entry);
+            }
+            index += 1;
+        }
+    }
+    return filtered;
+};
+const NavigationItem = ({ menuItem, description, isActive, dataName, customPanelIcon, isCustomSettingsPanel, onAction, showModuleIcons, showModuleDescriptions, collapsed, }) => {
     const ref = useRef(null);
     useEffect(() => {
         if (isActive) {
             ref.current?.focus();
         }
     }, [isActive]);
+    const visibleDescription = !collapsed && showModuleDescriptions ? description : undefined;
+    let icon = null;
+    if (isCustomSettingsPanel) {
+        if (customPanelIcon) {
+            icon = customPanelIcon;
+        }
+        else if (collapsed) {
+            icon = customPanelCollapsedFallbackIcon;
+        }
+    }
+    else if (collapsed || showModuleIcons) {
+        icon = menuItem.icon ?? null;
+    }
+    const tooltip = collapsed
+        ? [menuItem.label, description].filter(Boolean).join(' — ')
+        : description || undefined;
     return (_jsx("li", { className: cn(navigationItemClassName, {
             [`${navigationItemClassName}--active`]: isActive,
-        }), 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',
+            [`${navigationItemClassName}--collapsed`]: collapsed,
+        }), children: _jsxs("button", { ref: ref, type: "button", title: tooltip, "aria-label": menuItem.label, className: cn(`${navigationItemClassName}__Button ${targetOwn.focusOutline}`, {
+                'twa:flex twa:flex-row twa:gap-2': true,
+                'twa:items-start': Boolean(visibleDescription),
+                'twa:items-center': !visibleDescription,
+                'twa:justify-center': collapsed,
                 [`twa:bg-transparent`]: !isActive,
                 'twa:bg-accent twa:text-accentlight': isActive,
-                'twa:px-2 twa:py-1.5': true,
+                'twa:px-2 twa:py-1.5': !collapsed,
                 '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] }) }));
+            }), onMouseDown: () => onAction(), "data-name": dataName, tabIndex: isActive ? 0 : -1, children: [icon ? (_jsx(AdaptableIconComponent, { icon: icon, iconClassName: `${navigationItemClassName}__Icon` })) : null, !collapsed ? (_jsxs("span", { className: `${navigationItemClassName}__Text`, children: [_jsx("span", { className: `${navigationItemClassName}__Label`, children: menuItem.label }), visibleDescription ? (_jsx("span", { className: `${navigationItemClassName}__Description`, children: visibleDescription })) : null] })) : null] }) }));
 };
-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 NavigationCollapseTrigger = ({ collapsed, onCollapsedChange, }) => {
+    if (!onCollapsedChange) {
+        return null;
+    }
+    const collapseLabel = 'Collapse navigation';
+    const expandLabel = 'Expand navigation';
+    return (_jsx(Tooltip, { label: collapsed ? expandLabel : collapseLabel, children: _jsx(SidebarTrigger, { "data-name": "settings-panel-nav-collapse", collapsed: collapsed, onCollapsedChange: onCollapsedChange, collapseLabel: collapseLabel, expandLabel: expandLabel, size: "icon-sm", className: "twa:shrink-0" }) }));
+};
+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) => {
@@ -47,6 +122,12 @@ const getAdjacentNavigationItem = (entries, currentIndex, direction) => {
 export const Navigation = (props) => {
     const { api } = useAdaptable();
     const dispatch = useDispatch();
+    const [searchQuery, setSearchQuery] = useState('');
+    const settingsPanelOptions = api.optionsApi.getSettingsPanelOptions();
+    const displayOptions = resolveSettingsPanelDisplayOptions(settingsPanelOptions);
+    const { showModuleIcons, showModuleDescriptions, showNavigationSearch, enableCollapseView, } = displayOptions;
+    const collapsed = enableCollapseView && (props.collapsed ?? false);
+    const visibleMenuItems = useMemo(() => filterSettingsPanelNavigationEntries(props.menuItems, searchQuery), [props.menuItems, searchQuery]);
     const makeActive = (menuItem) => {
         dispatch(menuItem.reduxAction);
     };
@@ -55,7 +136,7 @@ export const Navigation = (props) => {
         if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'Home' || code === 'End') {
             event.preventDefault();
             event.stopPropagation();
-            const navigationItems = getSettingsPanelNavigationItems(props.menuItems);
+            const navigationItems = getSettingsPanelNavigationItems(visibleMenuItems);
             if (!navigationItems.length) {
                 return;
             }
@@ -67,25 +148,39 @@ export const Navigation = (props) => {
                 nextMenuItem = navigationItems[navigationItems.length - 1];
             }
             else {
-                const currentIndex = findNavigationItemIndex(props.menuItems, props.activeItem);
-                nextMenuItem = getAdjacentNavigationItem(props.menuItems, currentIndex, code === 'ArrowUp' ? -1 : 1);
+                const currentIndex = findNavigationItemIndex(visibleMenuItems, props.activeItem);
+                nextMenuItem = getAdjacentNavigationItem(visibleMenuItems, currentIndex, code === 'ArrowUp' ? -1 : 1);
             }
             if (nextMenuItem) {
                 makeActive(nextMenuItem);
             }
         }
-    }, [props.activeItem, props.menuItems]);
-    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;
-                const customIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
-                const dataName = menuItem.category === 'CustomSettingsPanel'
-                    ? `CSP-${menuItem.label}`
-                    : menuItem.category ?? menuItem.label;
-                return (_jsx(NavigationItem, { menuItem: menuItem, isActive: isActive, dataName: dataName, customIcon: customIcon, showModuleIcons: api.optionsApi.getSettingsPanelOptions().showModuleIcons, onAction: () => makeActive(menuItem) }, menuItem.label));
-            }) }) }));
+    }, [props.activeItem, visibleMenuItems]);
+    const firstHeaderIndex = visibleMenuItems.findIndex((entry) => entry.type === 'header');
+    const collapseTrigger = enableCollapseView ? (_jsx(NavigationCollapseTrigger, { collapsed: collapsed, onCollapsedChange: props.onCollapsedChange })) : null;
+    const showSearchInput = showNavigationSearch && !collapsed;
+    const showToolbar = showSearchInput || Boolean(collapseTrigger);
+    const hasVisibleItems = getSettingsPanelNavigationItems(visibleMenuItems).length > 0;
+    return (_jsxs("nav", { className: cn('ab-Adaptable-Popup__Navigation twa:flex twa:flex-col twa:min-h-0', {
+            'ab-Adaptable-Popup__Navigation--collapsed': collapsed,
+        }), tabIndex: -1, "data-collapsed": collapsed ? 'true' : 'false', children: [showToolbar ? (_jsxs(Flex, { className: cn('ab-Adaptable-Popup__Navigation__Toolbar twa:shrink-0 twa:bg-background twa:gap-1 twa:items-center', {
+                    'twa:justify-center twa:px-1 twa:pt-2 twa:pb-1': collapsed,
+                    'twa:px-2 twa:pt-2 twa:pb-1': !collapsed,
+                    'twa:justify-end': !collapsed && !showSearchInput,
+                }), children: [showSearchInput ? (_jsx(Input, { "data-name": "settings-panel-nav-search", type: "search", value: searchQuery, onChange: (event) => setSearchQuery(event.currentTarget.value), placeholder: "Search...", "aria-label": "Search Settings Panel modules", className: "twa:h-8 twa:flex-1 twa:min-w-0 twa:text-2" })) : null, collapseTrigger] })) : null, _jsxs("ul", { className: "ab-Adaptable-Popup__Navigation__List twa:m-0 twa:list-none twa:py-3 twa:gap-1 twa:flex twa:flex-col twa:flex-1 twa:min-h-0 twa:overflow-auto", onKeyDown: handleKeyPress, children: [!hasVisibleItems ? (_jsx("li", { className: "twa:list-none twa:px-3 twa:py-2 twa:text-2 twa:opacity-70", children: collapsed ? null : 'No modules match' })) : null, visibleMenuItems.map((entry, index) => {
+                        if (entry.type === 'header') {
+                            if (collapsed) {
+                                return null;
+                            }
+                            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;
+                        const isCustomSettingsPanel = menuItem.category === 'CustomSettingsPanel';
+                        const customPanelIcon = props.customSettingsPanels?.find?.((customSettingPanel) => customSettingPanel.name === menuItem.label)?.icon ?? null;
+                        const dataName = isCustomSettingsPanel
+                            ? `CSP-${menuItem.label}`
+                            : menuItem.category ?? menuItem.label;
+                        return (_jsx(NavigationItem, { menuItem: menuItem, description: entry.description, isActive: isActive, dataName: dataName, customPanelIcon: customPanelIcon, isCustomSettingsPanel: isCustomSettingsPanel, showModuleIcons: showModuleIcons, showModuleDescriptions: showModuleDescriptions, collapsed: collapsed, onAction: () => makeActive(menuItem) }, menuItem.label));
+                    })] })] }));
 };