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

package/src/View/Components/StyleComponent.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleComponent = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const CheckBox_1 = require("../../components/CheckBox");
@@ -10,7 +10,6 @@ const ColorPicker_1 = require("../../components/ColorPicker");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const Tabs_1 = require("../../components/Tabs");
-const Select_1 = require("../../components/Select");
 const StylePreview_1 = require("../../components/StylePreview");
 const Toggle_1 = require("../../components/Toggle");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
@@ -21,6 +20,7 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
 const Flex_1 = require("../../components/Flex");
 const twMerge_1 = require("../../twMerge");
 const Card_1 = require("../../components/Card");
+const NewSelect_1 = require("../../components/NewSelect");
 const StyleComponent = (props) => {
     const [showClassName, setShowClassName] = (0, react_1.useState)(StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
     const componentStyle = props.Style;
@@ -152,49 +152,29 @@ 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: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-StyleComponent twa:text-3', props.className)) },
-        ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) ? (React.createElement(Tabs_1.Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname') },
-            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "show-class-name", value: "classname" }, "Use Style Class Name"),
-            React.createElement(Tabs_1.Tabs.Tab, { "data-name": "create-style", value: "createstyle" }, "Create Style"),
-            React.createElement(Tabs_1.Tabs.Content, { value: "classname" },
-                React.createElement(Card_1.Card, { shadow: false },
-                    React.createElement(Card_1.Card.Title, null, "CSS Class Name"),
-                    React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:p-1" },
-                        React.createElement(HelpBlock_1.default, null, "Select a CSS Class Name"),
-                        React.createElement(Flex_1.Box, { className: "twa:max-w-[15rem]" },
-                            React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
-                                    ? []
-                                    : styleClassNames.map((item) => ({
-                                        label: item,
-                                        value: item,
-                                    })), value: componentStyle.ClassName, onChange: (value) => onStyleClassNameChanged(value) })),
-                        React.createElement(Flex_1.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_1.Tabs.Content, { value: "createstyle" },
-                React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
-                    React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
-                        React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
-                            React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
-                                colourSpellingVariant,
-                                " & Border Properties"),
-                            React.createElement(HelpBlock_1.default, { 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_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
-                                "Back ",
-                                colourSpellingVariant),
-                            React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
-                            React.createElement(CheckBox_1.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_1.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_1.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_1.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_1.default, { className: "twa:w-[100px] twa:row-start-6", type: "number", min: "0", value: componentStyle.BorderRadius, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(Cmp, { ...cmpProps, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('ab-StyleComponent twa:text-3', props.className)), children: [ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) ? ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { value: showClassName ? 'classname' : 'createstyle', onValueChange: (value) => onShowClassNameChanged(value === 'classname'), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { "data-name": "show-class-name", value: "classname", children: "Use Style Class Name" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { "data-name": "create-style", value: "createstyle", children: "Create Style" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "classname", children: (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "CSS Class Name" }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:p-1", children: [(0, jsx_runtime_1.jsx)(HelpBlock_1.default, { children: "Select a CSS Class Name" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[15rem]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { items: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
+                                                    ? []
+                                                    : styleClassNames.map((item) => ({
+                                                        label: item,
+                                                        value: item,
+                                                    })), value: componentStyle.ClassName, onValueChange: (value) => onStyleClassNameChanged(value) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:m-2 twa:flex-2 twa:text-warn", children: 'Please ensure that the styles listed are in the current stylesheet' })] })] }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: "createstyle", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.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] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.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) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.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] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.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) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:row-start-6", children: "Border Radius" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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);
+                                                }
+                                            } }), (0, jsx_runtime_1.jsx)(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), (0, jsx_runtime_1.jsx)("span", { children: "Font Style" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), (0, jsx_runtime_1.jsx)("span", { children: "Text Decoration" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), (0, jsx_runtime_1.jsx)("span", { children: "Font Size" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default", items: [
+                                                    {
+                                                        label: 'Default',
+                                                        value: '',
+                                                    },
+                                                    ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
+                                                        label: enumName,
+                                                        value: enumName,
+                                                    })),
+                                                ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), (0, jsx_runtime_1.jsx)("span", { children: "Alignment" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) }) })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row", children: (0, jsx_runtime_1.jsx)(Card_1.Card, { shadow: false, className: "twa:flex-1", children: (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { className: "twa:col-span-2", children: [colourSpellingVariant, " & Border Properties"] }), (0, jsx_runtime_1.jsxs)(HelpBlock_1.default, { className: "twa:col-span-2", children: ["Set ", coloursSpellingVariant, " by ticking a checkbox and selecting from the dropdown"] }), (0, jsx_runtime_1.jsxs)(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked), children: ["Back ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.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] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.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) }), (0, jsx_runtime_1.jsxs)(CheckBox_1.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] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.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) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:row-start-6", children: "Border Radius" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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);
@@ -202,21 +182,7 @@ const StyleComponent = (props) => {
                                     else {
                                         onBorderRadiusChange(number);
                                     }
-                                } }),
-                            React.createElement(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
-                            React.createElement(HelpBlock_1.default, { 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(Toggle_1.ToggleGroup, null,
-                                React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
-                                React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
-                            React.createElement("span", null, "Text Decoration"),
-                            React.createElement(Toggle_1.ToggleGroup, null,
-                                React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                                React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                                React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
-                            React.createElement("span", null, "Font Size"),
-                            React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
-                                React.createElement(Select_1.Select, { placeholder: "Default", options: [
+                                } }), (0, jsx_runtime_1.jsx)(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1", children: "Font Properties" }), (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { className: "twa:self-stretch twa:col-span-2 twa:col-start-3 twa:row-start-2", children: "Set the font properties of the Style" }), (0, jsx_runtime_1.jsx)("span", { children: "Font Style" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }), (0, jsx_runtime_1.jsx)("span", { children: "Text Decoration" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })] }), (0, jsx_runtime_1.jsx)("span", { children: "Font Size" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { placeholder: "Default", items: [
                                         {
                                             label: 'Default',
                                             value: '',
@@ -225,76 +191,6 @@ const StyleComponent = (props) => {
                                             label: enumName,
                                             value: enumName,
                                         })),
-                                    ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
-                            React.createElement("span", null, "Alignment"),
-                            React.createElement(Toggle_1.ToggleGroup, null,
-                                React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
-                                React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
-                                React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))))) : (React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:flex twa:flex-col twa:gap-2 twa:lg:flex-row" },
-            React.createElement(Card_1.Card, { shadow: false, className: "twa:flex-1" },
-                React.createElement(Card_1.Card.Body, { gap: 2, className: "twa:grid twa:grid-cols-[auto_1fr_auto_1fr] twa:items-center twa:p-1" },
-                    React.createElement(Card_1.Card.Title, { className: "twa:col-span-2" },
-                        colourSpellingVariant,
-                        " & Border Properties"),
-                    React.createElement(HelpBlock_1.default, { 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_1.CheckBox, { "data-name": "set-background-color", value: "existing", checked: !!componentStyle.BackColor, onChange: (checked) => onUseBackColorCheckChange(checked) },
-                        "Back ",
-                        colourSpellingVariant),
-                    React.createElement(ColorPicker_1.ColorPicker, { disabled: componentStyle.BackColor == null, api: props.api, value: componentStyle.BackColor || '#ffffff', onChange: (x) => onBackColorSelectChange(x) }),
-                    React.createElement(CheckBox_1.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_1.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_1.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_1.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_1.default, { 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_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1" }, "Font Properties"),
-                    React.createElement(HelpBlock_1.default, { 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(Toggle_1.ToggleGroup, null,
-                        React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }),
-                        React.createElement(Toggle_1.Toggle, { pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })),
-                    React.createElement("span", null, "Text Decoration"),
-                    React.createElement(Toggle_1.ToggleGroup, null,
-                        React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                        React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                        React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => onTextDecorationChange(checked ? 'Overline' : 'None') })),
-                    React.createElement("span", null, "Font Size"),
-                    React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center" },
-                        React.createElement(Select_1.Select, { placeholder: "Default", options: [
-                                {
-                                    label: 'Default',
-                                    value: '',
-                                },
-                                ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize).map((enumName) => ({
-                                    label: enumName,
-                                    value: enumName,
-                                })),
-                            ], value: componentStyle.FontSize?.toString() ?? '', onChange: (value) => onFontSizeChange(value) })),
-                    React.createElement("span", null, "Alignment"),
-                    React.createElement(Toggle_1.ToggleGroup, null,
-                        React.createElement(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }),
-                        React.createElement(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }),
-                        React.createElement(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })))))),
-        !props.hidePreview && (React.createElement(Card_1.Card, { shadow: false },
-            React.createElement(Card_1.Card.Title, null, "Preview"),
-            React.createElement(Card_1.Card.Body, { className: "twa:grid twa:place-items-center" },
-                React.createElement(Flex_1.Box, { className: "twa:p-2 twa:inline-block" },
-                    React.createElement(StylePreview_1.StylePreview, { className: "twa:mt-0", styleObject: componentStyle })))))));
+                                    ], value: componentStyle.FontSize?.toString() ?? '', onValueChange: (value) => onFontSizeChange(value) }) }), (0, jsx_runtime_1.jsx)("span", { children: "Alignment" }), (0, jsx_runtime_1.jsxs)(Toggle_1.ToggleGroup, { children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-left", pressed: componentStyle.Alignment === 'Left', onPressedChange: (pressed) => pressed ? onAlignmentChange('Left') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-center", pressed: componentStyle.Alignment === 'Center', onPressedChange: (pressed) => pressed ? onAlignmentChange('Center') : onAlignmentChange('Default') }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { icon: "align-right", pressed: componentStyle.Alignment === 'Right', onPressedChange: (pressed) => pressed ? onAlignmentChange('Right') : onAlignmentChange('Default') })] })] }) }) })), !props.hidePreview && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Preview" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:grid twa:place-items-center", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2 twa:inline-block", children: (0, jsx_runtime_1.jsx)(StylePreview_1.StylePreview, { className: "twa:mt-0", styleObject: componentStyle }) }) })] }))] }));
 };
 exports.StyleComponent = StyleComponent;

package/src/View/Components/StyleVisualItem.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleVisualItem = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-/// <reference path="../../typings/.d.ts" />
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
@@ -17,7 +17,7 @@ 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 = (0, jsx_runtime_1.jsx)("div", { children: 'CSS Class: ' + this.props.Style.ClassName });
         }
         else {
             let backColorForStyle = this.props.Style.BackColor != undefined ? this.props.Style.BackColor : null;
@@ -26,7 +26,7 @@ class StyleVisualItem extends React.Component {
             let fontWeightForStyle = this.props.Style.FontWeight == Enums_1.FontWeight.Bold ? 'bold' : 'normal';
             let fontStyleForStyle = this.props.Style.FontStyle == Enums_1.FontStyle.Italic ? 'italic' : 'normal';
             let fontSizeForStyle = EnumExtensions_1.EnumExtensions.getCssFontSizeFromFontSizeEnum(this.props.Style.FontSize);
-            styleVisualisation = (React.createElement("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
+            styleVisualisation = ((0, jsx_runtime_1.jsx)("div", { className: this.props.Style.BackColor != undefined ? '' : 'ab_white_grey_stripes', style: {
                     textAlign: 'center',
                     margin: '2px',
                     padding: '3px',
@@ -37,7 +37,7 @@ class StyleVisualItem extends React.Component {
                     fontWeight: fontWeightForStyle,
                     fontStyle: fontStyleForStyle,
                     fontSize: fontSizeForStyle,
-                } }, styleText));
+                }, children: styleText }));
         }
         return styleVisualisation;
     }

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

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagValueOptionsTags = exports.TagValueSelector = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ValueSelector_1 = require("../ValueSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const Tag_1 = require("../../../components/Tag/Tag");
@@ -12,7 +11,7 @@ const TagValueSelector = (props) => {
         return api.internalApi.getAvailableTags() ?? [];
     };
     const { availableTags = getDefaultTags(), selectedTags = [], onChange, singleSelect } = props;
-    return (React.createElement(ValueSelector_1.ValueSelector, { options: availableTags, value: selectedTags.map((tag) => api.internalApi.getLabelForTag(tag)), singleSelect: singleSelect, allowReorder: false, onChange: (selectedTagsIds, selectedTagsMap) => {
+    return ((0, jsx_runtime_1.jsx)(ValueSelector_1.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) }));
 };
@@ -20,6 +19,6 @@ exports.TagValueSelector = TagValueSelector;
 const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    return React.createElement(Tag_1.TagList, { tags: tags.map((tag) => api.internalApi.getLabelForTag(tag)) });
+    return (0, jsx_runtime_1.jsx)(Tag_1.TagList, { tags: tags.map((tag) => api.internalApi.getLabelForTag(tag)) });
 };
 exports.TagValueOptionsTags = TagValueOptionsTags;

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAdaptableToolPanelAgGridComponent = exports.ConnectedAdaptableToolPanel = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const kebabCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/kebabCase"));
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const react_redux_1 = require("react-redux");
+const AdaptableButton_1 = require("../AdaptableButton");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const icons_1 = require("../../../components/icons");
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -17,20 +18,19 @@ const ButtonConfigure_1 = require("../Buttons/ButtonConfigure");
 const renderWithAdaptableContext_1 = require("../../renderWithAdaptableContext");
 const ToolPanelWrapper_1 = require("./ToolPanelWrapper");
 const ToolPanelPopup_1 = require("./ToolPanelPopup");
-const uuid_1 = require("../../../components/utils/uuid");
 const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Flex_1 = require("../../../components/Flex");
 const preventDefault = (e) => e.preventDefault();
 const AdaptableToolPanelComponent = (props) => {
-    const toolPanelsGlyph = React.createElement(icons_1.Icon, { name: 'align-justify' });
+    const toolPanelsGlyph = (0, jsx_runtime_1.jsx)(icons_1.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_1.default, { className: "twa:my-2 twa:p-2 twa:text-3" }, "Not enough rights");
+        return (0, jsx_runtime_1.jsx)(HelpBlock_1.default, { 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);
@@ -66,14 +66,14 @@ const AdaptableToolPanelComponent = (props) => {
         const customToolPanel = props.api.toolPanelApi.getCustomToolPanelByName(toolPanelDefinition.Name);
         if (customToolPanel) {
             visibleToolPanels.push(customToolPanel.name);
-            return (React.createElement(ToolPanelWrapper_1.ToolPanelWrapper, { key: customToolPanel.name, customToolPanel: customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(customToolPanel.name, state) }));
+            return ((0, jsx_runtime_1.jsx)(ToolPanelWrapper_1.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_1.ToolPanelWrapper, { key: moduleToolPanel, adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }));
+            return ((0, jsx_runtime_1.jsx)(ToolPanelWrapper_1.ToolPanelWrapper, { adaptableToolPanel: moduleToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: (state) => onStateChange(moduleToolPanel, state) }, moduleToolPanel));
         }
     });
     const renderToolPanelDropdowns = () => {
@@ -83,11 +83,7 @@ const AdaptableToolPanelComponent = (props) => {
         let toolpanelItems = [
             {
                 clickable: false,
-                label: (React.createElement("div", { key: "toolPanelTitle" },
-                    ' ',
-                    "\u00A0\u00A0",
-                    React.createElement("b", null, 'Tool Panels'),
-                    renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels))),
+                label: ((0, jsx_runtime_1.jsxs)("div", { children: [' ', "\u00A0\u00A0", (0, jsx_runtime_1.jsx)("b", { children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
@@ -97,7 +93,7 @@ const AdaptableToolPanelComponent = (props) => {
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: (React.createElement(CheckBox_1.CheckBox, { className: "ab-dd-checkbox twa:my-0", variant: "agGrid", as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
+                label: ((0, jsx_runtime_1.jsx)(CheckBox_1.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
@@ -120,7 +116,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        return (React.createElement(DropdownButton_1.default, { 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 ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { 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 = [];
@@ -134,7 +130,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_1.default, { "data-name": menuItem.category, key: menuItem.label, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL }));
+                    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { "data-name": menuItem.category, icon: menuItem.icon, tone: "none", variant: "text", className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(menuItem.label)}`, tooltip: menuItem.label, onClick: () => props.onClick(menuItem.reduxAction), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL }, menuItem.label));
                 }
             }));
         }
@@ -142,24 +138,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 ?? (0, uuid_1.createUuid)();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL }, buttonLabel));
+            const buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext) ?? '';
+            return ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: toolPanelContext, api: props.api, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.toolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)}` }, buttonLabel || button.Uuid));
         });
     };
     const onSetToolPanelVisibility = (name, checked) => {
@@ -174,24 +158,18 @@ const AdaptableToolPanelComponent = (props) => {
         const moduleParams = initialTab
             ? { source: 'Other', config: { initialTab } }
             : undefined;
-        return (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, tone: "none", className: "ab-ToolPanel__configure-button twa:ml-2", tooltip: 'Configure ToolPanels', onClick: () => {
+        return ((0, jsx_runtime_1.jsx)(ButtonConfigure_1.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_1.Flex // Cannot have the with of the parent, on windows, when you have scrollbars
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.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_1.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_1.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: [(0, jsx_runtime_1.jsxs)(Flex_1.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) && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: "ab-ToolPanel__header__buttons twa:p-1 twa:justify-start", flexDirection: "row", flexWrap: "wrap", children: renderCustomToolPanelButtons() })), visibleToolPanelControls] }));
 };
 function mapStateToProps(state) {
     return {
@@ -222,8 +200,8 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
     }
     if (adaptable.variant === 'react') {
         return () => {
-            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
-            return (React.createElement("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle }, content));
+            const content = (0, renderWithAdaptableContext_1.renderWithAdaptableContext)((0, jsx_runtime_1.jsx)(exports.ConnectedAdaptableToolPanel, { api: adaptable.api, teamSharingActivated: false }), adaptable);
+            return ((0, jsx_runtime_1.jsx)("div", { id: getContainerId(), className: 'ag-adaptable-panel', style: toolPanelContainerStyle, children: content }));
         };
     }
     return class AdaptableToolPanelAgGridComponent {
@@ -239,7 +217,7 @@ const getAdaptableToolPanelAgGridComponent = (adaptable) => {
                 //@ts-ignore
                 this.gui.style[key] = toolPanelContainerStyle[key];
             });
-            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
+            this.unmountReactRoot = adaptable.renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)((0, jsx_runtime_1.jsx)(exports.ConnectedAdaptableToolPanel, { api: api, teamSharingActivated: false }), adaptable), this.gui);
         }
         getGui() {
             if (!this.gui) {

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

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomToolPanelContent = void 0;
 const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AdaptableContext_1 = require("../../AdaptableContext");
-const uuid_1 = require("../../../components/utils/uuid");
-const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
+const AdaptableButton_1 = require("../AdaptableButton");
 const kebabCase_1 = tslib_1.__importDefault(require("../../../Utilities/utils/kebabCase"));
-const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const CustomToolPanelContent = (props) => {
     const { customToolPanel } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -43,29 +41,15 @@ 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 ?? (0, uuid_1.createUuid)();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL }, buttonLabel));
-        })))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: contentsDivDomRef, id: contentsDivId, className: contentsDivId, dangerouslySetInnerHTML: { __html: contentsHTML }, style: { width: '100%' } }), customToolPanel.buttons?.length && ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(AdaptableButton_1.AdaptableButtonView, { button: button, context: toolPanelContext, api: api, defaults: AdaptableButton_1.ADAPTABLE_BUTTON_SURFACE_DEFAULTS.customToolPanel, rerenderOnClick: false, className: `ab-ToolPanel__Home__${(0, kebabCase_1.default)(buttonLabel)}` }, buttonLabel || button.Uuid));
+                }) }))] }));
 };
 exports.CustomToolPanelContent = CustomToolPanelContent;
 const hasCustomRenderFn = (customToolPanel) => customToolPanel.render;

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolPanelPopup = exports.ToolPanelConfigView = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
@@ -69,18 +70,7 @@ class ToolPanelPopupComponent extends React.Component {
             }
             return false;
         };
-        return (React.createElement(PopupPanel_1.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_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
-                React.createElement(Panel_1.default.FlexBody, null,
-                    React.createElement(Tabs_1.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_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
-                            React.createElement(Radio_1.default, { className: "twa:m-0", value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1 }, "Tool Panels")),
-                        React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons },
-                            React.createElement(Radio_1.default, { className: "twa:m-0", value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1 }, "Module Buttons")),
-                        React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' } },
-                            React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly })),
-                        React.createElement(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' } },
-                            React.createElement(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))))));
+        return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { headerText: "Tool Panel", glyphicon: this.props.moduleInfo.Glyph, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), scrollable: false, children: (0, jsx_runtime_1.jsx)(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden", children: (0, jsx_runtime_1.jsx)(Panel_1.default.FlexBody, { children: (0, jsx_runtime_1.jsxs)(Tabs_1.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: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels, children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: ToolPanelConfigView.ToolPanels, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.ToolPanels, tabIndex: -1, children: "Tool Panels" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.Buttons, children: (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:m-0", value: ToolPanelConfigView.Buttons, checked: this.state.ToolPanelConfigView == ToolPanelConfigView.Buttons, tabIndex: -1, children: "Module Buttons" }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.ToolPanels, style: { flex: 1, overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: (selectedValues) => this.onToolPanelToolPanelsChanged(selectedValues), disabled: isToolPanelReadOnly }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { value: ToolPanelConfigView.Buttons, style: { flex: 1, overflow: 'auto' }, children: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) }) })] }) }) }) }));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;