@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

package/src/View/Shortcut/Wizard/ShortcutSettingsWizard.js

@@ -75,5 +75,5 @@ export const ShortcutSettingsWizard = (props) => {
             result,
         };
     }, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
-    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Key" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Operation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), _jsx(Card.Body, { children: 'error' in preview ? (_jsx(Box, { className: "twa:text-2 twa:text-error", children: preview.error })) : (_jsxs(Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
+    return (_jsx(Box, { "data-name": "shortcut-column-settings", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Name" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Key" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:max-w-[300px]", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || undefined }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Operation" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Mathematical operation performed on the cell's current value" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:max-w-[300px]", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Number used with the operation and current cell value to calculate the new total" })] }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? (_jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Example" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), _jsx(Card.Body, { children: 'error' in preview ? (_jsx(Box, { className: "twa:text-2 twa:text-destructive", children: preview.error })) : (_jsxs(Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
 };

package/src/View/SmartEdit/SmartEditPopup.js

@@ -11,7 +11,7 @@ import { PreviewResultsPanel } from '../Components/PreviewResultsPanel';
 import { PreviewHelper } from '../../Utilities/Helpers/PreviewHelper';
 import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import Input from '../../components/Input';
-import DropdownButton from '../../components/DropdownButton';
+import { NewDropdownButton } from '../../components/DropdownButton';
 import SimpleButton from '../../components/SimpleButton';
 import { Flex } from '../../components/Flex';
 const preventDefault = (e) => e.preventDefault();
@@ -54,7 +54,7 @@ class SmartEditPopupComponent extends React.Component {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
-            }, children: [_jsxs(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [_jsx(DropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
+            }, children: [_jsxs(Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [_jsx(NewDropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
                                 ? this.props.SmartEditOperation.name
                                 : this.props.SmartEditOperation }), _jsx(Input, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }), _jsx(SimpleButton, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                                 (this.props.PreviewInfo &&

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -13,8 +13,8 @@ import { AdaptablePopover } from '../AdaptablePopover';
 import { UIHelper } from '../UIHelper';
 import { connect } from 'react-redux';
 import { Flex } from '../../components/Flex';
-import clsx from 'clsx';
 import { SingleSelect } from '../../components/NewSelect';
+import { cn } from '../../lib/utils';
 class SmartEditViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -68,7 +68,7 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (_jsxs(Flex, { flexDirection: "row", className: clsx(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
+        return (_jsxs(Flex, { flexDirection: "row", className: cn(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
                 'twa:flex-nowrap': this.props.viewType === 'Toolbar',
                 'twa:flex-wrap': this.props.viewType !== 'Toolbar',
             }), flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [_jsxs(Flex, { className: "twa:gap-1", children: [_jsx(SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'

package/src/View/StateManagement/StateManagementPopup.js

@@ -7,5 +7,5 @@ import { ExportDropdown } from './components/ExportDropdown';
 import Panel from '../../components/Panel';
 export const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
-    return (_jsxs(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [_jsxs(Panel, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), _jsx(HelpBlock, { style: { color: 'var(--ab-color-warn)' }, children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), _jsx(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mt-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', _jsx(LoadButton, { tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
+    return (_jsxs(PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [_jsxs(Panel, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), _jsx(HelpBlock, { className: "twa:text-warn twa:mb-2", children: 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied' }), _jsx(ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:mb-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', _jsx(LoadButton, { tone: "info", variant: "raised", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button", children: "Load Initial Adaptable State" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State', children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-adaptable-state-dropdown", children: "Select Export Destination" })] }), _jsxs(Panel, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default", children: [_jsx(HelpBlock, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', _jsx(ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", "data-name": "export-initial-state-dropdown", children: "Select Export Destination" })] })] }));
 };

package/src/View/StateManagement/components/ExportDropdown.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../../types';
-import { DropdownButtonProps } from '../../../components/DropdownButton';
-export interface ExportDropdownProps extends Omit<DropdownButtonProps, 'options' | 'value'> {
+import { type NewDropdownButtonProps } from '../../../components/DropdownButton';
+export interface ExportDropdownProps extends Omit<NewDropdownButtonProps, 'items'> {
     api: AdaptableApi;
     type: 'adaptableState' | 'initialState';
 }

package/src/View/StateManagement/components/ExportDropdown.js

@@ -1,35 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import DropdownButton from '../../../components/DropdownButton';
+import { NewDropdownButton } from '../../../components/DropdownButton';
 import { handleExportState } from '../handleExportState';
 export const ExportDropdown = (props) => {
+    const { api, type, ...rest } = props;
     const handleChange = (destination) => {
-        switch (props.type) {
-            case 'adaptableState':
-                const adaptableState = props.api.stateApi.getPersistentState();
-                handleExportState(destination, 'adaptableState', adaptableState, props.api);
+        switch (type) {
+            case 'adaptableState': {
+                const adaptableState = api.stateApi.getPersistentState();
+                handleExportState(destination, 'adaptableState', adaptableState, api);
                 break;
-            case 'initialState':
-                const initialState = props.api.stateApi.getInitialState();
-                handleExportState(destination, 'initialState', initialState, props.api);
+            }
+            case 'initialState': {
+                const initialState = api.stateApi.getInitialState();
+                handleExportState(destination, 'initialState', initialState, api);
                 break;
+            }
         }
     };
     const destinationOptions = [
         {
-            value: 'Clipboard',
             label: 'Clipboard',
             onClick: () => handleChange('Clipboard'),
         },
         {
-            value: 'Console',
             label: 'Console',
             onClick: () => handleChange('Console'),
         },
         {
-            value: 'JSON',
             label: 'JSON',
             onClick: () => handleChange('JSON'),
         },
     ];
-    return (_jsx(DropdownButton, { className: "ab-StateManagement__Export-Dropdown", ...props, items: destinationOptions, value: undefined }));
+    return (_jsx(NewDropdownButton, { variant: "outlined", className: "ab-StateManagement__Export-Dropdown", ...rest, items: destinationOptions }));
 };

package/src/View/StatusBar/StatusBarPanel.js

@@ -4,7 +4,7 @@ import SimpleButton from '../../components/SimpleButton';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { Flex, Box } from '../../components/Flex';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 /**
  * Statusbar sub panel are similar to vs code:
  * - text
@@ -36,5 +36,5 @@ export const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return (_jsxs(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: clsx(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && (_jsx(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? (_jsx(AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions.IsNotNullOrEmpty(extraActions) && (_jsx(Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
+    return (_jsxs(Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: cn(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && (_jsx(SimpleButton, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? (_jsx(AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions.IsNotNullOrEmpty(extraActions) && (_jsx(Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
 };

package/src/View/StatusBar/StatusBarPopup.js

@@ -8,6 +8,7 @@ import { getStatusPanelsSelector } from '../../Redux/ActionsReducers/StatusBarRe
 import { useAdaptable } from '../AdaptableContext';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { ACCESS_LEVEL_READ_ONLY } from '../../Utilities/Constants/GeneralConstants';
+import { isRichStatusBarPanel } from './statusBarPanelHelpers';
 export const StatusBarPopup = (props) => {
     const statusPanels = useSelector(getStatusPanelsSelector);
     const adaptable = useAdaptable();
@@ -26,19 +27,46 @@ export const StatusBarPopup = (props) => {
             };
         });
         adaptable.api.statusBarApi.setStatusBarPanels(newStatusPanels);
-    }, [statusPanels]);
-    const availableItems = ALL_STATUS_SUB_PANELS.filter((panel) => {
+    }, [statusPanels, adaptable.api.statusBarApi]);
+    const availableItems = React.useMemo(() => ALL_STATUS_SUB_PANELS.filter((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return module?.isModuleVisible();
     }).map((panel) => {
         const module = adaptable.ModuleService.getModuleById(panel);
         return { Id: panel, Title: module.moduleInfo.FriendlyName };
-    });
+    }), [adaptable]);
+    const unusedItemGroups = React.useMemo(() => {
+        const statusPanelIds = [];
+        const moduleShortcutIds = [];
+        availableItems.forEach((item) => {
+            const module = adaptable.ModuleService.getModuleById(item.Id);
+            if (isRichStatusBarPanel(module)) {
+                statusPanelIds.push(item.Id);
+            }
+            else {
+                moduleShortcutIds.push(item.Id);
+            }
+        });
+        return [
+            {
+                listId: 'UNUSED-PANELS',
+                title: 'Status Panels',
+                help: 'Fully featured actionable controls',
+                items: statusPanelIds,
+            },
+            {
+                listId: 'UNUSED-SHORTCUTS',
+                title: 'Module Shortcuts',
+                help: 'Buttons to open Module Status Panel',
+                items: moduleShortcutIds,
+            },
+        ];
+    }, [availableItems, adaptable]);
     const disabled = props.accessLevel === ACCESS_LEVEL_READ_ONLY;
-    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? (_jsx(ModuleManager, { permittedActions: {
+    return (_jsx(PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? (_jsx(ModuleManager, { dragScope: "status-bar", layout: "rows", permittedActions: {
                 createTab: false,
                 dragAndDropTab: false,
                 deleteTab: false,
                 editTabName: false,
-            }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'AdapTable Status Bar Panels', unusedPanelTitle: "Available Status Bar Components", dragItemText: "Drag into a Status Bar Panel below" })) : (_jsx(EmptyContent, { children: "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel." })) }));
+            }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, unusedItemGroups: unusedItemGroups, dragItemText: "Drag items from either panel above into a Status Bar Panel below", tabsTitle: "AdapTable Status Bar Panels" })) : (_jsx(EmptyContent, { children: "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel." })) }));
 };

package/src/View/StatusBar/statusBarPanelHelpers.d.ts

@@ -0,0 +1,2 @@
+import { IModule } from '../../Strategy/Interface/IModule';
+export declare const isRichStatusBarPanel: (module: IModule | undefined) => boolean;

package/src/View/StatusBar/statusBarPanelHelpers.js

@@ -0,0 +1,7 @@
+export const isRichStatusBarPanel = (module) => {
+    if (!module) {
+        return false;
+    }
+    const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
+    return Boolean(statusBarPanelProps.view || statusBarPanelProps.content || statusBarPanelProps.popover);
+};

package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
-import { BadgePillStyle } from '../../../AdaptableState/StyledColumnState';
+import { BadgePillStyle } from '../../../AdaptableState/StyledColumns/BadgeStyle';
 export interface BadgePillStyleEditorProps {
     api: AdaptableApi;
     /** Current pill style (may be undefined / partial). */
@@ -11,6 +11,8 @@ export interface BadgePillStyleEditorProps {
      */
     onChange: (next: BadgePillStyle | undefined) => void;
     disabled?: boolean;
+    /** When true, omit outer border — for use inside a wizard Card body. */
+    embedded?: boolean;
 }
 /**
  * Compact editor for the cut-down {@link BadgePillStyle}.

package/src/View/StyledColumn/Wizard/BadgePillStyleEditor.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckBox } from '../../../components/CheckBox';
-import { ColorPicker } from '../../../components/ColorPicker';
+import { OptionalColorPicker } from '../../../components/ColorPicker';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Box, Flex } from '../../../components/Flex';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
-import { Tag } from '../../../components/Tag';
+import { renderSummaryLabelValueTags } from '../../Wizard/SummaryColorTag';
 const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
 const CHILD_COLUMN = { name: 'children' };
 /**
@@ -35,7 +34,11 @@ export const BadgePillStyleEditor = (props) => {
         }
     };
     const disabledClass = disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
-    return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: _jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.BackColor, onChange: (checked) => update({ BackColor: checked ? pill.BackColor ?? '#cccccc' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.BackColor, api: props.api, value: pill.BackColor || '#cccccc', onChange: (c) => update({ BackColor: c }) })] }) }), _jsx(FormRow, { label: "Text", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.ForeColor, onChange: (checked) => update({ ForeColor: checked ? pill.ForeColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.ForeColor, api: props.api, value: pill.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), _jsx(FormRow, { label: "Border", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(CheckBox, { disabled: disabled, checked: !!pill.BorderColor, onChange: (checked) => update({ BorderColor: checked ? pill.BorderColor ?? '#000000' : undefined }), children: "Set" }), _jsx(ColorPicker, { disabled: disabled || !pill.BorderColor, api: props.api, value: pill.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }) }) }));
+    const form = (_jsxs(FormLayout, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [_jsx(FormRow, { label: "Background", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BackColor, defaultColor: "#cccccc", onChange: (c) => update({ BackColor: c }) }) }), _jsx(FormRow, { label: "Text", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.ForeColor, defaultColor: "#000000", onChange: (c) => update({ ForeColor: c }) }) }), _jsx(FormRow, { label: "Border", children: _jsx(OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), _jsx(FormRow, { label: "Font", children: _jsx(Box, { className: disabledClass, children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Toggle, { standalone: true, pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), _jsx(Toggle, { standalone: true, pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), _jsx(Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }));
+    if (props.embedded) {
+        return form;
+    }
+    return (_jsx(Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: _jsx(Box, { className: "twa:p-3", children: form }) }));
 };
 /** Descriptive pill properties for summary panels (`Label: value` strings). */
 export const getBadgePillStyleSummaryItems = (pill) => {
@@ -44,22 +47,22 @@ export const getBadgePillStyleSummaryItems = (pill) => {
     }
     const items = [];
     if (pill.BackColor) {
-        items.push({ label: 'Pill Back Colour', value: pill.BackColor });
+        items.push({ label: 'Back Colour', value: pill.BackColor });
     }
     if (pill.ForeColor) {
-        items.push({ label: 'Pill Fore Colour', value: pill.ForeColor });
+        items.push({ label: 'Fore Colour', value: pill.ForeColor });
     }
     if (pill.BorderColor) {
-        items.push({ label: 'Pill Border Colour', value: pill.BorderColor });
+        items.push({ label: 'Border Colour', value: pill.BorderColor });
     }
     if (pill.FontWeight === 'Bold') {
-        items.push({ label: 'Pill Font Weight', value: 'Bold' });
+        items.push({ label: 'Font Weight', value: 'Bold' });
     }
     if (pill.FontStyle === 'Italic') {
-        items.push({ label: 'Pill Font Style', value: 'Italic' });
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
     if (pill.TextDecoration && pill.TextDecoration !== 'None') {
-        items.push({ label: 'Pill Text Decoration', value: pill.TextDecoration });
+        items.push({ label: 'Text Decoration', value: pill.TextDecoration });
     }
     return items;
 };
@@ -69,5 +72,5 @@ export const renderBadgePillStyleSummaryTags = (pill) => {
     if (!items.length) {
         return null;
     }
-    return (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => (_jsx(Tag, { children: `${label}: ${value}` }, label))) }));
+    return renderSummaryLabelValueTags(items);
 };

package/src/View/StyledColumn/Wizard/StyledColumnBadgeSection.d.ts

@@ -8,7 +8,7 @@ export declare const renderBadgeDefinitionSummaryTags: (styledColumn: StyledColu
 export declare const StyledColumnBadgeDefinitionsView: React.FunctionComponent<React.PropsWithChildren<{
     data: StyledColumn;
 }>>;
-export declare const renderBadgeSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
+export declare const renderBadgeSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnBadgeSectionProps {
     onChange: (data: StyledColumn) => void;
 }
@@ -17,4 +17,4 @@ export interface StyledColumnBadgeStyleSectionProps {
     onChange: (data: StyledColumn) => void;
 }
 export declare const StyledColumnBadgeStyleSection: React.FunctionComponent<StyledColumnBadgeStyleSectionProps>;
-export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api?: AdaptableApi) => React.JSX.Element;
+export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;