@adaptabletools/adaptable 17.0.0-canary.2 → 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",
-  "version": "17.0.0-canary.2",
+  "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",
@@ -48,7 +48,7 @@
     "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",
@@ -65,7 +65,7 @@
   "peerDependencies": {
     "@ag-grid-community/core": ">=30.2.0"
   },
-  "publishTimestamp": 1704900031724,
+  "publishTimestamp": 1704904757144,
   "type": "module",
   "module": "agGrid.js"
 }

package/src/Redux/ActionsReducers/ExportRedux.js

@@ -1,4 +1,4 @@
-import { EMPTY_STRING, EMPTY_ARRAY } from '../../Utilities/Constants/GeneralConstants';
+import { EMPTY_ARRAY } from '../../Utilities/Constants/GeneralConstants';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 /**
  * @ReduxAction Export has been applied
@@ -59,8 +59,6 @@ export const DestinationSelect = (SelectedDestination) => ({
 });
 const initialState = {
     Reports: EMPTY_ARRAY,
-    CurrentReport: EMPTY_STRING,
-    CurrentDestination: EMPTY_STRING,
 };
 export const ExportReducer = (state = initialState, action) => {
     let reports;

package/src/Redux/Store/AdaptableStore.js

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

package/src/Strategy/LayoutModule.js

@@ -3,7 +3,7 @@ import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import * as LayoutRedux from '../Redux/ActionsReducers/LayoutRedux';
 import ArrayExtensions from '../Utilities/Extensions/ArrayExtensions';
 import { LayoutRadioSelector } from '../View/Layout/LayoutRadioSelector';
-import { LayoutStatusBarSubPanelPopover } from '../View/Layout/LayoutStatusBarSubPanelPopover';
+import { LayoutStatusbar } from '../View/Layout/LayoutStatusBarSubPanelPopover';
 import { EditCurrentLayoutButton } from '../View/Layout/EditCurrentLayoutButton';
 import { LayoutCloneButton } from '../View/Layout/LayoutCloneButton';
 import { SaveLayoutButton } from '../View/Layout/SaveLayoutButton';
@@ -387,7 +387,8 @@ export class LayoutModule extends AdaptableModuleBase {
                     })
                         .filter(Boolean),
                 },
-                (layout === null || layout === void 0 ? void 0 : layout.GridFilter) && StringExtensions.IsNotNullOrEmpty(layout.GridFilter.Expression) && {
+                (layout === null || layout === void 0 ? void 0 : layout.GridFilter) &&
+                    StringExtensions.IsNotNullOrEmpty(layout.GridFilter.Expression) && {
                     name: 'Grid Filter',
                     values: [layout.GridFilter.Expression],
                 },
@@ -407,13 +408,8 @@ export class LayoutModule extends AdaptableModuleBase {
             },
             getEditWizard: () => LayoutWizard,
             getStatusBarPanelProps: () => {
-                const text = this.api.layoutApi.getCurrentLayoutName();
-                const layouts = this.api.layoutApi.getLayouts();
-                const popover = layouts.length > 1 ? LayoutStatusBarSubPanelPopover : null;
                 return {
-                    content: text,
-                    popover: popover,
-                    popoverMinWidth: 150,
+                    content: LayoutStatusbar,
                     extraActions: [EditCurrentLayoutButton, SaveLayoutButton],
                 };
             },

package/src/Strategy/ThemeModule.js

@@ -1,6 +1,6 @@
 import { AdaptableModuleBase } from './AdaptableModuleBase';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
-import { ThemeStatusPanelPopover } from '../View/Theme/ThemeStatusPanelPopover';
+import { ThemeStatusbar } from '../View/Theme/ThemeStatusbar';
 export class ThemeModule extends AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.ThemeModuleId, ModuleConstants.ThemeFriendlyName, 'theme', 'ThemePopup', 'Theme AdapTable with a colour configuration set of your choosing', api);
@@ -14,16 +14,8 @@ export class ThemeModule extends 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,
-                    popoverMinWidth: 120,
+                    content: 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

@@ -1,6 +1,7 @@
 export var AlertType;
 (function (AlertType) {
     AlertType["DataChange"] = "DataChange";
+    AlertType["Validation"] = "Validation";
     AlertType["RowChange"] = "RowChange";
     AlertType["Aggregation"] = "Aggregation";
     AlertType["Observable"] = "Observable";
@@ -12,6 +13,7 @@ export var AlertType;
  * @param alert
  */
 export const getAlertType = (alert) => {
+    var _a, _b;
     if (alert.Rule.ObservableExpression) {
         return AlertType.Observable;
     }
@@ -19,6 +21,9 @@ export 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;
@@ -27,7 +32,7 @@ export 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
@@ -39,6 +44,9 @@ export 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

@@ -1,6 +1,6 @@
 export 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

@@ -23,5 +23,10 @@ export const getDefaultAlertDefinition = (alertDefinition, type) => {
             ],
         };
     }
+    if (type === AlertType.Validation) {
+        newAlert.AlertProperties = {
+            PreventEdit: true,
+        };
+    }
     return newAlert;
 };

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

@@ -101,7 +101,7 @@ export 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
@@ -120,11 +120,7 @@ export const AlertBehaviourWizardSection = (props) => {
     return (React.createElement(Tabs, null,
         React.createElement(Tabs.Tab, null, api.internalApi.getCorrectEnglishVariant('Behaviour')),
         React.createElement(Tabs.Content, null,
-            hasPreventCellEdit && (React.createElement(CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, onChange: (PreventEdit) => {
-                    onChange({
-                        PreventEdit,
-                    });
-                } },
+            hasPreventCellEdit && (React.createElement(CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: AlertProperties.PreventEdit, disabled: true },
                 "Prevent Cell Edit",
                 React.createElement(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

@@ -12,9 +12,11 @@ export 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':
@@ -53,14 +55,15 @@ export const AlertRulesWizardSection = (props) => {
     const predicateDefs = 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, { module: moduleInfo.ModuleName, defaultPredicateId: "AnyChange", data: data, predicateDefs: predicateDefs, enablePredicateColumnId: enablePredicateColumnId, getPredicateDefsForColId: (colId) => 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

@@ -6,7 +6,7 @@ export const AlertScopeWizardSection = (props) => {
     const { data, api } = 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

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

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

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

package/src/View/Charting/useChartingElements.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import DropdownButton from '../../components/DropdownButton';
+import { Select } from '../../components/Select';
 import SimpleButton from '../../components/SimpleButton';
 import { isAgChartDefinition } from '../../PredefinedConfig/ChartingState';
 import * as ChartingRedux from '../../Redux/ActionsReducers/ChartingRedux';
@@ -11,7 +11,7 @@ import { EditChartButton } from './EditChartButton';
 import { useAgChartState } from './useAgChartState';
 import { useExternalChartState } from './useExternalChartState';
 export const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
-    var _a, _b;
+    var _a;
     const adaptable = useAdaptable();
     const chartDefinitions = useSelector(ChartingRedux.ChartingGetChartModels);
     const extenralChartDefinitions = useSelector(ChartingRedux.ChartingGetExternalChartDefinitions);
@@ -61,17 +61,13 @@ export 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 (isAgChartDefinition(selectedChart)) {
         containerOptions.unshift({
             label: chartingOptions.agGridContainerName,
-            onClick: () => {
-                setSelectedContainer(null);
-            },
+            value: null,
         });
     }
     const style = {};
@@ -81,8 +77,10 @@ export const useChartingElements = ({ elementType, accessLevel, size = 'normal',
         style.fontSize = 'small';
         iconSize = 15;
     }
-    const chartSelector = (React.createElement(DropdownButton, { 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, { 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, { 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, { 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, { 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, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
     const editButton = (React.createElement(EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));

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

@@ -21,7 +21,7 @@ export const ColumnSelector = function (props) {
         }
         return true;
     });
-    return (React.createElement(Select, { "data-name": "column-selector", disabled: props.disabled, isMulti: props.isMulti, menuPosition: props.menuPosition, value: props.value, onChange: (colId) => {
+    return (React.createElement(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

@@ -1,13 +1,8 @@
 import * as React from 'react';
-import DropdownButton from '../../components/DropdownButton';
+import { Select } from '../../components/Select';
 import SimpleButton from '../../components/SimpleButton';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { useAdaptable } from '../AdaptableContext';
-import { SELECT_DESTINATION_STRING, SELECT_REPORT_STRING } from './constants';
-const dropdownStyle = {
-    padding: 2,
-    fontSize: 'small',
-};
 const isCustomDestination = (destination) => {
     return !!destination.name;
 };
@@ -23,7 +18,6 @@ export const ExportSelector = () => {
         return {
             label: report,
             value: report,
-            onClick: () => handleReportChange(report),
         };
     });
     const currentReport = adaptable.api.exportApi.getCurrentReport();
@@ -37,25 +31,22 @@ export 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 = SELECT_DESTINATION_STRING;
-    }
     // export
     const handleExport = () => {
         if (isCustomDestination(currentDestination)) {
@@ -66,7 +57,14 @@ export const ExportSelector = () => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownButton, { 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 : SELECT_REPORT_STRING),
-        React.createElement(DropdownButton, { disabled: currentReportId === SELECT_REPORT_STRING, style: dropdownStyle, items: destinationItems, columns: ['label'], onClear: () => handleDestinationChange(null), showClearButton: !!currentDestination, variant: "outlined", marginRight: 2 }, currentDestinationId),
-        React.createElement(SimpleButton, { disabled: currentDestinationId === SELECT_DESTINATION_STRING, iconSize: 15, icon: "export", variant: "text", onClick: handleExport })));
+        React.createElement(Select, { size: "small", isClearable: true, placeholder: 'Select Report', value: currentReportId, options: reportItems, onChange: handleReportChange }),
+        React.createElement(Select, { size: "small", isClearable: true, placeholder: 'Select Destination', value: currentDestinationId, options: destinationItems, onChange: (destination) => {
+                if (destination) {
+                    handleDestinationChange(destination);
+                }
+                else {
+                    handleDestinationChange(null);
+                }
+            } }),
+        React.createElement(SimpleButton, { disabled: !currentDestinationId || !currentReportId, iconSize: 15, icon: "export", variant: "text", onClick: handleExport })));
 };

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

@@ -1,30 +1,27 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Flex } from 'rebass';
+import { Select } from '../../components/Select';
+import join from '../../components/utils/join';
 import { ExportDestination } from '../../PredefinedConfig/Common/Enums';
 import * as ExportRedux from '../../Redux/ActionsReducers/ExportRedux';
 import * as PopupRedux from '../../Redux/ActionsReducers/PopupRedux';
-import * as React from 'react';
-import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
 import { VISUAL_DATA_REPORT } from '../../Utilities/Constants/GeneralConstants';
+import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
+import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
-import { Flex } from 'rebass';
-import join from '../../components/utils/join';
-import { ButtonExport } from '../Components/Buttons/ButtonExport';
+import ObjectFactory from '../../Utilities/ObjectFactory';
+import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
+import { ButtonExport } from '../Components/Buttons/ButtonExport';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonSchedule } from '../Components/Buttons/ButtonSchedule';
-import ObjectFactory from '../../Utilities/ObjectFactory';
-import * as ModuleConstants from '../../Utilities/Constants/ModuleConstants';
-import { connect } from 'react-redux';
 import { SELECT_DESTINATION_STRING, SELECT_REPORT_STRING } from './constants';
-import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
-import { Select } from '../../components/Select';
 class ExportViewPanelComponent extends React.Component {
     render() {
         let currentReport = this.props.api.exportApi.getReportByName(this.props.CurrentReport);
-        let currentReportId = StringExtensions.IsNullOrEmpty(this.props.CurrentReport)
-            ? SELECT_REPORT_STRING
-            : this.props.CurrentReport;
+        let currentReportId = this.props.CurrentReport;
         const allReportNames = this.getAllReportNames();
         const reportItems = allReportNames.map((report) => {
             return {
@@ -36,12 +33,10 @@ class ExportViewPanelComponent extends React.Component {
         if (currentReport && !allReportNames.includes(currentReport.Name)) {
             // current report is not available
             currentReport = undefined;
-            currentReportId = SELECT_REPORT_STRING;
+            currentReportId = undefined;
         }
         let currentDestination = this.props.api.exportApi.getDestinationByName(this.props.CurrentDestination);
-        let currentDestinationId = StringExtensions.IsNullOrEmpty(this.props.CurrentDestination)
-            ? SELECT_DESTINATION_STRING
-            : this.props.CurrentDestination;
+        let currentDestinationId = this.props.CurrentDestination;
         const destinationItems = [
             ...this.props.api.exportApi.getAvailableExportDestinations().map((destination) => ({
                 label: destination,
@@ -66,7 +61,7 @@ class ExportViewPanelComponent extends React.Component {
                 .includes(this.props.CurrentDestination)) {
             // current destination is not available
             currentDestination = undefined;
-            currentDestinationId = SELECT_DESTINATION_STRING;
+            currentDestinationId = undefined;
         }
         let accessLevel = AdaptableHelper.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,12 +1,17 @@
 import * as React from 'react';
-import { SelectList } from '../../components/SelectList';
+import { useSelector } from 'react-redux';
+import { Box } from 'rebass';
+import { Select } from '../../components/Select';
 import { useAdaptable } from '../AdaptableContext';
-export const LayoutStatusBarSubPanelPopover = () => {
+export const LayoutStatusbar = () => {
     const adaptable = 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, { options: options, onChange: handleChange });
+    const options = layouts.map((layout) => ({ label: layout.Name, value: layout.Name }));
+    const currentLayout = useSelector((state) => state.Layout.CurrentLayout);
+    return (React.createElement(Box, { onClick: (event) => {
+            event.stopPropagation();
+        } },
+        React.createElement(Select, { size: "small", options: options, value: currentLayout, onChange: (value) => {
+                adaptable.api.layoutApi.setLayout(value);
+            } })));
 };

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
 import { Flex } from 'rebass';
+import { Select } from '../../components/Select';
 import join from '../../components/utils/join';
+import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
+import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import * as GeneralConstants from '../../Utilities/Constants/GeneralConstants';
-import { ButtonSave } from '../Components/Buttons/ButtonSave';
+import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
+import { ButtonClone } from '../Components/Buttons/ButtonClone';
+import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
 import { ButtonEdit } from '../Components/Buttons/ButtonEdit';
 import { ButtonNew } from '../Components/Buttons/ButtonNew';
-import { ButtonDelete } from '../Components/Buttons/ButtonDelete';
-import { ButtonClone } from '../Components/Buttons/ButtonClone';
-import * as GridRedux from '../../Redux/ActionsReducers/GridRedux';
-import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
-import { Select } from '../../components/Select';
+import { ButtonSave } from '../Components/Buttons/ButtonSave';
 export const COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {

package/src/View/Theme/ThemePopup.js

@@ -9,6 +9,7 @@ import { Box } from 'rebass';
 import ObjectFactory from '../../Utilities/ObjectFactory';
 import SimpleButton from '../../components/SimpleButton';
 import { Icon } from '../../components/icons';
+import { ThemeSelector } from './ThemeSelector';
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -27,23 +28,6 @@ class ThemePopupComponent extends React.Component {
         };
     }
     render() {
-        const availableThemes = this.props.api.themeApi.getThemes();
-        const theme = this.props.api.themeApi.getCurrentThemeObject();
-        const currentThemeDescription = theme.Description || theme.Name;
-        const optionThemes = availableThemes.map((theme) => {
-            if (typeof theme === 'string') {
-                // protection against old state, which could be string
-                theme = {
-                    Name: theme,
-                    Description: theme,
-                };
-            }
-            return {
-                value: theme.Name,
-                label: theme.Description,
-                onClick: () => this.onChangeTheme(theme.Name),
-            };
-        });
         const isCustomTheme = this.props.api.themeApi
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
@@ -67,7 +51,8 @@ class ThemePopupComponent extends React.Component {
                 newButton) },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Current Theme:" },
-                    React.createElement(DropdownButton, { "data-name": "select-theme-dropdown", columns: ['label'], style: { width: '50%', minWidth: 200 }, placeholder: "Select theme", value: this.props.CurrentTheme, items: optionThemes, accessLevel: this.props.accessLevel }, currentThemeDescription))),
+                    React.createElement(Box, { maxWidth: 150 },
+                        React.createElement(ThemeSelector, null)))),
             isCustomTheme && (React.createElement(Box, { mt: 3 },
                 React.createElement(ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }