@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -1,8 +1,9 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import kebabCase from '../../../Utilities/utils/kebabCase';
 import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { connect } from 'react-redux';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../AdaptableButton';
 import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { Icon } from '../../../components/icons';
 import { CheckBox } from '../../../components/CheckBox';
@@ -13,20 +14,19 @@ import { ButtonConfigure } from '../Buttons/ButtonConfigure';
 import { renderWithAdaptableContext } from '../../renderWithAdaptableContext';
 import { ToolPanelWrapper } from './ToolPanelWrapper';
 import { ToolPanelConfigView } from './ToolPanelPopup';
-import { createUuid } from '../../../components/utils/uuid';
 import { ToolPanelModuleId } from '../../../Utilities/Constants/ModuleConstants';
 import HelpBlock from '../../../components/HelpBlock';
 import { Flex } from '../../../components/Flex';
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
-    const toolPanelsGlyph = React.createElement(Icon, { name: 'align-justify' });
+    const toolPanelsGlyph = _jsx(Icon, { name: 'align-justify' });
     const moduleService = props.api.internalApi.getModuleService();
     const adaptableOptions = props.api.optionsApi.getAdaptableOptions();
     const toolPanelOptions = adaptableOptions.toolPanelOptions;
     const settingsPanelOptions = adaptableOptions.settingsPanelOptions;
     if (props.api.entitlementApi.isModuleHiddenEntitlement('ToolPanel')) {
         // do NOT show any toolPanel content if the required entitlements are missing
-        return React.createElement(HelpBlock, { className: "twa:my-2 twa:p-2 twa:text-3" }, "Not enough rights");
+        return _jsx(HelpBlock, { className: "twa:my-2 twa:p-2 twa:text-3", children: "Not enough rights" });
     }
     const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
     const availableModules = availableModuleItems.map((menuItem) => menuItem.category);
@@ -62,14 +62,14 @@ const AdaptableToolPanelComponent = (props) => {
         const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
         if (customToolPanel) {
             visibleToolPanels.push(customToolPanel.name);
-            return (React.createElement(ToolPanelWrapper, { key: customToolPanel.name, customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }));
+            return (_jsx(ToolPanelWrapper, { customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }, customToolPanel.name));
         }
         // 2. check if it's an available module toolPanel
         if (availableModuleToolPanels.some((module) => module === toolPanelDefinition.Name)) {
             // assertion is safe as if just checked it in the if clause
             const moduleToolPanel = toolPanelDefinition.Name;
             visibleToolPanels.push(moduleToolPanel);
-            return (React.createElement(ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
+            return (_jsx(ToolPanelWrapper, { adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }, moduleToolPanel));
         }
     });
     const renderToolPanelDropdowns = () => {
@@ -79,11 +79,7 @@ const AdaptableToolPanelComponent = (props) => {
         let toolpanelItems = [
             {
                 clickable: false,
-                label: (React.createElement("div", { key: "toolPanelTitle" },
-                    ' ',
-                    "\u00A0\u00A0",
-                    React.createElement("b", null, 'Tool Panels'),
-                    renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels))),
+                label: (_jsxs("div", { children: [' ', "\u00A0\u00A0", _jsx("b", { children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
@@ -93,7 +89,7 @@ const AdaptableToolPanelComponent = (props) => {
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: (React.createElement(CheckBox, { className: "ab-dd-checkbox twa:my-0", variant: "agGrid", as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
+                label: (_jsx(CheckBox, { className: "ab-dd-checkbox twa:my-0", variant: "agGrid", as: "div", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -116,7 +112,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        return (React.createElement(DropdownButton, { variant: "text", tone: "none", collapseOnItemClick: false, key: 'dropdown-toolpanels', id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels" }, toolPanelsGlyph));
+        return (_jsx(DropdownButton, { variant: "text", tone: "none", collapseOnItemClick: false, id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", columns: ['label'], items: toolpanelItems, tooltip: "Manage Tool Panels", children: toolPanelsGlyph }, 'dropdown-toolpanels'));
     };
     const renderToolPanelButtons = () => {
         const toolPanelButtons = [];
@@ -130,7 +126,7 @@ const AdaptableToolPanelComponent = (props) => {
             toolPanelButtons.push(moduleButtons.map((x) => {
                 let menuItem = props.MainMenuItems.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(SimpleButton, { "data-name": menuItem.category, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL }));
+                    return (_jsx(SimpleButton, { "data-name": menuItem.category, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${kebabCase(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: ACCESS_LEVEL_FULL }, menuItem.label));
                 }
             }));
         }
@@ -138,24 +134,12 @@ const AdaptableToolPanelComponent = (props) => {
     };
     const renderCustomToolPanelButtons = () => {
         return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
-            // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-            // with the next opportunity we should abstract it
             const toolPanelContext = {
                 ...props.api.internalApi.buildBaseContext(),
                 toolPanelState: props.api.toolPanelApi.getToolPanelState(),
             };
-            const buttonIcon = props.api.internalApi.getIconForButton(button, toolPanelContext);
-            let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
-            let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
-            let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
-            if (button.hidden && button.hidden(button, toolPanelContext)) {
-                return null;
-            }
-            const disabled = button.disabled && button.disabled(button, toolPanelContext);
-            const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
-            const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel ?? createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
+            const buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
+            return (_jsx(AdaptableButtonView, { button: button, context: toolPanelContext, api: props.api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.toolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)}` }, buttonLabel || button.Uuid));
         });
     };
     const onSetToolPanelVisibility = (name, checked) => {
@@ -170,24 +154,18 @@ const AdaptableToolPanelComponent = (props) => {
         const moduleParams = initialTab
             ? { source: 'Other', config: { initialTab } }
             : undefined;
-        return (React.createElement(ButtonConfigure, { iconSize: 16, tone: "none", className: "ab-ToolPanel__configure-button twa:ml-2", tooltip: 'Configure ToolPanels', onClick: () => {
+        return (_jsx(ButtonConfigure, { iconSize: 16, tone: "none", className: "ab-ToolPanel__configure-button twa:ml-2", tooltip: 'Configure ToolPanels', onClick: () => {
                 props.api.internalApi.showSettingsPanel('ToolPanel', moduleParams);
             } }));
     };
     const toolPanelButtons = renderToolPanelButtons();
-    return (React.createElement(Flex // Cannot have the with of the parent, on windows, when you have scrollbars
+    return (_jsxs(Flex // Cannot have the with of the parent, on windows, when you have scrollbars
     // the inner-width is smaller
     // minWidth: 'var(--ab-cmp-toolpanel__width)',
     , { 
         // the inner-width is smaller
         // minWidth: 'var(--ab-cmp-toolpanel__width)',
-        className: "ab-ToolPanel twa:p-2 twa:w-full", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center" },
-        React.createElement(Flex, { className: "ab-ToolPanel__header twa:p-1 twa:w-full twa:justify-start", flexDirection: "row", flexWrap: "wrap" },
-            isToolPanelModuleConfigurable && renderToolPanelDropdowns(),
-            toolPanelButtons,
-            isToolPanelModuleConfigurable && renderToolPanelConfigureButton()),
-        Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (React.createElement(Flex, { className: "ab-ToolPanel__header__buttons twa:p-1 twa:justify-start", flexDirection: "row", flexWrap: "wrap" }, renderCustomToolPanelButtons())),
-        visibleToolPanelControls));
+        className: "ab-ToolPanel twa:p-2 twa:w-full", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", children: [_jsxs(Flex, { className: "ab-ToolPanel__header twa:p-1 twa:w-full twa:justify-start", flexDirection: "row", flexWrap: "wrap", children: [isToolPanelModuleConfigurable && renderToolPanelDropdowns(), toolPanelButtons, isToolPanelModuleConfigurable && renderToolPanelConfigureButton()] }), Boolean(props.api.toolPanelApi.getCustomToolPanelButtons().length) && (_jsx(Flex, { className: "ab-ToolPanel__header__buttons twa:p-1 twa:justify-start", flexDirection: "row", flexWrap: "wrap", children: renderCustomToolPanelButtons() })), visibleToolPanelControls] }));
 };
 function mapStateToProps(state) {
     return {
@@ -218,8 +196,8 @@ export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
     }
     if (adaptable.variant === 'react') {
         return () => {
-            const content = renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
-            return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
+            const content = renderWithAdaptableContext(_jsx(ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            return (_jsx("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle, children: content }));
         };
     }
     return class AdaptableToolPanelAgGridComponent {
@@ -235,7 +213,7 @@ export const getAdaptableToolPanelAgGridComponent = (adaptable) => {
                 //@ts-ignore
                 this.gui.style[key] = toolPanelContainerStyle[key];
             });
-            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(React.createElement(ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
+            this.unmountReactRoot = adaptable.renderReactRoot(renderWithAdaptableContext(_jsx(ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -1,10 +1,8 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
 import { useAdaptable } from '../../AdaptableContext';
-import { createUuid } from '../../../components/utils/uuid';
-import SimpleButton from '../../../components/SimpleButton';
+import { ADAPTABLE_BUTTON_SURFACE_DEFAULTS, AdaptableButtonView, } from '../AdaptableButton';
 import kebabCase from '../../../Utilities/utils/kebabCase';
-import { ACCESS_LEVEL_FULL } from '../../../Utilities/Constants/GeneralConstants';
 export const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = useAdaptable();
@@ -39,29 +37,15 @@ export const CustomToolPanelContent = (props) => {
             }
         };
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: contentsDivDomRef, id: contentsDivId, className: contentsDivId, dangerouslySetInnerHTML: { __html: contentsHTML }, style: { width: '100%' } }),
-        customToolPanel.buttons?.length && (React.createElement("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}` }, customToolPanel.buttons.map((button) => {
-            // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
-            // with the next opportunity we should abstract it
-            const toolPanelContext = {
-                ...api.internalApi.buildBaseContext(),
-                toolPanelState: api.toolPanelApi.getToolPanelState(),
-                customToolPanel: customToolPanel,
-            };
-            const buttonIcon = api.internalApi.getIconForButton(button, toolPanelContext);
-            let buttonStyle = api.internalApi.getStyleForButton(button, toolPanelContext);
-            let buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext);
-            let buttonTooltip = api.internalApi.getTooltipForButton(button, toolPanelContext);
-            if (button.hidden && button.hidden(button, toolPanelContext)) {
-                return null;
-            }
-            const disabled = button.disabled && button.disabled(button, toolPanelContext);
-            const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
-            const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
-            const uniqueKey = buttonLabel ?? createUuid();
-            return (React.createElement(SimpleButton, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: ACCESS_LEVEL_FULL }, buttonLabel));
-        })))));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: contentsDivDomRef, id: contentsDivId, className: contentsDivId, dangerouslySetInnerHTML: { __html: contentsHTML }, style: { width: '100%' } }), customToolPanel.buttons?.length && (_jsx("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}`, children: customToolPanel.buttons.map((button) => {
+                    const toolPanelContext = {
+                        ...api.internalApi.buildBaseContext(),
+                        toolPanelState: api.toolPanelApi.getToolPanelState(),
+                        customToolPanel: customToolPanel,
+                    };
+                    const buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
+                    return (_jsx(AdaptableButtonView, { button: button, context: toolPanelContext, api: api, defaults: ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${kebabCase(buttonLabel)}` }, buttonLabel || button.Uuid));
+                }) }))] }));
 };
 const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;
 const hasCustomFrameworkComponent = (customToolPanel) => customToolPanel.frameworkComponent;

package/src/View/Components/ToolPanel/ToolPanelPopup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
@@ -65,18 +66,7 @@ class ToolPanelPopupComponent extends React.Component {
             }
             return false;
         };
-        return (React.createElement(PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), scrollable: false },
-            React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-                React.createElement(Panel.FlexBody, null,
-                    React.createElement(Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup twa:min-h-0 twa:flex-1", value: this.state.ToolPanelConfigView, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
-                        React.createElement(Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
-                            React.createElement(Radio, { className: "twa:m-0", value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
-                        React.createElement(Tabs.Tab, { value: ToolPanelConfigView.Buttons },
-                            React.createElement(Radio, { className: "twa:m-0", value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
-                        React.createElement(Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
-                            React.createElement(ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
-                        React.createElement(Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                            React.createElement(ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))))));
+        return (_jsx(PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), scrollable: false, children: _jsx(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: _jsx(Panel.FlexBody, { children: _jsxs(Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup twa:min-h-0 twa:flex-1", value: this.state.ToolPanelConfigView, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }), children: [_jsx(Tabs.Tab, { value: ToolPanelConfigView.ToolPanels, children: _jsx(Radio, { className: "twa:m-0", value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1, children: "Tool Panels" }) }), _jsx(Tabs.Tab, { value: ToolPanelConfigView.Buttons, children: _jsx(Radio, { className: "twa:m-0", value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1, children: "Module Buttons" }) }), _jsx(Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' }, children: _jsx(ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly }) }), _jsx(Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' }, children: _jsx(ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) }) })] }) }) }) }));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;

package/src/View/Components/ToolPanel/ToolPanelWrapper.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useAdaptable } from '../../AdaptableContext';
 import { AdaptableViewPanelFactory } from '../../AdaptableViewFactory';
 import { CustomToolPanelContent } from './CustomToolPanelContent';
@@ -20,7 +20,7 @@ export const ToolPanelWrapper = (props) => {
             return [
                 adaptableToolPanel,
                 moduleInfo.FriendlyName,
-                ModuleToolPanel ? (React.createElement(ModuleToolPanel, { viewType: "ToolPanel", api: api, accessLevel: accessLevel, moduleInfo: moduleInfo })) : null,
+                ModuleToolPanel ? (_jsx(ModuleToolPanel, { viewType: "ToolPanel", api: api, accessLevel: accessLevel, moduleInfo: moduleInfo })) : null,
                 moduleInfo,
             ];
         }
@@ -29,7 +29,7 @@ export const ToolPanelWrapper = (props) => {
             return [
                 customToolPanel.name,
                 customToolPanel?.title ?? customToolPanel.name,
-                React.createElement(CustomToolPanelContent, { customToolPanel: customToolPanel }),
+                _jsx(CustomToolPanelContent, { customToolPanel: customToolPanel }),
             ];
         }
     };
@@ -42,18 +42,17 @@ export const ToolPanelWrapper = (props) => {
         .getModuleService()
         .getModuleById(ToolPanelModuleId)
         .isModuleEditable();
-    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(Box, { className: `twa:mt-1 ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
-        React.createElement(PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
-                onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
-            }, isMinimised: isMinimised, onConfigure: isConfigurable
-                ? () => {
-                    const maxWidth = api.internalApi
-                        .getModuleService()
-                        .getPopupMaxWidth(moduleInfo.ModuleName);
-                    const popupParams = maxWidth
-                        ? { maxWidth, source: 'Toolbar' }
-                        : { source: 'Toolbar' };
-                    api.internalApi.dispatchReduxAction(PopupRedux.PopupShowScreen(moduleInfo.ModuleName, moduleInfo.Popup, popupParams));
-                }
-                : null, onClose: () => api.internalApi.dispatchReduxAction(ToolPanelRedux.ToolPanelHideToolPanel(toolPanelName)) }, isMinimised ? null : toolPanelContent)))));
+    return (_jsx(_Fragment, { children: toolPanelContent && (_jsx(Box, { className: `twa:mt-1 ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}`, children: _jsx(PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
+                    onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
+                }, isMinimised: isMinimised, onConfigure: isConfigurable
+                    ? () => {
+                        const maxWidth = api.internalApi
+                            .getModuleService()
+                            .getPopupMaxWidth(moduleInfo.ModuleName);
+                        const popupParams = maxWidth
+                            ? { maxWidth, source: 'Toolbar' }
+                            : { source: 'Toolbar' };
+                        api.internalApi.dispatchReduxAction(PopupRedux.PopupShowScreen(moduleInfo.ModuleName, moduleInfo.Popup, popupParams));
+                    }
+                    : null, onClose: () => api.internalApi.dispatchReduxAction(ToolPanelRedux.ToolPanelHideToolPanel(toolPanelName)), children: isMinimised ? null : toolPanelContent }) })) }));
 };

package/src/View/Components/ValueSelector/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState, useMemo, useCallback } from 'react';
 import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
@@ -56,37 +57,32 @@ export function ValueSelector(props) {
         const identifier = toIdentifier(option);
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
-        return (React.createElement(DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps) => {
-            const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (React.createElement(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2', {
-                    'twa:mt-1': index,
-                    'twa:mt-0': !index,
-                }, restDomProps.className, `${baseClassName}__option`) },
-                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1" },
-                    reorderable ? (React.createElement(Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
-                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
-                    singleSelect ? (React.createElement(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
-                            if (checked) {
-                                selectedMap.clear();
-                                selectedMap.set(identifier, option);
-                            }
-                            else {
-                                selectedMap.delete(identifier);
-                            }
-                            notifyChange();
-                        } }, label)) : (React.createElement(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
-                            if (checked) {
-                                selectedMap.set(identifier, option);
-                            }
-                            else {
-                                selectedMap.delete(identifier);
-                            }
-                            notifyChange();
-                        }, checked: selectedMap.has(identifier) }, label)),
-                    React.createElement(Box, { className: "twa:ml-2 twa:flex-1" }, allowReorder ? preparedToLabel(option) : null))));
-        }));
+        return (_jsx(DragList.DraggableItem, { id: `${identifier}`, children: (itemDomProps) => {
+                const { onPointerDown, ...restDomProps } = itemDomProps;
+                return (_jsx(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2', {
+                        'twa:mt-1': index,
+                        'twa:mt-0': !index,
+                    }, restDomProps.className, `${baseClassName}__option`), children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1", children: [reorderable ? (_jsx(Box, { onPointerDown: onPointerDown, className: "twa:mr-3", children: _jsx(Icon, { name: "drag", style: { cursor: 'grab' } }) })) : null, singleSelect ? (_jsx(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
+                                    if (checked) {
+                                        selectedMap.clear();
+                                        selectedMap.set(identifier, option);
+                                    }
+                                    else {
+                                        selectedMap.delete(identifier);
+                                    }
+                                    notifyChange();
+                                }, children: label })) : (_jsx(CheckBox, { "data-name": identifier, disabled: disabled || (isOptionDisabled ? isOptionDisabled(option) : false), onChange: (checked) => {
+                                    if (checked) {
+                                        selectedMap.set(identifier, option);
+                                    }
+                                    else {
+                                        selectedMap.delete(identifier);
+                                    }
+                                    notifyChange();
+                                }, checked: selectedMap.has(identifier), children: label })), _jsx(Box, { className: "twa:ml-2 twa:flex-1", children: allowReorder ? preparedToLabel(option) : null })] }) }));
+            } }, identifier));
     };
-    const showOnlySelectedCheckbox = (React.createElement(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel ?? 'Show Selected Only'));
+    const showOnlySelectedCheckbox = (_jsx(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly, children: showSelectedOnlyLabel ?? 'Show Selected Only' }));
     const selectionSectionProps = {
         ...props,
         showOnlySelectedCheckbox,
@@ -105,78 +101,69 @@ export function ValueSelector(props) {
             notifyChange();
         },
     };
-    return (React.createElement(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column" },
-        React.createElement(Flex, { className: "twa:mb-1" }, showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (React.createElement(Box, { className: "twa:flex-1" }))),
-        renderSelectionSection(selectionSectionProps),
-        React.createElement(DragDropProvider, null,
-            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
-                React.createElement(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
-                        proxyElement.classList.add('twa:shadow-md');
-                    }, onDrop: (_sortedIndexes) => {
-                        const selection = [];
-                        const extraKeys = [];
-                        for (const [key, value] of selectedMap) {
-                            if (value != null) {
-                                selection.push(key);
-                            }
-                            else {
-                                // null/non-existent keys have to be stored separately
-                                extraKeys.push(key);
+    return (_jsxs(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column", children: [_jsx(Flex, { className: "twa:mb-1", children: showFilterInput && filter ? (_jsx(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", inputClassName: "twa:p-3", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (_jsx(Box, { className: "twa:flex-1" })) }), renderSelectionSection(selectionSectionProps), _jsx(DragDropProvider, { children: _jsx(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column", children: _jsx(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+                            proxyElement.classList.add('twa:shadow-md');
+                        }, onDrop: (_sortedIndexes) => {
+                            const selection = [];
+                            const extraKeys = [];
+                            for (const [key, value] of selectedMap) {
+                                if (value != null) {
+                                    selection.push(key);
+                                }
+                                else {
+                                    // null/non-existent keys have to be stored separately
+                                    extraKeys.push(key);
+                                }
                             }
-                        }
-                        const clone = new Map(selectedMap);
-                        // const newSelection: ID_TYPE[] = ArrayExtensions.reorderArray(
-                        //   selection,
-                        //   dragIndex,
-                        //   dropIndex
-                        // );
-                        const newSelection = _sortedIndexes
-                            .map((index) => selection[index])
-                            .filter((x) => x != null);
-                        newSelection.push(...extraKeys);
-                        selectedMap.clear();
-                        newSelection.forEach((key) => {
-                            selectedMap.set(key, clone.get(key));
-                        });
-                        notifyChange();
-                    } }, (listDomProps) => (React.createElement("div", { ...listDomProps }, options
-                    .filter((option) => {
-                    let result = true;
-                    if (filter) {
-                        result = filter(option, searchInputValue);
-                    }
-                    result =
-                        result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
-                    return result;
-                })
-                    .map(renderOption))))))));
+                            const clone = new Map(selectedMap);
+                            // const newSelection: ID_TYPE[] = ArrayExtensions.reorderArray(
+                            //   selection,
+                            //   dragIndex,
+                            //   dropIndex
+                            // );
+                            const newSelection = _sortedIndexes
+                                .map((index) => selection[index])
+                                .filter((x) => x != null);
+                            newSelection.push(...extraKeys);
+                            selectedMap.clear();
+                            newSelection.forEach((key) => {
+                                selectedMap.set(key, clone.get(key));
+                            });
+                            notifyChange();
+                        }, children: (listDomProps) => (_jsx("div", { ...listDomProps, children: options
+                                .filter((option) => {
+                                let result = true;
+                                if (filter) {
+                                    result = filter(option, searchInputValue);
+                                }
+                                result =
+                                    result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
+                                return result;
+                            })
+                                .map(renderOption) })) }) }) })] }));
 }
 export const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;
-    const selectionBox = (React.createElement(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2" },
-        React.createElement(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard') },
-            singleSelect ? (React.createElement(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal" },
-                "(",
-                value.length,
-                " of ",
-                options.length,
-                " selected)")) : (React.createElement(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
-                    if (checked) {
-                        props.onSelectAll();
-                    }
-                    else {
-                        props.onClear();
-                    }
-                } },
-                React.createElement(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3" },
-                    "Select All",
-                    React.createElement(Box, { className: "twa:text-2 twa:font-normal" },
-                        "(",
-                        value.length,
-                        " of ",
-                        options.length,
-                        " selected)")))),
-            React.createElement("div", { className: "twa:flex-1" }),
-            React.createElement(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal" }, props.showOnlySelectedCheckbox))));
-    return React.createElement(Box, { className: clsx(`${baseClassName}__header `) }, selectionBox);
+    const selectionBox = (_jsx(Box, { className: "twa:flex twa:flex-col twa:gap-2 twa:py-2", children: _jsxs(Box, { className: clsx('twa:flex twa:flex-row', 'twa:border-b twa:border-primarydark/30 twa:rounded-standard'), children: [singleSelect ? (_jsx(Box, { className: "twa:flex twa:flex-row twa:text-3 twa:font-normal twa:items-center", children: (() => {
+                        // For single-select we show the *name* of the selected option
+                        // rather than a (1 of N) counter — useful when the list is
+                        // long enough to scroll past the chosen row.
+                        if (!value.length) {
+                            return _jsx("span", { className: "twa:opacity-70", children: "(none selected)" });
+                        }
+                        const selectedId = value[0];
+                        const selectedOption = options.find((o) => toIdentifier(o) === selectedId);
+                        if (!selectedOption) {
+                            return _jsx("span", { className: "twa:opacity-70", children: "(none selected)" });
+                        }
+                        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "twa:opacity-70 twa:mr-1", children: "Selected:" }), _jsx("span", { className: "twa:font-medium", children: toLabel(selectedOption) })] }));
+                    })() })) : (_jsx(CheckBox, { className: "twa:ml-0.5 twa:font-bold", checked: !value.length ? false : value.length === options.length ? true : null, onChange: (checked) => {
+                        if (checked) {
+                            props.onSelectAll();
+                        }
+                        else {
+                            props.onClear();
+                        }
+                    }, children: _jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-3", children: ["Select All", _jsxs(Box, { className: "twa:text-2 twa:font-normal", children: ["(", value.length, " of ", options.length, " selected)"] })] }) })), _jsx("div", { className: "twa:flex-1" }), _jsx(Box, { className: "twa:mr-2 twa:text-2 twa:font-normal", children: props.showOnlySelectedCheckbox })] }) }));
+    return _jsx(Box, { className: clsx(`${baseClassName}__header `), children: selectionBox });
 };

package/src/View/Components/WizardSummaryPage.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import WizardPanel from '../../components/WizardPanel';
 import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 const columnsMap = {
@@ -13,7 +13,5 @@ const tableDOMProps = {
     },
 };
 export const WizardSummaryPage = (props) => {
-    return (React.createElement(WizardPanel, { bodyProps: { className: 'twa:p-0' }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
-        React.createElement(DataSource, { data: props.KeyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTableGrid, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
+    return (_jsx(WizardPanel, { bodyProps: { className: 'twa:p-0' }, className: "ab-WizardSummary", "data-name": 'wizard-summary', children: _jsx(DataSource, { data: props.KeyValuePairs, primaryKey: "Key", children: _jsx(InfiniteTableGrid, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }) }) }));
 };

package/src/View/CustomSort/Wizard/CustomSortColumnWizardSection.js

@@ -1,3 +1,4 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
@@ -9,13 +10,7 @@ import Input from '../../../components/Input';
 import { AdaptableFormControlTextClear } from '../../Components/Forms/AdaptableFormControlTextClear';
 export const renderCustomSortColumn = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
-        React.createElement(Tag, { className: "twa:mr-2" },
-            "Name: ",
-            data.Name),
-        React.createElement(Tag, null,
-            "Column: ",
-            api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
+    return (_jsxs(Box, { className: "twa:text-2 twa:py-2 twa:pr-2", children: [_jsxs(Tag, { className: "twa:mr-2", children: ["Name: ", data.Name] }), _jsxs(Tag, { children: ["Column: ", api.columnApi.getFriendlyNameForColumnId(data.ColumnId)] })] }));
 };
 export const isValidCustomSortColumn = (data, allCustomSorts) => {
     if (!data.Name) {
@@ -62,26 +57,11 @@ export const CustomSortColumnWizardSection = (props) => {
             Name: event.target.value,
         });
     };
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
-        React.createElement(Tabs, { className: "twa:mb-3" },
-            React.createElement(Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
-                        React.createElement(FormRow, { label: "Name" },
-                            React.createElement(Input, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
-        React.createElement(Tabs, { style: { flex: 1, minHeight: 0 } },
-            React.createElement(Tabs.Tab, null, "Column"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2" },
-                    React.createElement(Box, { className: "twa:text-2" }, "Columns"),
-                    React.createElement(Box, { className: "twa:flex-3" }),
-                    React.createElement(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })),
-                React.createElement(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
-                        props.onChange({
-                            ...data,
-                            SortedValues: [],
-                            ColumnId: ids[0],
-                        });
-                    }, allowReorder: false })))));
+    return (_jsxs(Flex, { flexDirection: "column", style: { height: '100%' }, children: [_jsxs(Tabs, { className: "twa:mb-3", children: [_jsx(Tabs.Tab, { children: "Settings" }), _jsx(Tabs.Content, { children: _jsx(Flex, { flexDirection: "row", children: _jsx(FormLayout, { className: "twa:max-w-[300px] twa:w-full", children: _jsx(FormRow, { label: "Name", children: _jsx(Input, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' }) }) }) }) })] }), _jsxs(Tabs, { style: { flex: 1, minHeight: 0 }, children: [_jsx(Tabs.Tab, { children: "Column" }), _jsxs(Tabs.Content, { children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2", children: [_jsx(Box, { className: "twa:text-2", children: "Columns" }), _jsx(Box, { className: "twa:flex-3" }), _jsx(AdaptableFormControlTextClear, { value: columnsSearchText, OnTextChange: setColumnsSearchText, placeholder: "Type to search columns", style: { flex: 1 } })] }), _jsx(NewColumnSelector, { columnFilterText: columnsSearchText, availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
+                                    props.onChange({
+                                        ...data,
+                                        SortedValues: [],
+                                        ColumnId: ids[0],
+                                    });
+                                }, allowReorder: false })] })] })] }));
 };