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

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -1,8 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { Select } from '../../../components/Select';
 import { runIfNotResolvedIn } from '../../../Utilities/runIfNotResolvedIn';
 import { useAdaptable } from '../../AdaptableContext';
 import { useCallback } from 'react';
+import { MultiCombobox, SingleCombobox, } from '../../../components/Combobox';
 export const PermittedValuesSelector = function (props) {
     const adaptable = useAdaptable();
     const [refetchKey, setRefetchKey] = React.useState(0);
@@ -98,5 +99,33 @@ export const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(Select, { "aria-label": "Permitted Values Selector", searchable: props.searchable ?? 'menulist', size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
+    const comboBoxProps = {
+        ['aria-label']: 'Permitted Values Selector',
+        searchable: props.searchable ?? 'menulist',
+        className: props.className,
+        disabled: props.disabled,
+        placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'),
+        ['data-name']: 'permitted-values-selector',
+        items: options,
+        onInputValueChange: onInputChange,
+        onValueChange: handleOnChange,
+        value: props.value ?? '',
+        onOpenChange: (open) => {
+            if (open) {
+                reload();
+            }
+        },
+        isCreatable,
+        isLoading,
+        virtualized: true,
+        resizable: true,
+        showClear: true,
+        // showClear: false,
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+    };
+    if (props.isMulti) {
+        return _jsx(MultiCombobox, { ...comboBoxProps });
+    }
+    return (_jsx(SingleCombobox, { ...comboBoxProps }));
 };

package/src/View/Components/SharedProps/EditableConfigEntityState.js

@@ -1,4 +1,3 @@
-/// <reference path="../../typings/.d.ts" />
 export var WizardStatus;
 (function (WizardStatus) {
     WizardStatus["New"] = "New";

package/src/View/Components/SharedProps/ModuleViewPopupProps.d.ts

@@ -14,7 +14,7 @@ export interface ModuleViewPopupProps<View> extends BaseProps<View> {
 }
 export interface ModuleParams {
     column?: AdaptableColumn;
-    action?: 'New' | 'Edit' | 'Clone';
+    action?: 'New' | 'NewSchedule' | 'Edit' | 'Clone';
     value?: any;
     primaryKeyValues?: any[];
     maxWidth?: number;

package/src/View/Components/StyleComponent.d.ts

@@ -10,8 +10,6 @@ export interface StyleComponentProps {
     hidePreview?: boolean;
     headerText?: string;
     Style: AdaptableStyle;
-    /** @deprecated No longer used - font size is always displayed as dropdown */
-    showFontSizeAs?: 'radio' | 'dropdown';
     UpdateStyle: (style: AdaptableStyle) => void;
 }
 export declare const StyleComponent: React.FC<StyleComponentProps>;

package/src/View/Components/StyleComponent.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import clsx from 'clsx';
 import { CheckBox } from '../../components/CheckBox';
@@ -6,7 +6,6 @@ import { ColorPicker } from '../../components/ColorPicker';
 import HelpBlock from '../../components/HelpBlock';
 import Panel from '../../components/Panel';
 import { Tabs } from '../../components/Tabs';
-import { Select } from '../../components/Select';
 import { StylePreview } from '../../components/StylePreview';
 import { Toggle, ToggleGroup } from '../../components/Toggle';
 import { FontSize, FontStyle, FontWeight } from '../../AdaptableState/Common/Enums';
@@ -17,6 +16,7 @@ import AdaptableInput from './AdaptableInput';
 import { Box, Flex } from '../../components/Flex';
 import { twMerge } from '../../twMerge';
 import { Card } from '../../components/Card';
+import { SingleSelect } from '../../components/NewSelect';
 export const StyleComponent = (props) => {
     const [showClassName, setShowClassName] = useState(StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
     const componentStyle = props.Style;
@@ -148,49 +148,29 @@ export const StyleComponent = (props) => {
     const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
     const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
     const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
-    return (React.createElement(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)) },
-        ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
-            React.createElement(Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
-            React.createElement(Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
-            React.createElement(Tabs.Content, { value: "classname" },
-                React.createElement(Card, { shadow: false },
-                    React.createElement(Card.Title, null, "CSS Class Name"),
-                    React.createElement(Card.Body, { gap: 2, className: "twa:p-1" },
-                        React.createElement(HelpBlock, null, "Select a CSS Class Name"),
-                        React.createElement(Box, { className: "twa:max-w-[15rem]" },
-                            React.createElement(Select, { options: ArrayExtensions.IsNullOrEmpty(styleClassNames)
-                                    ? []
-                                    : styleClassNames.map((item) => ({
-                                        label: item,
-                                        value: item,
-                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
-                        React.createElement(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn" }, 'Please ensure that the styles listed are in the current stylesheet')))),
-            React.createElement(Tabs.Content, { value: "createstyle" },
-                React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
-                    React.createElement(Card, { shadow: false, className: "twa:flex-1" },
-                        React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
-                            React.createElement(Card.Title, { className: "twa:col-span-2" },
-                                colourSpellingVariant,
-                                " & Border Properties"),
-                            React.createElement(HelpBlock, { className: "twa:col-span-2" },
-                                "Set ",
-                                coloursSpellingVariant,
-                                " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
-                                coloursSpellingVariant),
-                            React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
-                                "Back ",
-                                colourSpellingVariant),
-                            React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
-                            React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
-                                "Fore ",
-                                colourSpellingVariant),
-                            React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
-                            React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
-                                "Border ",
-                                colourSpellingVariant),
-                            React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
-                            React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
-                            React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+    return (_jsxs(Cmp, { ...cmpProps, className: twMerge(clsx('ab-StyleComponent twa:text-3', props.className)), children: [ArrayExtensions.IsNotNullOrEmpty(styleClassNames) ? (_jsxs(Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [_jsx(Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), _jsx(Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), _jsx(Tabs.Content, { value: "classname", children: _jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "CSS Class Name" }), _jsxs(Card.Body, { gap: 2, className: "twa:p-1", children: [_jsx(HelpBlock, { children: "Select a CSS Class Name" }), _jsx(Box, { className: "twa:max-w-[15rem]", children: _jsx(SingleSelect, { items: ArrayExtensions.IsNullOrEmpty(styleClassNames)
+                                                    ? []
+                                                    : styleClassNames.map((item) => ({
+                                                        label: item,
+                                                        value: item,
+                                                    })), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), _jsx(Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), _jsx(Tabs.Content, { value: "createstyle", children: _jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: _jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(HelpBlock, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), _jsxs(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), _jsx(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), _jsx("span", { className: "twa:row-start-6", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+                                                const number = Number(event.target.value);
+                                                if (isNaN(number)) {
+                                                    onBorderRadiusChange(0);
+                                                }
+                                                else {
+                                                    onBorderRadiusChange(number);
+                                                }
+                                            } }), _jsx(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), _jsx(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), _jsx("span", { children: "Font Style" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), _jsx("span", { children: "Text Decoration" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), _jsx("span", { children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", children: _jsx(SingleSelect, { placeholder: "Default", items: [
+                                                    {
+                                                        label: 'Default',
+                                                        value: '',
+                                                    },
+                                                    ...EnumExtensions.getNames(FontSize).map((enumName) => ({
+                                                        label: enumName,
+                                                        value: enumName,
+                                                    })),
+                                                ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) }) })] })) : (_jsx(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: _jsx(Card, { shadow: false, className: "twa:flex-1", children: _jsxs(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [_jsxs(Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), _jsxs(HelpBlock, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), _jsxs(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked), children: ["Fore ", colourSpellingVariant] }), _jsx(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }), _jsxs(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked), children: ["Border ", colourSpellingVariant] }), _jsx(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }), _jsx("span", { className: "twa:row-start-6", children: "Border Radius" }), _jsx(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
                                     const number = Number(event.target.value);
                                     if (isNaN(number)) {
                                         onBorderRadiusChange(0);
@@ -198,21 +178,7 @@ export const StyleComponent = (props) => {
                                     else {
                                         onBorderRadiusChange(number);
                                     }
-                                } }),
-                            React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
-                            React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
-                            React.createElement("span", null, "Font Style"),
-                            React.createElement(ToggleGroup, null,
-                                React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
-                                React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
-                            React.createElement("span", null, "Text Decoration"),
-                            React.createElement(ToggleGroup, null,
-                                React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                                React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                                React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
-                            React.createElement("span", null, "Font Size"),
-                            React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(Select, { placeholder: "Default", options: [
+                                } }), _jsx(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), _jsx(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), _jsx("span", { children: "Font Style" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), _jsx(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), _jsx("span", { children: "Text Decoration" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), _jsx(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), _jsx(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), _jsx("span", { children: "Font Size" }), _jsx(Flex, { flexDirection: "row", alignItems: "center", children: _jsx(SingleSelect, { placeholder: "Default", items: [
                                         {
                                             label: 'Default',
                                             value: '',
@@ -221,75 +187,5 @@ export const StyleComponent = (props) => {
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
-                            React.createElement("span", null, "Alignment"),
-                            React.createElement(ToggleGroup, null,
-                                React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
-                                React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
-                                React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
-            React.createElement(Card, { shadow: false, className: "twa:flex-1" },
-                React.createElement(Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
-                    React.createElement(Card.Title, { className: "twa:col-span-2" },
-                        colourSpellingVariant,
-                        " & Border Properties"),
-                    React.createElement(HelpBlock, { className: "twa:col-span-2" },
-                        "Set ",
-                        coloursSpellingVariant,
-                        " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
-                        coloursSpellingVariant),
-                    React.createElement(CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
-                        "Back ",
-                        colourSpellingVariant),
-                    React.createElement(ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
-                    React.createElement(CheckBox, { "data-name": "set-foreground-color", value: "existing", className: "twa:row-start-4", checked: componentStyle.ForeColor ? true : false, onChange: (checked) => onUseForeColorCheckChange(checked) },
-                        "Fore ",
-                        colourSpellingVariant),
-                    React.createElement(ColorPicker, { className: "twa:row-start-4 twa:col-start-2", disabled: componentStyle.ForeColor == null, api: props.api, value: componentStyle.ForeColor || '#ffffff', onChange: (x) => onForeColorSelectChange(x) }),
-                    React.createElement(CheckBox, { "data-name": "set-border-color", value: "existing", className: "twa:row-start-5 twa:col-start-1", checked: componentStyle.BorderColor ? true : false, onChange: (checked) => onUseBorderColorCheckChange(checked) },
-                        "Border ",
-                        colourSpellingVariant),
-                    React.createElement(ColorPicker, { disabled: componentStyle.BorderColor == null, api: props.api, className: "twa:row-start-5 twa:col-start-2", value: componentStyle.BorderColor || '#ffffff', onChange: (x) => onBorderColorSelectChange(x) }),
-                    React.createElement("span", { className: "twa:row-start-6" }, "Border Radius"),
-                    React.createElement(AdaptableInput, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
-                            const number = Number(event.target.value);
-                            if (isNaN(number)) {
-                                onBorderRadiusChange(0);
-                            }
-                            else {
-                                onBorderRadiusChange(number);
-                            }
-                        } }),
-                    React.createElement(Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
-                    React.createElement(HelpBlock, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2" }, "Set the font properties of the Style"),
-                    React.createElement("span", null, "Font Style"),
-                    React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { pressed: componentStyle.FontStyle == FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
-                        React.createElement(Toggle, { pressed: componentStyle.FontWeight == FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
-                    React.createElement("span", null, "Text Decoration"),
-                    React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                        React.createElement(Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                        React.createElement(Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
-                    React.createElement("span", null, "Font Size"),
-                    React.createElement(Flex, { flexDirection: "row", alignItems: "center" },
-                        React.createElement(Select, { placeholder: "Default", options: [
-                                {
-                                    label: 'Default',
-                                    value: '',
-                                },
-                                ...EnumExtensions.getNames(FontSize).map((enumName) => ({
-                                    label: enumName,
-                                    value: enumName,
-                                })),
-                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
-                    React.createElement("span", null, "Alignment"),
-                    React.createElement(ToggleGroup, null,
-                        React.createElement(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
-                        React.createElement(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
-        !props.hidePreview && (React.createElement(Card, { shadow: false },
-            React.createElement(Card.Title, null, "Preview"),
-            React.createElement(Card.Body, { className: "twa:grid twa:place-items-center" },
-                React.createElement(Box, { className: "twa:p-2 twa:inline-block" },
-                    React.createElement(StylePreview, { className: "twa:mt-0", styleObject: componentStyle })))))));
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), _jsx("span", { children: "Alignment" }), _jsxs(ToggleGroup, { children: [_jsx(Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), _jsx(Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && (_jsxs(Card, { shadow: false, children: [_jsx(Card.Title, { children: "Preview" }), _jsx(Card.Body, { className: "twa:grid twa:place-items-center", children: _jsx(Box, { className: "twa:p-2 twa:inline-block", children: _jsx(StylePreview, { className: "twa:mt-0", styleObject: componentStyle }) }) })] }))] }));
 };

package/src/View/Components/StyleVisualItem.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-/// <reference path="../../typings/.d.ts" />
 import { EnumExtensions } from '../../Utilities/Extensions/EnumExtensions';
 import { FontWeight, FontStyle } from '../../AdaptableState/Common/Enums';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
@@ -13,7 +13,7 @@ export class StyleVisualItem extends React.Component {
             : 'Style';
         let styleVisualisation;
         if (this.props.Style.ClassName) {
-            styleVisualisation = React.createElement("div", null, 'CSS Class: ' + this.props.Style.ClassName);
+            styleVisualisation = _jsx("div", { children: 'CSS Class: ' + this.props.Style.ClassName });
         }
         else {
             let backColorForStyle = this.props.Style.BackColor != undefined ? this.props.Style.BackColor : null;
@@ -22,7 +22,7 @@ export class StyleVisualItem extends React.Component {
             let fontWeightForStyle = this.props.Style.FontWeight == FontWeight.Bold ? 'bold' : 'normal';
             let fontStyleForStyle = this.props.Style.FontStyle == FontStyle.Italic ? 'italic' : 'normal';
             let fontSizeForStyle = EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
-            styleVisualisation = (React.createElement("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
+            styleVisualisation = (_jsx("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
                     textAlign: 'center',
                     margin: '2px',
                     padding: '3px',
@@ -33,7 +33,7 @@ export class StyleVisualItem extends React.Component {
                     fontWeight: fontWeightForStyle,
                     fontStyle: fontStyleForStyle,
                     fontSize: fontSizeForStyle,
-                } }, styleText));
+                }, children: styleText }));
         }
         return styleVisualisation;
     }

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ValueSelector } from '../ValueSelector';
 import { useAdaptable } from '../../AdaptableContext';
 import { TagList } from '../../../components/Tag/Tag';
@@ -8,12 +8,12 @@ export const TagValueSelector = (props) => {
         return api.internalApi.getAvailableTags() ?? [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
-    return (React.createElement(ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return (_jsx(ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
             onChange(selectedTagsIds.map((id) => selectedTagsMap.get(id)));
         }, toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag) }));
 };
 export const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
     const { api } = useAdaptable();
-    return React.createElement(TagList, { tags: tags.map((tag) => api.internalApi.getLabelForTag(tag)) });
+    return _jsx(TagList, { tags: tags.map((tag) => api.internalApi.getLabelForTag(tag)) });
 };

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;