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

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

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

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

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

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

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

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

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

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

@@ -1,57 +1,56 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuItems = void 0;
+exports.getSettingsPanelNavigationItems = exports.useMenuItems = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const DefaultSettingsPanel_1 = require("../../../../Utilities/Defaults/DefaultSettingsPanel");
 const AdaptableContext_1 = require("../../../AdaptableContext");
 const PopupRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/PopupRedux"));
 const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const SettingsPanelHelper_1 = require("../../../../Utilities/Helpers/SettingsPanelHelper");
+const settingsPanelNavigationTypes_1 = require("./settingsPanelNavigationTypes");
 const useMenuItems = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
     const allMenuItems = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanelModuleEntries);
     return React.useMemo(() => {
-        let navigationItems = settingsPanelOptions?.navigation?.items;
-        if (!navigationItems) {
-            navigationItems = [...DefaultSettingsPanel_1.DEFAULT_SETTINGS_PANEL_NAVIGATION_ITEMS];
-            if (settingsPanelOptions.customSettingsPanels) {
-                navigationItems.push(...settingsPanelOptions.customSettingsPanels.map((panel) => panel.name));
-            }
-        }
+        const navigation = (0, SettingsPanelHelper_1.resolveSettingsPanelNavigation)(adaptable.api, settingsPanelOptions);
         const visibleItems = allMenuItems.filter((item) => item.category !== 'General' &&
             item.category !== 'CustomSettingsPanel' &&
             item.category !== 'Group' &&
             !GeneralConstants_1.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]);
 };
 exports.useMenuItems = useMenuItems;
+const getSettingsPanelNavigationItems = (entries) => entries.filter(settingsPanelNavigationTypes_1.isSettingsPanelNavigationItem).map((entry) => entry.menuItem);
+exports.getSettingsPanelNavigationItems = getSettingsPanelNavigationItems;

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

@@ -7,7 +7,7 @@ const React = tslib_1.__importStar(require("react"));
 const PanelWithImage_1 = require("../Panels/PanelWithImage");
 const UIHelper_1 = require("../../UIHelper");
 const Dialog_1 = tslib_1.__importDefault(require("../../../components/Dialog"));
-const alertFormHelper_1 = require("../../../Utilities/Helpers/alertFormHelper");
+const AlertHelper_1 = require("../../../Utilities/Helpers/AlertHelper");
 const AdaptableFormComponent_1 = require("../../../components/AdaptableFormComponent");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
@@ -35,7 +35,7 @@ const AdaptablePopupAlert = (props) => {
             formData: formData,
         };
     }, [JSON.stringify(formData), props.adaptableAlert]);
-    const alertForm = React.useMemo(() => (0, alertFormHelper_1.resolveAlertFormForDefinition)(props.adaptableAlert.alertDefinition, defaultForm), [props.adaptableAlert.alertDefinition, defaultForm]);
+    const alertForm = React.useMemo(() => (0, AlertHelper_1.resolveAlertFormForDefinition)(props.adaptableAlert.alertDefinition, defaultForm), [props.adaptableAlert.alertDefinition, defaultForm]);
     const adaptableForm = React.useMemo(() => {
         if (api.isDestroyed()) {
             return null;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWindowPopupSize = exports.getSettingsPanelSize = exports.getActionPanelSize = exports.getMiddlePosition = void 0;
-const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const NumberExtensions_1 = require("../../../Utilities/Extensions/NumberExtensions");
 const getMiddlePosition = (size) => {
     const height = window.innerHeight;
     const width = window.innerWidth;
@@ -15,8 +15,8 @@ const getActionPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: (0, Helper_1.clamp)(600, 0, height * 0.9),
-        width: (0, Helper_1.clamp)(800, 0, width * 0.9),
+        height: (0, NumberExtensions_1.clamp)(600, 0, height * 0.9),
+        width: (0, NumberExtensions_1.clamp)(800, 0, width * 0.9),
     };
 };
 exports.getActionPanelSize = getActionPanelSize;
@@ -24,8 +24,8 @@ const getSettingsPanelSize = () => {
     const height = window.innerHeight;
     const width = window.innerWidth;
     return {
-        height: (0, Helper_1.clamp)(height * 0.9, 0, 800),
-        width: (0, Helper_1.clamp)(width * 0.9, 0, 800),
+        height: (0, NumberExtensions_1.clamp)(height * 0.9, 0, 800),
+        width: (0, NumberExtensions_1.clamp)(width * 0.9, 0, 800),
     };
 };
 exports.getSettingsPanelSize = getSettingsPanelSize;

package/src/View/Components/Popups/WindowPopups/windowFactory.d.ts

@@ -1,7 +1,6 @@
 import { WindowPopupChildProps } from './WindowPopups';
 export declare const WINDOW_GRID_FILTER_EDITOR = "WINDOW_GRID_FILTER_EDITOR";
 export declare const SHOW_PIVOT_COLUMN_DETAILS = "SHOW_PIVOT_COLUMN_DETAILS";
-export declare const SHOW_THEME_EDITOR = "SHOW_THEME_EDITOR";
 export declare const WINDOW_SHOW_TRANSPOSED_VIEW = "WINDOW_SHOW_TRANSPOSED_VIEW";
 export declare const COLUMN_FILTER_WINDOW = "COLUMN_FILTER_WINDOW";
 export declare const windowFactory: Record<string, React.FunctionComponent<WindowPopupChildProps>>;

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.windowFactory = exports.COLUMN_FILTER_WINDOW = exports.WINDOW_SHOW_TRANSPOSED_VIEW = exports.SHOW_THEME_EDITOR = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_GRID_FILTER_EDITOR = void 0;
+exports.windowFactory = exports.COLUMN_FILTER_WINDOW = exports.WINDOW_SHOW_TRANSPOSED_VIEW = exports.SHOW_PIVOT_COLUMN_DETAILS = exports.WINDOW_GRID_FILTER_EDITOR = void 0;
 const GridFilterWindowPopup_1 = require("../../../GridFilter/GridFilterWindowPopup");
 const PivotDetailsPopoup_1 = require("../../../Layout/PivotDetailsPopoup");
 const TransposedPopup_1 = require("../../../Layout/TransposedPopup");
 const ColumnFilterWindow_1 = require("../../ColumnFilter/ColumnFilterWindow");
 exports.WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
 exports.SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
-exports.SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
 exports.WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
 exports.COLUMN_FILTER_WINDOW = 'COLUMN_FILTER_WINDOW';
 exports.windowFactory = {

package/src/View/Components/PredicateEditor/PredicateEditor.js

@@ -69,7 +69,7 @@ const PredicateEditor = (props) => {
         }
     }, []);
     const { skipDefaultSearch } = quickFilterValues;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-2", children: icon }), (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: predicateDefsOptions, "data-name": "select-predicate", placeholder: "Select Rule", value: currentPredicateDef?.id, onValueChange: (value) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: baseClassName, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:justify-stretch", children: [icon && (0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: "twa:mr-2", children: icon }), (0, jsx_runtime_1.jsx)(NewSelect_1.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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
-import { CellColorRange, ColumnComparison, GradientZeroCentredColors, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
+import { CellColorRange, ColumnComparison, NumericStyledColumn } from '../../AdaptableState/StyledColumns/Common/NumericStyledColumn';
+import { ZeroCentredColors } from '../../AdaptableState/StyledColumns/GradientStyle';
 import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 export interface RangesComponentProps extends React.ClassAttributes<RangesComponent> {
     ranges: CellColorRange[];
@@ -14,7 +15,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     minMaxRangeValues: {
         min: number;
         max: number;
-    };
+    } | null;
     disabled?: boolean;
     /**
      * When true, the user may delete every band so `ranges` becomes `[]`.
@@ -34,8 +35,8 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
      * `onApplyZeroCentred` and optional `zeroCentred` for the current colours.
      */
     showZeroCentredTab?: boolean;
-    zeroCentred?: GradientZeroCentredColors;
-    onApplyZeroCentred?: (zc: GradientZeroCentredColors) => void;
+    zeroCentred?: ZeroCentredColors;
+    onApplyZeroCentred?: (zc: ZeroCentredColors) => void;
     /**
      * When true, render a per-range "Reverse Gradient" toggle. Only meaningful
      * for Gradient Style (the renderer flips the alpha ramp within the band so
@@ -45,7 +46,7 @@ export interface RangesComponentProps extends React.ClassAttributes<RangesCompon
     showRangeDirection?: boolean;
 }
 export interface RangesComponentState {
-    rangesType: 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
+    rangesType: 'None' | 'NumberRange' | 'PercentageRange' | 'ZeroCentred' | 'ColumnComparison';
 }
 export declare class RangesComponent extends React.Component<RangesComponentProps, RangesComponentState> {
     constructor(props: RangesComponentProps);
@@ -60,9 +61,12 @@ export declare class RangesComponent extends React.Component<RangesComponentProp
     setRangeColMin(range: CellColorRange): void;
     setRangeColMax(range: CellColorRange): void;
     addRange(): void;
-    changeColumnComparisonMinValue(value: number): void;
-    private onMinColumnSelectedChanged;
-    changeColumnComparisonMaxValue(value: number): void;
-    private onMaxColumnSelectedChanged;
+    /**
+     * When there is exactly one band spanning the full scale (Col-Min→Col-Max or
+     * 0→100), split at the midpoint instead of at the column maximum.
+     */
+    private splitFullSpanRangeAtMidpoint;
+    setColumnComparisonMin(value: number | string | undefined): void;
+    setColumnComparisonMax(value: number | string | undefined): void;
     changeColumnComparisonColor(value: string): void;
 }