@adaptabletools/adaptable-cjs 17.0.0-canary.1 → 17.0.0-canary.3

package/base.css

@@ -1749,7 +1749,7 @@ input[type=number].ab-Input:hover::-webkit-inner-spin-button:active {
   --ab-cmp-listgroupitem--odd__background: transparent;
 }
 
-:root {
+.rdp {
   --rdp-cell-size: var(--ab-cmp-datepicker__cell-size);
   --rdp-accent-color: var(--ab-cmp-datepicker__selected-color);
   --rdp-background-color: var(--ab-cmp-datepicker__hover-color);

package/index.css

@@ -1750,7 +1750,7 @@ input[type=number].ab-Input:hover::-webkit-inner-spin-button:active {
   --ab-cmp-listgroupitem--odd__background: transparent;
 }
 
-:root {
+.rdp {
   --rdp-cell-size: var(--ab-cmp-datepicker__cell-size);
   --rdp-accent-color: var(--ab-cmp-datepicker__selected-color);
   --rdp-background-color: var(--ab-cmp-datepicker__hover-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "version": "17.0.0-canary.1",
+  "version": "17.0.0-canary.3",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",
@@ -49,12 +49,11 @@
     "re-resizable": "6.9.9",
     "react": "^18.0.0",
     "react-beautiful-dnd": "13.1.1",
-    "react-day-picker": "8.0.6",
+    "react-day-picker": "8.1.0",
     "react-dom": "^18.0.0",
     "react-redux": "7.2.8",
     "react-remove-scroll": "2.4.4",
     "react-select": "5.8.0",
-    "react-toastify": "9.0.7",
     "rebass": "^3.2.2",
     "redux": "4.0.5",
     "rxjs": "^7.4.0",
@@ -67,5 +66,5 @@
   "peerDependencies": {
     "ag-grid-community": ">=30.2.0"
   },
-  "publishTimestamp": 1704894907301
+  "publishTimestamp": 1704904757187
 }

package/src/Redux/ActionsReducers/ExportRedux.js

@@ -70,8 +70,6 @@ const DestinationSelect = (SelectedDestination) => ({
 exports.DestinationSelect = DestinationSelect;
 const initialState = {
     Reports: GeneralConstants_1.EMPTY_ARRAY,
-    CurrentReport: GeneralConstants_1.EMPTY_STRING,
-    CurrentDestination: GeneralConstants_1.EMPTY_STRING,
 };
 const ExportReducer = (state = initialState, action) => {
     let reports;

package/src/Redux/Store/AdaptableStore.js

@@ -1198,7 +1198,7 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     if (!selectedReport ||
                         (selectedReport === GeneralConstants_1.VISUAL_DATA_REPORT &&
                             middlewareAPI.getState().Export.CurrentDestination !== Enums_1.ExportDestination.Excel)) {
-                        middlewareAPI.dispatch(ExportRedux.DestinationSelect(''));
+                        middlewareAPI.dispatch(ExportRedux.DestinationSelect(null));
                     }
                     return returnAction;
                 }

package/src/Strategy/LayoutModule.js

@@ -391,7 +391,8 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                     })
                         .filter(Boolean),
                 },
-                (layout === null || layout === void 0 ? void 0 : layout.GridFilter) && StringExtensions_1.default.IsNotNullOrEmpty(layout.GridFilter.Expression) && {
+                (layout === null || layout === void 0 ? void 0 : layout.GridFilter) &&
+                    StringExtensions_1.default.IsNotNullOrEmpty(layout.GridFilter.Expression) && {
                     name: 'Grid Filter',
                     values: [layout.GridFilter.Expression],
                 },
@@ -411,13 +412,8 @@ class LayoutModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             },
             getEditWizard: () => LayoutWizard_1.LayoutWizard,
             getStatusBarPanelProps: () => {
-                const text = this.api.layoutApi.getCurrentLayoutName();
-                const layouts = this.api.layoutApi.getLayouts();
-                const popover = layouts.length > 1 ? LayoutStatusBarSubPanelPopover_1.LayoutStatusBarSubPanelPopover : null;
                 return {
-                    content: text,
-                    popover: popover,
-                    popoverMinWidth: 150,
+                    content: LayoutStatusBarSubPanelPopover_1.LayoutStatusbar,
                     extraActions: [EditCurrentLayoutButton_1.EditCurrentLayoutButton, SaveLayoutButton_1.SaveLayoutButton],
                 };
             },

package/src/Strategy/ThemeModule.js

@@ -4,7 +4,7 @@ exports.ThemeModule = void 0;
 const tslib_1 = require("tslib");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
-const ThemeStatusPanelPopover_1 = require("../View/Theme/ThemeStatusPanelPopover");
+const ThemeStatusbar_1 = require("../View/Theme/ThemeStatusbar");
 class ThemeModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.ThemeModuleId, ModuleConstants.ThemeFriendlyName, 'theme', 'ThemePopup', 'Theme AdapTable with a colour configuration set of your choosing', api);
@@ -18,16 +18,8 @@ class ThemeModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     getViewProperties() {
         return {
             getStatusBarPanelProps: () => {
-                var _a;
-                const currentThemeName = this.api.themeApi.getCurrentTheme();
-                const currentTheme = this.api.themeApi
-                    .getThemes()
-                    .find((theme) => theme.Name === currentThemeName);
-                const text = (_a = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.Description) !== null && _a !== void 0 ? _a : currentThemeName;
                 return {
-                    content: text,
-                    popover: ThemeStatusPanelPopover_1.ThemeStatusPanelPopover,
-                    popoverMinWidth: 120,
+                    content: ThemeStatusbar_1.ThemeStatusbar,
                 };
             },
         };

package/src/View/Alert/Utilities/getAlertType.d.ts

@@ -1,6 +1,7 @@
 import { AlertDefinition } from '../../../types';
 export declare enum AlertType {
     DataChange = "DataChange",
+    Validation = "Validation",
     RowChange = "RowChange",
     Aggregation = "Aggregation",
     Observable = "Observable"

package/src/View/Alert/Utilities/getAlertType.js

@@ -4,6 +4,7 @@ exports.getAlertTypeText = exports.getAlertType = exports.AlertType = void 0;
 var AlertType;
 (function (AlertType) {
     AlertType["DataChange"] = "DataChange";
+    AlertType["Validation"] = "Validation";
     AlertType["RowChange"] = "RowChange";
     AlertType["Aggregation"] = "Aggregation";
     AlertType["Observable"] = "Observable";
@@ -15,6 +16,7 @@ var AlertType;
  * @param alert
  */
 const getAlertType = (alert) => {
+    var _a, _b;
     if (alert.Rule.ObservableExpression) {
         return AlertType.Observable;
     }
@@ -22,6 +24,9 @@ const getAlertType = (alert) => {
         return AlertType.Aggregation;
     }
     if (alert.Rule.BooleanExpression) {
+        if ((_a = alert.AlertProperties) === null || _a === void 0 ? void 0 : _a.PreventEdit) {
+            return AlertType.Validation;
+        }
         return AlertType.DataChange;
     }
     const predicates = alert.Rule.Predicates;
@@ -30,7 +35,7 @@ const getAlertType = (alert) => {
             return AlertType.RowChange;
         }
         else {
-            return AlertType.DataChange;
+            return ((_b = alert.AlertProperties) === null || _b === void 0 ? void 0 : _b.PreventEdit) ? AlertType.Validation : AlertType.DataChange;
         }
     }
     // the object is not a valid alert
@@ -43,6 +48,9 @@ const getAlertTypeText = (alertType) => {
         case AlertType.DataChange:
             text = 'Data Change';
             break;
+        case AlertType.Validation:
+            text = 'Data Validation';
+            break;
         case AlertType.RowChange:
             text = 'Row Change';
             break;

package/src/View/Alert/Utilities/getAvailablePredicates.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAvailablePredicateDefinitions = void 0;
 const getAvailablePredicateDefinitions = (api, scope, alertType) => {
     let predicateDefs = [];
-    if (alertType === 'DataChange') {
+    if (alertType === 'DataChange' || alertType === 'Validation') {
         predicateDefs = api.alertApi.internalApi
             .getAlertPredicateDefsForScope(scope)
             .filter((predicateDef) => !['AddedRow', 'RemovedRow'].includes(predicateDef.id));

package/src/View/Alert/Utilities/getDefaultAlertDefinition.js

@@ -27,6 +27,11 @@ const getDefaultAlertDefinition = (alertDefinition, type) => {
             ],
         };
     }
+    if (type === getAlertType_1.AlertType.Validation) {
+        newAlert.AlertProperties = {
+            PreventEdit: true,
+        };
+    }
     return newAlert;
 };
 exports.getDefaultAlertDefinition = getDefaultAlertDefinition;

package/src/View/Alert/Wizard/AlertBehaviourWizardSection.js

@@ -107,7 +107,7 @@ const AlertBehaviourWizardSection = (props) => {
     const { AlertProperties = {} } = data;
     const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
     // data change only
-    const hasPreventCellEdit = props.alertType === 'DataChange';
+    const hasPreventCellEdit = props.alertType === 'Validation';
     // except row change
     const hasHighlightCell = props.alertType !== 'RowChange';
     // except row removed
@@ -126,11 +126,7 @@ const AlertBehaviourWizardSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
         React.createElement(Tabs_1.Tabs.Content, null,
-            hasPreventCellEdit && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
-                    onChange({
-                        PreventEdit,
-                    });
-                } },
+            hasPreventCellEdit && (React.createElement(CheckBox_1.CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, disabled: true },
                 "Prevent Cell Edit",
                 React.createElement(rebass_1.Text, { fontSize: 2, mt: 1 }, "(automatically undo data change which triggered Alert)"))),
             hasHighlightCell && (React.createElement(HighlightStyle, { dataName: "highlight-cell", highlight: AlertProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {

package/src/View/Alert/Wizard/AlertRulesWizardSection.js

@@ -16,9 +16,11 @@ const getRuleStepDescription = (alertType) => {
             return (React.createElement(React.Fragment, null,
                 "Build the Rule ",
                 React.createElement("b", null, "when"),
-                " the Alert should trigger, using a Predicate or a Query"));
+                " the Alert should trigger (using a Predicate or a Query)"));
         case 'RowChange':
             return React.createElement(React.Fragment, null, "Specify which type of Row Change will trigger the Alert");
+        case 'Validation':
+            return React.createElement(React.Fragment, null, "Create the Validation Rule which will trigger the Alert (using a Predicate or a Query)");
         case 'Aggregation':
             return React.createElement(React.Fragment, null, "Build an Aggregation Boolean Rule to specify when the Alert should trigger");
         case 'Observable':
@@ -59,14 +61,15 @@ const AlertRulesWizardSection = (props) => {
     const predicateDefs = (0, getAvailablePredicates_1.getAvailablePredicateDefinitions)(api, data.Scope, props.alertType);
     const showObservable = props.alertType === 'Observable';
     const showAggregation = props.alertType === 'Aggregation';
-    const showBoolean = props.alertType === 'DataChange';
-    const showPredicate = props.alertType === 'DataChange' || props.alertType === 'RowChange';
-    const enablePredicateColumnId = props.alertType === 'DataChange';
+    const showBoolean = props.alertType === 'DataChange' || props.alertType == 'Validation';
+    const showPredicate = props.alertType === 'DataChange' || props.alertType == 'Validation' || props.alertType === 'RowChange';
+    const enablePredicateColumnId = props.alertType === 'DataChange' || props.alertType == 'Validation';
+    ;
     if (props.alertType === 'RowChange') {
         return React.createElement(RowChangeEditor, { alert: data, onChange: props.onChange });
     }
     return (React.createElement(EntityRulesEditor_1.EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, enablePredicateColumnId: enablePredicateColumnId, getPredicateDefsForColId: (colId) => (0, getAvailablePredicates_1.getAvailablePredicateDefinitions)(api, { ColumnIds: [colId] }, props.alertType), onChange: props.onChange, showAggregation: showAggregation, showObservable: showObservable, showBoolean: showBoolean, showPredicate: showPredicate, descriptions: {
-            selectPredicate: 'Create an Alert Rule - to be applied when data changes',
+            selectPredicate: 'Build the Predicate',
             useBooleanQuery: (React.createElement(React.Fragment, null,
                 "Use an BooleanQuery if ",
                 React.createElement("i", null, "Scope"),

package/src/View/Alert/Wizard/AlertScopeWizardSection.js

@@ -10,7 +10,7 @@ const AlertScopeWizardSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     let disableDataTypes = true;
     let disableColumns = true;
-    if (props.alertType === 'DataChange') {
+    if (props.alertType === 'DataChange' || props.alertType == 'Validation') {
         disableDataTypes = false;
         disableColumns = false;
     }

package/src/View/Alert/Wizard/AlertTypeWizardSection.js

@@ -22,6 +22,7 @@ const AlertTypeWizardSection = (props) => {
                 React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.DataChange), description: "A change has been made to the Grid's underlying data", checked: props.alertType === getAlertType_1.AlertType.DataChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.DataChange) }),
                 React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.RowChange), description: "A Row was added or removed from the data source", checked: props.alertType === getAlertType_1.AlertType.RowChange, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.RowChange) }),
                 React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Aggregation), description: "A change has been made to aggregated data (i.e. from multiple Rows)", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Aggregation), checked: props.alertType === getAlertType_1.AlertType.Aggregation }),
-                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable })))));
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Observable), description: "A specified change (or lack of change) over time has been observed in the Grid", onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Observable), checked: props.alertType === getAlertType_1.AlertType.Observable }),
+                React.createElement(TypeRadio_1.TypeRadio, { text: (0, getAlertType_1.getAlertTypeText)(getAlertType_1.AlertType.Validation), description: "A change has broken a data validation rule", checked: props.alertType === getAlertType_1.AlertType.Validation, onClick: () => props.onAlertTypeChange(getAlertType_1.AlertType.Validation) })))));
 };
 exports.AlertTypeWizardSection = AlertTypeWizardSection;

package/src/View/Alert/Wizard/AlertWizard.js

@@ -85,7 +85,7 @@ const AlertWizard = (props) => {
             },
             {
                 title: 'Trigger',
-                isVisible: () => alertType === getAlertType_1.AlertType.DataChange,
+                isVisible: () => alertType === getAlertType_1.AlertType.DataChange || alertType == getAlertType_1.AlertType.Validation,
                 details: (React.createElement(React.Fragment, null,
                     "Specify ",
                     React.createElement("b", null, "where"),

package/src/View/Charting/useChartingElements.js

@@ -4,7 +4,7 @@ exports.useChartingElements = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const Select_1 = require("../../components/Select");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const ChartingState_1 = require("../../PredefinedConfig/ChartingState");
 const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
@@ -15,7 +15,7 @@ const EditChartButton_1 = require("./EditChartButton");
 const useAgChartState_1 = require("./useAgChartState");
 const useExternalChartState_1 = require("./useExternalChartState");
 const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
-    var _a, _b;
+    var _a;
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
     const extenralChartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetExternalChartDefinitions);
@@ -65,17 +65,13 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
     let containerOptions = chartContainers
         ? chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.map((contianerDef) => ({
             label: contianerDef.name,
-            onClick: () => {
-                setSelectedContainer(contianerDef);
-            },
+            value: contianerDef.name,
         }))
         : [];
     if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
         containerOptions.unshift({
             label: chartingOptions.agGridContainerName,
-            onClick: () => {
-                setSelectedContainer(null);
-            },
+            value: null,
         });
     }
     const style = {};
@@ -85,8 +81,10 @@ const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) =>
         style.fontSize = 'small';
         iconSize = 15;
     }
-    const chartSelector = (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], className: `ab-${elementType}__Chart__select`, items: options, disabled: !hasCharts }, selectedChartValue));
-    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(DropdownButton_1.default, { style: style, width: "100%", columns: ['label'], items: containerOptions, disabled: !isSelectedChart }, (_b = selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name) !== null && _b !== void 0 ? _b : 'Select Container'));
+    const chartSelector = (React.createElement(Select_1.Select, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, options: options, placeholder: 'Select Chart', disabled: !hasCharts, onChange: (chartUuid) => setSelectedChartId(chartUuid) }));
+    const containerSelector = Boolean(chartContainers === null || chartContainers === void 0 ? void 0 : chartContainers.length) && (React.createElement(Select_1.Select, { value: selectedContainer === null || selectedContainer === void 0 ? void 0 : selectedContainer.name, size: size, onChange: (containerName) => {
+            setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
+        }, options: containerOptions, placeholder: "Select Container" }));
     const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
     const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));

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

@@ -25,7 +25,7 @@ const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, onChange: (colId) => {
+    return (React.createElement(Select_1.Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, placeholder: "Select Column", onChange: (colId) => {
             props.onChange(colId);
         }, options: options }));
 };

package/src/View/Export/ExportSelector.js

@@ -3,15 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportSelector = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const Select_1 = require("../../components/Select");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const AdaptableContext_1 = require("../AdaptableContext");
-const constants_1 = require("./constants");
-const dropdownStyle = {
-    padding: 2,
-    fontSize: 'small',
-};
 const isCustomDestination = (destination) => {
     return !!destination.name;
 };
@@ -27,7 +22,6 @@ const ExportSelector = () => {
         return {
             label: report,
             value: report,
-            onClick: () => handleReportChange(report),
         };
     });
     const currentReport = adaptable.api.exportApi.getCurrentReport();
@@ -41,25 +35,22 @@ const ExportSelector = () => {
     const destinationItems = [
         ...adaptable.api.exportApi.getAvailableExportDestinations().map((destination) => ({
             label: destination,
-            onClick: () => handleDestinationChange(destination),
-            disabled: !adaptable.api.exportApi.internalApi.isDestinationEnabled(destination),
+            value: destination,
+            isDisabled: !adaptable.api.exportApi.internalApi.isDestinationEnabled(destination),
         })),
         ...adaptable.api.exportApi.getCustomDestinations().map((destination) => ({
             label: destination.name,
-            onClick: () => handleDestinationChange(destination.name),
+            value: destination.name,
         })),
     ];
     const currentDestination = adaptable.api.exportApi.getCurrentDestination();
-    let currentDestinationId = null;
+    let currentDestinationId = undefined;
     if (typeof currentDestination === 'string') {
         currentDestinationId = currentDestination;
     }
     else if (currentDestination && 'name' in currentDestination) {
         currentDestinationId = currentDestination.name;
     }
-    else {
-        currentDestinationId = constants_1.SELECT_DESTINATION_STRING;
-    }
     // export
     const handleExport = () => {
         if (isCustomDestination(currentDestination)) {
@@ -70,8 +61,15 @@ const ExportSelector = () => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownButton_1.default, { disabled: allReportNames.length == 0, style: dropdownStyle, items: reportItems, columns: ['label'], onClear: () => handleReportChange(null), showClearButton: !!currentReport, variant: "outlined", marginRight: 2 }, currentReportId !== null && currentReportId !== void 0 ? currentReportId : constants_1.SELECT_REPORT_STRING),
-        React.createElement(DropdownButton_1.default, { disabled: currentReportId === constants_1.SELECT_REPORT_STRING, style: dropdownStyle, items: destinationItems, columns: ['label'], onClear: () => handleDestinationChange(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId),
-        React.createElement(SimpleButton_1.default, { disabled: currentDestinationId === constants_1.SELECT_DESTINATION_STRING, iconSize: 15, icon: "export", variant: "text", onClick: handleExport })));
+        React.createElement(Select_1.Select, { size: "small", isClearable: true, placeholder: 'Select Report', value: currentReportId, options: reportItems, onChange: handleReportChange }),
+        React.createElement(Select_1.Select, { size: "small", isClearable: true, placeholder: 'Select Destination', value: currentDestinationId, options: destinationItems, onChange: (destination) => {
+                if (destination) {
+                    handleDestinationChange(destination);
+                }
+                else {
+                    handleDestinationChange(null);
+                }
+            } }),
+        React.createElement(SimpleButton_1.default, { disabled: !currentDestinationId || !currentReportId, iconSize: 15, icon: "export", variant: "text", onClick: handleExport })));
 };
 exports.ExportSelector = ExportSelector;

package/src/View/Export/ExportViewPanel.d.ts

@@ -1,10 +1,10 @@
-import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import { Report, ReportSchedule } from '../../PredefinedConfig/ExportState';
+import * as React from 'react';
+import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
 import { ExportDestination } from '../../PredefinedConfig/Common/Enums';
+import { Report, ReportSchedule } from '../../PredefinedConfig/ExportState';
 import * as ExportRedux from '../../Redux/ActionsReducers/ExportRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-import { AdaptableColumn } from '../../PredefinedConfig/Common/AdaptableColumn';
-import * as React from 'react';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export interface ExportViewPanelComponentProps extends ViewPanelProps {
     onApplyExport: (report: Report, exportDestination: ExportDestination | string) => ExportRedux.ExportApplyAction;
     onSelectReport: (Report: string) => ExportRedux.ReportSelectAction;

package/src/View/Export/ExportViewPanel.js

@@ -2,33 +2,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExportViewPanelControl = void 0;
 const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const Select_1 = require("../../components/Select");
+const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const Enums_1 = require("../../PredefinedConfig/Common/Enums");
 const ExportRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ExportRedux"));
 const PopupRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/PopupRedux"));
-const React = tslib_1.__importStar(require("react"));
-const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
-const ButtonExport_1 = require("../Components/Buttons/ButtonExport");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
+const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
+const ButtonExport_1 = require("../Components/Buttons/ButtonExport");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonSchedule_1 = require("../Components/Buttons/ButtonSchedule");
-const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
-const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
-const react_redux_1 = require("react-redux");
 const constants_1 = require("./constants");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
-const Select_1 = require("../../components/Select");
 class ExportViewPanelComponent extends React.Component {
     render() {
         let currentReport = this.props.api.exportApi.getReportByName(this.props.CurrentReport);
-        let currentReportId = StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.CurrentReport)
-            ? constants_1.SELECT_REPORT_STRING
-            : this.props.CurrentReport;
+        let currentReportId = this.props.CurrentReport;
         const allReportNames = this.getAllReportNames();
         const reportItems = allReportNames.map((report) => {
             return {
@@ -40,12 +37,10 @@ class ExportViewPanelComponent extends React.Component {
         if (currentReport && !allReportNames.includes(currentReport.Name)) {
             // current report is not available
             currentReport = undefined;
-            currentReportId = constants_1.SELECT_REPORT_STRING;
+            currentReportId = undefined;
         }
         let currentDestination = this.props.api.exportApi.getDestinationByName(this.props.CurrentDestination);
-        let currentDestinationId = StringExtensions_1.StringExtensions.IsNullOrEmpty(this.props.CurrentDestination)
-            ? constants_1.SELECT_DESTINATION_STRING
-            : this.props.CurrentDestination;
+        let currentDestinationId = this.props.CurrentDestination;
         const destinationItems = [
             ...this.props.api.exportApi.getAvailableExportDestinations().map((destination) => ({
                 label: destination,
@@ -70,7 +65,7 @@ class ExportViewPanelComponent extends React.Component {
                 .includes(this.props.CurrentDestination)) {
             // current destination is not available
             currentDestination = undefined;
-            currentDestinationId = constants_1.SELECT_DESTINATION_STRING;
+            currentDestinationId = undefined;
         }
         let accessLevel = AdaptableHelper_1.default.getAppropriateAccessLevel(currentReport, this.props.accessLevel);
         let deleteMessage = "Are you sure you want to delete '";

package/src/View/Layout/LayoutStatusBarSubPanelPopover.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const LayoutStatusBarSubPanelPopover: React.FunctionComponent;
+export declare const LayoutStatusbar: React.FunctionComponent;

package/src/View/Layout/LayoutStatusBarSubPanelPopover.js

@@ -1,17 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutStatusBarSubPanelPopover = void 0;
+exports.LayoutStatusbar = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const SelectList_1 = require("../../components/SelectList");
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const Select_1 = require("../../components/Select");
 const AdaptableContext_1 = require("../AdaptableContext");
-const LayoutStatusBarSubPanelPopover = () => {
+const LayoutStatusbar = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const layouts = adaptable.api.layoutApi.getLayouts();
-    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Uuid }));
-    const handleChange = (option) => {
-        adaptable.api.layoutApi.setLayout(option.label);
-    };
-    return React.createElement(SelectList_1.SelectList, { options: options, onChange: handleChange });
+    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
+    const currentLayout = (0, react_redux_1.useSelector)((state) => state.Layout.CurrentLayout);
+    return (React.createElement(rebass_1.Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        React.createElement(Select_1.Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+                adaptable.api.layoutApi.setLayout(value);
+            } })));
 };
-exports.LayoutStatusBarSubPanelPopover = LayoutStatusBarSubPanelPopover;
+exports.LayoutStatusbar = LayoutStatusbar;

package/src/View/Layout/LayoutViewPanel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 import { Layout } from '../../PredefinedConfig/LayoutState';
 import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
+import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
 export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;

package/src/View/Layout/LayoutViewPanel.js

@@ -4,18 +4,18 @@ exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const rebass_1 = require("rebass");
+const Select_1 = require("../../components/Select");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
-const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
+const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
+const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
-const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
-const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
-const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
-const Select_1 = require("../../components/Select");
+const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {