@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.1

package/src/View/Components/StyleComponent.js

@@ -3,232 +3,228 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyleComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const react_1 = require("react");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const CheckBox_1 = require("../../components/CheckBox");
 const ColorPicker_1 = require("../../components/ColorPicker");
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const Radio_1 = tslib_1.__importDefault(require("../../components/Radio"));
 const Select_1 = require("../../components/Select");
 const StylePreview_1 = require("../../components/StylePreview");
-const Toggle_1 = require("../../components/Toggle/Toggle");
-const ToggleGroup_1 = require("../../components/Toggle/ToggleGroup");
+const Toggle_1 = require("../../components/Toggle");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const AdaptableInput_1 = tslib_1.__importDefault(require("./AdaptableInput"));
-class StyleComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onShowClassNameChanged = (checked) => {
-            this.setState((state) => {
-                const newState = { ...state };
-                delete newState.componentStyle.BackColor;
-                delete newState.componentStyle.ForeColor;
-                delete newState.componentStyle.BorderColor;
-                delete newState.componentStyle.FontSize;
-                delete newState.componentStyle.FontStyle;
-                delete newState.componentStyle.FontWeight;
-                newState.componentStyle.ClassName = '';
-                newState.ShowClassName = checked;
-                return newState;
-            });
-        };
-        this.state = {
-            componentStyle: this.props.Style,
-            ShowClassName: StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.Style.ClassName),
-        };
-    }
-    static getDerivedStateFromProps(nextProps, prevState) {
-        return {
-            componentStyle: nextProps.Style,
-        };
-    }
-    render() {
-        const Cmp = this.props.headless ? rebass_1.Box : Panel_1.default;
-        const headerText = this.props.headerText ?? 'Style';
-        const cmpProps = this.props.headless
-            ? {}
-            : {
-                header: headerText,
-                margin: 2,
-                'data-name': 'style-component',
-            };
-        const styleClassNames = this.props.api.userInterfaceApi.getStyleClassNames();
-        const colourSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('Colour');
-        const coloursSpellingVariant = this.props.api.internalApi.getCorrectEnglishVariant('colours');
-        let fontSizes = ['Default'];
-        fontSizes.push(...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize));
-        return (React.createElement(Cmp, { ...cmpProps, className: "ab-StyleComponent" },
-            ArrayExtensions_1.default.IsNotNullOrEmpty(styleClassNames) && (React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2 },
-                React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(true) }, "Use Style Class Name"),
-                ' ',
-                React.createElement(Radio_1.default, { "data-name": "create-style", marginLeft: 3, value: "expression", checked: !this.state.ShowClassName, onChange: () => this.onShowClassNameChanged(false) }, "Create Style"),
-                ' ')),
-            this.state.ShowClassName ? (React.createElement("div", null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2 }, 'Select a CSS Class Name'),
-                React.createElement(rebass_1.Box, { style: { maxWidth: '15rem' }, m: 3 },
-                    React.createElement(Select_1.Select, { options: ArrayExtensions_1.default.IsNullOrEmpty(styleClassNames)
-                            ? []
-                            : styleClassNames.map((item) => ({
-                                label: item,
-                                value: item,
-                            })), value: this.state.componentStyle.ClassName, onChange: (value) => this.onStyleClassNameChanged(value) })),
-                React.createElement(rebass_1.Text, { color: 'var(--ab-color-warn)', style: { flex: 2 }, margin: 2 }, 'Please ensure that the styles listed are in the current stylesheet'))) : (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                React.createElement(rebass_1.Flex, { flex: 1 },
-                    React.createElement("div", null,
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 },
-                            "Set ",
-                            coloursSpellingVariant,
-                            " by ticking a checkbox and selecting from the dropdown; leave unchecked to use cell's existing ",
-                            coloursSpellingVariant),
-                        React.createElement(FormLayout_1.default, { columns: [1, 2] },
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-background-color", value: "existing", margin: 1, checked: !!this.state.componentStyle.BackColor, onChange: (checked) => this.onUseBackColorCheckChange(checked) },
-                                    "Back ",
-                                    colourSpellingVariant),
-                                this.state.componentStyle.BackColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BackColor, onChange: (x) => this.onBackColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-foreground-color", margin: 1, value: "existing", checked: this.state.componentStyle.ForeColor ? true : false, onChange: (checked) => this.onUseForeColorCheckChange(checked) },
-                                    "Fore ",
-                                    colourSpellingVariant),
-                                this.state.componentStyle.ForeColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.ForeColor, onChange: (x) => this.onForeColorSelectChange(x) })) : (React.createElement("span", null))),
-                            React.createElement(FormLayout_1.FormRow, null,
-                                React.createElement(CheckBox_1.CheckBox, { "data-name": "set-border-color", margin: 1, value: "existing", checked: this.state.componentStyle.BorderColor ? true : false, onChange: (checked) => this.onUseBorderColorCheckChange(checked) },
-                                    "Border ",
-                                    colourSpellingVariant),
-                                this.state.componentStyle.BorderColor != null ? (React.createElement(ColorPicker_1.ColorPicker, { api: this.props.api, value: this.state.componentStyle.BorderColor, onChange: (x) => this.onBorderColorSelectChange(x) })) : (React.createElement("span", null)))),
-                        React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Set the font properties of the Style"),
-                        React.createElement(FormLayout_1.default, null,
-                            React.createElement(FormLayout_1.FormRow, { label: "Font Style" },
-                                React.createElement(ToggleGroup_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => this.onFontStyleChange(checked), icon: "italic" }),
-                                    React.createElement(Toggle_1.Toggle, { pressed: this.state.componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => this.onFontWeightChange(checked), icon: "bold" }))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Text Decoration" },
-                                React.createElement(ToggleGroup_1.ToggleGroup, null,
-                                    React.createElement(Toggle_1.Toggle, { icon: "underline", pressed: this.state.componentStyle.TextDecoration === 'Underline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Underline' : 'None') }),
-                                    React.createElement(Toggle_1.Toggle, { icon: "strikethrough", pressed: this.state.componentStyle.TextDecoration === 'LineThrough', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'LineThrough' : 'None') }),
-                                    React.createElement(Toggle_1.Toggle, { icon: "overline", pressed: this.state.componentStyle.TextDecoration === 'Overline', onPressedChange: (checked) => this.onTextDecorationChange(checked ? 'Overline' : 'None') }))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Font Size" }, !this.props.showFontSizeAs || this.props.showFontSizeAs === 'dropdown' ? (React.createElement(rebass_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: this.state.componentStyle.FontSize?.toString() ?? '', onChange: (value) => this.onFontSizeChange(value) }))) : (React.createElement(rebass_1.Box, null, fontSizes.map((enumName) => {
-                                return (React.createElement(Radio_1.default, { onClick: () => this.onFontSizeChange(enumName), checked: (enumName == 'Default' && !this.state.componentStyle.FontSize) ||
-                                        this.state.componentStyle.FontSize === enumName, mr: 3, key: enumName }, enumName));
-                            })))),
-                            React.createElement(FormLayout_1.FormRow, { label: "Border Radius" },
-                                React.createElement(AdaptableInput_1.default, { width: "100px", type: "number", min: "0", value: this.state.componentStyle.BorderRadius, onChange: (event) => {
-                                        const number = Number(event.target.value);
-                                        if (isNaN(number)) {
-                                            this.onBorderRadiusChange(0);
-                                        }
-                                        else {
-                                            this.onBorderRadiusChange(number);
-                                        }
-                                    } }))))))),
-            !this.props.hidePreview && (React.createElement(rebass_1.Box, null,
-                React.createElement(HelpBlock_1.default, { fontSize: 2, marginTop: 2, marginBottom: 2 }, "Preview"),
-                React.createElement(StylePreview_1.StylePreview, { styleObject: this.state.componentStyle })))));
-    }
-    onStyleClassNameChanged(value) {
-        this.state.componentStyle.ClassName = value == 'select' ? '' : value;
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onUseBackColorCheckChange(checked) {
-        if (checked) {
-            this.state.componentStyle.BackColor = '#ffffff';
-        }
-        else {
-            delete this.state.componentStyle.BackColor;
-        }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onUseForeColorCheckChange(checked) {
+const Flex_1 = require("../../components/Flex");
+const twMerge_1 = require("../../twMerge");
+const Card_1 = require("../../components/Card");
+const StyleComponent = (props) => {
+    const [showClassName, setShowClassName] = (0, react_1.useState)(StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
+    const componentStyle = props.Style;
+    const setComponentStyle = (style) => {
+        props.UpdateStyle(style);
+    };
+    const onShowClassNameChanged = (checked) => {
+        const newStyle = { ...componentStyle };
+        delete newStyle.BackColor;
+        delete newStyle.ForeColor;
+        delete newStyle.BorderColor;
+        delete newStyle.FontSize;
+        delete newStyle.FontStyle;
+        delete newStyle.FontWeight;
+        newStyle.ClassName = '';
+        setComponentStyle(newStyle);
+        setShowClassName(checked);
+    };
+    const onStyleClassNameChanged = (value) => {
+        const newStyle = { ...componentStyle };
+        newStyle.ClassName = value == 'select' ? '' : value;
+        setComponentStyle(newStyle);
+    };
+    const onUseBackColorCheckChange = (checked) => {
+        const newStyle = { ...componentStyle };
         if (checked) {
-            this.state.componentStyle.ForeColor = '#000000';
+            newStyle.BackColor = '#ffffff';
         }
         else {
-            delete this.state.componentStyle.ForeColor;
+            delete newStyle.BackColor;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onUseBorderColorCheckChange(checked) {
+        setComponentStyle(newStyle);
+    };
+    const onUseForeColorCheckChange = (checked) => {
+        const newStyle = { ...componentStyle };
         if (checked) {
-            this.state.componentStyle.BorderColor = '#000000';
+            newStyle.ForeColor = '#000000';
         }
         else {
-            delete this.state.componentStyle.BorderColor;
+            delete newStyle.ForeColor;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onUseFontSizeCheckChange(checked) {
+        setComponentStyle(newStyle);
+    };
+    const onUseBorderColorCheckChange = (checked) => {
+        const newStyle = { ...componentStyle };
         if (checked) {
-            this.state.componentStyle.FontSize = Enums_1.FontSize.Medium;
+            newStyle.BorderColor = '#000000';
         }
         else {
-            delete this.state.componentStyle.FontSize;
+            delete newStyle.BorderColor;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onBackColorSelectChange(color) {
-        this.state.componentStyle.BackColor = color;
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onForeColorSelectChange(color) {
-        this.state.componentStyle.ForeColor = color;
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onBorderColorSelectChange(color) {
-        this.state.componentStyle.BorderColor = color;
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onFontWeightChange(checked) {
+        setComponentStyle(newStyle);
+    };
+    const onBackColorSelectChange = (color) => {
+        const newStyle = { ...componentStyle };
+        newStyle.BackColor = color;
+        setComponentStyle(newStyle);
+    };
+    const onForeColorSelectChange = (color) => {
+        const newStyle = { ...componentStyle };
+        newStyle.ForeColor = color;
+        setComponentStyle(newStyle);
+    };
+    const onBorderColorSelectChange = (color) => {
+        const newStyle = { ...componentStyle };
+        newStyle.BorderColor = color;
+        setComponentStyle(newStyle);
+    };
+    const onFontWeightChange = (checked) => {
+        const newStyle = { ...componentStyle };
         if (checked) {
-            this.state.componentStyle.FontWeight = Enums_1.FontWeight.Bold;
+            newStyle.FontWeight = Enums_1.FontWeight.Bold;
         }
         else {
-            delete this.state.componentStyle.FontWeight;
+            delete newStyle.FontWeight;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onFontStyleChange(checked) {
+        setComponentStyle(newStyle);
+    };
+    const onFontStyleChange = (checked) => {
+        const newStyle = { ...componentStyle };
         if (checked) {
-            this.state.componentStyle.FontStyle = Enums_1.FontStyle.Italic;
+            newStyle.FontStyle = Enums_1.FontStyle.Italic;
         }
         else {
-            delete this.state.componentStyle.FontStyle;
+            delete newStyle.FontStyle;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onTextDecorationChange(textDecoration) {
-        this.state.componentStyle.TextDecoration = textDecoration;
+        setComponentStyle(newStyle);
+    };
+    const onTextDecorationChange = (textDecoration) => {
+        const newStyle = { ...componentStyle };
+        newStyle.TextDecoration = textDecoration;
         if (textDecoration === 'None' || !textDecoration) {
-            delete this.state.componentStyle.TextDecoration;
+            delete newStyle.TextDecoration;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onBorderRadiusChange(value) {
-        this.state.componentStyle.BorderRadius = value;
+        setComponentStyle(newStyle);
+    };
+    const onBorderRadiusChange = (value) => {
+        const newStyle = { ...componentStyle };
+        newStyle.BorderRadius = value;
         if (value === 0) {
-            delete this.state.componentStyle.BorderRadius;
+            delete newStyle.BorderRadius;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-    onFontSizeChange(value) {
-        this.state.componentStyle.FontSize = value;
+        setComponentStyle(newStyle);
+    };
+    const onFontSizeChange = (value) => {
+        const newStyle = { ...componentStyle };
+        newStyle.FontSize = value;
         if (value === '' || value == 'Default') {
-            delete this.state.componentStyle.FontSize;
+            delete newStyle.FontSize;
         }
-        this.props.UpdateStyle(this.state.componentStyle);
-    }
-}
+        setComponentStyle(newStyle);
+    };
+    const Cmp = props.headless ? Flex_1.Box : Panel_1.default;
+    const headerText = props.headerText ?? 'Style';
+    const cmpProps = props.headless
+        ? {}
+        : {
+            header: headerText,
+            'data-name': 'style-component',
+        };
+    const styleClassNames = props.api.userInterfaceApi.getStyleClassNames();
+    const colourSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('Colour');
+    const coloursSpellingVariant = props.api.internalApi.getCorrectEnglishVariant('colours');
+    const fontSizes = ['Default', ...EnumExtensions_1.EnumExtensions.getNames(Enums_1.FontSize)];
+    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(Flex_1.Flex, { flexDirection: "row", className: "twa:p-2" },
+            React.createElement(Radio_1.default, { "data-name": "show-class-name", value: "classname", checked: showClassName, onChange: () => onShowClassNameChanged(true) }, "Use Style Class Name"),
+            ' ',
+            React.createElement(Radio_1.default, { "data-name": "create-style", className: "twa:ml-3", value: "expression", checked: !showClassName, onChange: () => onShowClassNameChanged(false) }, "Create Style"),
+            ' ')),
+        showClassName ? (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(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"),
+                    !props.showFontSizeAs || props.showFontSizeAs === 'dropdown' ? (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(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:gap-2 twa:flex-wrap" }, fontSizes.map((enumName) => {
+                        return (React.createElement(Radio_1.default, { onClick: () => onFontSizeChange(enumName), checked: (enumName == 'Default' && !componentStyle.FontSize) ||
+                                componentStyle.FontSize === enumName, key: enumName }, enumName));
+                    }))))))),
+        !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 })))))));
+};
 exports.StyleComponent = StyleComponent;

package/src/View/Components/TagValueSelector/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ValueSelectorProps } from '../ValueSelector';
 import { AdaptableObjectTag } from '../../../AdaptableState/Common/AdaptableObject';
-export interface TagsSelectorProps extends Omit<ValueSelectorProps<AdaptableObjectTag, string | number>, 'options' | 'value' | 'onChange' | 'allowReorder' | 'toIdentifier' | 'toLabel' | 'selectionBoxPosition' | 'noSelectionLabel' | 'xSelectedLabel'> {
+export interface TagsSelectorProps extends Omit<ValueSelectorProps<AdaptableObjectTag, string | number>, 'options' | 'value' | 'onChange' | 'allowReorder' | 'toIdentifier' | 'toLabel'> {
     availableTags?: AdaptableObjectTag[];
     selectedTags?: AdaptableObjectTag[];
     onChange: (selectedTags: AdaptableObjectTag[]) => void;

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const ValueSelector_1 = require("../ValueSelector");
 const AdaptableContext_1 = require("../../AdaptableContext");
+const Tag_1 = require("../../../components/Tag/Tag");
 const TagValueSelector = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const getDefaultTags = () => {
@@ -13,12 +14,12 @@ const TagValueSelector = (props) => {
     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) => {
             onChange(selectedTagsIds.map((id) => selectedTagsMap.get(id)));
-        }, selectionBoxPosition: 'top', toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), noSelectionLabel: singleSelect ? 'Select a tag' : 'You have not selected any tags.', xSelectedLabel: singleSelect ? () => 'Selected tag:' : () => 'Selected tags:' }));
+        }, toIdentifier: (tag) => api.internalApi.getLabelForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag) }));
 };
 exports.TagValueSelector = TagValueSelector;
 const TagValueOptionsTags = (props) => {
     const { tags = [] } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
-    return (React.createElement(ValueSelector_1.ValueOptionsTags, { options: tags, value: tags.map((tag) => api.internalApi.getValueForTag(tag)), toIdentifier: (tag) => api.internalApi.getValueForTag(tag), toLabel: (tag) => api.internalApi.getLabelForTag(tag), allowWrap: true, readOnly: true }));
+    return React.createElement(Tag_1.TagList, { tags: tags.map((tag) => api.internalApi.getLabelForTag(tag)) });
 };
 exports.TagValueOptionsTags = TagValueOptionsTags;

package/src/View/Components/ToolPanel/AdaptableToolPanel.d.ts

@@ -25,7 +25,7 @@ export declare const ConnectedAdaptableToolPanel: import("react-redux").Connecte
     api: AdaptableApi;
     teamSharingActivated?: boolean;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;
 export declare const getAdaptableToolPanelAgGridComponent: (adaptable: IAdaptable) => (() => React.JSX.Element) | {
     new (): {

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

@@ -6,7 +6,6 @@ const React = tslib_1.__importStar(require("react"));
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const icons_1 = require("../../../components/icons");
 const CheckBox_1 = require("../../../components/CheckBox");
@@ -20,6 +19,7 @@ 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' });
@@ -29,7 +29,7 @@ const AdaptableToolPanelComponent = (props) => {
     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, { mt: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } }, "Not enough rights"));
+        return React.createElement(HelpBlock_1.default, { className: "twa:my-2 twa:p-2 twa:text-3" }, "Not enough rights");
     }
     const availableModuleItems = props.MainMenuItems.filter((menuItem) => menuItem.isVisible);
     const availableModules = availableModuleItems.map((menuItem) => menuItem.category);
@@ -96,7 +96,7 @@ const AdaptableToolPanelComponent = (props) => {
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                label: (React.createElement(CheckBox_1.CheckBox, { className: "ab-dd-checkbox", variant: "agGrid", my: 0, as: "div", value: toolPanel, key: toolPanel, checked: isVisible, onMouseDown: preventDefault }, toolPanel)),
+                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)),
             };
         };
         // 1. process custom tool panels
@@ -173,22 +173,23 @@ const AdaptableToolPanelComponent = (props) => {
         const moduleParams = initialTab
             ? { source: 'Other', config: { initialTab } }
             : undefined;
-        return (React.createElement(ButtonConfigure_1.ButtonConfigure, { iconSize: 16, tone: "none", marginLeft: 2, className: "ab-ToolPanel__configure-button", tooltip: 'Configure ToolPanels', onClick: () => {
+        return (React.createElement(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(rebass_1.Flex, { className: "ab-ToolPanel", "data-name": "adaptable-tool-panel", flexDirection: "column", justifyContent: "center", padding: 2, style: {
-            width: '100%',
-            // Cannot have the with of the parent, on windows, when you have scrollbars
-            // the inner-width is smaller
-            // minWidth: 'var(--ab-cmp-toolpanel__width)',
-        } },
-        React.createElement(rebass_1.Flex, { className: "ab-ToolPanel__header", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap", style: { width: '100%' } },
+    return (React.createElement(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(rebass_1.Flex, { className: "ab-ToolPanel__header__buttons", flexDirection: "row", justifyContent: "left", padding: 1, flexWrap: "wrap" }, renderCustomToolPanelButtons())),
+        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));
 };
 function mapStateToProps(state) {

package/src/View/Components/ToolPanel/ToolPanelPopup.d.ts

@@ -25,6 +25,6 @@ declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComp
 }
 export declare let ToolPanelPopup: import("react-redux").ConnectedComponent<typeof ToolPanelPopupComponent, {
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;
 export {};

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

@@ -11,6 +11,7 @@ const Types_1 = require("../../../AdaptableState/Common/Types");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const ModuleValueSelector_1 = require("../ModuleValueSelector");
 const Tabs_1 = require("../../../components/Tabs");
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 var ToolPanelConfigView;
 (function (ToolPanelConfigView) {
     ToolPanelConfigView["Buttons"] = "Buttons";
@@ -68,16 +69,18 @@ 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() },
-            React.createElement(Tabs_1.Tabs, { "data-name": 'toolPanelPopup-component', className: "ab-ToolPanelPopup", value: this.state.ToolPanelConfigView, style: { height: '100%' }, onValueChange: (value) => this.setState({ ToolPanelConfigView: value }) },
-                React.createElement(Tabs_1.Tabs.Tab, { value: ToolPanelConfigView.ToolPanels },
-                    React.createElement(Radio_1.default, { margin: 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, { margin: 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, noSelectionLabel: 'No selected Tool Panel', xSelectedLabel: () => `Visible Tool Panels:`, 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, noSelectionLabel: 'No selected Module Button', xSelectedLabel: () => `Visible Module Buttons:`, isOptionDisabled: isModuleCheckboxDisabled, disabled: isToolPanelReadOnly, onChange: (selectedValues) => this.props.onToolPanelSetModuleButtons(selectedValues) })))));
+        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) })))))));
     }
     onShowGridPropertiesChanged(event) {
         let e = event.target;

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

@@ -6,11 +6,11 @@ const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableViewFactory_1 = require("../../AdaptableViewFactory");
 const CustomToolPanelContent_1 = require("./CustomToolPanelContent");
-const rebass_1 = require("rebass");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const PanelToolPanel_1 = require("../Panels/PanelToolPanel");
 const PopupRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/PopupRedux"));
 const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
+const Flex_1 = require("../../../components/Flex");
 const ToolPanelWrapper = (props) => {
     const { adaptableToolPanel, customToolPanel, visibilityMode: visibilityMode, onVisibilityModeChange: onVisibilityModeChange, } = props;
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -46,7 +46,7 @@ const ToolPanelWrapper = (props) => {
         .getModuleService()
         .getModuleById(ModuleConstants_1.ToolPanelModuleId)
         .isModuleEditable();
-    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(rebass_1.Box, { marginTop: 1, className: `ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
+    return (React.createElement(React.Fragment, null, toolPanelContent && (React.createElement(Flex_1.Box, { className: `twa:mt-1 ab-ToolPanel__container ab-ToolPanel__container--${toolPanelName}` },
         React.createElement(PanelToolPanel_1.PanelToolPanel, { className: `ab-ToolPanel__${toolPanelName}`, "data-name": `ab-ToolPanel__${toolPanelName}`, headerText: toolPanelHeader, disabled: !isToolPanelModuleConfigurable, onMinimiseChanged: () => {
                 onVisibilityModeChange(isMinimised ? 'expanded' : 'collapsed');
             }, isMinimised: isMinimised, onConfigure: isConfigurable