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

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

@@ -6,14 +6,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const shortcutOperations_1 = require("../shortcutOperations");
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_2 = require("../../../View/Wizard/OnePageAdaptableWizard");
 const Tag_1 = require("../../../components/Tag");
-const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
+const Card_1 = require("../../../components/Card");
 const isSettingsValid = (data, api) => {
     if (!data.Name?.trim()) {
         return 'Name is required';
@@ -64,12 +62,25 @@ const ShortcutSettingsWizard = (props) => {
     const optionActions = shortcutOperations_1.shortcutOperationList.map((operation) => ({
         value: operation,
         label: operation,
-        // onClick: () => handleOperationChange(operation),
     }));
     const optionKeys = props.availableKeys.map((key) => ({
         value: key,
         label: key,
     }));
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "shortcut-column-settings", children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Shortcut Settings" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-name", className: "twa:flex-1 twa:w-60 twa:mr-3", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:h-2" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:text-2 twa:mb-0", children: "Keyboard key that, when pressed, triggers the Shortcut" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Key", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-key", ariaLabel: "Select Key", placeholder: "Select Key", items: optionKeys, className: "twa:w-30", onValueChange: (key) => handleKeyChange(key), value: shortcut.ShortcutKey || 'Select Key' }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:text-2 twa:mb-0", children: "Mathematical operation performed on Cell's current value (using the Shortcut's 'value') - used to calculate the Cell's new total" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Operation", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "shortcut-operation", placeholder: "Select Operation", ariaLabel: "Select Operation", className: "twa:w-30", items: optionActions, onValueChange: (operation) => handleOperationChange(operation), value: shortcut.ShortcutOperation }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:text-2 twa:mb-0", children: "Number that is used - together with the 'Operation' and the current cell value - to calculate the new total for the cell" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Value", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-value", className: "twa:flex-1 twa:w-30 twa:max-w-30 twa:mr-3", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) }) })] }) })] }) }));
+    const preview = React.useMemo(() => {
+        const { ShortcutOperation, ShortcutValue } = shortcut;
+        if (!ShortcutOperation || typeof ShortcutValue !== 'number') {
+            return null;
+        }
+        const result = (0, shortcutOperations_1.calculateShortcutResult)(shortcutOperations_1.SHORTCUT_PREVIEW_EXAMPLE_VALUE, ShortcutValue, ShortcutOperation);
+        if (result === null) {
+            return { error: 'Cannot divide by zero' };
+        }
+        return {
+            expression: `${shortcutOperations_1.SHORTCUT_PREVIEW_EXAMPLE_VALUE} ${(0, shortcutOperations_1.getShortcutOperationSymbol)(ShortcutOperation)} ${ShortcutValue}`,
+            result,
+        };
+    }, [shortcut.ShortcutOperation, shortcut.ShortcutValue]);
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "shortcut-column-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Provide a unique name for the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-name", className: "twa:max-w-[300px] twa:w-full", onChange: handleNameChange, placeholder: "Enter Name", value: shortcut.Name ?? '' }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Key" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Keyboard key that, when pressed, triggers the Shortcut" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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 }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Operation" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.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 }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Value" }), (0, jsx_runtime_1.jsx)(Flex_1.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" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "shortcut-value", className: "twa:max-w-[300px] twa:w-full", onChange: handleOperationValueChange, placeholder: "Enter Number", type: "number", value: shortcut.ShortcutValue ?? '' }) })] }), preview ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Example" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["If a cell contains ", shortcutOperations_1.SHORTCUT_PREVIEW_EXAMPLE_VALUE, ", pressing this Shortcut would change it to:"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: 'error' in preview ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-2 twa:text-destructive", children: preview.error })) : ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: [preview.expression, " \u2192 ", preview.result] })) })] })) : null] }) }));
 };
 exports.ShortcutSettingsWizard = ShortcutSettingsWizard;

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

@@ -54,7 +54,7 @@ const ShortcutWizard = (props) => {
             {
                 title: 'Settings',
                 isValid: ShortcutSettingsWizard_1.isSettingsValid,
-                details: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["A Shortcut is a mathematical calculation (", (0, jsx_runtime_1.jsx)("b", { children: "Operation" }), ") which is applied with the defined operand ", (0, jsx_runtime_1.jsx)("b", { children: "Value" }), " on the edited cell content when the corresponding Shortcut ", (0, jsx_runtime_1.jsx)("b", { children: "Key" }), " is pressed."] })),
+                details: ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Provide details of the Shortcut" })),
                 renderSummary: () => (0, jsx_runtime_1.jsx)(ShortcutSettingsWizard_1.ShortcutSettingsSummary, {}),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ShortcutSettingsWizard_1.ShortcutSettingsWizard, { availableKeys: props.availableKeys ?? availableKeys, onChange: setShortcut }) })),
             },
@@ -65,7 +65,7 @@ const ShortcutWizard = (props) => {
                 renderSummary: () => (0, NewScopeComponent_1.renderScopeSummary)(shortcut.Scope, {
                     scopeWholeRow: 'Shortcut is triggered for all numeric cells',
                     scopeColumns: 'Shortcut is triggered for cells in selected columns',
-                    scopeDataTypes: 'Shortcut is triggered for all numeric cells',
+                    scopeDataTypes: '',
                 }),
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(ShortcutScopeWizardSection_1.ShortcutScopeWizardSection, { onChange: setShortcut }) })),
             },

package/src/View/Shortcut/shortcutOperations.d.ts

@@ -1,2 +1,5 @@
 import { MathOperation } from '../../AdaptableState/Common/Enums';
 export declare const shortcutOperationList: Array<MathOperation>;
+export declare const SHORTCUT_PREVIEW_EXAMPLE_VALUE = 100;
+export declare function getShortcutOperationSymbol(operation: MathOperation): string;
+export declare function calculateShortcutResult(cellValue: number, shortcutValue: number, operation: MathOperation): number | null;

package/src/View/Shortcut/shortcutOperations.js

@@ -1,10 +1,41 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shortcutOperationList = void 0;
+exports.SHORTCUT_PREVIEW_EXAMPLE_VALUE = exports.shortcutOperationList = void 0;
+exports.getShortcutOperationSymbol = getShortcutOperationSymbol;
+exports.calculateShortcutResult = calculateShortcutResult;
+const tslib_1 = require("tslib");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
+const NumberExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/NumberExtensions"));
 exports.shortcutOperationList = [
     Enums_1.MathOperation.Add,
     Enums_1.MathOperation.Subtract,
     Enums_1.MathOperation.Multiply,
     Enums_1.MathOperation.Divide,
 ];
+exports.SHORTCUT_PREVIEW_EXAMPLE_VALUE = 100;
+const shortcutOperationSymbols = {
+    [Enums_1.MathOperation.Add]: '+',
+    [Enums_1.MathOperation.Subtract]: '−',
+    [Enums_1.MathOperation.Multiply]: '×',
+    [Enums_1.MathOperation.Divide]: '÷',
+};
+function getShortcutOperationSymbol(operation) {
+    return shortcutOperationSymbols[operation];
+}
+function calculateShortcutResult(cellValue, shortcutValue, operation) {
+    if (operation === Enums_1.MathOperation.Divide && shortcutValue === 0) {
+        return null;
+    }
+    switch (operation) {
+        case Enums_1.MathOperation.Add:
+            return NumberExtensions_1.default.avoidJavascriptPrecisionIssues(cellValue + shortcutValue);
+        case Enums_1.MathOperation.Subtract:
+            return NumberExtensions_1.default.avoidJavascriptPrecisionIssues(cellValue - shortcutValue);
+        case Enums_1.MathOperation.Multiply:
+            return NumberExtensions_1.default.avoidJavascriptPrecisionIssues(cellValue * shortcutValue);
+        case Enums_1.MathOperation.Divide:
+            return NumberExtensions_1.default.avoidJavascriptPrecisionIssues(cellValue / shortcutValue);
+        default:
+            return null;
+    }
+}

package/src/View/SmartEdit/SmartEditPopup.js

@@ -15,7 +15,7 @@ const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
 const PreviewHelper_1 = require("../../Utilities/Helpers/PreviewHelper");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const Flex_1 = require("../../components/Flex");
 const preventDefault = (e) => e.preventDefault();
@@ -58,7 +58,7 @@ class SmartEditPopupComponent extends React.Component {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
-            }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
+            }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, onMouseDown: preventDefault, children: typeof this.props.SmartEditOperation === 'object'
                                 ? this.props.SmartEditOperation.name
                                 : this.props.SmartEditOperation }), (0, jsx_runtime_1.jsx)(Input_1.default, { "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) }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                                 (this.props.PreviewInfo &&

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -17,8 +17,8 @@ const AdaptablePopover_1 = require("../AdaptablePopover");
 const UIHelper_1 = require("../UIHelper");
 const react_redux_1 = require("react-redux");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const NewSelect_1 = require("../../components/NewSelect");
+const utils_1 = require("../../lib/utils");
 class SmartEditViewPanelComponent extends React.Component {
     cleanupEvent;
     constructor(props) {
@@ -72,7 +72,7 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)(`ab-${elementType}__SmartEdit__wrap twa:gap-1 twa:flex-row`, {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, utils_1.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: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ariaLabel: 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpecialColumnSettingsWizardStep = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const chunk_1 = tslib_1.__importDefault(require("../Utilities/utils/chunk"));
+const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const CheckBox_1 = require("../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../components/FormLayout"));
-const Tabs_1 = require("../components/Tabs");
 const AdaptableContext_1 = require("./AdaptableContext");
 const Flex_1 = require("../components/Flex");
+const Card_1 = require("../components/Card");
 const SpecialColumnSettingsWizardStep = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const behaviourSpellingVariant = adaptable.api.internalApi.getCorrectEnglishVariant('behaviours');
     const possibleColumnTypes = adaptable.api.columnApi.getColumnTypes() ?? [];
     const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = props.settings ?? {};
     const handleColumnTypeChange = (columnType, checked) => {
@@ -34,10 +35,10 @@ const SpecialColumnSettingsWizardStep = (props) => {
             ...values,
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Properties" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:w-full", columns: [
-                                    { name: 'first', size: '30%' },
-                                    { size: '30%', name: 'second' },
-                                    { size: '30%', name: 'third' },
-                                ], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) }) })] }), Boolean(possibleColumnTypes?.length) && ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false, children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Column Types" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: (0, chunk_1.default)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => ((0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [first && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Properties" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Choose which grid ", behaviourSpellingVariant, " apply to this Column"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { className: "twa:w-full", columns: [
+                                { name: 'first', size: '30%' },
+                                { size: '30%', name: 'second' },
+                                { size: '30%', name: 'third' },
+                            ], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns, children: "Filterable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }), children: "Resizable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }), children: "Groupable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }), children: "Sortable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }), children: "Pivotable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }), children: "Aggregatable" })] }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }), children: "Suppress Menu" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }), children: "Suppress Movable" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable, children: "Editable" })] })] }) })] }), Boolean(possibleColumnTypes?.length) && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Column Types" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Assign custom column types to this column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }], children: (0, ArrayExtensions_1.chunk)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => ((0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { children: [first && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first), children: first })), second && ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second), children: second }))] }, first))) }) })] }))] }));
 };
 exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;

package/src/View/StateManagement/StateManagementPopup.js

@@ -11,6 +11,6 @@ const ExportDropdown_1 = require("./components/ExportDropdown");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
-    return ((0, jsx_runtime_1.jsxs)(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [(0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { 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' }), (0, jsx_runtime_1.jsx)(ClearButton_1.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" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mt-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', (0, jsx_runtime_1.jsx)(LoadButton_1.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" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.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" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.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 ((0, jsx_runtime_1.jsxs)(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: [(0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Clear all current user state that has been persisted' }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { 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' }), (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState(), children: "Clear User State" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:mb-2", children: 'Load Initial Adaptable State (from a .json file) - this will cause this window to close' }), ' ', (0, jsx_runtime_1.jsx)(LoadButton_1.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" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the currently persisted Adaptable State' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.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" })] }), (0, jsx_runtime_1.jsxs)(Panel_1.default, { 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: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:my-2", children: 'Exports the Initial Adaptable State which was provided at design time' }), ' ', (0, jsx_runtime_1.jsx)(ExportDropdown_1.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" })] })] }));
 };
 exports.StateManagementPopup = StateManagementPopup;

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,40 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportDropdown = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../components/DropdownButton");
 const handleExportState_1 = require("../handleExportState");
 const ExportDropdown = (props) => {
+    const { api, type, ...rest } = props;
     const handleChange = (destination) => {
-        switch (props.type) {
-            case 'adaptableState':
-                const adaptableState = props.api.stateApi.getPersistentState();
-                (0, handleExportState_1.handleExportState)(destination, 'adaptableState', adaptableState, props.api);
+        switch (type) {
+            case 'adaptableState': {
+                const adaptableState = api.stateApi.getPersistentState();
+                (0, handleExportState_1.handleExportState)(destination, 'adaptableState', adaptableState, api);
                 break;
-            case 'initialState':
-                const initialState = props.api.stateApi.getInitialState();
-                (0, handleExportState_1.handleExportState)(destination, 'initialState', initialState, props.api);
+            }
+            case 'initialState': {
+                const initialState = api.stateApi.getInitialState();
+                (0, handleExportState_1.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 ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { className: "ab-StateManagement__Export-Dropdown", ...props, items: destinationOptions, value: undefined }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { variant: "outlined", className: "ab-StateManagement__Export-Dropdown", ...rest, items: destinationOptions }));
 };
 exports.ExportDropdown = ExportDropdown;

package/src/View/StatusBar/StatusBarPanel.js

@@ -8,7 +8,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const Flex_1 = require("../../components/Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 /**
  * Statusbar sub panel are similar to vs code:
  * - text
@@ -40,6 +40,6 @@ const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: (0, clsx_1.default)(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: (0, utils_1.cn)(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick, children: [props.icon && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })), popover ? ((0, jsx_runtime_1.jsx)(AdaptablePopover_1.AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth, children: preparedContent })) : (preparedContent), ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-1", children: extraActions?.map?.((action, index) => React.createElement(action, { key: index })) }))] }));
 };
 exports.StatusBarPanel = StatusBarPanel;

package/src/View/StatusBar/StatusBarPopup.js

@@ -12,6 +12,7 @@ const StatusBarRedux_1 = require("../../Redux/ActionsReducers/StatusBarRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const statusBarPanelHelpers_1 = require("./statusBarPanelHelpers");
 const StatusBarPopup = (props) => {
     const statusPanels = (0, react_redux_1.useSelector)(StatusBarRedux_1.getStatusPanelsSelector);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -30,20 +31,51 @@ const StatusBarPopup = (props) => {
             };
         });
         adaptable.api.statusBarApi.setStatusBarPanels(newStatusPanels);
-    }, [statusPanels]);
-    const availableItems = Types_1.ALL_STATUS_SUB_PANELS.filter((panel) => {
+    }, [statusPanels, adaptable.api.statusBarApi]);
+    const availableItems = React.useMemo(() => Types_1.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 ((0, statusBarPanelHelpers_1.isRichStatusBarPanel)(module)) {
+                statusPanelIds.push(item.Id);
+            }
+            else {
+                moduleShortcutIds.push(item.Id);
+            }
+        });
+        // Roughly balance the two boxes by item count (~10 panels vs ~17 shortcuts)
+        // so the wider list gets the extra room and they feel more even.
+        return [
+            {
+                listId: 'UNUSED-PANELS',
+                title: 'Status Panels',
+                help: 'Fully featured actionable controls',
+                items: statusPanelIds,
+                flex: 40,
+            },
+            {
+                listId: 'UNUSED-SHORTCUTS',
+                title: 'Module Shortcuts',
+                help: 'Buttons to open Module Status Panel',
+                items: moduleShortcutIds,
+                flex: 60,
+            },
+        ];
+    }, [availableItems, adaptable]);
     const disabled = props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? ((0, jsx_runtime_1.jsx)(ModuleManager_1.ModuleManager, { permittedActions: {
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed(), children: statusPanels.length ? ((0, jsx_runtime_1.jsx)(ModuleManager_1.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" })) : ((0, jsx_runtime_1.jsx)(EmptyContent_1.default, { 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" })) : ((0, jsx_runtime_1.jsx)(EmptyContent_1.default, { children: "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel." })) }));
 };
 exports.StatusBarPopup = StatusBarPopup;

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,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isRichStatusBarPanel = void 0;
+const isRichStatusBarPanel = (module) => {
+    if (!module) {
+        return false;
+    }
+    const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
+    return Boolean(statusBarPanelProps.view || statusBarPanelProps.content || statusBarPanelProps.popover);
+};
+exports.isRichStatusBarPanel = isRichStatusBarPanel;

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}.
@@ -22,5 +24,10 @@ export interface BadgePillStyleEditorProps {
  * - **No** `FontSize` — pills inherit cell font sizing.
  */
 export declare const BadgePillStyleEditor: React.FunctionComponent<BadgePillStyleEditorProps>;
+/** Descriptive pill properties for summary panels (`Label: value` strings). */
+export declare const getBadgePillStyleSummaryItems: (pill: BadgePillStyle | undefined) => {
+    label: string;
+    value: string;
+}[];
 /** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
 export declare const renderBadgePillStyleSummaryTags: (pill: BadgePillStyle | undefined) => React.JSX.Element | null;

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderBadgePillStyleSummaryTags = exports.BadgePillStyleEditor = void 0;
+exports.renderBadgePillStyleSummaryTags = exports.getBadgePillStyleSummaryItems = exports.BadgePillStyleEditor = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CheckBox_1 = require("../../../components/CheckBox");
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Flex_1 = require("../../../components/Flex");
 const Toggle_1 = require("../../../components/Toggle");
-const Tag_1 = require("../../../components/Tag");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
 const CHILD_COLUMN = { name: 'children' };
 /**
@@ -39,32 +38,46 @@ const BadgePillStyleEditor = (props) => {
         }
     };
     const disabledClass = disabled ? 'twa:opacity-50 twa:pointer-events-none' : '';
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pill.BackColor, onChange: (checked) => update({ BackColor: checked ? pill.BackColor ?? '#cccccc' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !pill.BackColor, api: props.api, value: pill.BackColor || '#cccccc', onChange: (c) => update({ BackColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Text", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pill.ForeColor, onChange: (checked) => update({ ForeColor: checked ? pill.ForeColor ?? '#000000' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !pill.ForeColor, api: props.api, value: pill.ForeColor || '#000000', onChange: (c) => update({ ForeColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: !!pill.BorderColor, onChange: (checked) => update({ BorderColor: checked ? pill.BorderColor ?? '#000000' : undefined }), children: "Set" }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled || !pill.BorderColor, api: props.api, value: pill.BorderColor || '#000000', onChange: (c) => update({ BorderColor: c }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Font", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }) }) }));
+    const form = ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { columns: [LABEL_COLUMN, CHILD_COLUMN], sizes: ['7.5rem', '1fr'], gridColumnGap: "0.75rem", children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BackColor, defaultColor: "#cccccc", onChange: (c) => update({ BackColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Text", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.ForeColor, defaultColor: "#000000", onChange: (c) => update({ ForeColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Border", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { disabled: disabled, api: props.api, value: pill.BorderColor, defaultColor: "#000000", onChange: (c) => update({ BorderColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Font", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: disabledClass, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: pill.FontStyle === 'Italic', onPressedChange: (pressed) => update({ FontStyle: pressed ? 'Italic' : undefined }), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: pill.FontWeight === 'Bold', onPressedChange: (pressed) => update({ FontWeight: pressed ? 'Bold' : undefined }), icon: "bold" })] }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'Underline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Underline' : undefined }), icon: "underline" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'LineThrough', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'LineThrough' : undefined }), icon: "strikethrough" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: pill.TextDecoration === 'Overline', onPressedChange: (pressed) => update({ TextDecoration: pressed ? 'Overline' : undefined }), icon: "overline" })] })] }) }) })] }));
+    if (props.embedded) {
+        return form;
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2 twa:rounded-standard twa:border twa:border-border twa:overflow-hidden twa:shadow-sm", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-3", children: form }) }));
 };
 exports.BadgePillStyleEditor = BadgePillStyleEditor;
-/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
-const renderBadgePillStyleSummaryTags = (pill) => {
-    if (!pill)
-        return null;
-    const tags = [];
+/** Descriptive pill properties for summary panels (`Label: value` strings). */
+const getBadgePillStyleSummaryItems = (pill) => {
+    if (!pill) {
+        return [];
+    }
+    const items = [];
     if (pill.BackColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Bg ", pill.BackColor] }, "bg"));
+        items.push({ label: 'Back Colour', value: pill.BackColor });
     }
     if (pill.ForeColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Text ", pill.ForeColor] }, "fg"));
+        items.push({ label: 'Fore Colour', value: pill.ForeColor });
     }
     if (pill.BorderColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Border ", pill.BorderColor] }, "bc"));
+        items.push({ label: 'Border Colour', value: pill.BorderColor });
+    }
+    if (pill.FontWeight === 'Bold') {
+        items.push({ label: 'Font Weight', value: 'Bold' });
+    }
+    if (pill.FontStyle === 'Italic') {
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
-    if (pill.FontWeight === 'Bold')
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Bold" }, "b"));
-    if (pill.FontStyle === 'Italic')
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Italic" }, "i"));
     if (pill.TextDecoration && pill.TextDecoration !== 'None') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: pill.TextDecoration }, "td"));
+        items.push({ label: 'Text Decoration', value: pill.TextDecoration });
     }
-    if (tags.length === 0)
+    return items;
+};
+exports.getBadgePillStyleSummaryItems = getBadgePillStyleSummaryItems;
+/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
+const renderBadgePillStyleSummaryTags = (pill) => {
+    const items = (0, exports.getBadgePillStyleSummaryItems)(pill);
+    if (!items.length) {
         return null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return (0, SummaryColorTag_1.renderSummaryLabelValueTags)(items);
 };
 exports.renderBadgePillStyleSummaryTags = renderBadgePillStyleSummaryTags;

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

@@ -1,6 +1,14 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../types';
-export declare const renderBadgeSummary: (styledColumn: StyledColumn) => React.JSX.Element;
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+export declare const getStyledColumnBadgeDefinitionViewValueGroups: (styledColumn: StyledColumn, api: AdaptableApi) => string[][];
+export declare const getStyledColumnBadgeDefinitionViewValues: (styledColumn: StyledColumn, api: AdaptableApi) => string[];
+export declare const getStyledColumnBadgeStyleViewValues: (styledColumn: StyledColumn, api?: AdaptableApi) => string[];
+export declare const renderBadgeDefinitionSummaryTags: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;
+export declare const StyledColumnBadgeDefinitionsView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
+export declare const renderBadgeSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;
 export interface StyledColumnBadgeSectionProps {
     onChange: (data: StyledColumn) => void;
 }
@@ -9,4 +17,4 @@ export interface StyledColumnBadgeStyleSectionProps {
     onChange: (data: StyledColumn) => void;
 }
 export declare const StyledColumnBadgeStyleSection: React.FunctionComponent<StyledColumnBadgeStyleSectionProps>;
-export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn) => React.JSX.Element;
+export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn, api: AdaptableApi) => React.JSX.Element;