@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -1,71 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumn = exports.renderFreeTextColumnSummary = void 0;
+exports.FreeTextColumnSettingsWizardSection = exports.isValidFreeTextColumnSettings = exports.renderFreeTextColumnSettingsSummary = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
-const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
-const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
-const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Radio_1 = tslib_1.__importStar(require("../../../components/Radio"));
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const CheckBox_1 = require("../../../components/CheckBox");
-const FormatHelper_1 = require("../../../Utilities/Helpers/FormatHelper");
+const DisplayFormatHelper_1 = require("../../../Utilities/Helpers/DisplayFormatHelper");
 const DateHelper_1 = require("../../../Utilities/Helpers/DateHelper");
 const Tag_1 = require("../../../components/Tag");
 const SpecialColumnSettingsWizardStep_1 = require("../../SpecialColumnSettingsWizardStep");
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
-const options = [
+const Card_1 = require("../../../components/Card");
+const getFreeTextColumnSettingsTags_1 = require("../Utilities/getFreeTextColumnSettingsTags");
+const OnePageAdaptableWizard_2 = require("../../Wizard/OnePageAdaptableWizard");
+const dataTypeOptions = [
     { value: 'number', label: 'Number' },
     { value: 'text', label: 'Text' },
     { value: 'date', label: 'Date' },
     { value: 'boolean', label: 'Boolean' },
 ];
-const renderFreeTextColumnSummary = (data) => {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Column Identifier: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.ColumnId })] }), data.FriendlyName ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Column Name: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FriendlyName ?? data.ColumnId })] })) : null, (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Data Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FreeTextColumnSettings.DataType })] }), data.DefaultValue !== undefined ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Default Value: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.DefaultValue })] })) : null, data.TextEditor !== undefined ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: ["Editor Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.TextEditor })] })) : null] }));
+const renderFreeTextColumnSettingsSummary = (data) => {
+    const propertyTags = (0, getFreeTextColumnSettingsTags_1.getFreeTextColumnSettingsTags)(data.FreeTextColumnSettings);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Data Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.FreeTextColumnSettings.DataType || 'Not specified' })] }), data.DefaultValue !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Default Value: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: String(data.DefaultValue) })] })) : null, data.TextEditor !== undefined ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Editor Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: data.TextEditor })] })) : null, propertyTags.length ? ((0, jsx_runtime_1.jsxs)(OnePageAdaptableWizard_2.SummaryText, { children: ["Properties:", ' ', propertyTags.map((tag, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: index > 0 ? 'twa:ml-1' : undefined, children: tag }, String(tag))))] })) : null] }));
 };
-exports.renderFreeTextColumnSummary = renderFreeTextColumnSummary;
-const isValidFreeTextColumn = (data, api) => {
-    const columns = api.columnApi.getUIAvailableColumns();
-    if (!data.ColumnId) {
-        return 'A Column Name is required';
-    }
-    const columnsWithSameIdCount = columns.filter((c) => c.columnId === data.ColumnId).length;
-    const hasAlreadyExistingId = data.Uuid ? columnsWithSameIdCount > 1 : columnsWithSameIdCount > 0;
-    if (hasAlreadyExistingId) {
-        return 'A column with this Name already exists';
-    }
-    if (!data.FreeTextColumnSettings.DataType) {
+exports.renderFreeTextColumnSettingsSummary = renderFreeTextColumnSettingsSummary;
+const isValidFreeTextColumnSettings = (data) => {
+    if (!data.FreeTextColumnSettings?.DataType) {
         return 'A data type is required for the column';
     }
     return true;
 };
-exports.isValidFreeTextColumn = isValidFreeTextColumn;
+exports.isValidFreeTextColumnSettings = isValidFreeTextColumnSettings;
 const FreeTextColumnSettingsWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const Pattern = api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat;
-    const [ColumnNameFocused, setColumnNameFocused] = (0, react_1.useState)(false);
-    const inEdit = props.isEdit;
-    const validCheck = (0, exports.isValidFreeTextColumn)(data, api);
-    const ErrorMessage = validCheck === true ? null : validCheck;
-    const handleColumnIdChange = (event) => {
-        let e = event.target;
-        const ColumnId = e.value;
-        props.onChange({
-            ...data,
-            ColumnId,
-        });
-    };
-    const handleColumnNameChange = (event) => {
-        let e = event.target;
-        const ColumnName = e.value;
-        props.onChange({
-            ...data,
-            FriendlyName: ColumnName,
-        });
-    };
     const handleDataTypeChange = (DataType) => {
         const newData = {
             ...data,
@@ -80,19 +52,11 @@ const FreeTextColumnSettingsWizardSection = (props) => {
         }
         props.onChange(newData);
     };
-    const onDynamicSelectChanged = (event) => {
-        let e = event.target;
-        const TextEditor = e.value;
-        props.onChange({
-            ...data,
-            TextEditor,
-        });
-    };
     const handleDefaultValueChange = (event) => {
         let e = event.target;
         let DefaultValue = e.value;
         if (data.FreeTextColumnSettings.DataType === 'date') {
-            DefaultValue = (0, FormatHelper_1.DateFormatter)(DefaultValue, {
+            DefaultValue = (0, DisplayFormatHelper_1.DateFormatter)(DefaultValue, {
                 Pattern,
             });
         }
@@ -101,9 +65,7 @@ const FreeTextColumnSettingsWizardSection = (props) => {
             DefaultValue,
         });
     };
-    const handleSpecialColumnSettingsChange = (
-    //  settings: SpecialColumnSettings
-    settings) => {
+    const handleSpecialColumnSettingsChange = (settings) => {
         props.onChange({
             ...data,
             FreeTextColumnSettings: {
@@ -112,23 +74,25 @@ const FreeTextColumnSettingsWizardSection = (props) => {
             },
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Name", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-id", autoFocus: !inEdit, value: data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, disabled: inEdit, type: "text", placeholder: "Enter a Column Name", onChange: (e) => handleColumnIdChange(e) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Column Header", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-name", autoFocus: inEdit, onFocus: () => {
-                                setColumnNameFocused(true);
-                            }, onBlur: () => {
-                                setColumnNameFocused(false);
-                            }, value: ColumnNameFocused ? data.FriendlyName || '' : data.FriendlyName || data.ColumnId || '', style: { width: '100%', maxWidth: 500 }, type: "text", placeholder: "Enter a Column Header (optional)", onChange: (e) => handleColumnNameChange(e) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Data Type", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[500px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type-dropdown", className: "twa:w-full", items: options, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Default Value", children: data.FreeTextColumnSettings.DataType === 'boolean' ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
-                                props.onChange({
-                                    ...data,
-                                    DefaultValue,
-                                });
-                            } })) : ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
-                                ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
-                                : data.DefaultValue || '', className: "twa:w-full twa:max-w-[500px]", type: data.FreeTextColumnSettings.DataType === 'number'
-                                ? 'number'
-                                : data.FreeTextColumnSettings.DataType === 'date'
-                                    ? 'date'
-                                    : 'text', placeholder: "Enter a default value (optional)", onChange: (e) => handleDefaultValueChange(e) })) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Header Tooltip", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: data.FreeTextColumnSettings?.HeaderToolTip || '', onChange: (e) => handleSpecialColumnSettingsChange({
-                                HeaderToolTip: e.target.value,
-                            }) }) }), ' ', data.FreeTextColumnSettings.DataType == 'text' && ((0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Editor", children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "inline-editor", value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), className: "twa:mr-2", children: "Inline Editor" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { "data-name": "large-editor", value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e), children: "Large Editor" })] }))] }), ErrorMessage ? (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:my-2", children: ErrorMessage }) : null, (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-2", children: (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange }) })] }));
+    const { Width } = data.FreeTextColumnSettings ?? {};
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { "data-name": "free-text-column-settings", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Data Type" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose the data type for values entered in this column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { "data-name": "column-type-dropdown", className: "twa:max-w-[300px]", items: dataTypeOptions, placeholder: "Select Data Type", value: data.FreeTextColumnSettings.DataType, onValueChange: (value) => handleDataTypeChange(value) }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Default Value" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional initial value for each cell in the column" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: data.FreeTextColumnSettings.DataType === 'boolean' ? ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { "data-name": "column-default-value-checkbox", checked: !!data.DefaultValue, onChange: (DefaultValue) => {
+                                    props.onChange({
+                                        ...data,
+                                        DefaultValue,
+                                    });
+                                } })) : ((0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { "data-name": "column-default-value", value: data.FreeTextColumnSettings.DataType === 'date' && data.DefaultValue
+                                    ? (0, DateHelper_1.parseToISO)(data.DefaultValue, Pattern) || ''
+                                    : data.DefaultValue || '', className: "twa:max-w-[500px] twa:w-full", type: data.FreeTextColumnSettings.DataType === 'number'
+                                    ? 'number'
+                                    : data.FreeTextColumnSettings.DataType === 'date'
+                                        ? 'date'
+                                        : 'text', placeholder: "Enter a default value (optional)", onChange: handleDefaultValueChange })) })] }), data.FreeTextColumnSettings.DataType === 'text' ? ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell Editor" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose how text values are edited in the grid" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(Radio_1.RadioGroup, { value: data.TextEditor ?? 'Inline', name: "textEditor", orientation: "horizontal", onRadioChange: (TextEditor) => {
+                                    props.onChange({
+                                        ...data,
+                                        TextEditor,
+                                    });
+                                }, children: [(0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-1", "data-name": "inline-editor", value: "Inline", children: "Inline Editor" }), (0, jsx_runtime_1.jsx)(Radio_1.default, { className: "twa:ml-4", "data-name": "large-editor", value: "Large", children: "Large Editor" })] }) })] })) : null, (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Width" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional column width in pixels" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:p-1", children: (0, jsx_runtime_1.jsx)(Input_1.default, { "data-name": "column-width", type: "number", className: "twa:max-w-[300px]", value: Width || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                                    Width: Number(e.target.value),
+                                }) }) })] }), (0, jsx_runtime_1.jsx)(SpecialColumnSettingsWizardStep_1.SpecialColumnSettingsWizardStep, { isEditable: true, settings: data.FreeTextColumnSettings, onChange: handleSpecialColumnSettingsChange })] }) }));
 };
 exports.FreeTextColumnSettingsWizardSection = FreeTextColumnSettingsWizardSection;

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FreeTextColumnSettingsWizardSection_1 = require("./FreeTextColumnSettingsWizardSection");
+const FreeTextColumnDefinitionWizardSection_1 = require("./FreeTextColumnDefinitionWizardSection");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/FreeTextColumnRedux"));
 const react_redux_1 = require("react-redux");
@@ -26,7 +27,7 @@ const FreeTextColumnWizard = (props) => {
         return ObjectFactory_1.default.CreateEmptyFreeTextColumn(adaptable.api.gridApi.internalApi.deriveSpecialColumnSettingsFromAgGridDefaultColDef());
     });
     const dispatch = (0, react_redux_1.useDispatch)();
-    const isEdit = props.data || props.popupParams?.action === 'Edit';
+    const isEdit = Boolean(props.data) || props.popupParams?.action === 'Edit';
     const handleFinish = () => {
         if (isEdit) {
             dispatch(FreeTextColumnRedux.FreeTextColumnEdit(freeTextColumn));
@@ -37,13 +38,19 @@ const FreeTextColumnWizard = (props) => {
         props.onFinishWizard(freeTextColumn);
     };
     return ((0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: freeTextColumn, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
+            {
+                title: 'Details',
+                details: 'Provide Free Text Column Details',
+                isValid: FreeTextColumnDefinitionWizardSection_1.isValidFreeTextColumnDefinition,
+                renderSummary: FreeTextColumnDefinitionWizardSection_1.renderFreeTextColumnDefinitionSummary,
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FreeTextColumnDefinitionWizardSection_1.FreeTextColumnDefinitionWizardSection, { isEdit: isEdit, onChange: setFreeTextColumn }) })),
+            },
             {
                 title: 'Settings',
-                details: 'Configure the Free Text Column',
-                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
-                render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn }) }));
-                },
+                details: 'Specify Free Text Column Properties',
+                isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumnSettings,
+                renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSettingsSummary,
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: isEdit, onChange: setFreeTextColumn }) })),
             },
             {
                 details: 'Select Free Text Column Tags',
@@ -55,10 +62,7 @@ const FreeTextColumnWizard = (props) => {
             '-',
             {
                 details: 'Review the Free Text Column',
-                renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
-                render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
-                },
+                render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) })),
                 title: 'Summary',
             },
         ] }));

package/src/View/GridFilter/GridFilterPopupUI/index.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPopupUI = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const DropdownButton_1 = require("../../../components/DropdownButton");
+const icons_1 = require("../../../components/icons");
 const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
@@ -27,6 +28,6 @@ const GridFilterPopupUI = (props) => {
             onRunQuery();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, 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)(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", (0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full", children: [(0, jsx_runtime_1.jsx)(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), (0, jsx_runtime_1.jsx)(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions_1.default.IsNotNullOrEmpty(expression) && ((0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [(0, jsx_runtime_1.jsx)(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? ((0, jsx_runtime_1.jsx)(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start", children: "Columns" }), (0, jsx_runtime_1.jsx)(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled, 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)(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center", children: ["Expression:", (0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full", children: [(0, jsx_runtime_1.jsx)(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }), (0, jsx_runtime_1.jsx)(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }), isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })), currentGridFilterExpression && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })), ' ', StringExtensions_1.default.IsNotNullOrEmpty(expression) && ((0, jsx_runtime_1.jsx)(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2", children: [(0, jsx_runtime_1.jsx)(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1", children: "Save" }), isSuspended ? ((0, jsx_runtime_1.jsx)(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Resume" })) : ((0, jsx_runtime_1.jsx)(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1", children: "Suspend" })), (0, jsx_runtime_1.jsxs)(DropdownButton_1.NewDropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "list" }), "Columns"] }), (0, jsx_runtime_1.jsx)(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query), children: "Named Queries" })] })] }) }) }) }));
 };
 exports.GridFilterPopupUI = GridFilterPopupUI;

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPanelControl = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
 const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
@@ -17,6 +16,7 @@ const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor
 const Flex_1 = require("../../components/Flex");
 const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const utils_1 = require("../../lib/utils");
 const QueryViewPanelComponent = (props) => {
     const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     if (!isAdaptableReady) {
@@ -26,12 +26,12 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const buttonExpand = ((0, jsx_runtime_1.jsx)(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderExpressionLabel = () => {
-        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
+        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-background twa:text-foreground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
         const placeholderClasses = 'twa:text-gray-400 twa:italic';
-        const labelClassName = (0, clsx_1.default)(baseClasses, {
+        const labelClassName = (0, utils_1.cn)(baseClasses, {
             [placeholderClasses]: !expression,
         });
-        const expressionLabel = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
+        const expressionLabel = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter', children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand, children: expression || 'Grid Filter...' }) }));
         return ((0, jsx_runtime_1.jsxs)(FieldWrap_1.default, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible", children: [buttonExpand, expressionLabel, gridFilter && !isExpressionValid && ((0, jsx_runtime_1.jsx)(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))] }));
     };
     const hasExpression = StringExtensions_1.default.IsNotNullOrEmpty(expression);
@@ -46,9 +46,9 @@ const QueryViewPanelComponent = (props) => {
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [clearButton, isSuspended ? unSuspendButton : suspendButton, saveButton, namedQuerySelector] }));
     };
     const isToolbar = props.viewType === 'Toolbar';
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, clsx_1.default)(`ab-${elementType}__Query__wrap`, {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, utils_1.cn)(`ab-${elementType}__Query__wrap`, {
             'twa:w-[500px]': isToolbar,
-        }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-shrink-0', {
+        }), children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)({ 'twa:flex-1 twa:min-w-0': isToolbar }), children: renderExpressionLabel() }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)('twa:flex-shrink-0', {
                     'twa:pl-1': isToolbar,
                     'twa:pt-1': !isToolbar,
                 }), children: renderButtons() })] }));

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectsSummary = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils");
 const Flex_1 = require("../../../components/Flex");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
 const useRerender_1 = require("../../../components/utils/useRerender");
 const react_1 = require("react");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const AdaptableObjectsSummary = ({ className, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const rerender = (0, useRerender_1.useRerender)();
@@ -17,7 +16,7 @@ const AdaptableObjectsSummary = ({ className, }) => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)(baseClassName, className), children: [...modules].map(([moduleName, module]) => {
             if (!module.isModuleVisible()) {
                 return null;
             }

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -12,7 +12,7 @@ const Tabs_1 = require("../../../components/Tabs");
 const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 const DefaultAdaptableOptions_1 = require("../../../AdaptableOptions/DefaultAdaptableOptions");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../../lib/utils");
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
 const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
@@ -238,7 +238,7 @@ const GridInfoPopup = (props) => {
     const showState = enabledTabs.includes('Grid State');
     const showOptions = enabledTabs.includes('Grid Options');
     const baseClassName = 'ab-GridInfo';
-    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', 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, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Summary" }) : null, showState ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid State" }) : null, showOptions ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: section.rows, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: {
+    return ((0, jsx_runtime_1.jsx)(PopupPanel_1.PopupPanel, { className: (0, utils_1.cn)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', 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, { className: "twa:flex-1 twa:min-h-0", children: [showSummary ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Summary" }) : null, showState ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid State" }) : null, showOptions ? (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Grid Options" }) : null, showSummary ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap }) }) })) : null, showState ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" }) })) : null, showOptions ? ((0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)("div", { className: "twa:min-h-0 twa:overflow-auto twa:p-2 twa:flex twa:flex-col twa:gap-4", children: gridOptionsSections.map((section) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "twa:font-semibold twa:mb-1", children: section.title }), (0, jsx_runtime_1.jsx)(InfiniteTable_1.DataSource, { data: section.rows, primaryKey: "Key", children: (0, jsx_runtime_1.jsx)(InfiniteTable_1.InfiniteTableGrid, { domProps: {
                                                     style: { height: sectionHeight(section.rows), width: '100%' },
                                                 }, rowHeight: (rowInfo) => calculateRowHeight(rowInfo.data), columns: optionsColumnsMap }) })] }, section.title))) }) })) : null] }) }) }) }));
 };

package/src/View/Layout/LayoutCloneButton.js

@@ -8,12 +8,13 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleB
 const AdaptableContext_1 = require("../AdaptableContext");
 const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const objectListActionButtonStyles_1 = require("../Components/AdaptableObjectList/objectListActionButtonStyles");
 const LayoutCloneButton = ({ data, accessLevel }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const isDisabled = accessLevel === GeneralConstants_1.ACCESS_LEVEL_READ_ONLY;
     const handleClick = React.useCallback(() => {
         adaptable.api.layoutApi.showLayoutEditor(data.Name, (0, isPivotLayout_1.isPivotLayout)(data) ? 'pivot' : 'table', 'Clone');
     }, []);
-    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone" }));
+    return ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { onClick: handleClick, disabled: isDisabled, variant: "text", icon: "clone", tooltip: "Clone", className: (0, objectListActionButtonStyles_1.objectListActionButtonClassName)('clone') }));
 };
 exports.LayoutCloneButton = LayoutCloneButton;

package/src/View/Layout/LayoutViewPanel.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
 const react_redux_1 = require("react-redux");
-const isEqual_1 = tslib_1.__importDefault(require("../../Utilities/utils/isEqual"));
+const ObjectExtensions_1 = require("../../Utilities/Extensions/ObjectExtensions");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
@@ -16,7 +16,7 @@ const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const isPivotLayout_1 = require("../../Utilities/isPivotLayout");
-const NewDropdownButton_1 = require("../../components/NewDropdownButton");
+const DropdownButton_1 = require("../../components/DropdownButton");
 const icons_1 = require("../../components/icons");
 const Flex_1 = require("../../components/Flex");
 const NewSelect_1 = require("../../components/NewSelect");
@@ -24,7 +24,7 @@ const NewSelect_1 = require("../../components/NewSelect");
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 const LayoutViewPanelComponent = (props) => {
     const { Layouts, CurrentLayoutName, accessLevel, viewType, api, onSelectLayout, showMissingLayoutsError, } = props;
-    const isErrorLayout = !Layouts.length || (Layouts.length === 1 && (0, isEqual_1.default)(Layouts[0], GeneralConstants_1.ERROR_LAYOUT));
+    const isErrorLayout = !Layouts.length || (Layouts.length === 1 && (0, ObjectExtensions_1.isEqual)(Layouts[0], GeneralConstants_1.ERROR_LAYOUT));
     React.useEffect(() => {
         if (isErrorLayout) {
             showMissingLayoutsError();
@@ -37,31 +37,33 @@ const LayoutViewPanelComponent = (props) => {
     const entityAccessLevel = AdaptableHelper_1.default.getAccessLevelForObject(layoutEntity, accessLevel);
     const elementType = viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
+    const toLayoutSelectItems = (layouts) => layouts.map((layout) => ({
+        label: layout.Name,
+        value: layout.Name,
+    }));
     const tableLayoutsArray = Layouts.filter((layout) => !(0, isPivotLayout_1.isPivotLayout)(layout));
     const pivotLayoutsArray = Layouts.filter((layout) => (0, isPivotLayout_1.isPivotLayout)(layout));
-    const layoutGroups = [
-        tableLayoutsArray.length > 0
-            ? {
-                label: 'Table Layouts',
-                items: tableLayoutsArray.map((layout) => ({
-                    label: layout.Name,
-                    value: layout.Name,
-                })),
-            }
-            : null,
-        pivotLayoutsArray.length > 0
-            ? {
-                label: 'Pivot Layouts',
-                items: pivotLayoutsArray.map((layout) => ({
-                    label: layout.Name,
-                    value: layout.Name,
-                })),
-            }
-            : null,
-    ].filter(Boolean);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { groups: layoutGroups, showItemTooltip: true, disabled: isErrorLayout, className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`, ariaLabel: 'Select Layout', value: layoutEntity ? layoutEntity.Name : null, onValueChange: (layout) => onSelectLayout(layout) }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
+    const showLayoutTypeHeadings = tableLayoutsArray.length > 0 && pivotLayoutsArray.length > 0;
+    const layoutSelectCommonProps = {
+        showItemTooltip: true,
+        disabled: isErrorLayout,
+        className: `twa:w-full twa:min-w-30 ab-${elementType}__Layout__select`,
+        ariaLabel: 'Select Layout',
+        value: layoutEntity ? layoutEntity.Name : null,
+        onValueChange: (layout) => onSelectLayout(layout),
+    };
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap twa:gap-0.5`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap', children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: layoutSelectStyle, className: "twa:flex-1", children: showLayoutTypeHeadings ? ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ...layoutSelectCommonProps, groups: [
+                        {
+                            label: 'Table Layouts',
+                            items: toLayoutSelectItems(tableLayoutsArray),
+                        },
+                        {
+                            label: 'Pivot Layouts',
+                            items: toLayoutSelectItems(pivotLayoutsArray),
+                        },
+                    ] })) : ((0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { ...layoutSelectCommonProps, items: toLayoutSelectItems(Layouts) })) }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === GeneralConstants.ACCESS_LEVEL_READ_ONLY
                     ? GeneralConstants.READ_ONLY_STYLE
-                    : '', `ab-${elementType}__Layout__wrap`), children: [(0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), (0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), (0, jsx_runtime_1.jsx)(NewDropdownButton_1.NewDropdownButton, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
+                    : '', `ab-${elementType}__Layout__wrap`), children: [(0, jsx_runtime_1.jsx)(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }), (0, jsx_runtime_1.jsx)(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }), (0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { variant: "text", tooltip: GeneralConstants_1.LAYOUT_NEW_TABLE_OR_PIVOT_TOOLTIP, "data-name": "new", items: [
                             {
                                 dataName: 'table',
                                 label: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "Table Layout" }),

package/src/View/Layout/TransposedPopup.js

@@ -187,8 +187,8 @@ const TransposedPopup = (props) => {
             modules,
         }).then((adaptableApi) => {
             transposedAdaptableApiRef.current = adaptableApi;
-            adaptableApi.eventApi.on('ThemeChanged', (event) => {
-                transposedAdaptableApiRef.current?.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            adaptableApi.eventApi.on('ThemeSelected', (event) => {
+                transposedAdaptableApiRef.current?.themeApi.loadTheme(event.theme);
             });
         });
     }, [elevatedColumnId, adaptable]);