@adaptabletools/adaptable-cjs 22.1.1-canary.1 → 23.0.0-canary.0

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -2,8 +2,8 @@
 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 React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../components/CheckBox");
 const FormLayout_1 = tslib_1.__importStar(require("../components/FormLayout"));
 const Tabs_1 = require("../components/Tabs");
@@ -34,33 +34,10 @@ const SpecialColumnSettingsWizardStep = (props) => {
             ...values,
         });
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column Properties"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(Flex_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { className: "twa:w-full", columns: [
-                            { name: 'first', size: '30%' },
-                            { size: '30%', name: 'second' },
-                            { size: '30%', name: 'third' },
-                        ] },
-                        React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
-                        React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
-                        React.createElement(FormLayout_1.FormRow, null,
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
-                            React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
-        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (0, chunk_1.default)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormLayout_1.FormRow, { key: first },
-                    first && (React.createElement(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first) }, first)),
-                    second && (React.createElement(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second) }, second)))))))))));
+    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))) }) })] }))] }));
 };
 exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;

package/src/View/StateManagement/StateManagementPopup.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StateManagementPopup = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const LoadButton_1 = require("./components/LoadButton");
@@ -11,22 +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 (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        React.createElement(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" },
-            React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, 'Clear all current user state that has been persisted'),
-            React.createElement(HelpBlock_1.default, { style: { color: 'var(--ab-color-warn)' } }, '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'),
-            React.createElement(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() }, "Clear User State")),
-        React.createElement(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" },
-            React.createElement(HelpBlock_1.default, { className: "twa:mt-2" }, 'Load Initial Adaptable State (from a .json file) - this will cause this window to close'),
-            ' ',
-            React.createElement(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" }, "Load Initial Adaptable State")),
-        React.createElement(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' },
-            React.createElement(HelpBlock_1.default, { className: "twa:my-2" }, 'Exports the currently persisted Adaptable State'),
-            ' ',
-            React.createElement(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" }, "Select Export Destination")),
-        React.createElement(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" },
-            React.createElement(HelpBlock_1.default, { className: "twa:my-2" }, 'Exports the Initial Adaptable State which was provided at design time'),
-            ' ',
-            React.createElement(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" }, "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, { 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" })] })] }));
 };
 exports.StateManagementPopup = StateManagementPopup;

package/src/View/StateManagement/StateManagementViewPanel.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StateManagementViewPanel = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const LoadButton_1 = require("./components/LoadButton");
@@ -12,13 +12,8 @@ const Flex_1 = require("../../components/Flex");
 const StateManagementViewPanel = (props) => {
     const isToolbar = props.viewType === 'Toolbar';
     const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, join_1.default)(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, join_1.default)(props.accessLevel == GeneralConstants.ACCESS_LEVEL_READ_ONLY
             ? GeneralConstants.READ_ONLY_STYLE
-            : '', `ab-${elementType}__StateManagement__wrap twa:min-h-input`) },
-        React.createElement(Flex_1.Flex, { flexDirection: "row" },
-            React.createElement(LoadButton_1.LoadButton, { tooltip: "Load Initial Adaptable State", variant: "text", icon: "upload", onLoad: (json) => props.api.stateApi.reloadInitialState(json), accessLevel: props.accessLevel }, !isToolbar && 'Load'),
-            React.createElement(ClearButton_1.ClearButton, { icon: "delete", tooltip: "Clear User State", variant: "text", onClick: () => props.api.stateApi.reloadInitialState(), accessLevel: props.accessLevel }, !isToolbar && 'Clear')),
-        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState" }, "All State"),
-        React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState" }, "Initial Adaptable State")));
+            : '', `ab-${elementType}__StateManagement__wrap twa:min-h-input`), children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(LoadButton_1.LoadButton, { tooltip: "Load Initial Adaptable State", variant: "text", icon: "upload", onLoad: (json) => props.api.stateApi.reloadInitialState(json), accessLevel: props.accessLevel, children: !isToolbar && 'Load' }), (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { icon: "delete", tooltip: "Clear User State", variant: "text", onClick: () => props.api.stateApi.reloadInitialState(), accessLevel: props.accessLevel, children: !isToolbar && 'Clear' })] }), (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", children: "All State" }), (0, jsx_runtime_1.jsx)(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState", children: "Initial Adaptable State" })] }));
 };
 exports.StateManagementViewPanel = StateManagementViewPanel;

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClearButton = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const ClearButton = (props) => {
-    return (React.createElement(SimpleButton_1.default, { ...props, className: "ab-StateManagement__Clear-Button", tooltip: "Clear User State" }, props.children));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { ...props, className: "ab-StateManagement__Clear-Button", tooltip: "Clear User State", children: props.children }));
 };
 exports.ClearButton = ClearButton;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportDropdown = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const handleExportState_1 = require("../handleExportState");
 const ExportDropdown = (props) => {
@@ -35,6 +35,6 @@ const ExportDropdown = (props) => {
             onClick: () => handleChange('JSON'),
         },
     ];
-    return (React.createElement(DropdownButton_1.default, { className: "ab-StateManagement__Export-Dropdown", ...props, items: destinationOptions, value: undefined }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { className: "ab-StateManagement__Export-Dropdown", ...props, items: destinationOptions, value: undefined }));
 };
 exports.ExportDropdown = ExportDropdown;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadButton = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const FileDroppable_1 = require("../../../components/FileDroppable");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const LoadButton = (props) => {
@@ -20,20 +20,17 @@ const LoadButton = (props) => {
             props.onLoad(json);
         });
     };
-    return (React.createElement(SimpleButton_1.default, { ...props, className: "ab-StateManagement__Load-Button" },
-        React.createElement("input", { "aria-label": "Load Adaptable State", type: "file", onChange: (json) => onLoadInitialState(json), accept: '.json', style: {
-                opacity: 0,
-                position: 'absolute',
-                cursor: 'pointer',
-                fontSize: 0,
-                lineHeight: 0,
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                zIndex: 1,
-            } }),
-        ' ',
-        props.children));
+    return ((0, jsx_runtime_1.jsxs)(SimpleButton_1.default, { ...props, className: "ab-StateManagement__Load-Button", children: [(0, jsx_runtime_1.jsx)("input", { "aria-label": "Load Adaptable State", type: "file", onChange: (json) => onLoadInitialState(json), accept: '.json', style: {
+                    opacity: 0,
+                    position: 'absolute',
+                    cursor: 'pointer',
+                    fontSize: 0,
+                    lineHeight: 0,
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 1,
+                } }), ' ', props.children] }));
 };
 exports.LoadButton = LoadButton;

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableStatusBar = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
+const react_2 = require("react");
 const react_redux_1 = require("react-redux");
 const StatusBarRedux_1 = require("../../Redux/ActionsReducers/StatusBarRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -13,32 +15,32 @@ const Flex_1 = require("../../components/Flex");
 const AdaptableStatusBar = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const rerender = (0, useRerender_1.useRerender)();
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         return adaptable.api.eventApi.on('AdaptableStateChanged', rerender);
     }, [adaptable]);
     const statusPanels = (0, react_redux_1.useSelector)(StatusBarRedux_1.getStatusPanelsSelector);
     const dispatch = (0, react_redux_1.useDispatch)();
     const statusSubPanels = statusPanels.find((statusPanel) => statusPanel.Key === props.context.Key);
     const allMenuItems = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanelModuleEntries);
-    return (React.createElement(Flex_1.Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, statusSubPanels?.StatusBarPanels?.map((subPanel) => {
-        const module = adaptable.ModuleService.getModuleById(subPanel);
-        if (!module?.isModuleVisible()) {
-            return React.createElement(React.Fragment, { key: subPanel });
-        }
-        /**
-         * Both view properties and status panel are optional.
-         */
-        const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
-        const moduleInfo = module.moduleInfo;
-        const onAction = statusBarPanelProps.onAction ??
-            (() => {
-                // #by-default-open-settings-panel-for-module
-                const menuItem = allMenuItems.find((menuItem) => menuItem.category === subPanel);
-                if (menuItem?.reduxAction) {
-                    dispatch(menuItem.reduxAction);
-                }
-            });
-        return (React.createElement(StatusBarPanel_1.StatusBarPanel, { "data-name": subPanel, ...statusBarPanelProps, tooltip: moduleInfo.FriendlyName, onAction: onAction, icon: statusBarPanelProps.icon ?? moduleInfo.Glyph, key: subPanel }));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key, children: statusSubPanels?.StatusBarPanels?.map((subPanel) => {
+            const module = adaptable.ModuleService.getModuleById(subPanel);
+            if (!module?.isModuleVisible()) {
+                return (0, jsx_runtime_1.jsx)(React.Fragment, {}, subPanel);
+            }
+            /**
+             * Both view properties and status panel are optional.
+             */
+            const statusBarPanelProps = module.getViewProperties?.()?.getStatusBarPanelProps?.() ?? {};
+            const moduleInfo = module.moduleInfo;
+            const onAction = statusBarPanelProps.onAction ??
+                (() => {
+                    // #by-default-open-settings-panel-for-module
+                    const menuItem = allMenuItems.find((menuItem) => menuItem.category === subPanel);
+                    if (menuItem?.reduxAction) {
+                        dispatch(menuItem.reduxAction);
+                    }
+                });
+            return ((0, react_1.createElement)(StatusBarPanel_1.StatusBarPanel, { "data-name": subPanel, ...statusBarPanelProps, tooltip: moduleInfo.FriendlyName, onAction: onAction, icon: statusBarPanelProps.icon ?? moduleInfo.Glyph, key: subPanel }));
+        }) }));
 };
 exports.AdaptableStatusBar = AdaptableStatusBar;

package/src/View/StatusBar/StatusBarPanel.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusBarPanel = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
@@ -19,7 +20,7 @@ const StatusBarPanel = (props) => {
     const handleAction = () => onAction();
     if (view) {
         const View = view;
-        return React.createElement(View, null);
+        return (0, jsx_runtime_1.jsx)(View, {});
     }
     const baseClassName = 'ab-StatusBar__SubPanel';
     const handleIconClick = React.useCallback(() => {
@@ -39,9 +40,6 @@ const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return (React.createElement(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 },
-        props.icon && (React.createElement(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 ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent),
-        ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && (React.createElement(Flex_1.Box, { className: "twa:ml-1" }, 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, 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 })) }))] }));
 };
 exports.StatusBarPanel = StatusBarPanel;

package/src/View/StatusBar/StatusBarPopup.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusBarPopup = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ModuleManager_1 = require("../../components/DragAndDropContext/ModuleManager");
@@ -38,11 +39,11 @@ const StatusBarPopup = (props) => {
         return { Id: panel, Title: module.moduleInfo.FriendlyName };
     });
     const disabled = props.accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() }, statusPanels.length ? (React.createElement(ModuleManager_1.ModuleManager, { 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" })) : (React.createElement(EmptyContent_1.default, null, "To enable this feature add to Grid Options statusPanels the Adaptable Status Panel."))));
+    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: {
+                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." })) }));
 };
 exports.StatusBarPopup = StatusBarPopup;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
+import { BadgePillStyle } from '../../../AdaptableState/StyledColumnState';
+export interface BadgePillStyleEditorProps {
+    api: AdaptableApi;
+    /** Current pill style (may be undefined / partial). */
+    value: BadgePillStyle | undefined;
+    /**
+     * Called whenever the pill style changes. Pass `undefined` to clear the
+     * pill style entirely (every key unset).
+     */
+    onChange: (next: BadgePillStyle | undefined) => void;
+    disabled?: boolean;
+}
+/**
+ * Compact editor for the cut-down {@link BadgePillStyle}.
+ *
+ * Intentionally narrower than `StyleComponent`:
+ * - **No** `BorderRadius` — corner radius is owned by `Shape`.
+ * - **No** `Alignment` — badge-row alignment is column-level (`BadgeStyle.Font`).
+ * - **No** `ClassName` — pill `ClassName` had no effect at runtime; gone.
+ * - **No** `FontSize` — pills inherit cell font sizing.
+ */
+export declare const BadgePillStyleEditor: React.FunctionComponent<BadgePillStyleEditorProps>;
+/** 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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderBadgePillStyleSummaryTags = 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 LABEL_COLUMN = { name: 'label', style: { textAlign: 'start' } };
+const CHILD_COLUMN = { name: 'children' };
+/**
+ * Compact editor for the cut-down {@link BadgePillStyle}.
+ *
+ * Intentionally narrower than `StyleComponent`:
+ * - **No** `BorderRadius` — corner radius is owned by `Shape`.
+ * - **No** `Alignment` — badge-row alignment is column-level (`BadgeStyle.Font`).
+ * - **No** `ClassName` — pill `ClassName` had no effect at runtime; gone.
+ * - **No** `FontSize` — pills inherit cell font sizing.
+ */
+const BadgePillStyleEditor = (props) => {
+    const pill = props.value ?? {};
+    const { disabled } = props;
+    const update = (patch) => {
+        const next = { ...pill, ...patch };
+        Object.keys(next).forEach((k) => {
+            const v = next[k];
+            if (v === undefined || v === null || v === '') {
+                delete next[k];
+            }
+        });
+        if (Object.keys(next).length === 0) {
+            props.onChange(undefined);
+        }
+        else {
+            props.onChange(next);
+        }
+    };
+    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" })] })] }) }) })] }) }) }));
+};
+exports.BadgePillStyleEditor = BadgePillStyleEditor;
+/** Compact summary tags for a {@link BadgePillStyle}; used by wizard summaries. */
+const renderBadgePillStyleSummaryTags = (pill) => {
+    if (!pill)
+        return null;
+    const tags = [];
+    if (pill.BackColor) {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Bg ", pill.BackColor] }, "bg"));
+    }
+    if (pill.ForeColor) {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Text ", pill.ForeColor] }, "fg"));
+    }
+    if (pill.BorderColor) {
+        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Border ", pill.BorderColor] }, "bc"));
+    }
+    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"));
+    }
+    if (tags.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+};
+exports.renderBadgePillStyleSummaryTags = renderBadgePillStyleSummaryTags;

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

@@ -5,3 +5,8 @@ export interface StyledColumnBadgeSectionProps {
     onChange: (data: StyledColumn) => void;
 }
 export declare const StyledColumnBadgeSection: React.FunctionComponent<StyledColumnBadgeSectionProps>;
+export interface StyledColumnBadgeStyleSectionProps {
+    onChange: (data: StyledColumn) => void;
+}
+export declare const StyledColumnBadgeStyleSection: React.FunctionComponent<StyledColumnBadgeStyleSectionProps>;
+export declare const renderBadgeStyleSummary: (styledColumn: StyledColumn) => React.JSX.Element;