@adaptabletools/adaptable-cjs 23.0.0-canary.5 → 23.0.0-canary.7

package/src/View/Components/StyleComponent.js

@@ -4,8 +4,6 @@ exports.StyleComponent = void 0;
 const tslib_1 = require("tslib");
 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");
 const ColorPicker_1 = require("../../components/ColorPicker");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
@@ -18,9 +16,9 @@ const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 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 utils_1 = require("../../lib/utils");
 const StyleComponent = (props) => {
     const [showClassName, setShowClassName] = (0, react_1.useState)(StringExtensions_1.StringExtensions.IsNotNullOrEmpty(props.Style.ClassName));
     const componentStyle = props.Style;
@@ -44,51 +42,36 @@ const StyleComponent = (props) => {
         newStyle.ClassName = value == 'select' ? '' : value;
         setComponentStyle(newStyle);
     };
-    const onUseBackColorCheckChange = (checked) => {
+    const onBackColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.BackColor = '#ffffff';
+        if (color) {
+            newStyle.BackColor = color;
         }
         else {
             delete newStyle.BackColor;
         }
         setComponentStyle(newStyle);
     };
-    const onUseForeColorCheckChange = (checked) => {
+    const onForeColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.ForeColor = '#000000';
+        if (color) {
+            newStyle.ForeColor = color;
         }
         else {
             delete newStyle.ForeColor;
         }
         setComponentStyle(newStyle);
     };
-    const onUseBorderColorCheckChange = (checked) => {
+    const onBorderColorChange = (color) => {
         const newStyle = { ...componentStyle };
-        if (checked) {
-            newStyle.BorderColor = '#000000';
+        if (color) {
+            newStyle.BorderColor = color;
         }
         else {
             delete newStyle.BorderColor;
         }
         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) {
@@ -152,45 +135,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 ((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)
+    const styleEditorGrid = ((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 twa:self-stretch", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:font-medium", children: [colourSpellingVariant, " & Border Properties"] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Select ", coloursSpellingVariant, " and radius"] })] }), (0, jsx_runtime_1.jsxs)("span", { children: ["Back ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { api: props.api, value: componentStyle.BackColor, defaultColor: "#ffffff", onChange: onBackColorChange }), (0, jsx_runtime_1.jsxs)("span", { className: "twa:row-start-3", children: ["Fore ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:row-start-3", api: props.api, value: componentStyle.ForeColor, defaultColor: "#000000", onChange: onForeColorChange }), (0, jsx_runtime_1.jsxs)("span", { className: "twa:row-start-4", children: ["Border ", colourSpellingVariant] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.OptionalColorPicker, { className: "twa:row-start-4", api: props.api, value: componentStyle.BorderColor, defaultColor: "#000000", onChange: onBorderColorChange }), (0, jsx_runtime_1.jsx)("span", { className: "twa:row-start-5", children: "Border Radius" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { className: "twa:w-[100px] twa:row-start-5", 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.jsxs)(Card_1.Card.Title, { className: "twa:col-span-2 twa:col-start-3 twa:row-start-1 twa:self-stretch", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Font Properties" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set font properties for the Style" })] }), (0, jsx_runtime_1.jsx)("span", { className: "twa:col-start-3 twa:row-start-2", children: "Font Style" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:col-start-4 twa:row-start-2", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: componentStyle.FontStyle == Enums_1.FontStyle.Italic, onPressedChange: (checked) => onFontStyleChange(checked), icon: "italic" }), (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { standalone: true, pressed: componentStyle.FontWeight == Enums_1.FontWeight.Bold, onPressedChange: (checked) => onFontWeightChange(checked), icon: "bold" })] }) }), (0, jsx_runtime_1.jsx)("span", { className: "twa:col-start-3 twa:row-start-3", children: "Text Decoration" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:col-start-4 twa:row-start-3", children: (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", { className: "twa:col-start-3 twa:row-start-4", children: "Font Size" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:col-start-4 twa:row-start-4", 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", { className: "twa:col-start-3 twa:row-start-5", children: "Alignment" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:col-start-4 twa:row-start-5", children: (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') })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Cmp, { ...cmpProps, className: (0, utils_1.cn)('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);
-                                    }
-                                    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') })] })] }) }) })), !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, children: props.previewText }) }) })] }))] }));
+                                                    })), 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: styleEditorGrid }) }) })] })) : ((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: styleEditorGrid }) })), !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, children: props.previewText }) }) })] }))] }));
 };
 exports.StyleComponent = StyleComponent;

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

@@ -11,7 +11,7 @@ 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");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../components/DropdownButton");
 const Types_1 = require("../../../AdaptableState/Common/Types");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 const ButtonConfigure_1 = require("../Buttons/ButtonConfigure");
@@ -82,18 +82,21 @@ const AdaptableToolPanelComponent = (props) => {
         }
         let toolpanelItems = [
             {
-                clickable: false,
-                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")),
+                closeOnClick: false,
+                tooltip: 'Tool Panels',
+                label: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "twa:font-bold", children: 'Tool Panels' }), renderToolPanelConfigureButton(ToolPanelPopup_1.ToolPanelConfigView.ToolPanels)] }, "toolPanelTitle")),
             },
         ];
         const isItemVisible = (panelItem) => visibleToolPanels.includes(panelItem);
         const buildDropdownButtonItem = (toolPanel, label, isVisible) => {
             return {
-                id: toolPanel,
+                dataName: String(toolPanel),
+                closeOnClick: false,
                 onClick: () => {
                     onSetToolPanelVisibility(toolPanel, !isVisible);
                 },
-                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)),
+                tooltip: label,
+                label: ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { className: "ab-dd-checkbox twa:my-0", value: toolPanel, checked: isVisible, onMouseDown: preventDefault, children: toolPanel }, toolPanel)),
             };
         };
         // 1. process custom tool panels
@@ -116,7 +119,7 @@ const AdaptableToolPanelComponent = (props) => {
             }
             return 0;
         });
-        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'));
+        return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { variant: "text", tone: "none", id: 'dropdown-toolpanels', className: "ab-ToolPanel__toolbars", items: toolpanelItems, tooltip: "Manage Tool Panels", extraWidthChars: 5, children: toolPanelsGlyph }, 'dropdown-toolpanels'));
     };
     const renderToolPanelButtons = () => {
         const toolPanelButtons = [];

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

@@ -3,28 +3,18 @@ import * as ToolPanelRedux from '../../../Redux/ActionsReducers/ToolPanelRedux';
 import { ModuleViewPopupProps } from '../SharedProps/ModuleViewPopupProps';
 import { InternalState } from '../../../AdaptableState/InternalState';
 import { AdaptableToolPanelDefinition, ToolPanelState } from '../../../AdaptableState/ToolPanelState';
-import { AdaptableModuleButtons, AdaptableToolPanels } from '../../../AdaptableState/Common/Types';
+import { AdaptableModuleButtons } from '../../../AdaptableState/Common/Types';
 interface ToolPanelPopupComponentProps extends ModuleViewPopupProps<ToolPanelPopupComponent> {
     ToolPanelState: ToolPanelState;
     InternalState: InternalState;
     onToolPanelSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => ToolPanelRedux.ToolPanelSetModuleButtonsAction;
     onToolPanelSetToolPanels: (toolPanels: AdaptableToolPanelDefinition[]) => ToolPanelRedux.ToolPanelSetToolPanelsAction;
 }
-export declare enum ToolPanelConfigView {
-    Buttons = "Buttons",
-    ToolPanels = "ToolPanels"
-}
-export interface ToolPanelPopupState {
-    ToolPanelConfigView: ToolPanelConfigView;
-}
-declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComponentProps, ToolPanelPopupState> {
-    constructor(props: ToolPanelPopupComponentProps);
+export { ToolPanelConfigView } from './ToolPanelPopupSections';
+declare class ToolPanelPopupComponent extends React.Component<ToolPanelPopupComponentProps> {
     render(): React.JSX.Element;
-    onShowGridPropertiesChanged(event: React.FormEvent<any>): void;
-    onToolPanelToolPanelsChanged(selectedValues: AdaptableToolPanels): void;
 }
 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;
 }>;
-export {};

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

@@ -7,89 +7,14 @@ const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const ToolPanelRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/ToolPanelRedux"));
 const PopupPanel_1 = require("../Popups/AdaptablePopup/PopupPanel");
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-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";
-    ToolPanelConfigView["ToolPanels"] = "ToolPanels";
-})(ToolPanelConfigView || (exports.ToolPanelConfigView = ToolPanelConfigView = {}));
+const ToolPanelPopupSections_1 = require("./ToolPanelPopupSections");
+var ToolPanelPopupSections_2 = require("./ToolPanelPopupSections");
+Object.defineProperty(exports, "ToolPanelConfigView", { enumerable: true, get: function () { return ToolPanelPopupSections_2.ToolPanelConfigView; } });
 class ToolPanelPopupComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        const initialTab = props.popupParams?.config?.initialTab ?? ToolPanelConfigView.ToolPanels;
-        this.state = {
-            ToolPanelConfigView: initialTab,
-        };
-    }
     render() {
-        // 1. process module buttons
-        const selectedModuleButtons = [];
-        if (ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.ToolPanelState.ModuleButtons)) {
-            this.props.ToolPanelState.ModuleButtons.forEach((module) => {
-                let menuItem = this.props.InternalState.SettingsPanelModuleEntries.find((m) => m.category == module);
-                if (menuItem?.isVisible) {
-                    selectedModuleButtons.push(module);
-                }
-            });
-        }
-        const allModuleButtons = this.props.InternalState.SettingsPanelModuleEntries.map((x) => x.category);
-        // 2. process tool panels
-        const availableModules = this.props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
-        // 'Dashboard' is a special case because it's not available in the dashboard menu items, s we have to add it manually
-        if (!this.props.api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
-            availableModules.push('Dashboard');
-        }
-        if (this.props.api.pluginsApi.getipushpullPluginApi() &&
-            !this.props.api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
-            availableModules.push('IPushPull');
-        }
-        if (this.props.api.pluginsApi.getOpenFinPluginApi() &&
-            !this.props.api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
-            availableModules.push('OpenFin');
-        }
-        const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
-        const availableCustomToolPanels = this.props.api.toolPanelApi
-            .getCustomToolPanels()
-            .map((customToolPanel) => customToolPanel.name);
-        const availableToolPanels = [
-            ...availableCustomToolPanels,
-            ...availableModuleToolPanels,
-        ];
-        const selectedToolPanels = this.props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name)
-            // ensure that the visible state has only valid tool panels
-            .filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
+        const initialTab = this.props.popupParams?.config?.initialTab ?? ToolPanelPopupSections_1.ToolPanelConfigView.ToolPanels;
         const isToolPanelReadOnly = this.props.api.entitlementApi.isModuleReadOnlyEntitlement('ToolPanel');
-        const isModuleCheckboxDisabled = (module) => {
-            if (module === 'SettingsPanel') {
-                return this.props.api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
-            }
-            return false;
-        };
-        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;
-        let ToolPanelConfigView = e.value;
-        this.setState({
-            ToolPanelConfigView: ToolPanelConfigView,
-        });
-    }
-    onToolPanelToolPanelsChanged(selectedValues) {
-        const currentSelectedToolPanelDefinitions = this.props.ToolPanelState.ToolPanels;
-        // try to return the pre-existing definition (to maintain the previous collapsed state)
-        // otherwise select the new toolPanel with the default 'collapsed' state
-        let newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => {
-            return (currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
-                Name: selectedToolPanel,
-                VisibilityMode: 'collapsed',
-            });
-        });
-        this.props.onToolPanelSetToolPanels(newSelectedToolPanelDefinitions);
+        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, bodyClassName: "twa:gap-3 twa:flex twa:flex-col twa:h-full twa:min-h-0", children: (0, jsx_runtime_1.jsx)(ToolPanelPopupSections_1.ToolPanelPopupSections, { ToolPanelState: this.props.ToolPanelState, InternalState: this.props.InternalState, initialTab: initialTab, isToolPanelReadOnly: isToolPanelReadOnly, onToolPanelSetModuleButtons: this.props.onToolPanelSetModuleButtons, onToolPanelSetToolPanels: this.props.onToolPanelSetToolPanels }) }));
     }
 }
 function mapStateToProps(state) {

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { InternalState } from '../../../AdaptableState/InternalState';
+import { AdaptableToolPanelDefinition, ToolPanelState } from '../../../AdaptableState/ToolPanelState';
+import { AdaptableModuleButtons } from '../../../AdaptableState/Common/Types';
+export declare enum ToolPanelConfigView {
+    Buttons = "Buttons",
+    ToolPanels = "ToolPanels"
+}
+export interface ToolPanelPopupSectionsProps {
+    ToolPanelState: ToolPanelState;
+    InternalState: InternalState;
+    initialTab?: ToolPanelConfigView;
+    isToolPanelReadOnly: boolean;
+    onToolPanelSetModuleButtons: (moduleButtons: AdaptableModuleButtons) => void;
+    onToolPanelSetToolPanels: (toolPanels: AdaptableToolPanelDefinition[]) => void;
+}
+export declare const ToolPanelPopupSections: React.FunctionComponent<ToolPanelPopupSectionsProps>;

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolPanelPopupSections = 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 Types_1 = require("../../../AdaptableState/Common/Types");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const ModuleValueSelector_1 = require("../ModuleValueSelector");
+const Flex_1 = require("../../../components/Flex");
+const Tag_1 = require("../../../components/Tag");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const CollapsibleWizardCard_1 = require("../../Wizard/CollapsibleWizardCard");
+var ToolPanelConfigView;
+(function (ToolPanelConfigView) {
+    ToolPanelConfigView["Buttons"] = "Buttons";
+    ToolPanelConfigView["ToolPanels"] = "ToolPanels";
+})(ToolPanelConfigView || (exports.ToolPanelConfigView = ToolPanelConfigView = {}));
+const ToolPanelPopupSections = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const initialExpandedId = props.initialTab === ToolPanelConfigView.Buttons ? 'module-buttons' : 'tool-panels';
+    const { bindCard, hasExpandedCard, expandedFillsSpace } = (0, CollapsibleWizardCard_1.useWizardCardAccordion)(initialExpandedId);
+    const selectedModuleButtons = [];
+    if (ArrayExtensions_1.default.IsNotNullOrEmpty(props.ToolPanelState.ModuleButtons)) {
+        props.ToolPanelState.ModuleButtons.forEach((module) => {
+            const menuItem = props.InternalState.SettingsPanelModuleEntries.find((entry) => entry.category === module);
+            if (menuItem?.isVisible) {
+                selectedModuleButtons.push(module);
+            }
+        });
+    }
+    const allModuleButtons = props.InternalState.SettingsPanelModuleEntries.map((entry) => entry.category);
+    const availableModules = props.InternalState.SettingsPanelModuleEntries.filter((menuItem) => menuItem.isVisible).map((menuItem) => menuItem.category);
+    if (!api.entitlementApi.isModuleHiddenEntitlement('Dashboard')) {
+        availableModules.push('Dashboard');
+    }
+    if (api.pluginsApi.getipushpullPluginApi() &&
+        !api.entitlementApi.isModuleHiddenEntitlement('IPushPull')) {
+        availableModules.push('IPushPull');
+    }
+    if (api.pluginsApi.getOpenFinPluginApi() &&
+        !api.entitlementApi.isModuleHiddenEntitlement('OpenFin')) {
+        availableModules.push('OpenFin');
+    }
+    const availableModuleToolPanels = Types_1.ALL_TOOL_PANELS.filter((moduleToolPanel) => ArrayExtensions_1.default.ContainsItem(availableModules, moduleToolPanel));
+    const availableCustomToolPanels = api.toolPanelApi
+        .getCustomToolPanels()
+        .map((customToolPanel) => customToolPanel.name);
+    const availableToolPanels = [
+        ...availableCustomToolPanels,
+        ...availableModuleToolPanels,
+    ];
+    const selectedToolPanels = props.ToolPanelState.ToolPanels.map((toolPanelDefinition) => toolPanelDefinition.Name).filter((visibleToolPanel) => availableToolPanels.includes(visibleToolPanel));
+    const getToolPanelLabel = React.useCallback((toolPanelId) => {
+        const customToolPanel = api.toolPanelApi.getCustomToolPanelByName(toolPanelId);
+        if (customToolPanel) {
+            return customToolPanel.title ?? customToolPanel.name;
+        }
+        return (api.internalApi.getModuleService().getModuleFriendlyName(toolPanelId) ??
+            toolPanelId);
+    }, [api]);
+    const isModuleCheckboxDisabled = (module) => {
+        if (module === 'SettingsPanel') {
+            return api.optionsApi.getSettingsPanelOptions().alwaysShowInDashboard;
+        }
+        return false;
+    };
+    const handleToolPanelsChanged = (selectedValues) => {
+        const currentSelectedToolPanelDefinitions = props.ToolPanelState.ToolPanels;
+        const newSelectedToolPanelDefinitions = selectedValues.map((selectedToolPanel) => currentSelectedToolPanelDefinitions.find((currentDefinition) => currentDefinition.Name === selectedToolPanel) ?? {
+            Name: selectedToolPanel,
+            VisibilityMode: 'collapsed',
+        });
+        props.onToolPanelSetToolPanels(newSelectedToolPanelDefinitions);
+    };
+    const moduleButtonLabels = selectedModuleButtons.map((module) => api.internalApi.getModuleService().getModuleFriendlyName(module) ?? module);
+    const toolPanelsSummary = selectedToolPanels.length > 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: selectedToolPanels.map((toolPanelId) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: getToolPanelLabel(toolPanelId) }, toolPanelId))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No tool panels" }));
+    const moduleButtonsSummary = moduleButtonLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", alignItems: "center", className: "twa:gap-1", children: moduleButtonLabels.map((label) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: label }, label))) })) : ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Module Buttons" }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, CollapsibleWizardCard_1.getWizardAccordionSectionClassName)(hasExpandedCard, expandedFillsSpace), children: [(0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('tool-panels', { fillAvailable: true }), "data-name": "tool-panel-tool-panels", title: "Tool Panels", help: "Select and order the Tool Panels to show in the AdapTable Tool Panel", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(selectedToolPanels.map((toolPanelId) => getToolPanelLabel(toolPanelId)), (label) => label), summary: toolPanelsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.ModuleValueSelector, { options: availableToolPanels, value: selectedToolPanels, onChange: handleToolPanelsChanged, disabled: props.isToolPanelReadOnly }) }), (0, jsx_runtime_1.jsx)(CollapsibleWizardCard_1.CollapsibleWizardCard, { ...bindCard('module-buttons', { fillAvailable: true }), "data-name": "tool-panel-module-buttons", title: "Module Buttons", help: "Select and order module buttons shown at the top of the tool panel", compactSummary: (0, CollapsibleWizardCard_1.renderCompactColumnTags)(moduleButtonLabels, (label) => label), summary: moduleButtonsSummary, className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[240px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: (0, jsx_runtime_1.jsx)(ModuleValueSelector_1.ModuleValueSelector, { options: allModuleButtons, value: selectedModuleButtons, isOptionDisabled: isModuleCheckboxDisabled, disabled: props.isToolPanelReadOnly, onChange: (selectedValues) => props.onToolPanelSetModuleButtons(selectedValues) }) })] }));
+};
+exports.ToolPanelPopupSections = ToolPanelPopupSections;

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

@@ -10,6 +10,20 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
      * To show the filter input, filter needs also to be defined.
      */
     showFilterInput?: boolean;
+    filterPlaceholder?: string;
+    /** Tighter rows and inline search with Select All (layout wizard). */
+    compact?: boolean;
+    /** Matches Visibility list: checkbox then label (default: label inside checkbox). */
+    optionLayout?: 'label-in-checkbox' | 'label-beside-checkbox';
+    /** Hides "Show Selected Only" in the header (e.g. Visibility-style Select All + search row). */
+    hideShowSelectedOnly?: boolean;
+    /** Extra classes on the compact header row (e.g. wider gap between controls). */
+    compactHeaderClassName?: string;
+    /**
+     * Search field classes in compact mode. When set without `flex-1`, a spacer keeps
+     * the search narrow (layout wizard column lists).
+     */
+    compactFilterClassName?: string;
     singleSelect?: boolean;
     toIdentifier: (v: OPTION_TYPE) => ID_TYPE;
     toLabel: (v: OPTION_TYPE) => string | React.ReactElement;
@@ -17,10 +31,16 @@ export type ValueSelectorProps<OPTION_TYPE, ID_TYPE extends number | string> = {
      * Used to render list items, this extra prop allows to have different rendering for list & bottom tags.
      */
     toListLabel?: (v: OPTION_TYPE) => string | React.ReactElement;
+    /** Rendered at the end of the row, outside the checkbox label (e.g. sort direction toggle). */
+    renderOptionTrailing?: (option: OPTION_TYPE) => ReactNode;
+    /** Clicking the row toggles inclusion; checkbox clicks do not double-toggle. */
+    toggleSelectionOnRowClick?: boolean;
     showSelectedOnlyLabel?: ReactNode;
     onShowSelectedOnlyChange?: (selectedOnly: boolean) => void;
     isOptionDisabled?: (option: OPTION_TYPE) => boolean;
     disabled?: boolean;
+    optionClassName?: string;
+    className?: string;
     style?: React.CSSProperties;
 };
 export declare function ValueSelector<OPTION_TYPE, ID_TYPE extends number | string>(props: ValueSelectorProps<OPTION_TYPE, ID_TYPE>): React.JSX.Element;
@@ -37,4 +57,13 @@ export declare const renderSelectionSection: (props: {
     onSelectAll: () => void;
     onClear: () => void;
     onClearOption: (id: any) => void;
+    compact?: boolean;
+    showFilterInput?: boolean;
+    filter?: null | ((o: any, searchValue: string) => boolean);
+    searchInputValue?: string;
+    setSearchInputValue?: (value: string) => void;
+    filterPlaceholder?: string;
+    hideShowSelectedOnly?: boolean;
+    compactHeaderClassName?: string;
+    compactFilterClassName?: string;
 }) => React.JSX.Element;