@adaptabletools/adaptable 23.0.0-canary.5 → 23.0.0-canary.7

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/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-background 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

@@ -16,7 +16,7 @@ import { useRerender } from '../../../../components/utils/useRerender';
 import { Box, Flex } from '../../../../components/Flex';
 import Panel from '../../../../components/Panel';
 import { Tabs } from '../../../../components/Tabs';
-import { NewDropdownButton } from '../../../../components/NewDropdownButton';
+import { NewDropdownButton } from '../../../../components/DropdownButton';
 export const AdaptablePopupModuleView = (props) => {
     /**
      * This triggers a render for each state change.

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/resolveSettingsPanelNavigation';
+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/PredicateEditor/PredicateEditor.js

@@ -65,7 +65,7 @@ export const PredicateEditor = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
-    return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onValueChange: (value) => {
+    return (_jsxs(Box, { className: baseClassName, children: [_jsxs(Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && _jsx(Tag, { className: "twa:mr-2", children: icon }), _jsx(SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: props.predicate?.PredicateId ?? null, onValueChange: (value) => {
                             const option = predicateDefsOptions.find((x) => x.value === value);
                             props.onChange({
                                 ...props.predicate,

package/src/View/Components/RangesComponent.d.ts

@@ -65,9 +65,7 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
      * 0→100), split at the midpoint instead of at the column maximum.
      */
     private splitFullSpanRangeAtMidpoint;
-    changeColumnComparisonMinValue(value: number): void;
-    private onMinColumnSelectedChanged;
-    changeColumnComparisonMaxValue(value: number): void;
-    private onMaxColumnSelectedChanged;
+    setColumnComparisonMin(value: number | string | undefined): void;
+    setColumnComparisonMax(value: number | string | undefined): void;
     changeColumnComparisonColor(value: string): void;
 }